/* Hallmark · macrostructure: Workbench · tone: luxury · anchor hue: cool (brand-blue #125bc9)
 * theme: custom "Lujo sobrio" · paper crema (light band) · accent brand-blue (cool) · display = fuente del tema (heredada, peso alto)
 * v1.1: serif retirada (hereda --yoo-font-family) · dorado retirado (→ azul de marca) · ancho al contenedor del tema · bullets del sidebar eliminados
 * v1.2 (2026-07-10): reveal robusto (visible por defecto, se oculta solo con .mrc-js) para eliminar el retraso ~2s del panel derecho.
 * v1.3 (2026-07-10): páginas internas vestidas al nivel premium — Presupuestos (tabla YITH → tarjeta+filas+badges de estado) y Direcciones (2 tarjetas). Por CSS sobre markup vendor.
 * pre-emit critique: P5 H5 E4 S4 R5 V4
 * Rediseño de Mi Cuenta (WooCommerce) — Prosingladura. Overrides en merto-child/woocommerce/myaccount/.
 * Hereda tokens --yoo-* del sistema de diseño; define tokens locales --mrc-* con fallback.
 * NO toca vendor. Acotado por .merto-account-premium (body class).
 */

/* ============================================================
   1. TOKENS LOCALES  (--mrc-*)  ·  paleta "Lujo cálido"
   ============================================================ */
.merto-account-premium {
	/* Superficies — crema/marfil sobre las que respira el azul de marca */
	--mrc-paper:        #f7f5f0;   /* fondo página */
	--mrc-surface:      #ffffff;   /* tarjetas */
	--mrc-surface-2:    #fbfaf6;   /* tarjetas secundarias / hover suave */
	--mrc-ink:          #191712;   /* texto display (casi negro cálido) */
	--mrc-body:         #4a463d;   /* texto corriente cálido */
	--mrc-muted-text:   #8f8a7d;   /* texto terciario */

	/* Acento: azul de marca (heredado del sistema, con fallback literal) */
	--mrc-accent:       var(--yoo-color-primary, #125bc9);
	--mrc-accent-hover: var(--yoo-color-primary-hover, #0f4ea8);
	--mrc-accent-soft:  var(--yoo-color-primary-soft, #eaf1fd);

	/* Detalle de acento — azul de marca (antes era un dorado inventado; retirado
	   para respetar DESIGN-SYSTEM.md: nada de colores nuevos a ojo). */
	--mrc-gold:         var(--yoo-color-primary, #125bc9);
	--mrc-gold-soft:    rgba(18, 91, 201, 0.16);
	--mrc-line:         #e7e2d6;   /* líneas cálidas */

	/* Color de los eyebrows/etiquetas: gris sobrio (no azul, no dorado) */
	--mrc-eyebrow:      #9a948a;
	/* Peso de los títulos "display": la sans necesita más cuerpo que una serif */
	--mrc-display-weight: 700;

	/* Colores semánticos de las gráficas (tonos apagados, no saturados) */
	--mrc-c-info:       #3f6fd1;
	--mrc-c-warning:    #c7912f;
	--mrc-c-success:    #4f8a5b;
	--mrc-c-danger:     #b8553f;
	--mrc-c-muted:      #b7b1a3;

	/* Tipografía — hereda la del tema (DESIGN-SYSTEM.md: no fijar fuentes nuevas).
	   El display se distingue por peso/tamaño/tracking, no por otra familia. */
	--mrc-font-display: var(--yoo-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
	--mrc-font-body:    var(--yoo-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);

	/* Sombras suaves y radios generosos (lujo = aire + radios amables) */
	--mrc-shadow:       0 1px 2px rgba(25, 23, 18, 0.04), 0 12px 34px -18px rgba(25, 23, 18, 0.22);
	--mrc-shadow-hover: 0 2px 6px rgba(25, 23, 18, 0.06), 0 22px 50px -20px rgba(25, 23, 18, 0.28);
	--mrc-radius:       18px;
	--mrc-radius-sm:    12px;

	/* Motion (heredado, con fallback) */
	--mrc-ease:         var(--yoo-ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
	--mrc-dur:          var(--yoo-dur-base, 0.28s);
	--mrc-dur-fast:     var(--yoo-dur-fast, 0.16s);
}

/* ============================================================
   2. LIENZO GENERAL
   ============================================================ */
/* Ocupa TODO el ancho del contenedor del tema (.page-container / .site-content),
   así el contenido se alinea exactamente con las breadcrumbs de arriba. Sin
   max-width propio: el ancho lo manda el tema, no un número mágico. */
.merto-account-premium .mrc-account {
	width: 100%;
	margin: 0;
	padding: clamp(1.25rem, 4vw, 3.25rem) 0 4rem;
	color: var(--mrc-body);
	font-family: var(--mrc-font-body);
	-webkit-font-smoothing: antialiased;
}

/* Pinta el fondo crema de toda la zona de cuenta sin depender del tema */
.merto-account-premium.woocommerce-account,
body.merto-account-premium {
	background: var(--mrc-paper);
}

.merto-account-premium .mrc-account * { box-sizing: border-box; }

/* Oculta el ruido nativo de WooCommerce que ya no usamos (mensajes crudos) */
.merto-account-premium .woocommerce-MyAccount-content > .woocommerce-notices-wrapper:empty { display: none; }

/* ---- Masthead ---- */
.merto-account-premium .mrc-account__masthead {
	margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.merto-account-premium .mrc-account__eyebrow {
	font-family: var(--mrc-font-body);
	text-transform: uppercase;
	letter-spacing: 0.22em;
	font-size: 0.7rem;
	font-weight: 600;
	color: var(--mrc-eyebrow);
	margin: 0 0 0.6rem;
}
.merto-account-premium .mrc-account__title {
	font-family: var(--mrc-font-display);
	font-style: normal;
	font-weight: var(--mrc-display-weight);
	font-size: clamp(2rem, 5.5vw, 3.4rem);
	line-height: 1.05;
	letter-spacing: -0.015em;
	color: var(--mrc-ink);
	margin: 0;
	overflow-wrap: anywhere;
	min-width: 0;
}
.merto-account-premium .mrc-account__name {
	color: var(--mrc-accent);
}

/* ============================================================
   3. LAYOUT WORKBENCH  (rail + contenido)
   ============================================================ */
.merto-account-premium .mrc-account__body {
	display: grid;
	grid-template-columns: 268px minmax(0, 1fr);
	gap: clamp(1.25rem, 2.5vw, 2rem);
	align-items: start;
}

/* ============================================================
   4. RAIL LATERAL  (nav)
   ============================================================ */
.merto-account-premium .mrc-nav {
	position: sticky;
	top: 1.5rem;
	background: var(--mrc-surface);
	border: 1px solid var(--mrc-line);
	border-radius: var(--mrc-radius);
	box-shadow: var(--mrc-shadow);
	padding: 0.6rem;
	overflow: hidden;
}
.merto-account-premium .mrc-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}
/* Mata los bullets/marcadores que el tema padre pinta en los <li> del menú.
   (Los "puntos raros" del sidebar venían de un list-style heredado del tema.) */
.merto-account-premium .mrc-nav,
.merto-account-premium .mrc-nav ul,
.merto-account-premium .mrc-nav li {
	list-style: none !important;
}
.merto-account-premium .mrc-nav li::before,
.merto-account-premium .mrc-nav li::marker {
	content: none !important;
	display: none !important;
}
.merto-account-premium .mrc-nav__item {
	margin: 0;
	padding: 0;
}
.merto-account-premium .mrc-nav__link {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	padding: 0.72rem 0.85rem;
	border-radius: var(--mrc-radius-sm);
	text-decoration: none;
	color: var(--mrc-body);
	transition: background-color var(--mrc-dur-fast) var(--mrc-ease),
		color var(--mrc-dur-fast) var(--mrc-ease),
		transform var(--mrc-dur-fast) var(--mrc-ease);
	position: relative;
}
.merto-account-premium .mrc-nav__icon {
	display: inline-flex;
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	color: var(--mrc-muted-text);
	transition: color var(--mrc-dur-fast) var(--mrc-ease);
}
.merto-account-premium .mrc-nav__icon svg { width: 100%; height: 100%; display: block; }
.merto-account-premium .mrc-nav__text {
	display: flex;
	flex-direction: column;
	line-height: 1.2;
	min-width: 0;
}
.merto-account-premium .mrc-nav__label {
	font-weight: 600;
	font-size: 0.94rem;
	color: var(--mrc-ink);
}
.merto-account-premium .mrc-nav__desc {
	font-size: 0.74rem;
	color: var(--mrc-muted-text);
	margin-top: 0.1rem;
}
/* estados */
.merto-account-premium .mrc-nav__link:hover {
	background: var(--mrc-surface-2);
	transform: translateX(2px);
}
.merto-account-premium .mrc-nav__link:hover .mrc-nav__icon { color: var(--mrc-accent); }
.merto-account-premium .mrc-nav__link:focus-visible {
	outline: 2px solid var(--mrc-accent);
	outline-offset: 2px;
}
.merto-account-premium .mrc-nav__item.is-active .mrc-nav__link,
.merto-account-premium .mrc-nav__link[aria-current="page"] {
	background: var(--mrc-accent-soft);
}
.merto-account-premium .mrc-nav__item.is-active .mrc-nav__label,
.merto-account-premium .mrc-nav__link[aria-current="page"] .mrc-nav__label { color: var(--mrc-accent); }
.merto-account-premium .mrc-nav__item.is-active .mrc-nav__icon,
.merto-account-premium .mrc-nav__link[aria-current="page"] .mrc-nav__icon { color: var(--mrc-accent); }
/* barra dorada de "activo" */
.merto-account-premium .mrc-nav__item.is-active .mrc-nav__link::before,
.merto-account-premium .mrc-nav__link[aria-current="page"]::before {
	content: "";
	position: absolute;
	left: -0.6rem;
	top: 18%;
	bottom: 18%;
	width: 3px;
	border-radius: 0 3px 3px 0;
	background: var(--mrc-gold);
}
.merto-account-premium .mrc-nav__item--logout {
	margin-top: 0.4rem;
	padding-top: 0.4rem;
	border-top: 1px solid var(--mrc-line);
}
.merto-account-premium .mrc-nav__item--logout .mrc-nav__label { color: var(--mrc-body); font-weight: 500; }
.merto-account-premium .mrc-nav__footnote {
	margin: 0.9rem 0.4rem 0.3rem;
	font-size: 0.68rem;
	letter-spacing: 0.04em;
	color: var(--mrc-muted-text);
}

/* ============================================================
   5. TARJETAS BASE  +  reveal
   ============================================================ */
.merto-account-premium .mrc-card {
	background: var(--mrc-surface);
	border: 1px solid var(--mrc-line);
	border-radius: var(--mrc-radius);
	box-shadow: var(--mrc-shadow);
	padding: clamp(1.25rem, 2.5vw, 2rem);
}
/* Reveal de entrada: SOLO se oculta el contenido si el JS ya está en marcha
 * (body.mrc-js, añadido lo antes posible por my-account-premium.js). Así, si
 * el JS tarda por defer/minify de LiteSpeed o no carga, el contenido es
 * visible por defecto — nunca se queda en blanco esperando al observer. */
.mrc-js .merto-account-premium .mrc-card {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.5s var(--mrc-ease), transform 0.5s var(--mrc-ease);
}
.mrc-js .merto-account-premium .mrc-card.is-in {
	opacity: 1;
	transform: none;
}
.merto-account-premium .mrc-dash {
	display: flex;
	flex-direction: column;
	gap: clamp(1.1rem, 2.2vw, 1.6rem);
}

/* ---- HERO card ---- */
.merto-account-premium .mrc-card--hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 1.5rem;
	align-items: center;
	background:
		radial-gradient(120% 140% at 100% 0%, var(--mrc-accent-soft) 0%, transparent 55%),
		var(--mrc-surface);
	position: relative;
	overflow: hidden;
}
.merto-account-premium .mrc-card--hero::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	border: 1px solid var(--mrc-gold-soft);
	pointer-events: none;
}
.merto-account-premium .mrc-hero__eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.2em;
	font-size: 0.68rem;
	font-weight: 600;
	color: var(--mrc-eyebrow);
	margin: 0 0 0.6rem;
}
.merto-account-premium .mrc-hero__headline {
	font-family: var(--mrc-font-display);
	font-style: normal;
	font-weight: var(--mrc-display-weight);
	font-size: clamp(1.5rem, 3.4vw, 2.3rem);
	line-height: 1.08;
	letter-spacing: -0.01em;
	color: var(--mrc-ink);
	margin: 0 0 0.7rem;
	max-width: 22ch;
	overflow-wrap: anywhere;
}
.merto-account-premium .mrc-hero__lede {
	font-size: 0.98rem;
	line-height: 1.6;
	color: var(--mrc-body);
	max-width: 46ch;
	margin: 0 0 1.4rem;
}
.merto-account-premium .mrc-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.7rem;
}
.merto-account-premium .mrc-hero__figure {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-width: 128px;
	padding: 1.1rem 1.4rem;
	border-radius: var(--mrc-radius);
	background: var(--mrc-ink);
	color: #f6f2e8;
	line-height: 1;
}
.merto-account-premium .mrc-hero__mono {
	font-family: var(--mrc-font-display);
	font-size: 3.4rem;
	font-weight: 500;
	letter-spacing: -0.02em;
}
.merto-account-premium .mrc-hero__month {
	margin-top: 0.45rem;
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: rgba(246, 242, 232, 0.62); /* claro sobre el bloque oscuro de fecha */
}

/* ============================================================
   6. BOTONES  (8 estados)
   ============================================================ */
.merto-account-premium .mrc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.72rem 1.35rem;
	border-radius: var(--mrc-radius-sm);
	font-family: var(--mrc-font-body);
	font-weight: 600;
	font-size: 0.92rem;
	line-height: 1;
	white-space: nowrap;               /* nunca 2 líneas en un CTA */
	text-decoration: none;
	cursor: pointer;
	border: 1px solid transparent;
	transition: background-color var(--mrc-dur-fast) var(--mrc-ease),
		color var(--mrc-dur-fast) var(--mrc-ease),
		border-color var(--mrc-dur-fast) var(--mrc-ease),
		transform var(--mrc-dur-fast) var(--mrc-ease),
		box-shadow var(--mrc-dur-fast) var(--mrc-ease);
}
.merto-account-premium .mrc-btn--primary {
	background: var(--mrc-accent);
	color: #fff;
	box-shadow: 0 8px 18px -10px var(--mrc-accent);
}
.merto-account-premium .mrc-btn--primary:hover { background: var(--mrc-accent-hover); transform: translateY(-1px); }
.merto-account-premium .mrc-btn--primary:focus-visible { outline: 2px solid var(--mrc-ink); outline-offset: 2px; }
.merto-account-premium .mrc-btn--primary:active { transform: translateY(0); box-shadow: 0 4px 10px -8px var(--mrc-accent); }
.merto-account-premium .mrc-btn--primary[disabled],
.merto-account-premium .mrc-btn--primary[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; }
.merto-account-premium .mrc-btn--ghost {
	background: transparent;
	color: var(--mrc-ink);
	border-color: var(--mrc-line);
}
.merto-account-premium .mrc-btn--ghost:hover { border-color: var(--mrc-gold); background: var(--mrc-surface-2); }
.merto-account-premium .mrc-btn--ghost:focus-visible { outline: 2px solid var(--mrc-accent); outline-offset: 2px; }
.merto-account-premium .mrc-btn--ghost:active { transform: translateY(1px); }

/* ============================================================
   7. FILA DE GRÁFICAS
   ============================================================ */
.merto-account-premium .mrc-dash__charts {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: clamp(1.1rem, 2.2vw, 1.6rem);
}
.merto-account-premium .mrc-chart__head { margin-bottom: 1.25rem; }
.merto-account-premium .mrc-chart__title {
	font-family: var(--mrc-font-display);
	font-style: normal;
	font-weight: var(--mrc-display-weight);
	font-size: 1.35rem;
	line-height: 1.15;
	color: var(--mrc-ink);
	margin: 0 0 0.25rem;
}
.merto-account-premium .mrc-chart__sub {
	font-size: 0.82rem;
	color: var(--mrc-muted-text);
	margin: 0;
}

/* ---- DONUT ---- */
.merto-account-premium .mrc-donut {
	position: relative;
	width: 200px;
	max-width: 100%;
	margin: 0 auto 1.4rem;
	aspect-ratio: 1;
}
.merto-account-premium .mrc-donut__svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.merto-account-premium .mrc-donut__track {
	fill: none;
	stroke: var(--mrc-line);
	stroke-width: 14;
}
.merto-account-premium .mrc-donut__seg {
	fill: none;
	stroke-width: 14;
	stroke-linecap: round;
	transform-origin: center;
	transition: stroke-dasharray 0.9s var(--mrc-ease);
}
.merto-account-premium .mrc-donut__center {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
}
.merto-account-premium .mrc-donut__num {
	font-family: var(--mrc-font-display);
	font-style: normal;
	font-weight: 600;
	font-size: 3rem;
	line-height: 1;
	color: var(--mrc-ink);
}
.merto-account-premium .mrc-donut__label {
	font-size: 0.74rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--mrc-muted-text);
	margin-top: 0.35rem;
}
/* leyenda */
.merto-account-premium .mrc-legend {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
}
.merto-account-premium .mrc-legend__item {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 0.65rem;
	font-size: 0.9rem;
}
.merto-account-premium .mrc-legend__dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--dot, var(--mrc-accent));
}
.merto-account-premium .mrc-legend__label { color: var(--mrc-body); }
.merto-account-premium .mrc-legend__val { font-weight: 700; color: var(--mrc-ink); font-variant-numeric: tabular-nums; }

/* ---- SPARKLINE (barras) ---- */
.merto-account-premium .mrc-spark {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	align-items: end;
	gap: 0.55rem;
	height: 168px;
	padding-top: 0.5rem;
}
.merto-account-premium .mrc-spark__col {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	height: 100%;
	justify-content: flex-end;
	min-width: 0;
}
.merto-account-premium .mrc-spark__bar-wrap {
	position: relative;
	width: 100%;
	max-width: 42px;
	flex: 1;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}
.merto-account-premium .mrc-spark__bar {
	display: block;
	width: 100%;
	height: var(--h, 0%);
	min-height: 4px;
	border-radius: 8px 8px 4px 4px;
	background: linear-gradient(180deg, var(--mrc-line), var(--mrc-line));
	transition: height 0.8s var(--mrc-ease);
}
.merto-account-premium .mrc-spark__col.is-filled .mrc-spark__bar {
	background: linear-gradient(180deg, var(--mrc-accent) 0%, color-mix(in srgb, var(--mrc-accent) 70%, #fff) 100%);
}
.merto-account-premium .mrc-spark__val {
	position: absolute;
	top: -1.35rem;
	font-size: 0.78rem;
	font-weight: 700;
	color: var(--mrc-ink);
	font-variant-numeric: tabular-nums;
}
.merto-account-premium .mrc-spark__x {
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--mrc-muted-text);
}
.merto-account-premium .mrc-spark__foot {
	display: flex;
	gap: 2rem;
	margin-top: 1.4rem;
	padding-top: 1.2rem;
	border-top: 1px solid var(--mrc-line);
}
.merto-account-premium .mrc-stat { display: flex; flex-direction: column; gap: 0.15rem; }
.merto-account-premium .mrc-stat__num {
	font-family: var(--mrc-font-display);
	font-weight: 600;
	font-size: 2rem;
	line-height: 1;
	color: var(--mrc-accent);
}
.merto-account-premium .mrc-stat__lbl {
	font-size: 0.74rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--mrc-muted-text);
}

/* ============================================================
   8. ÚLTIMOS PRESUPUESTOS
   ============================================================ */
.merto-account-premium .mrc-recent__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.1rem;
}
.merto-account-premium .mrc-recent__title {
	font-family: var(--mrc-font-display);
	font-style: normal;
	font-weight: var(--mrc-display-weight);
	font-size: 1.35rem;
	color: var(--mrc-ink);
	margin: 0;
}
.merto-account-premium .mrc-recent__all {
	font-size: 0.86rem;
	font-weight: 600;
	color: var(--mrc-accent);
	text-decoration: none;
	white-space: nowrap;
}
.merto-account-premium .mrc-recent__all:hover { text-decoration: underline; text-underline-offset: 3px; }
.merto-account-premium .mrc-recent__all:focus-visible { outline: 2px solid var(--mrc-accent); outline-offset: 2px; border-radius: 3px; }
.merto-account-premium .mrc-recent__list { list-style: none; margin: 0; padding: 0; }
.merto-account-premium .mrc-recent__item {
	display: grid;
	grid-template-columns: auto 1fr auto auto;
	align-items: center;
	gap: 1rem;
	padding: 0.9rem 0;
	border-top: 1px solid var(--mrc-line);
}
.merto-account-premium .mrc-recent__item:first-child { border-top: none; }
.merto-account-premium .mrc-recent__ref {
	font-weight: 700;
	color: var(--mrc-ink);
	font-variant-numeric: tabular-nums;
}
.merto-account-premium .mrc-recent__date { color: var(--mrc-muted-text); font-size: 0.88rem; }
.merto-account-premium .mrc-recent__count { color: var(--mrc-body); font-size: 0.88rem; }

/* ---- Badges de estado ---- */
.merto-account-premium .mrc-badge {
	display: inline-flex;
	align-items: center;
	padding: 0.28rem 0.7rem;
	border-radius: 999px;
	font-size: 0.76rem;
	font-weight: 600;
	white-space: nowrap;
	border: 1px solid transparent;
}
.merto-account-premium .mrc-badge--info    { background: color-mix(in srgb, var(--mrc-c-info) 12%, #fff);    color: var(--mrc-c-info);    border-color: color-mix(in srgb, var(--mrc-c-info) 26%, #fff); }
.merto-account-premium .mrc-badge--warning { background: color-mix(in srgb, var(--mrc-c-warning) 14%, #fff); color: #8a6410;              border-color: color-mix(in srgb, var(--mrc-c-warning) 30%, #fff); }
.merto-account-premium .mrc-badge--success { background: color-mix(in srgb, var(--mrc-c-success) 12%, #fff); color: var(--mrc-c-success); border-color: color-mix(in srgb, var(--mrc-c-success) 28%, #fff); }
.merto-account-premium .mrc-badge--danger  { background: color-mix(in srgb, var(--mrc-c-danger) 12%, #fff);  color: var(--mrc-c-danger);  border-color: color-mix(in srgb, var(--mrc-c-danger) 28%, #fff); }
.merto-account-premium .mrc-badge--muted   { background: var(--mrc-surface-2); color: var(--mrc-muted-text); border-color: var(--mrc-line); }

/* ============================================================
   9. ESTADO VACÍO
   ============================================================ */
.merto-account-premium .mrc-empty {
	text-align: center;
	padding: clamp(2rem, 5vw, 3.5rem) clamp(1.25rem, 4vw, 2.5rem);
}
.merto-account-premium .mrc-empty__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	margin: 0 auto 1.2rem;
	border-radius: 50%;
	background: var(--mrc-accent-soft);
	color: var(--mrc-accent);
}
.merto-account-premium .mrc-empty__title {
	font-family: var(--mrc-font-display);
	font-style: normal;
	font-weight: var(--mrc-display-weight);
	font-size: 1.6rem;
	color: var(--mrc-ink);
	margin: 0 0 0.6rem;
}
.merto-account-premium .mrc-empty__lede {
	max-width: 42ch;
	margin: 0 auto 1.6rem;
	color: var(--mrc-body);
	line-height: 1.6;
}

/* ============================================================
   10. FORMULARIO "DETALLES DE LA CUENTA"
   ============================================================ */
.merto-account-premium .mrc-form {
	display: flex;
	flex-direction: column;
	gap: clamp(1.1rem, 2.2vw, 1.6rem);
	margin: 0;
	border: 0;
	padding: 0;
}
.merto-account-premium .mrc-form__card { margin: 0; }
.merto-account-premium fieldset.mrc-form__card { min-width: 0; }
.merto-account-premium .mrc-form__head { margin-bottom: 1.3rem; }
.merto-account-premium .mrc-form__title {
	font-family: var(--mrc-font-display);
	font-style: normal;
	font-weight: var(--mrc-display-weight);
	font-size: 1.35rem;
	color: var(--mrc-ink);
	margin: 0 0 0.3rem;
	padding: 0;
	float: none;
	width: auto;
}
.merto-account-premium .mrc-form__sub {
	font-size: 0.86rem;
	color: var(--mrc-muted-text);
	margin: 0 0 1.3rem;
}
.merto-account-premium .mrc-form__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.1rem 1.4rem;
}
.merto-account-premium .mrc-field { margin: 0; }
.merto-account-premium .mrc-field--wide { grid-column: 1 / -1; }
.merto-account-premium .mrc-field label {
	display: block;
	font-size: 0.84rem;
	font-weight: 600;
	color: var(--mrc-ink);
	margin-bottom: 0.45rem;
}
.merto-account-premium .mrc-field .required { color: var(--mrc-danger, #b8553f); border: 0; }
.merto-account-premium .mrc-input {
	width: 100%;
	padding: 0.78rem 0.95rem;
	border: 1px solid var(--mrc-line);
	border-radius: var(--mrc-radius-sm);
	background: var(--mrc-surface-2);
	color: var(--mrc-ink);
	font-family: var(--mrc-font-body);
	font-size: 0.96rem;
	line-height: 1.4;
	transition: border-color var(--mrc-dur-fast) var(--mrc-ease),
		box-shadow var(--mrc-dur-fast) var(--mrc-ease),
		background-color var(--mrc-dur-fast) var(--mrc-ease);
}
.merto-account-premium .mrc-input::placeholder { color: var(--mrc-muted-text); }
.merto-account-premium .mrc-input:hover { border-color: var(--mrc-gold); }
.merto-account-premium .mrc-input:focus,
.merto-account-premium .mrc-input:focus-visible {
	outline: none;
	border-color: var(--mrc-accent);
	background: var(--mrc-surface);
	box-shadow: 0 0 0 3px var(--mrc-accent-soft);
}
.merto-account-premium .mrc-input:disabled { opacity: 0.6; cursor: not-allowed; }
.merto-account-premium .mrc-field__hint {
	display: block;
	margin-top: 0.4rem;
	font-size: 0.78rem;
	color: var(--mrc-muted-text);
}
.merto-account-premium .mrc-form__actions { display: flex; gap: 0.7rem; }

/* ============================================================
   10b. PÁGINAS INTERNAS — Presupuestos (YITH) + Direcciones (Woo)
   Se visten por CSS sobre el markup de vendor (no se tocan plantillas),
   heredando los tokens --mrc-* para igualar el nivel premium del resto.
   ============================================================ */

/* ---- Título de sección (Mis presupuestos / direcciones) ---- */
.merto-account-premium .ywraq_my_account_quotes_title,
.merto-account-premium .woocommerce-MyAccount-content > p:first-of-type + .woocommerce-Addresses,
.merto-account-premium .woocommerce-Address-title h2 {
	font-family: var(--mrc-font-display);
}
.merto-account-premium .ywraq_my_account_quotes_title {
	margin: 0 0 1.4rem;
	font-size: clamp(1.4rem, 2.4vw, 1.9rem);
	font-weight: var(--mrc-display-weight);
	color: var(--mrc-ink);
	letter-spacing: -0.01em;
}

/* ---- Tabla de presupuestos → tarjeta + filas premium ---- */
.merto-account-premium .my_account_quotes {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	background: var(--mrc-surface);
	border: 1px solid var(--mrc-line);
	border-radius: var(--mrc-radius);
	box-shadow: var(--mrc-shadow);
	overflow: hidden;
}
.merto-account-premium .my_account_quotes thead th {
	padding: 0.95rem 1.25rem;
	text-align: left;
	font-family: var(--mrc-font-body);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--mrc-eyebrow);
	background: var(--mrc-surface-2);
	border-bottom: 1px solid var(--mrc-line);
}
.merto-account-premium .my_account_quotes tbody td {
	padding: 1.05rem 1.25rem;
	font-size: 0.95rem;
	color: var(--mrc-body);
	border-bottom: 1px solid var(--mrc-line);
	vertical-align: middle;
}
.merto-account-premium .my_account_quotes tbody tr:last-child td { border-bottom: 0; }
.merto-account-premium .my_account_quotes tbody tr {
	transition: background-color var(--mrc-dur-fast) var(--mrc-ease);
	cursor: pointer;
}
.merto-account-premium .my_account_quotes tbody tr:hover { background: var(--mrc-accent-soft); }
.merto-account-premium .my_account_quotes .quotes-number a {
	font-weight: 600;
	color: var(--mrc-accent);
	text-decoration: none;
}
.merto-account-premium .my_account_quotes .quotes-number a:hover { text-decoration: underline; }
.merto-account-premium .my_account_quotes time { color: var(--mrc-muted-text); }

/* ---- Badge de estado del presupuesto (raq_status) ---- */
.merto-account-premium .my_account_quotes .raq_status {
	display: inline-flex;
	align-items: center;
	padding: 0.28rem 0.7rem;
	border-radius: 999px;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	line-height: 1;
	background: var(--mrc-surface-2);
	color: var(--mrc-muted-text);
}
.merto-account-premium .my_account_quotes .raq_status.new      { background: var(--mrc-accent-soft); color: var(--mrc-accent); }
.merto-account-premium .my_account_quotes .raq_status.pending  { background: #fff4e5; color: #b45309; }
.merto-account-premium .my_account_quotes .raq_status.accepted { background: #eaf7ef; color: #15803d; }
.merto-account-premium .my_account_quotes .raq_status.rejected { background: #fdecec; color: #b91c1c; }
.merto-account-premium .my_account_quotes .raq_status.expired  { background: var(--mrc-surface-2); color: var(--mrc-muted-text); }

/* Estado vacío de la lista de presupuestos (si YITH lo pinta) */
.merto-account-premium .woocommerce-MyAccount-content .woocommerce-Message,
.merto-account-premium .woocommerce-MyAccount-content .woocommerce-info {
	background: var(--mrc-surface);
	border: 1px solid var(--mrc-line);
	border-left: 3px solid var(--mrc-accent);
	border-radius: var(--mrc-radius-sm);
	padding: 1rem 1.2rem;
	color: var(--mrc-body);
}

/* ---- Direcciones → 2 tarjetas premium ---- */
.merto-account-premium .woocommerce-MyAccount-content > p:first-of-type {
	color: var(--mrc-muted-text);
	margin: 0 0 1.4rem;
}
.merto-account-premium .woocommerce-Addresses {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-auto-flow: row;
	gap: 1.1rem;
	width: 100%;
	float: none !important;
}
.merto-account-premium .woocommerce-Address {
	/* WooCommerce coloca .col-1/.col-2 con float + width% + a veces order;
	 * se anula TODO para que el grid mande y queden lado a lado, en orden. */
	float: none !important;
	clear: none !important;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	order: 0 !important;
	transform: none !important;
	background: var(--mrc-surface);
	border: 1px solid var(--mrc-line);
	border-radius: var(--mrc-radius);
	box-shadow: var(--mrc-shadow);
	padding: clamp(1.15rem, 2vw, 1.6rem);
}
/* Colocación explícita: facturación a la izquierda, envío a la derecha. */
.merto-account-premium .woocommerce-Address.u-column1,
.merto-account-premium .woocommerce-Address.col-1 { grid-column: 1; grid-row: 1; }
.merto-account-premium .woocommerce-Address.u-column2,
.merto-account-premium .woocommerce-Address.col-2 { grid-column: 2; grid-row: 1; }
.merto-account-premium .woocommerce-Address-title {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.75rem;
	margin-bottom: 0.9rem;
	padding-bottom: 0.85rem;
	border-bottom: 1px solid var(--mrc-line);
}
.merto-account-premium .woocommerce-Address-title h2 {
	margin: 0;
	font-size: 1.05rem;
	font-weight: var(--mrc-display-weight);
	color: var(--mrc-ink);
}
.merto-account-premium .woocommerce-Address-title .edit {
	flex: none;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--mrc-accent);
	text-decoration: none;
}
.merto-account-premium .woocommerce-Address-title .edit:hover { text-decoration: underline; }
.merto-account-premium .woocommerce-Address address {
	font-style: normal;
	line-height: 1.6;
	color: var(--mrc-body);
}
/* Cuando la dirección está vacía, el texto va apagado. */
.merto-account-premium .woocommerce-Address address:only-child,
.merto-account-premium .woocommerce-Address address { color: var(--mrc-muted-text); }

/* Formulario de edición de dirección: reutiliza los estilos de campo premium. */
.merto-account-premium .woocommerce-address-fields__field-wrapper { display: grid; gap: 0.9rem; }
.merto-account-premium form.edit-account .woocommerce-Button,
.merto-account-premium .woocommerce-address-fields button {
	appearance: none;
	border: 0;
	border-radius: var(--mrc-radius-sm);
	background: var(--mrc-accent);
	color: #fff;
	font-family: var(--mrc-font-body);
	font-weight: 600;
	padding: 0.8rem 1.5rem;
	cursor: pointer;
	transition: background-color var(--mrc-dur-fast) var(--mrc-ease), transform var(--mrc-dur-fast) var(--mrc-ease);
}
.merto-account-premium .woocommerce-address-fields button:hover { background: var(--mrc-accent-hover); transform: translateY(-1px); }
.merto-account-premium .woocommerce-address-fields button:active { transform: translateY(0); }

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

/* ============================================================
   11. RESPONSIVE  (768 → 414 → 375 → 320)
   ============================================================ */
@media (max-width: 900px) {
	.merto-account-premium .mrc-account__body { grid-template-columns: 1fr; }
	.merto-account-premium .mrc-nav {
		position: static;
	}
	.merto-account-premium .mrc-nav__list {
		flex-direction: row;
		flex-wrap: wrap;
	}
	.merto-account-premium .mrc-nav__item { flex: 1 1 auto; }
	.merto-account-premium .mrc-nav__desc { display: none; } /* compacto en fila */
	.merto-account-premium .mrc-nav__item--logout {
		border-top: none;
		margin-top: 0;
		padding-top: 0;
	}
	.merto-account-premium .mrc-nav__footnote { display: none; }
}
@media (max-width: 720px) {
	.merto-account-premium .mrc-dash__charts { grid-template-columns: 1fr; }
	.merto-account-premium .mrc-card--hero { grid-template-columns: 1fr; }
	.merto-account-premium .mrc-hero__figure {
		flex-direction: row;
		gap: 0.9rem;
		align-self: start;
		padding: 0.7rem 1.1rem;
	}
	.merto-account-premium .mrc-hero__mono { font-size: 2.4rem; }
	.merto-account-premium .mrc-hero__month { margin-top: 0; }
}
@media (max-width: 560px) {
	.merto-account-premium .mrc-form__grid { grid-template-columns: 1fr; }
	.merto-account-premium .mrc-recent__item {
		grid-template-columns: auto 1fr;
		grid-template-areas:
			"ref badge"
			"date count";
		row-gap: 0.35rem;
	}
	.merto-account-premium .mrc-recent__ref   { grid-area: ref; }
	.merto-account-premium .mrc-recent__badge,
	.merto-account-premium .mrc-recent__item .mrc-badge { grid-area: badge; justify-self: end; }
	.merto-account-premium .mrc-recent__date  { grid-area: date; }
	.merto-account-premium .mrc-recent__count { grid-area: count; justify-self: end; }
	.merto-account-premium .mrc-hero__actions .mrc-btn { flex: 1 1 auto; }
	.merto-account-premium .mrc-form__actions .mrc-btn { flex: 1 1 auto; }
}
@media (max-width: 400px) {
	.merto-account-premium .mrc-account { padding-left: 0.85rem; padding-right: 0.85rem; }
	.merto-account-premium .mrc-nav__list { flex-direction: column; }
	.merto-account-premium .mrc-nav__desc { display: block; }
	.merto-account-premium .mrc-spark { gap: 0.3rem; }
	.merto-account-premium .mrc-spark__x { font-size: 0.64rem; }
}

/* ============================================================
   12. REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
	.merto-account-premium .mrc-card {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
	.merto-account-premium .mrc-nav__link,
	.merto-account-premium .mrc-btn,
	.merto-account-premium .mrc-donut__seg,
	.merto-account-premium .mrc-spark__bar,
	.merto-account-premium .mrc-input {
		transition: none !important;
	}
	.merto-account-premium .mrc-nav__link:hover,
	.merto-account-premium .mrc-btn--primary:hover { transform: none; }
}