/* =========================================================================
 * Mi cuenta — CRITICAL CSS (above-fold / anti-CLS / layout)
 * dev_task #82 · página 10 /mi-cuenta/ (WooCommerce My Account)
 *
 * Solo se carga en PREVIEW (admin + cookie) hasta el flip a público.
 * Scope: .single-page-mi-cuenta / .mca-main.
 *
 * REGLA (performance-rules §1): aquí SOLO layout/dimensiones. La decoración
 * (color, sombras, hover, estados activos) va en mi-cuenta-rest.css.
 *
 * ⚠️ El CUERPO lo pinta WooCommerce nativo (navegación + contenido del endpoint).
 * Aquí damos: container 1600px + LAYOUT 2-col (nav lateral + contenido). El estilo
 * fino de tablas/formularios de WC lo aporta su CSS base (NO se dequeuea woocommerce-*).
 * ========================================================================= */

.single-page-mi-cuenta {
	--mca-dark:   #161616;
	--mca-yellow: #FFED00;
	--mca-pink:   #E6007E;
	--mca-text:   #161616;
	--mca-muted:  #5b5b5b;
	--mca-line:   #e6e6e6;
	--mca-font-h: 'Raleway', system-ui, sans-serif;
	--mca-font-b: 'Nunito', system-ui, sans-serif;
}

.single-page-mi-cuenta .mca-main {
	font-family: var(--mca-font-b);
	line-height: 1.6;
}

/* Container on-brand — dev_task #78: 1600px. */
.single-page-mi-cuenta .mca-wrap {
	width: 100%;
	max-width: 1600px;
	margin: 0 auto;
	padding: 0 clamp(1.25rem, 4vw, 3rem);
	box-sizing: border-box;
}

/* 1. HERO ligero — título + saludo, centrado. Reserva altura (anti-CLS).
 * Banda OSCURA (regla alternancia oscuro/claro QA Kevin 04-jul — coherente con
 * el resto de páginas migradas; colores aquí en critical, anti-flash). */
.single-page-mi-cuenta .mca-hero {
	padding: clamp(2rem, 5vw, 3.25rem) 0 clamp(1.25rem, 3vw, 2rem);
	background: var(--mca-dark, #161616);
}
.single-page-mi-cuenta .mca-hero__inner { max-width: 1000px; margin: 0 auto; text-align: center; }
.single-page-mi-cuenta .mca-hero__title {
	font-family: var(--mca-font-h);
	font-size: clamp(1.7rem, 4.5vw, 2.6rem);
	line-height: 1.15;
	font-weight: 800;
	margin: 0 0 .9rem;
	color: #ffffff;
}
.single-page-mi-cuenta .mca-hero__lead {
	font-size: clamp(1rem, 2.2vw, 1.12rem);
	margin: 0;
	color: rgba(255, 255, 255, .75);
}

/* Divider wave hero (dark) → cuerpo WC (white) — patrón homepage/creamos/blog. */
.single-page-mi-cuenta .divider {
	position: relative;
	width: 100%;
	line-height: 0;
	z-index: 2;
	pointer-events: none;
}
.single-page-mi-cuenta .divider svg {
	display: block;
	width: 100%;
	height: clamp(20px, 2.2vw, 30px);
}
.single-page-mi-cuenta .divider .wave-fill { fill: var(--wf); }
.single-page-mi-cuenta .divider .wave-glow { fill: none; stroke-width: 2; }
.single-page-mi-cuenta .divider--ne { background: #161616; }
.single-page-mi-cuenta .divider--mg .wave-glow {
	stroke: #E6007E;
	filter: drop-shadow(0 0 3px rgba(230,0,126,.8))
			drop-shadow(0 0 8px rgba(230,0,126,.5))
			drop-shadow(0 0 20px rgba(230,0,126,.25))
			drop-shadow(0 0 40px rgba(230,0,126,.1));
}
@media (max-width: 700px) {
	.single-page-mi-cuenta .divider .wave-glow { stroke-width: 1.5; }
}

/* 2. CUERPO — layout 2-col cuando hay navegación (usuario logueado). ----------
 *  WC marca: .woocommerce-MyAccount-navigation (aside) + .woocommerce-MyAccount-content.
 *  Usamos flex con wrap → mobile-first (apilado), 2-col desde 783px. */
.single-page-mi-cuenta .mca-body { padding: clamp(.5rem, 2vw, 1.5rem) 0 clamp(2.5rem, 6vw, 4rem); }

.single-page-mi-cuenta .mca-account {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(1.25rem, 3vw, 2.5rem);
	align-items: flex-start;
}

/* Navegación lateral (WC la inyecta dentro de .mca-account). */
.single-page-mi-cuenta .woocommerce-MyAccount-navigation {
	flex: 0 0 100%;
	max-width: 100%;
	margin: 0;
}
.single-page-mi-cuenta .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Contenido (dashboard / pedidos / etc.). */
.single-page-mi-cuenta .mca-account__content,
.single-page-mi-cuenta .woocommerce-MyAccount-content {
	flex: 1 1 100%;
	min-width: 0;
	margin: 0;
}

/* Guest (login/registro): NO hay nav → contenido a ancho cómodo centrado. */
.single-page-mi-cuenta .mca-account__content--guest {
	flex-basis: 100%;
	max-width: 920px;
	margin: 0 auto;
}

@media (min-width: 783px) {
	.single-page-mi-cuenta .woocommerce-MyAccount-navigation {
		flex: 0 0 240px;
		max-width: 240px;
		position: sticky;
		top: 1.5rem;
	}
	.single-page-mi-cuenta .mca-account__content,
	.single-page-mi-cuenta .woocommerce-MyAccount-content {
		flex: 1 1 0;
	}
}