/*
 * Liquid Glass — Mi Cuenta (WooCommerce My Account)
 *
 * Qué modifica: presentación de las pestañas de "Mi cuenta" (Escritorio,
 * Pedidos, Descargas, Direcciones, Métodos de pago, Detalles de la cuenta,
 * Wishlist, Compare) usando las clases estándar de WooCommerce. No se copia
 * ninguna plantilla PHP a astra-child/woocommerce/.
 *
 * Mismo criterio conservador que cart-checkout.css: SIN JavaScript (evita
 * interferir con scripts de guardado de direcciones/tarjetas), sin
 * "display: none", y todos los botones con "color" explícito (mismo bug que
 * se corrigió antes: WooCommerce/Astra dan texto blanco por defecto a
 * ".button" — cambiar solo el fondo sin fijar color lo vuelve invisible).
 *
 * Wishlist/Compare: esas dos pestañas vienen de un plugin adicional (no de
 * WooCommerce core) — no tengo confirmadas sus clases reales, así que no se
 * tocan aquí. Si quieres que también sigan el mismo estilo, dime qué plugin
 * es (o inspecciona la clase con F12) y lo agrego.
 *
 * Breakpoints: ver assets/css/liquid-glass.css (móvil ≤544px, tablet ≤976px).
 *
 * BUG corregido (2026-07, mismo encontrado en cart-checkout.css): los campos
 * de formulario (direcciones, detalles de cuenta) usaban "var(--glass-border)"
 * (blanco translúcido) sobre una tarjeta ya casi blanca opaca — el borde
 * quedaba invisible, los campos se veían como texto flotando sin caja. Se
 * usa un borde oscuro sutil en su lugar (misma variable/criterio que en
 * cart-checkout.css).
 */

:root {
	--ma-input-border: rgba(30, 41, 59, 0.16);
}

/* ============================================================
   Layout: navegación lateral + contenido
   ============================================================ */

.woocommerce-account .woocommerce-MyAccount-navigation {
	background: var(--glass-bg-fallback);
	border: 1px solid var(--glass-border);
	border-radius: var(--glass-radius);
	box-shadow: var(--glass-shadow);
	padding: 10px;
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
	.woocommerce-account .woocommerce-MyAccount-navigation {
		background: var(--glass-bg);
		-webkit-backdrop-filter: blur(var(--glass-blur));
		backdrop-filter: blur(var(--glass-blur));
	}
}

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

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

.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 12px 16px;
	border-radius: calc(var(--glass-radius) - 12px);
	color: #1e293b;
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
	background: rgba(82, 113, 255, 0.08);
	color: var(--brand-blue-deep, #004d93);
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	background: var(--glass-cta-gradient);
	color: var(--glass-cta-text);
	font-weight: 600;
}

.woocommerce-account .woocommerce-MyAccount-content {
	background: var(--glass-bg-fallback);
	border: 1px solid var(--glass-border);
	border-radius: var(--glass-radius);
	box-shadow: var(--glass-shadow);
	padding: 28px;
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
	.woocommerce-account .woocommerce-MyAccount-content {
		background: var(--glass-bg);
		-webkit-backdrop-filter: blur(var(--glass-blur));
		backdrop-filter: blur(var(--glass-blur));
	}
}

/* ============================================================
   Pedidos y descargas (tablas)
   ============================================================ */

.woocommerce-account table.woocommerce-orders-table,
.woocommerce-account table.woocommerce-table--order-downloads {
	border-collapse: collapse;
	width: 100%;
}

.woocommerce-account table.woocommerce-orders-table tr,
.woocommerce-account table.woocommerce-table--order-downloads tr {
	border-bottom: 1px solid var(--glass-border);
}

.woocommerce-account .woocommerce-orders-table__cell-order-status {
	font-weight: 600;
}

.woocommerce-account .woocommerce-orders-table__cell-order-actions .button,
.woocommerce-account .woocommerce-table--order-downloads .button {
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.5);
	background: var(--glass-cta-gradient);
	box-shadow: var(--glass-cta-glow);
	color: var(--glass-cta-text);
	padding: 8px 16px;
	font-size: 0.85rem;
	font-weight: 600;
	display: inline-block;
}

@media (hover: hover) and (pointer: fine) {
	.woocommerce-account .woocommerce-orders-table__cell-order-actions .button:hover,
	.woocommerce-account .woocommerce-table--order-downloads .button:hover {
		box-shadow: var(--glass-cta-glow-hover);
		color: var(--glass-cta-text);
	}
}

/* ============================================================
   Direcciones
   ============================================================ */

.woocommerce-account .woocommerce-Address {
	background: rgba(255, 255, 255, 0.5);
	border: 1px solid var(--glass-border);
	border-radius: calc(var(--glass-radius) - 8px);
	padding: 20px;
}

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

.woocommerce-account .woocommerce-Address-title .edit,
.woocommerce-account .woocommerce-Address-title a.edit {
	border-radius: 999px;
	border: 1px solid var(--ma-input-border);
	background: rgba(255, 255, 255, 0.7);
	padding: 6px 14px;
	font-size: 0.8rem;
	color: #1e293b;
	text-decoration: none;
}

/* ============================================================
   Formularios (direcciones, detalles de cuenta, métodos de pago)
   ============================================================ */

.woocommerce-account form .form-row input.input-text,
.woocommerce-account form .form-row select,
.woocommerce-account form .form-row textarea {
	border-radius: 12px;
	border: 1px solid var(--ma-input-border);
	background: rgba(255, 255, 255, 0.7);
	color: #1e293b;
	padding: 10px 14px;
}

.woocommerce-account form .form-row input.input-text:focus,
.woocommerce-account form .form-row select:focus,
.woocommerce-account form .form-row textarea:focus {
	outline: none;
	border-color: var(--brand-blue-light, #5271ff);
	box-shadow: 0 0 0 3px rgba(82, 113, 255, 0.18);
}

.woocommerce-account form button.button,
.woocommerce-account form input.button {
	border-radius: 999px !important;
	border: 1px solid rgba(255, 255, 255, 0.5) !important;
	background: var(--glass-cta-gradient) !important;
	box-shadow: var(--glass-cta-glow) !important;
	color: var(--glass-cta-text) !important;
	padding: 12px 24px !important;
	font-weight: 600 !important;
}

@media (hover: hover) and (pointer: fine) {
	.woocommerce-account form button.button:hover,
	.woocommerce-account form input.button:hover {
		box-shadow: var(--glass-cta-glow-hover);
		color: var(--glass-cta-text);
	}
}

/* --- Métodos de pago guardados (tarjetas) --- */
.woocommerce-account .woocommerce-MyAccount-paymentMethods td,
.woocommerce-account .woocommerce-MyAccount-paymentMethods th {
	padding: 12px 10px;
	border-bottom: 1px solid var(--glass-border);
}

.woocommerce-account .woocommerce-PaymentMethod--default {
	color: var(--brand-blue-deep, #004d93);
	font-weight: 600;
}

/* ============================================================
   Responsivo
   ============================================================ */

@media (max-width: 976px) {
	.woocommerce-account .woocommerce-MyAccount-content {
		padding: 20px;
	}
}

@media (max-width: 544px) {
	.woocommerce-account .woocommerce-MyAccount-navigation,
	.woocommerce-account .woocommerce-MyAccount-content {
		padding: 14px;
		border-radius: calc(var(--glass-radius) - 8px);
	}

	.woocommerce-account .woocommerce-Address-title {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ============================================================
   Fondo de patrón decorativo (2026-07)
   ============================================================ */

/*
 * Mismo "Patrón 1" (halo doble azul+ámbar) ya usado por defecto en las 7
 * plantillas de página, y ahora también en Carrito/Checkout (ver el mismo
 * bloque en cart-checkout.css) — acá sobre ".woocommerce-account", la clase
 * que WooCommerce ya agrega sola al <body> de Mi Cuenta. Ver ese archivo
 * para la explicación completa de por qué se usa "position: fixed" (no
 * hace falta tocar overflow/position del <body>).
 */
body.woocommerce-account::before,
body.woocommerce-account::after {
	content: "";
	position: fixed;
	z-index: -1;
	pointer-events: none;
	border-radius: 50%;
	filter: blur(70px);
	opacity: 0.4;
}

body.woocommerce-account::before {
	top: -100px;
	left: -80px;
	width: 380px;
	height: 380px;
	background: radial-gradient(circle at 35% 35%, var(--brand-blue-light, #5271ff), var(--brand-blue-deep, #004d93) 65%, transparent 75%);
}

body.woocommerce-account::after {
	bottom: -100px;
	right: -60px;
	width: 320px;
	height: 320px;
	background: radial-gradient(circle at 60% 60%, var(--brand-amber, #ffb923), transparent 75%);
}

@media (prefers-reduced-motion: reduce), (max-width: 544px) {
	body.woocommerce-account::before,
	body.woocommerce-account::after {
		opacity: 0.22;
	}
}