/**
 * PatanRex — Mi Cuenta
 *
 * Tokens de `Claude Design/learndash/DESIGN.md`. Reglas heredadas de ahí:
 *   · Plano en reposo. La jerarquía la da el escalón de fondo, no la sombra.
 *   · El amarillo aparece en dos lugares como máximo, y siempre es acción.
 *   · Ningún estado se comunica solo con color: forma + palabra.
 *   · Nada de barras de color al costado de filas o tarjetas.
 *   · Ni #fff ni #000: todos los neutros están teñidos hacia el 231.5° de marca.
 *
 * Tipografía: Poppins para texto y títulos (es la del sitio, y Elementor ya la
 * sirve local en todas las páginas), Inter solo en números y etiquetas, donde
 * hacen falta cifras tabulares. Las dos se declaran explícitamente: heredarlas
 * no funciona, ver el comentario en `.prx-acct`.
 */

.prx-acct {
	/* 7/9/2026 — el oscuro del sitio es #001D3D, el del footer (y el color
	   global "Fondo Azul" de Elementor). Antes era #071426. El escalón más
	   claro es #003566, que también es global ("Golden Twitlight 3"), así que
	   la escalera no inventa tintes: sale de la paleta que ya tiene el sitio.
	   La divisoria pasa a blanco translúcido porque siempre cae DENTRO de un
	   panel oscuro (`.prx-pend`): así no hay que re-derivarla si el fondo se
	   vuelve a mover. */
	--px-ink: #001D3D;
	--px-ink-2: #003566;
	--px-ink-3: #003566;
	--px-ink-line: rgba(255, 255, 255, 0.14);
	--px-paper: #FCFDFE;
	--px-sky-100: #F4F7F9;
	--px-sky-200: #E5ECF0;
	--px-line: #DBE4EA;
	--px-body: #3C5666;
	--px-mute: #5D7280;
	--px-on-dark: #C3D5DE;
	--px-mute-dark: #88A0AD;
	--px-yellow: #FCD752;
	--px-yellow-press: #E8BE33;
	--px-data: #087DBD;
	--px-data-dark: #14ACFF;

	display: flex;
	flex-direction: column;
	gap: 16px;
	/* Se declara la familia en vez de heredarla. Los <h3> sueltos dentro de un
	   widget de shortcode NO agarran la tipografía de Elementor: esa solo la
	   aplican los widgets de Elementor a sus propios elementos, así que un
	   encabezado nuestro caía en el stack de sistema de hello-elementor y salía
	   en Segoe UI. Poppins ya viene servida por Elementor en todas las páginas
	   (`uploads/elementor/google-fonts/css/poppins.css`), no agrega descargas. */
	font-family: Poppins, system-ui, -apple-system, "Segoe UI", sans-serif;
	color: var(--px-body);
	font-size: 15px;
	line-height: 1.55;
}

.prx-acct *,
.prx-acct *::before,
.prx-acct *::after {
	box-sizing: border-box;
}

.prx-acct h3 {
	margin: 0;
	font-family: inherit;
	color: inherit;
	letter-spacing: -0.012em;
}

.prx-acct p {
	margin: 0;
}

/* ── Átomos ─────────────────────────────────────────────────────────────── */

.prx-acct .prx-label {
	font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--px-mute);
}

.prx-acct .prx-label--dark {
	color: var(--px-mute-dark);
}

.prx-acct .prx-num {
	font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
	font-variant-numeric: tabular-nums;
}

/* Botón primario. Cápsula amarilla, tinta oscura.
   El fondo se declara en los cuatro estados a propósito: el reset de
   hello-elementor pinta `button:hover` de fucsia (#c36) y con declarar solo la
   sombra se cuela. Acá son <a>, pero la regla queda por si alguna vez es <button>. */
.prx-acct .prx-btn,
.prx-acct .prx-btn:link,
.prx-acct .prx-btn:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	align-self: flex-start;
	padding: 11px 22px;
	border: 0;
	border-radius: 999px;
	background: var(--px-yellow);
	color: var(--px-ink);
	font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 160ms ease-out;
}

.prx-acct .prx-btn:hover,
.prx-acct .prx-btn:focus,
.prx-acct .prx-btn:active {
	background: var(--px-yellow-press);
	color: var(--px-ink);
	text-decoration: none;
}

.prx-acct .prx-btn:focus-visible {
	outline: 2px solid var(--px-ink);
	outline-offset: 2px;
}

.prx-acct .prx-btn--start {
	align-self: flex-start;
}

/* Link discreto */
.prx-acct .prx-link,
.prx-acct .prx-link:link,
.prx-acct .prx-link:visited {
	font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 13px;
	font-weight: 600;
	color: var(--px-data);
	text-decoration: none;
	white-space: nowrap;
}

.prx-acct .prx-link:hover,
.prx-acct .prx-link:focus {
	text-decoration: underline;
}

.prx-acct .prx-link--dark,
.prx-acct .prx-link--dark:link,
.prx-acct .prx-link--dark:visited {
	color: var(--px-data-dark);
}

.prx-acct a:focus-visible {
	outline: 2px solid var(--px-data);
	outline-offset: 2px;
	border-radius: 4px;
}

/* ── Fila de pendiente ──────────────────────────────────────────────────── */

.prx-acct .prx-pend {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 20px 24px;
	border-radius: 10px;
	background: var(--px-ink);
	color: var(--px-on-dark);
}

/* Una fila por tarea. La segunda en adelante se separa con una línea, no con
   otro panel: dos bloques oscuros seguidos pesan el doble y dicen lo mismo. */
.prx-acct .prx-pend__row {
	display: grid;
	grid-template-columns: 9px minmax(0, 1fr) auto;
	gap: 12px 20px;
	align-items: center;
}

.prx-acct .prx-pend__row + .prx-pend__row {
	padding-top: 14px;
	border-top: 1px solid var(--px-ink-line);
}

.prx-acct .prx-pend__txt {
	min-width: 0;
}

/* Anillo hueco = "todavía no". La forma dice lo mismo que el color. */
.prx-acct .prx-pend__ring {
	align-self: start;
	margin-top: 6px;
	width: 9px;
	height: 9px;
	border: 1.5px solid var(--px-yellow);
	border-radius: 50%;
}

.prx-acct .prx-pend h3 {
	margin: 0 0 3px;
	color: #F6F9FB;
	font-size: 17px;
	font-weight: 600;
}

.prx-acct .prx-pend p {
	color: var(--px-mute-dark);
	font-size: 13.5px;
}

.prx-acct .prx-pend__acts {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

/* ── Rejilla ────────────────────────────────────────────────────────────── */

.prx-acct .prx-acct__grid {
	display: grid;
	gap: 16px;
	align-items: start;
}

.prx-acct .prx-acct__grid--dos {
	grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
}

.prx-acct .prx-acct__grid--uno {
	grid-template-columns: minmax(0, 1fr);
}

.prx-acct .prx-acct__col {
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
}

/* ── Panel oscuro: progreso del curso ───────────────────────────────────── */

.prx-acct .prx-state {
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 24px;
	border-radius: 10px;
	background: var(--px-ink);
	color: var(--px-on-dark);
}

/* El chip va ARRIBA del título, no al costado.
   En la columna angosta del escritorio la tarjeta mide 340px (292px de
   contenido). Con el chip en la misma fila le quedaban 168px al título y
   "WorkShop: De Casual a Élite" se partía en "WorkShop: De / Casual a Élite".
   A todo el ancho el título ocupa 265px y entra en un renglón. Medido en
   producción el 29/8/2026.
   `column-reverse` en vez de reordenar el HTML: en el markup el chip va
   después del título, que es el orden correcto para un lector de pantalla. */
.prx-acct .prx-state__top {
	display: flex;
	flex-direction: column-reverse;
	align-items: flex-start;
	gap: 10px;
}

.prx-acct .prx-state h3 {
	color: #F6F9FB;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.25;
	text-wrap: balance;
}

.prx-acct .prx-state__sub {
	margin-top: 3px;
	color: var(--px-mute-dark);
	font-size: 13px;
}

.prx-acct .prx-chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	flex: none;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--px-yellow);
	color: var(--px-ink);
	font-family: Inter, system-ui, sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.prx-acct .prx-chip__dot {
	display: block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
}

.prx-acct .prx-meter__row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	margin-bottom: 8px;
}

.prx-acct .prx-meter__row .prx-num {
	color: #F6F9FB;
	font-size: 13px;
	font-weight: 700;
}

.prx-acct .prx-meter {
	height: 6px;
	border-radius: 999px;
	background: var(--px-ink-3);
	overflow: hidden;
}

.prx-acct .prx-meter > span {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: var(--px-yellow);
}

/* ── Panel claro ────────────────────────────────────────────────────────── */

.prx-acct .prx-panel {
	padding: 22px 24px;
	border: 1px solid var(--px-line);
	border-radius: 10px;
	background: var(--px-paper);
	min-width: 0;
}

.prx-acct .prx-panel--tight {
	padding: 18px 20px;
}

.prx-acct .prx-panel > header {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 14px;
}

.prx-acct .prx-panel h3 {
	color: var(--px-ink);
	font-size: 16px;
	font-weight: 700;
}

.prx-acct .prx-panel__hint {
	margin: 4px 0 14px;
	color: var(--px-mute);
	font-size: 12.5px;
}

/* Estado de la membresía: punto lleno = activa, anillo hueco = vencida. */
.prx-acct .prx-state__mark {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	flex: none;
	font-family: Inter, system-ui, sans-serif;
	font-size: 12px;
	font-weight: 700;
	color: var(--px-body);
}

.prx-acct .prx-state__dot {
	display: block;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--px-data);
}

.prx-acct .prx-state__mark.is-off .prx-state__dot {
	background: transparent;
	border: 1.5px solid var(--px-mute);
}

.prx-acct .prx-rows {
	margin: 14px 0 0;
	display: flex;
	flex-direction: column;
	gap: 0;
	border-top: 1px solid var(--px-line);
}

/* La segunda fecha de la membresía: el día del corte.
   Va deliberadamente apagada y chica — el dato que le importa al alumno es el
   de arriba ("Activa hasta"), este está para que el número coincida con la
   columna "Caducar" de ARMember cuando Patán compare. Ver el comentario en
   `templates/myaccount/dashboard.php`. */
.prx-acct .prx-state__nota {
	margin: 8px 0 0;
	color: var(--px-mute);
	font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 12px;
	line-height: 1.4;
}

.prx-acct .prx-rows > div {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 14px;
	padding: 10px 0;
	border-bottom: 1px solid var(--px-line);
}

.prx-acct .prx-rows dt {
	margin: 0;
	color: var(--px-mute);
	font-size: 13px;
	font-weight: 400;
}

.prx-acct .prx-rows dd {
	margin: 0;
	color: var(--px-ink);
	font-size: 13px;
	font-weight: 700;
}

/* El dato vivo de la membresía: los días que quedan. Azul de dato, un punto
   más grande. Es lo único que se mueve en esa tarjeta, así que es lo que tiene
   que leerse primero — antes tenía exactamente el mismo peso que la fecha y la
   tarjeta quedaba plana. */
.prx-acct .prx-rows__dato dd {
	color: var(--px-data);
	font-size: 15px;
}

/* Membresía al día: el punto ya era azul, la palabra seguía en gris de texto.
   El estado sigue comunicándose con forma + palabra, el color solo refuerza. */
.prx-acct .prx-state__mark.is-on {
	color: var(--px-data);
}

.prx-acct .prx-panel--tight > .prx-link {
	display: inline-block;
	margin-top: 14px;
}

/* ── Registro ───────────────────────────────────────────────────────────── */

.prx-acct .prx-log__month {
	margin: 0;
	padding: 16px 0 8px;
	border-bottom: 1px solid var(--px-line);
	font-family: Inter, system-ui, sans-serif;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--px-mute);
}

.prx-acct .prx-ev {
	display: grid;
	grid-template-columns: 58px 24px minmax(0, 1fr) auto;
	gap: 14px;
	align-items: baseline;
	padding: 12px 0;
	border-bottom: 1px solid var(--px-line);
}

.prx-acct .prx-ev__date {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.03em;
	color: var(--px-mute);
}

.prx-acct .prx-ev__icon {
	align-self: center;
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	border-radius: 6px;
	background: var(--px-sky-200);
}

.prx-acct .prx-ev__icon svg {
	width: 13px;
	height: 13px;
	fill: none;
	stroke: var(--px-data);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.prx-acct .prx-ev__icon--pay {
	background: var(--px-ink);
}

.prx-acct .prx-ev__icon--pay svg {
	stroke: var(--px-yellow);
}

.prx-acct .prx-ev__body {
	min-width: 0;
}

.prx-acct .prx-ev__body b {
	display: block;
	color: var(--px-ink);
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.35;
}

.prx-acct .prx-ev__body small {
	display: block;
	margin-top: 2px;
	color: var(--px-mute);
	font-size: 11.5px;
}

.prx-acct .prx-ev__end {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 3px;
	text-align: right;
	white-space: nowrap;
}

.prx-acct .prx-ev__end .prx-num {
	color: var(--px-ink);
	font-size: 13px;
	font-weight: 700;
}

/* Estado del pedido: punto lleno = cobrado, anillo hueco = falta. */
.prx-acct .prx-st {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 5px;
	font-family: Inter, system-ui, sans-serif;
	font-size: 11.5px;
	font-weight: 600;
	color: var(--px-body);
	white-space: nowrap;
}

.prx-acct .prx-st__mark {
	display: block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--px-data);
}

.prx-acct .prx-st.is-open .prx-st__mark {
	background: transparent;
	border: 1.5px solid var(--px-mute);
}

/* ── Módulo de venta ─────────────────────────────────────────────────────
   Un escalón de fondo por debajo del papel, para que se lea como "otra cosa"
   sin gritar. Sin amarillo: el amarillo del sistema es de la tarea del alumno.
   Sin barra de color al costado, sin sombra, sin contador. */

.prx-acct .prx-offer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px 28px;
	flex-wrap: wrap;
	padding: 20px 24px;
	border: 1px solid var(--px-line);
	border-radius: 10px;
	background: var(--px-sky-100);
}

.prx-acct .prx-offer__txt {
	flex: 1 1 420px;
	min-width: 0;
}

.prx-acct .prx-offer h3 {
	margin: 6px 0 4px;
	color: var(--px-ink);
	font-size: 17px;
	font-weight: 700;
}

.prx-acct .prx-offer p {
	max-width: 68ch;
	color: var(--px-body);
	font-size: 13.5px;
}

/* Los importes que mete WooCommerce dentro del texto. */
.prx-acct .prx-offer .woocommerce-Price-amount {
	font-family: Inter, system-ui, sans-serif;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--px-ink);
	white-space: nowrap;
}

/* Botón de contorno: presente, pero nunca compite con el amarillo. */
.prx-acct .prx-btn--ghost,
.prx-acct .prx-btn--ghost:link,
.prx-acct .prx-btn--ghost:visited {
	background: transparent;
	border: 1.5px solid var(--px-ink);
	color: var(--px-ink);
	padding: 10px 20px;
}

.prx-acct .prx-btn--ghost:hover,
.prx-acct .prx-btn--ghost:focus,
.prx-acct .prx-btn--ghost:active {
	background: var(--px-ink);
	color: #F6F9FB;
}

/* ── Accesos ────────────────────────────────────────────────────────────── */

/* Flex y no grid: con grid, el último renglón deja un hueco al lado del
   último acceso. Con flex, los de la última fila se estiran y no queda aire
   reservado para algo que no existe.
   Las líneas divisorias son el gap de 1px sobre el fondo del contenedor: así
   aparecen entre columnas y entre filas, sin bordes sueltos al final. */
.prx-acct .prx-access {
	display: flex;
	flex-wrap: wrap;
	gap: 1px;
	border: 1px solid var(--px-line);
	border-radius: 10px;
	background: var(--px-line);
	overflow: hidden;
}

.prx-acct .prx-access__it,
.prx-acct .prx-access__it:link,
.prx-acct .prx-access__it:visited {
	display: grid;
	grid-template-columns: 30px minmax(0, 1fr);
	gap: 11px;
	align-items: center;
	flex: 1 1 210px;
	padding: 16px 18px;
	background: var(--px-paper);
	color: inherit;
	text-decoration: none;
	transition: background-color 160ms ease-out;
}

.prx-acct .prx-access__it:hover,
.prx-acct .prx-access__it:focus {
	background: var(--px-sky-100);
	text-decoration: none;
}

.prx-acct .prx-access__ic {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 7px;
	background: var(--px-sky-200);
}

.prx-acct .prx-access__ic svg {
	width: 16px;
	height: 16px;
	fill: none;
	stroke: var(--px-data);
	stroke-width: 1.9;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.prx-acct .prx-access__it b {
	display: block;
	color: var(--px-ink);
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.3;
}

.prx-acct .prx-access__it small {
	display: block;
	margin-top: 2px;
	color: var(--px-mute);
	font-size: 11.5px;
	line-height: 1.4;
}

/* ── Bienvenida (cuenta sin nada) ───────────────────────────────────────── */

.prx-acct .prx-welcome {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	padding: 26px 28px;
	border-radius: 10px;
	background: var(--px-ink);
	color: var(--px-on-dark);
}

.prx-acct .prx-welcome h3 {
	margin: 6px 0 6px;
	color: #F6F9FB;
	font-size: 21px;
	font-weight: 700;
}

.prx-acct .prx-welcome p {
	max-width: 62ch;
	color: var(--px-mute-dark);
	font-size: 14px;
}

/* ══ AVISOS ═══════════════════════════════════════════════════════════════
   Viven fuera de .prx-acct: WooCommerce los imprime antes del escritorio, y
   también en el checkout, en el login y en editar cuenta. Por eso los tokens
   se repiten acá y el selector arranca en `body`: Elementor Pro trae su propia
   hoja para estos avisos y hay que ganarle sin recurrir a !important.
   ═══════════════════════════════════════════════════════════════════════ */

body .prx-note {
	--px-ink: #001D3D;
	--px-sky-100: #F0F4F7;
	--px-line: #DBE4EA;
	--px-body: #3C5666;
	--px-data: #00639E;
	--px-alert: #B02326;
	--px-yellow: #FCD752;

	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 12px;
	padding: 15px 18px;
	border: 1px solid var(--px-line);
	border-radius: 10px;
	background: var(--px-sky-100);
	color: var(--px-body);
	font-size: 14px;
	line-height: 1.5;
	list-style: none;
}

body ul.prx-note {
	display: block;
	padding: 15px 18px;
}

body ul.prx-note > li {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

body ul.prx-note > li + li {
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid var(--px-line);
}

/* 🛑 WooCommerce dibuja su propio ícono con un `::before` ABSOLUTO
   (`position:absolute; top:1em; left:1.5em`) y lo sostiene con un
   `padding-left: 3.5em` en el contenedor. Al cambiar el padding por el nuestro,
   el ícono se queda donde estaba y **se monta arriba de las primeras letras**.
   Se apaga el pseudo-elemento; la marca la ponemos nosotros con un `<span>`.
   El `::after` es un clearfix que tampoco hace falta: esto es flex. */
body .prx-note::before,
body .prx-note::after,
body ul.prx-note > li::before,
body ul.prx-note > li::after {
	content: none;
	display: none;
}

/* La marca es una forma, no un color: círculo lleno = hecho,
   anillo hueco = te falta algo, cuadrado girado = error. */
body .prx-note .prx-note__mark {
	flex: none;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--px-data);
}

body .prx-note--info .prx-note__mark {
	background: transparent;
	border: 1.5px solid var(--px-ink);
}

body .prx-note--error .prx-note__mark {
	border-radius: 2px;
	background: var(--px-alert);
	transform: rotate(45deg);
}

body .prx-note .prx-note__body {
	min-width: 0;
	flex: 1 1 auto;
}

body .prx-note--error {
	border-color: #E7C4C4;
	background: #FBF2F2;
}

body .prx-note a:not(.button) {
	color: var(--px-data);
	font-weight: 600;
	text-decoration: underline;
}

/* Los botones que WooCommerce mete adentro del propio mensaje
   (por ejemplo "Ver carrito" al agregar, o "Reenviar" en el de contraseña).
   Van PRIMERO en el HTML del mensaje, antes del texto.

   🛑 Con `float: right` el botón se sale del flujo: es más alto que una línea
   de texto, así que sobresale por abajo de la caja y queda desalineado con el
   texto. La solución es una fila flex, pero **solo cuando el mensaje trae un
   botón**: si se flexa siempre, un aviso con enlaces sueltos en medio de la
   frase se parte en pedazos separados por el gap. De ahí el `:has()`, y el
   `float` queda de respaldo para navegadores que no lo soporten. */
body .prx-note .button {
	float: right;
	margin-left: 14px;
	padding: 8px 16px;
	border: 0;
	border-radius: 999px;
	background: var(--px-yellow);
	color: var(--px-ink);
	font-family: Inter, system-ui, sans-serif;
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
}

body .prx-note .button:hover,
body .prx-note .button:focus,
body .prx-note .button:active {
	background: #E8BE33;
	color: var(--px-ink);
	text-decoration: none;
}

body .prx-note .prx-note__body:has(.button) {
	display: flex;
	align-items: center;
	gap: 10px 16px;
	/* `nowrap` a propósito: con `wrap`, un mensaje largo empuja el botón a un
	   renglón propio aunque sobre lugar, porque flex prefiere envolver antes que
	   encoger. Sin envoltura, el texto se acomoda solo y el botón queda a la
	   derecha, centrado con el bloque. */
	flex-wrap: nowrap;
}

body .prx-note .prx-note__body:has(.button) > .button {
	float: none;
	order: 1;
	margin-left: auto;
}

/* En pantallas chicas no entran los dos al lado: ahí sí baja. */
@media (max-width: 520px) {
	body .prx-note .prx-note__body:has(.button) {
		align-items: flex-start;
		flex-direction: column;
		gap: 12px;
	}

	body .prx-note .prx-note__body:has(.button) > .button {
		margin-left: 0;
	}
}

/* 🛑 Elementor Pro le gana al bloque de arriba y hay que recuperar el color.
   Su hoja `e-woocommerce-notices` trae, para el kit de avisos de WooCommerce:

     .e-wc-info-notice .woocommerce-info          → (0,2,0)
     .e-wc-info-notice .woocommerce-info .button  → (0,3,0)

   y nuestro `body .prx-note` es (0,1,1) y `body .prx-note .button` (0,2,1):
   pierden los dos. El resultado en producción era un aviso a mitad de camino —
   tomaba nuestro `display:flex` y nuestro `padding`, pero el fondo, el borde y
   el botón seguían siendo los de Elementor: `border-radius: 0`, fondo #F6F9FB,
   borde superior azul de 3px #3F84B9 y el botón en outline azul en vez de la
   píldora amarilla. Medido el 29/8/2026 en /mi-cuenta/orders/.

   Se repite la clase (`.prx-note.prx-note`) en vez de usar `!important`: sube a
   (0,2,1) y (0,3,1), gana por un punto y sigue siendo pisable desde afuera.
   Solo se redeclaran las propiedades que Elementor toca; el resto lo siguen
   poniendo las reglas de arriba. */
body .prx-note.prx-note {
	border: 1px solid var(--px-line);
	border-radius: 10px;
	background: var(--px-sky-100);
}

body .prx-note.prx-note--error {
	border-color: #E7C4C4;
	background: #FBF2F2;
}

body .prx-note.prx-note .button {
	border: 0;
	border-radius: 999px;
	background: var(--px-yellow);
	color: var(--px-ink);
}

body .prx-note.prx-note .button:hover,
body .prx-note.prx-note .button:focus,
body .prx-note.prx-note .button:active {
	background: #E8BE33;
	color: var(--px-ink);
}

/* ── Teléfono ───────────────────────────────────────────────────────────── */

@media (max-width: 782px) {
	.prx-acct .prx-acct__grid--dos {
		grid-template-columns: minmax(0, 1fr);
	}

	.prx-acct .prx-pend,
	.prx-acct .prx-welcome {
		align-items: flex-start;
		flex-direction: column;
		gap: 16px;
	}

	.prx-acct .prx-pend__acts {
		width: 100%;
	}

	.prx-acct .prx-btn {
		width: 100%;
	}

	.prx-acct .prx-ev {
		grid-template-columns: 24px minmax(0, 1fr);
		row-gap: 4px;
	}

	.prx-acct .prx-ev__date {
		grid-column: 2;
		grid-row: 1;
	}

	.prx-acct .prx-ev__icon {
		grid-column: 1;
		grid-row: 1 / span 2;
		align-self: start;
	}

	.prx-acct .prx-ev__body {
		grid-column: 2;
	}

	.prx-acct .prx-ev__end {
		grid-column: 2;
		align-items: flex-start;
		text-align: left;
	}

	.prx-acct .prx-access__it {
		flex: 1 1 100%;
	}
}

/* ── Ancho del contenedor, no de la pantalla ────────────────────────────────
   El bloque vive dentro de una columna de Elementor: en producción son
   ~1120px, pero adentro de un tab o de una columna angosta puede ser la mitad
   con la pantalla igual de ancha. Las media queries de arriba no lo ven; estas
   sí. Se dejan las dos: la de viewport es el respaldo para navegadores sin
   soporte de contenedor. */
.prx-acct {
	container-type: inline-size;
	container-name: prxacct;
}

@container prxacct (max-width: 760px) {
	.prx-acct .prx-acct__grid--dos {
		grid-template-columns: minmax(0, 1fr);
	}
}

@container prxacct (max-width: 560px) {
	.prx-acct .prx-welcome {
		align-items: flex-start;
	}

	/* Las acciones bajan a su propio renglón, alineadas con el texto y no con
	   el anillo: si quedaran en la misma fila, el título se parte en cuatro. */
	.prx-acct .prx-pend__row {
		grid-template-columns: 9px minmax(0, 1fr);
	}

	.prx-acct .prx-pend__acts {
		grid-column: 2;
	}

	.prx-acct .prx-ev {
		grid-template-columns: 24px minmax(0, 1fr);
		row-gap: 4px;
	}

	.prx-acct .prx-ev__date {
		grid-column: 2;
		grid-row: 1;
	}

	.prx-acct .prx-ev__icon {
		grid-column: 1;
		grid-row: 1 / span 2;
		align-self: start;
	}

	.prx-acct .prx-ev__body {
		grid-column: 2;
	}

	.prx-acct .prx-ev__end {
		grid-column: 2;
		align-items: flex-start;
		text-align: left;
	}
}

@media (prefers-reduced-motion: reduce) {
	.prx-acct * {
		transition: none !important;
	}
}

/* ══ ACCEDER Y REGISTRARSE ════════════════════════════════════════════════
   Es la cara de /mi-cuenta/ para cualquiera que no tenga sesión abierta, y
   hasta el 28/8/2026 lo estilaba el widget de The Plus. Al sacar ese widget
   (la licencia no se renueva) el formulario quedó en crudo: botones grises,
   "¿Olvidaste la contraseña?" en rojo y dos columnas flotadas.

   Va fuera de `.prx-acct` porque WooCommerce imprime esto antes del
   escritorio. El alcance es `.woocommerce-account`, y la hoja solo se encola
   en páginas de cuenta, así que no toca el login del checkout.
   ═══════════════════════════════════════════════════════════════════════ */

body.woocommerce-account {
	--px-ink: #001D3D;
	--px-paper: #FBFDFE;
	--px-sky-100: #F0F4F7;
	--px-sky-200: #E5ECF0;
	--px-line: #DBE4EA;
	--px-body: #3C5666;
	--px-mute: #5D7280;
	--px-yellow: #FCD752;
	--px-yellow-press: #E8BE33;
	--px-data: #00639E;
}

/* Dos columnas de verdad, no floats. */
body.woocommerce-account #customer_login.u-columns {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 20px;
	align-items: start;
}

body.woocommerce-account #customer_login .u-column1,
body.woocommerce-account #customer_login .u-column2 {
	float: none;
	width: auto;
	margin: 0;
	min-width: 0;
}

body.woocommerce-account #customer_login > div > h2 {
	margin: 0 0 12px;
	font-family: Poppins, system-ui, -apple-system, "Segoe UI", sans-serif;
	color: var(--px-ink);
	font-size: 21px;
	font-weight: 800;
	letter-spacing: -0.015em;
	line-height: 1.2;
}

/* El formulario es el panel. */
body.woocommerce-account .woocommerce-form-login,
body.woocommerce-account .woocommerce-form-register {
	margin: 0;
	font-family: Poppins, system-ui, -apple-system, "Segoe UI", sans-serif;
	padding: 22px 24px;
	border: 1px solid var(--px-line);
	border-radius: 10px;
	background: var(--px-paper);
	color: var(--px-body);
}

body.woocommerce-account .woocommerce-form-login p,
body.woocommerce-account .woocommerce-form-register p {
	margin: 0 0 14px;
	font-size: 14px;
	line-height: 1.5;
}

body.woocommerce-account .woocommerce-form-login p:last-child,
body.woocommerce-account .woocommerce-form-register p:last-child {
	margin-bottom: 0;
}

body.woocommerce-account .woocommerce-form label {
	display: block;
	margin-bottom: 6px;
	color: var(--px-mute);
	font-size: 12.5px;
	font-weight: 600;
}

/* El asterisco de obligatorio NO se toca: WooCommerce lo esconde a propósito
   (`.woocommerce form .form-row .required{visibility:hidden}`) y en su lugar
   pone un "Obligatorio" para lectores de pantalla. Intentar mostrarlo es pelear
   contra un selector más específico y romper esa decisión. En estos dos
   formularios todos los campos son obligatorios, así que no falta nada. */

body.woocommerce-account .woocommerce-form input.input-text,
body.woocommerce-account .woocommerce-form input[type="text"],
body.woocommerce-account .woocommerce-form input[type="email"],
body.woocommerce-account .woocommerce-form input[type="password"] {
	width: 100%;
	padding: 11px 14px;
	border: 1px solid var(--px-line);
	border-radius: 6px;
	background: var(--px-sky-100);
	color: var(--px-ink);
	font-family: inherit;
	font-size: 15px;
	line-height: 1.4;
	transition: border-color 160ms ease-out, background-color 160ms ease-out;
}

body.woocommerce-account .woocommerce-form input.input-text:focus,
body.woocommerce-account .woocommerce-form input[type="text"]:focus,
body.woocommerce-account .woocommerce-form input[type="email"]:focus,
body.woocommerce-account .woocommerce-form input[type="password"]:focus {
	border-color: var(--px-ink);
	background: var(--px-paper);
	outline: 2px solid var(--px-data);
	outline-offset: 1px;
}

/* Botón primario. Los cuatro estados declarados: el reset de hello-elementor
   pinta `button:hover` de fucsia (#c36) y acá SÍ son <button>. */
body.woocommerce-account .woocommerce-form button.button,
body.woocommerce-account .woocommerce-form-login__submit,
body.woocommerce-account .woocommerce-form-register button[name="register"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 11px 24px;
	border: 0;
	border-radius: 999px;
	background: var(--px-yellow);
	color: var(--px-ink);
	font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1.2;
	text-transform: none;
	cursor: pointer;
	transition: background-color 160ms ease-out;
}

body.woocommerce-account .woocommerce-form button.button:hover,
body.woocommerce-account .woocommerce-form button.button:focus,
body.woocommerce-account .woocommerce-form button.button:active,
body.woocommerce-account .woocommerce-form-login__submit:hover,
body.woocommerce-account .woocommerce-form-login__submit:focus,
body.woocommerce-account .woocommerce-form-login__submit:active,
body.woocommerce-account .woocommerce-form-register button[name="register"]:hover,
body.woocommerce-account .woocommerce-form-register button[name="register"]:focus,
body.woocommerce-account .woocommerce-form-register button[name="register"]:active {
	background: var(--px-yellow-press);
	color: var(--px-ink);
}

body.woocommerce-account .woocommerce-form button.button:focus-visible {
	outline: 2px solid var(--px-ink);
	outline-offset: 2px;
}

/* "Recuérdame" al lado del botón, no encima. */
body.woocommerce-account .woocommerce-form-login__rememberme {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 0 0 0 16px;
	color: var(--px-body);
	font-size: 13px;
	font-weight: 400;
	vertical-align: middle;
}

body.woocommerce-account .woocommerce-form-login__rememberme input {
	margin: 0;
}

/* El link de contraseña perdida lo pintaba de rojo el theme. */
body.woocommerce-account .woocommerce-LostPassword a,
body.woocommerce-account .woocommerce-LostPassword a:link,
body.woocommerce-account .woocommerce-LostPassword a:visited {
	color: var(--px-data);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
}

body.woocommerce-account .woocommerce-LostPassword a:hover,
body.woocommerce-account .woocommerce-LostPassword a:focus {
	text-decoration: underline;
}

body.woocommerce-account .woocommerce-privacy-policy-text p {
	color: var(--px-mute);
	font-size: 12.5px;
}

/* ══ MENÚ LATERAL DE LA CUENTA ════════════════════════════════════════════
   `myaccount/navigation.php` de WooCommerce. Es otra cosa que estilaba el
   widget de The Plus y que al sacarlo quedó como una lista con viñetas y links
   rojos. No se esconde: los 7 tiles de arriba no llevan a Descargas, Dirección
   ni Comunicación, así que es la única forma de llegar a esos endpoints.

   Va fuera de `.prx-acct` porque WooCommerce lo imprime antes del escritorio.
   ═══════════════════════════════════════════════════════════════════════ */

/* WooCommerce lo flota al 30%, que a 1120px son 336px para siete palabras.
   Se achica y se le devuelve el ancho al contenido. */
body.woocommerce-account .woocommerce-MyAccount-navigation {
	float: left;
	width: 216px;
	margin: 0 0 24px;
	font-family: Poppins, system-ui, -apple-system, "Segoe UI", sans-serif;
}

body.woocommerce-account .woocommerce-MyAccount-content {
	float: right;
	width: calc(100% - 248px);
	margin: 0;
}

body.woocommerce-account .woocommerce-MyAccount-navigation ul {
	margin: 0;
	padding: 8px;
	list-style: none;
	border: 1px solid var(--px-line);
	border-radius: 10px;
	background: var(--px-sky-100);
}

body.woocommerce-account .woocommerce-MyAccount-navigation li {
	margin: 0;
	padding: 0;
	list-style: none;
}

body.woocommerce-account .woocommerce-MyAccount-navigation li a,
body.woocommerce-account .woocommerce-MyAccount-navigation li a:link,
body.woocommerce-account .woocommerce-MyAccount-navigation li a:visited {
	display: block;
	padding: 9px 12px;
	border-radius: 6px;
	color: var(--px-body);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3;
	text-decoration: none;
	transition: background-color 160ms ease-out, color 160ms ease-out;
}

body.woocommerce-account .woocommerce-MyAccount-navigation li a:hover,
body.woocommerce-account .woocommerce-MyAccount-navigation li a:focus {
	background: var(--px-sky-200);
	color: var(--px-ink);
	text-decoration: none;
}

/* La página en la que estás sube un escalón de fondo y engorda: se lee sin
   color, que es la regla del sistema. */
body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active > a,
body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active > a:link,
body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active > a:visited {
	background: var(--px-paper);
	color: var(--px-ink);
	font-weight: 700;
	box-shadow: inset 0 0 0 1px var(--px-line);
}

/* Salir es una salida, no una sección: queda apagado y separado. */
body.woocommerce-account .woocommerce-MyAccount-navigation li--customer-logout,
body.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout {
	margin-top: 6px;
	padding-top: 6px;
	border-top: 1px solid var(--px-line);
}

body.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout a,
body.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout a:link,
body.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout a:visited {
	color: var(--px-mute);
}

body.woocommerce-account .woocommerce-MyAccount-navigation li a:focus-visible {
	outline: 2px solid var(--px-data);
	outline-offset: -2px;
}

/* En teléfono no hay dos columnas: el menú va arriba, a lo ancho. */
@media (max-width: 782px) {
	body.woocommerce-account .woocommerce-MyAccount-navigation,
	body.woocommerce-account .woocommerce-MyAccount-content {
		float: none;
		width: 100%;
	}

	body.woocommerce-account .woocommerce-MyAccount-navigation ul {
		display: flex;
		flex-wrap: wrap;
		gap: 4px;
	}

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

/* ══ EL RESTO DE LAS PANTALLAS DE LA CUENTA ═══════════════════════════════
   Detalles de la cuenta, Dirección, Pedidos y Descargas. Todas salen de
   plantillas de WooCommerce y ninguna estaba tocada: el escritorio quedaba con
   nuestro diseño y el resto en crudo, que es peor que si estuviera todo feo.

   Es solo CSS. No se pisa ninguna plantilla más: los formularios de estas
   pantallas hacen cosas sensibles (cambiar el mail, la contraseña, la dirección
   de facturación) y no hay ninguna razón para meter mano en su HTML.
   ═══════════════════════════════════════════════════════════════════════ */

body.woocommerce-account .woocommerce-MyAccount-content {
	font-family: Poppins, system-ui, -apple-system, "Segoe UI", sans-serif;
	color: var(--px-body);
}

/* ── Formularios: detalles de la cuenta, dirección, restablecer contraseña ── */

body.woocommerce-account .woocommerce-EditAccountForm,
body.woocommerce-account .woocommerce-address-fields,
body.woocommerce-account .woocommerce-ResetPassword {
	padding: 24px;
	border: 1px solid var(--px-line);
	border-radius: 10px;
	background: var(--px-paper);
}

body.woocommerce-account .woocommerce-EditAccountForm label,
body.woocommerce-account .woocommerce-address-fields label,
body.woocommerce-account .woocommerce-ResetPassword label {
	display: block;
	margin-bottom: 6px;
	color: var(--px-mute);
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.35;
}

body.woocommerce-account .woocommerce-MyAccount-content input.input-text,
body.woocommerce-account .woocommerce-MyAccount-content textarea,
body.woocommerce-account .woocommerce-MyAccount-content select {
	width: 100%;
	padding: 11px 14px;
	border: 1px solid var(--px-line);
	border-radius: 6px;
	background: var(--px-sky-100);
	color: var(--px-ink);
	font-family: inherit;
	font-size: 15px;
	line-height: 1.4;
	transition: border-color 160ms ease-out, background-color 160ms ease-out;
}

body.woocommerce-account .woocommerce-MyAccount-content input.input-text:focus,
body.woocommerce-account .woocommerce-MyAccount-content textarea:focus,
body.woocommerce-account .woocommerce-MyAccount-content select:focus {
	border-color: var(--px-ink);
	background: var(--px-paper);
	outline: 2px solid var(--px-data);
	outline-offset: 1px;
}

/* Nombre y Apellido en dos columnas de verdad, no con floats al 47%. */
body.woocommerce-account .woocommerce-EditAccountForm .form-row-first,
body.woocommerce-account .woocommerce-EditAccountForm .form-row-last,
body.woocommerce-account .woocommerce-address-fields .form-row-first,
body.woocommerce-account .woocommerce-address-fields .form-row-last {
	float: none;
	width: 100%;
	margin: 0 0 16px;
}

body.woocommerce-account .woocommerce-EditAccountForm .form-row-wide,
body.woocommerce-account .woocommerce-address-fields .form-row-wide {
	margin: 0 0 16px;
}

@media (min-width: 620px) {
	body.woocommerce-account .woocommerce-EditAccountForm,
	body.woocommerce-account .woocommerce-address-fields {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0 20px;
	}

	body.woocommerce-account .woocommerce-EditAccountForm > *,
	body.woocommerce-account .woocommerce-address-fields > * {
		grid-column: 1 / -1;
		min-width: 0;
	}

	body.woocommerce-account .woocommerce-EditAccountForm > .form-row-first,
	body.woocommerce-account .woocommerce-address-fields > .form-row-first {
		grid-column: 1;
	}

	body.woocommerce-account .woocommerce-EditAccountForm > .form-row-last,
	body.woocommerce-account .woocommerce-address-fields > .form-row-last {
		grid-column: 2;
	}
}

/* `<div class="clear">` existe solo para limpiar floats. Con la rejilla no
   limpia nada y ocupa una fila entera: un hueco de 50px antes del botón. */
body.woocommerce-account .woocommerce-EditAccountForm > .clear,
body.woocommerce-account .woocommerce-address-fields > .clear {
	display: none;
}

body.woocommerce-account .woocommerce-EditAccountForm > p:last-child,
body.woocommerce-account .woocommerce-address-fields > p:last-child {
	margin-bottom: 0;
}

/* La ayuda de "Nombre visible" deja de ser una itálica gigante. */
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-form-row span em,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-form-row em {
	display: block;
	margin-top: 6px;
	color: var(--px-mute);
	font-size: 12.5px;
	font-style: normal;
	line-height: 1.45;
}

/* "Cambio de contraseña": una sección separada por una línea, NO una tarjeta
   adentro de otra tarjeta. Eso siempre está mal (regla del DESIGN.md). */
body.woocommerce-account .woocommerce-EditAccountForm fieldset {
	margin: 8px 0 20px;
	padding: 20px 0 0;
	border: 0;
	border-top: 1px solid var(--px-line);
}

body.woocommerce-account .woocommerce-EditAccountForm legend {
	padding: 0;
	margin: 0 0 14px;
	color: var(--px-mute);
	font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.13em;
	text-transform: uppercase;
}

/* Botón primario de estas pantallas. Los cuatro estados, por el reset fucsia.

   🛑 Los dos últimos selectores son SIN clase a propósito. WooCommerce no le
   pone `.button` al submit de "Comunicación"
   (/mi-cuenta/communication-preferences/): sale un `<input type="submit">`
   pelado, no lo agarraba ninguna regla de acá y caía en el reset de
   hello-elementor — `[type="submit"], button { color: #c36 }` —, o sea el botón
   salía fucsia con borde fucsia. Es la misma trampa del theme de siempre, pero
   por un elemento que no tiene clase. Encontrado el 29/8/2026. */
body.woocommerce-account .woocommerce-MyAccount-content button.woocommerce-Button,
body.woocommerce-account .woocommerce-MyAccount-content button.button,
body.woocommerce-account .woocommerce-MyAccount-content input[type="submit"].button,
body.woocommerce-account .woocommerce-MyAccount-content input[type="submit"],
body.woocommerce-account .woocommerce-MyAccount-content button[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 11px 24px;
	border: 0;
	border-radius: 999px;
	background: var(--px-yellow);
	color: var(--px-ink);
	font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1.2;
	text-transform: none;
	cursor: pointer;
	transition: background-color 160ms ease-out;
}

body.woocommerce-account .woocommerce-MyAccount-content button.woocommerce-Button:hover,
body.woocommerce-account .woocommerce-MyAccount-content button.woocommerce-Button:focus,
body.woocommerce-account .woocommerce-MyAccount-content button.woocommerce-Button:active,
body.woocommerce-account .woocommerce-MyAccount-content button.button:hover,
body.woocommerce-account .woocommerce-MyAccount-content button.button:focus,
body.woocommerce-account .woocommerce-MyAccount-content button.button:active,
body.woocommerce-account .woocommerce-MyAccount-content input[type="submit"].button:hover,
body.woocommerce-account .woocommerce-MyAccount-content input[type="submit"].button:focus,
body.woocommerce-account .woocommerce-MyAccount-content input[type="submit"]:hover,
body.woocommerce-account .woocommerce-MyAccount-content input[type="submit"]:focus,
body.woocommerce-account .woocommerce-MyAccount-content input[type="submit"]:active,
body.woocommerce-account .woocommerce-MyAccount-content button[type="submit"]:hover,
body.woocommerce-account .woocommerce-MyAccount-content button[type="submit"]:focus,
body.woocommerce-account .woocommerce-MyAccount-content button[type="submit"]:active {
	background: var(--px-yellow-press);
	color: var(--px-ink);
}

/* ── Dirección ────────────────────────────────────────────────────────────── */

body.woocommerce-account .woocommerce-Addresses.col2-set {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 20px;
}

/* 🛑 Lo que hacía que las dos tarjetas salieran en diagonal en vez de lado a
   lado: `.col2-set` trae un clearfix con ::before y ::after, y dentro de una
   rejilla esos pseudo-elementos **cuentan como celdas**. El ::before se comía
   la primera celda y empujaba todo. Vale igual para el login. */
body.woocommerce-account .woocommerce-Addresses.col2-set::before,
body.woocommerce-account .woocommerce-Addresses.col2-set::after,
body.woocommerce-account #customer_login.u-columns::before,
body.woocommerce-account #customer_login.u-columns::after {
	display: none;
}

/* Las dos tarjetas SON las columnas flotadas (`u-column1 col-1 woocommerce-Address`).
   Se encadenan las clases para ganarle al float sin recurrir a !important: con
   el float puesto, la rejilla las acomoda una en diagonal de la otra. */
body.woocommerce-account .woocommerce-Addresses .woocommerce-Address,
body.woocommerce-account .woocommerce-Addresses .u-column1.woocommerce-Address,
body.woocommerce-account .woocommerce-Addresses .u-column2.woocommerce-Address,
body.woocommerce-account .woocommerce-Addresses .col-1.woocommerce-Address,
body.woocommerce-account .woocommerce-Addresses .col-2.woocommerce-Address {
	float: none;
	width: auto;
	margin: 0;
	padding: 22px 24px;
	border: 1px solid var(--px-line);
	border-radius: 10px;
	background: var(--px-paper);
}

/* El texto de arriba es un párrafo suelto que el theme agranda. */
body.woocommerce-account .woocommerce-MyAccount-content > p {
	margin: 0 0 20px;
	max-width: 68ch;
	font-size: 14.5px;
	line-height: 1.55;
}

body.woocommerce-account .woocommerce-Address-title {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
	margin-bottom: 12px;
}

body.woocommerce-account .woocommerce-Address-title h2,
body.woocommerce-account .woocommerce-Address-title h3 {
	margin: 0;
	color: var(--px-ink);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: -0.01em;
}

body.woocommerce-account .woocommerce-Address-title a,
body.woocommerce-account .woocommerce-Address address + a {
	color: var(--px-data);
	font-family: Inter, system-ui, sans-serif;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

body.woocommerce-account .woocommerce-Address address {
	margin: 0;
	color: var(--px-body);
	font-size: 14px;
	font-style: normal;
	line-height: 1.6;
}

/* ── Tablas: Pedidos y Descargas ──────────────────────────────────────────── */

body.woocommerce-account .woocommerce-MyAccount-content table.shop_table {
	width: 100%;
	margin: 0;
	border: 1px solid var(--px-line);
	border-radius: 10px;
	border-collapse: separate;
	border-spacing: 0;
	background: var(--px-paper);
	overflow: hidden;
	font-size: 14px;
}

/* 🛑 Ojo: en la tabla de pedidos la PRIMERA celda de cada fila es un `<th>`,
   no un `<td>`. Si el estilo de encabezado se aplica a `th` a secas, el número
   de pedido sale en 11px, mayúsculas y con tracking, como si fuera un rótulo, y
   la columna parece tener un borde. El estilo de encabezado va en `thead th`. */
body.woocommerce-account .woocommerce-MyAccount-content table.shop_table thead th {
	padding: 13px 18px;
	border: 0;
	border-bottom: 1px solid var(--px-line);
	background: var(--px-sky-100);
	color: var(--px-mute);
	font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	text-align: left;
}

body.woocommerce-account .woocommerce-MyAccount-content table.shop_table tbody th,
body.woocommerce-account .woocommerce-MyAccount-content table.shop_table tbody td {
	padding: 15px 18px;
	border: 0;
	border-top: 1px solid var(--px-line);
	background: transparent;
	color: var(--px-body);
	font-size: 14px;
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
	text-align: left;
	vertical-align: middle;
}

/* WooCommerce raya las columnas y pinta las filas pares. Las dos cosas sobran:
   la separación la hace la línea horizontal y nada más. */
body.woocommerce-account .woocommerce-MyAccount-content table.shop_table th,
body.woocommerce-account .woocommerce-MyAccount-content table.shop_table td {
	border-left: 0;
	border-right: 0;
}

body.woocommerce-account .woocommerce-MyAccount-content table.shop_table tbody tr:nth-child(2n) th,
body.woocommerce-account .woocommerce-MyAccount-content table.shop_table tbody tr:nth-child(2n) td {
	background: transparent;
}

body.woocommerce-account .woocommerce-MyAccount-content table.shop_table tbody tr:first-child th,
body.woocommerce-account .woocommerce-MyAccount-content table.shop_table tbody tr:first-child td {
	border-top: 0;
}

/* La primera celda: qué compró arriba, el número de pedido abajo. Es el mismo
   orden que usa el registro del escritorio — el alumno busca el producto, no el
   número, así que el producto va primero y el número queda de referencia. */
body.woocommerce-account .prx-ord__link {
	display: flex;
	flex-direction: column;
	gap: 3px;
	color: inherit;
	text-decoration: none;
}

body.woocommerce-account .prx-ord__items {
	color: var(--px-ink);
	font-weight: 600;
	line-height: 1.3;
}

body.woocommerce-account .prx-ord__num {
	color: var(--px-mute);
	font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 12px;
	font-variant-numeric: tabular-nums;
}

/* 🛑 Los cuatro estados. El enlace de la primera celda es un `<a>`, así que el
   hover fucsia del theme no lo agarra (ese pega en `button`), pero sí lo agarra
   el `a { color:#c36 }` de hello-elementor si no se declara el color. */
body.woocommerce-account .prx-ord__link:hover .prx-ord__items,
body.woocommerce-account .prx-ord__link:focus .prx-ord__items,
body.woocommerce-account .prx-ord__link:focus-visible .prx-ord__items,
body.woocommerce-account .prx-ord__link:active .prx-ord__items {
	color: var(--px-data);
	text-decoration: underline;
}

body.woocommerce-account .prx-ord__cupon {
	display: block;
	margin-top: 3px;
	color: var(--px-mute);
	font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Número, fecha e importe en cifras tabulares, para que las columnas no bailen. */
body.woocommerce-account .woocommerce-orders-table__cell-order-number,
body.woocommerce-account .woocommerce-orders-table__cell-order-date,
body.woocommerce-account .woocommerce-orders-table__cell-order-total,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Price-amount {
	font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
	font-variant-numeric: tabular-nums;
}

body.woocommerce-account .woocommerce-orders-table__cell-order-number a {
	color: var(--px-ink);
	font-weight: 700;
	text-decoration: none;
}

/* El importe es el otro dato que se busca de un vistazo, junto con el producto:
   va un punto más grande que el resto de la fila. */
body.woocommerce-account .woocommerce-orders-table__cell-order-total {
	color: var(--px-ink);
	font-size: 15px;
	font-weight: 700;
	white-space: nowrap;
}

/* El estado, en pastilla. El color dice quién tiene la pelota: dorado = te toca
   a vos, azul = resuelto, gris = ya no pasa nada, rojo = falló. Es el mismo
   idioma que los botones de la fila, así se lee de un vistazo sin leer. */
body.woocommerce-account .prx-ord__estado {
	display: inline-flex;
	align-items: center;
	padding: 5px 11px;
	border-radius: 999px;
	background: var(--px-sky-200);
	color: var(--px-body);
	font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
}

/* Te toca a vos. */
body.woocommerce-account .prx-ord__estado--pending,
body.woocommerce-account .prx-ord__estado--on-hold {
	background: #FDF3D3;
	color: #7A5B00;
}

/* Resuelto. */
body.woocommerce-account .prx-ord__estado--completed,
body.woocommerce-account .prx-ord__estado--processing {
	background: #DCEEF9;
	color: var(--px-data);
}

/* Falló: es lo único que puede necesitar que escriba. */
body.woocommerce-account .prx-ord__estado--failed {
	background: #FBE6E6;
	color: var(--px-alert, #B02326);
}

/* 🛑 Los botones se apilaban pegados porque la celda era `text-align: right` a
   secas: los `<a>` quedaban como texto en línea, sin separación, y al envolver
   el segundo renglón se tocaba con el primero. Lo marcó Patán el 29/8/2026.
   Con flex + gap el problema desaparece en las dos direcciones. */
body.woocommerce-account .woocommerce-orders-table__cell-order-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: flex-end;
	align-items: center;
	text-align: right;
}

/* Jerarquía de las tres acciones. Sin esto las tres pesaban igual y la pantalla
   quedaba plana:
     1. "Cómo pagarlo" / "Pagar" → sólido. Es lo único que el alumno TIENE que
        hacer, y es la excepción a la regla de que el amarillo no va en filas:
        solo puede haber un pedido impago a la vez, así que no se banaliza.
     2. "Ver" → contorno. Está disponible en todas las filas.
     3. "Cancelar" → apagado, sin borde. Existe, pero no se ofrece. */
body.woocommerce-account .woocommerce-MyAccount-content table.shop_table a.button.pay {
	border-color: var(--px-yellow);
	background: var(--px-yellow);
	color: var(--px-ink);
}

body.woocommerce-account .woocommerce-MyAccount-content table.shop_table a.button.pay:hover,
body.woocommerce-account .woocommerce-MyAccount-content table.shop_table a.button.pay:focus,
body.woocommerce-account .woocommerce-MyAccount-content table.shop_table a.button.pay:active {
	border-color: var(--px-yellow-press);
	background: var(--px-yellow-press);
	color: var(--px-ink);
}

body.woocommerce-account .woocommerce-MyAccount-content table.shop_table a.button.cancel {
	border-color: transparent;
	background: transparent;
	color: var(--px-mute);
	font-weight: 600;
}

body.woocommerce-account .woocommerce-MyAccount-content table.shop_table a.button.cancel:hover,
body.woocommerce-account .woocommerce-MyAccount-content table.shop_table a.button.cancel:focus,
body.woocommerce-account .woocommerce-MyAccount-content table.shop_table a.button.cancel:active {
	border-color: var(--px-line);
	background: var(--px-sky-100);
	color: var(--px-ink);
}

/* El "Ver" de cada fila es una acción secundaria: cápsula de contorno, nunca
   amarilla. Si cada fila tuviera un botón amarillo, el amarillo dejaría de
   querer decir algo. */
body.woocommerce-account .woocommerce-MyAccount-content table.shop_table a.button,
body.woocommerce-account .woocommerce-MyAccount-content a.woocommerce-button {
	display: inline-flex;
	align-items: center;
	padding: 7px 16px;
	border: 1.5px solid var(--px-ink);
	border-radius: 999px;
	background: transparent;
	color: var(--px-ink);
	font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color 160ms ease-out, color 160ms ease-out;
}

body.woocommerce-account .woocommerce-MyAccount-content table.shop_table a.button:hover,
body.woocommerce-account .woocommerce-MyAccount-content table.shop_table a.button:focus,
body.woocommerce-account .woocommerce-MyAccount-content a.woocommerce-button:hover,
body.woocommerce-account .woocommerce-MyAccount-content a.woocommerce-button:focus {
	background: var(--px-ink);
	color: #F6F9FB;
}

/* En el detalle del pedido, el nombre del producto venía sin una regla propia
   y heredaba el fucsia #c36 del theme. Es navegación dentro de la cuenta: usa
   el azul de dato, conserva un subrayado reconocible y no compite con el total. */
body.woocommerce-account .woocommerce-order-details .woocommerce-table__product-name a,
body.woocommerce-account .woocommerce-order-details .woocommerce-table__product-name a:visited {
	color: var(--px-data);
	font-weight: 700;
	text-decoration: underline;
	text-decoration-color: color-mix(in srgb, var(--px-data) 45%, transparent);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color 160ms cubic-bezier(.25, 1, .5, 1), text-decoration-color 160ms cubic-bezier(.25, 1, .5, 1);
}

body.woocommerce-account .woocommerce-order-details .woocommerce-table__product-name a:hover,
body.woocommerce-account .woocommerce-order-details .woocommerce-table__product-name a:focus,
body.woocommerce-account .woocommerce-order-details .woocommerce-table__product-name a:focus-visible,
body.woocommerce-account .woocommerce-order-details .woocommerce-table__product-name a:active {
	color: var(--px-ink);
	text-decoration-color: currentColor;
}

body.woocommerce-account .woocommerce-order-details .woocommerce-table__product-name a:focus-visible {
	outline: 2px solid var(--px-data);
	outline-offset: 3px;
}

/* ── Estado vacío ─────────────────────────────────────────────────────────── */

body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message {
	font-family: Poppins, system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* En la tabla apilada de teléfono, WooCommerce mete la etiqueta con ::before. */
@media (max-width: 768px) {
	body.woocommerce-account .woocommerce-MyAccount-content table.shop_table tbody tr {
		display: block;
		border-top: 1px solid var(--px-line);
	}

	body.woocommerce-account .woocommerce-MyAccount-content table.shop_table tbody tr:first-child {
		border-top: 0;
	}

	/* WooCommerce usa un <th> para la primera celda y su responsive nativo la
	   esconde. Es la identidad de la ficha: producto arriba y número abajo. */
	body.woocommerce-account .woocommerce-MyAccount-content table.shop_table tbody th.woocommerce-orders-table__cell-order-number {
		display: block;
		padding: 12px 16px;
		border-top: 0;
		border-bottom: 1px solid var(--px-line);
		text-align: left;
	}

	body.woocommerce-account .woocommerce-orders-table__cell-order-number .prx-ord__link {
		min-height: 44px;
		justify-content: center;
	}

	body.woocommerce-account .woocommerce-MyAccount-content table.shop_table td {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 14px;
		padding: 10px 16px;
		border-top: 0;
		text-align: right;
	}

	body.woocommerce-account .woocommerce-MyAccount-content table.shop_table td::before {
		color: var(--px-mute);
		font-family: Inter, system-ui, sans-serif;
		font-size: 11px;
		font-weight: 700;
		letter-spacing: 0.13em;
		text-transform: uppercase;
	}

	body.woocommerce-account .woocommerce-orders-table__cell-order-actions {
		justify-content: flex-end;
	}

	body.woocommerce-account .woocommerce-MyAccount-content table.shop_table a.button,
	body.woocommerce-account .woocommerce-MyAccount-content a.woocommerce-button {
		box-sizing: border-box;
		height: 44px;
		min-height: 44px;
		justify-content: center;
		padding: 0 18px;
	}
}

/* ══ DÓNDE ESTOY ══════════════════════════════════════════════════════════
   El <h1> de sección que imprime el plugin arriba del contenido. Las seis
   pantallas de la cuenta no tenían ninguno: el hero azul repite el mismo
   saludo en todas y "Hola, Juan!" es un <h2>. Es el único título de la página
   que dice en qué pantalla estás.

   Va discreto a propósito: el hero ya ocupa media pantalla, y este título es
   una referencia, no un segundo cartel.
   ═══════════════════════════════════════════════════════════════════════ */

body.woocommerce-account .woocommerce-MyAccount-content .prx-seccion {
	margin: 0 0 18px;
	color: var(--px-ink);
	font-family: Poppins, system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -0.015em;
	line-height: 1.2;
}

/* ══ DETALLES SUELTOS DE LOS FORMULARIOS ═════════════════════════════════ */

/* El asterisco de obligatorio salía en rojo puro del theme, que no está en la
   paleta y es el único rojo de toda la pantalla. Se usa el rojo de marca y se
   le saca el subrayado que le pone hello-elementor a los `abbr`. */
body.woocommerce-account .woocommerce-MyAccount-content .required,
body.woocommerce-account .woocommerce-MyAccount-content abbr.required {
	border: 0;
	color: var(--px-alert, #B02326);
	text-decoration: none;
}

/* El bloque de contraseña ocupaba más de media pantalla siendo lo que menos se
   usa. En dos columnas mide la mitad: la actual arriba a lo ancho, y la nueva
   con su repetición lado a lado, que además es como se leen. */
@media (min-width: 620px) {
	body.woocommerce-account .woocommerce-EditAccountForm fieldset {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0 20px;
	}

	body.woocommerce-account .woocommerce-EditAccountForm fieldset > * {
		grid-column: 1 / -1;
		min-width: 0;
	}

	/* 🛑 Se apunta por posición y también por id. WooCommerce le pone el id
	   `password_1_field` al `<p>` en unas versiones y en otras solo al `<input>`
	   de adentro: en el WordPress local (Woo actual) los tres `<p>` salen sin
	   id, así que por id solo no agarraba ninguno. Lo peor que puede pasar si
	   mañana aparece una fila más es que las columnas queden como antes. */
	body.woocommerce-account .woocommerce-EditAccountForm fieldset > #password_1_field,
	body.woocommerce-account .woocommerce-EditAccountForm fieldset > p.form-row:nth-of-type(2) {
		grid-column: 1;
	}

	body.woocommerce-account .woocommerce-EditAccountForm fieldset > #password_2_field,
	body.woocommerce-account .woocommerce-EditAccountForm fieldset > p.form-row:nth-of-type(3) {
		grid-column: 2;
	}
}

/* ══ DATOS DE FACTURACIÓN ════════════════════════════════════════════════
   El "Editar" de la tarjeta era un texto suelto arriba a la derecha, gris, sin
   borde ni fondo: la única acción de la pantalla y no parecía tocable. Misma
   cápsula de contorno que el "Ver" de la tabla de pedidos, un punto más chica.
   ═══════════════════════════════════════════════════════════════════════ */

body.woocommerce-account .woocommerce-Address-title a {
	display: inline-flex;
	align-items: center;
	padding: 5px 14px;
	border: 1.5px solid var(--px-line);
	border-radius: 999px;
	color: var(--px-ink);
	font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.2;
	transition: background-color 160ms ease-out, border-color 160ms ease-out;
}

/* Los cuatro estados, por el `a { color:#c36 }` del reset de hello-elementor. */
body.woocommerce-account .woocommerce-Address-title a:hover,
body.woocommerce-account .woocommerce-Address-title a:focus,
body.woocommerce-account .woocommerce-Address-title a:focus-visible,
body.woocommerce-account .woocommerce-Address-title a:active {
	border-color: var(--px-ink);
	background: var(--px-ink);
	color: #F6F9FB;
}

/* ══ COMUNICACIÓN ════════════════════════════════════════════════════════
   La pantalla sale del menú (ver el filtro `woocommerce_account_menu_items`),
   pero el endpoint sigue vivo: si alguien tiene el enlace guardado, que no se
   encuentre con la peor pantalla del sitio.

   El checkbox era el nativo de 13×13 px —imposible de acertar en un teléfono—
   y el título era un párrafo entero puesto en un <h3> gris del theme.
   ═══════════════════════════════════════════════════════════════════════ */

body.woocommerce-account .woocommerce-MyAccount-content input[type="checkbox"] {
	width: 18px;
	height: 18px;
	margin: 0 10px 0 0;
	accent-color: var(--px-data);
	vertical-align: middle;
	cursor: pointer;
}

body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-form__label-for-checkbox {
	display: flex;
	align-items: flex-start;
	gap: 4px;
	padding: 14px 0;
	border-top: 1px solid var(--px-line);
	color: var(--px-body);
	font-size: 14.5px;
	font-weight: 400;
	line-height: 1.55;
	cursor: pointer;
}

/* El h3 del theme: 26px en gris azulado y con una frase entera adentro. Se lo
   baja al tamaño de un texto explicativo, que es lo que es.

   🛑 El `:not(:where(.prx-acct *))` NO es decorativo. Sin él este selector es
   (0,3,2) y le gana a TODOS los encabezados del escritorio, que son (0,2,1) o
   menos: `.prx-state h3`, `.prx-panel h3`, `.prx-offer h3`, `.prx-welcome h3`,
   `.prx-pend h3`. El síntoma no parece un problema de cascada: el título del
   curso salía en `--px-body` (#3C5666, tinta oscura) sobre la tarjeta navy
   —casi ilegible— a 14.5px y sin negrita, y "Tu registro" igual. Medido en
   producción el 29/8/2026.
   Va con `:where()` a propósito: aporta 0 de especificidad, así que la regla
   sigue siendo (0,3,2) para el h3 de WooCommerce y no se mueve nada más. Y
   como el argumento de `:not()` queda siendo un compuesto (una sola
   pseudoclase), no depende del soporte de selectores complejos en `:not()`.
   NO resolverlo neutralizando con `inherit`: la regla igual gana y el título
   hereda el color del contenedor, que en la tarjeta oscura es `--px-on-dark`.
   Probado el 29/8/2026, no funciona. */
body.woocommerce-account .woocommerce-MyAccount-content h3:not(:where(.prx-acct *)) {
	margin: 0 0 14px;
	max-width: 68ch;
	color: var(--px-body);
	font-family: Poppins, system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 14.5px;
	font-weight: 400;
	letter-spacing: normal;
	line-height: 1.55;
}