/* ==========================================================================
   Rancheando — myaccount.css
   Mi Cuenta: dashboard, órdenes, datos personales, direcciones.
   Colores siempre por tokens (CLAUDE.md §3).
   ========================================================================== */

/* ───────── LAYOUT (wrapper sidebar + contenido) ─────────
   WooCommerce mete nav + content dentro de div.woocommerce con floats.
   Acá lo convertimos en un grid limpio de 2 columnas (sidebar + contenido).
   El grid SOLO aplica logueado (el sidebar de Mi Cuenta solo existe logueado):
   lo disparamos con body.logged-in, NO con :has(), porque :has() dependía del
   orden de carga frente a los estilos nativos de WooCommerce y dejaba el nav
   apilado encima del contenido. En la pantalla de login (deslogueado) no hay
   body.logged-in → el form se centra a ancho propio sin columna fantasma. */
.woocommerce-account #main { background: var(--blanco); }
.woocommerce-account .woocommerce {
	max-width: 1320px;
	margin: 0 auto;
	padding: 72px 48px;
}
body.woocommerce-account.logged-in .woocommerce {
	display: grid;
	grid-template-columns: 232px minmax(0, 1fr);
	column-gap: 72px;
	row-gap: 0;
	align-items: start;
}
/* WooCommerce mete un <div.woocommerce-notices-wrapper> (a veces vacío) como PRIMER
   hijo de .woocommerce. Si dejamos el auto-placement, ese div ocupa la celda 1 y
   empuja el nav a la columna derecha y el contenido a la fila 2 / columna angosta
   (ese era el bug: todo "compactado a la izquierda"). Lo resolvemos asignando filas
   y columnas EXPLÍCITAS: notices ocupa toda la fila 1, nav la columna 1 y el
   contenido la columna 2, ambos en la fila 2. */
body.woocommerce-account.logged-in .woocommerce-notices-wrapper { grid-column: 1 / -1; grid-row: 1; margin: 0; }
body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation { grid-column: 1; grid-row: 2; }
body.woocommerce-account.logged-in .woocommerce-MyAccount-content { grid-column: 2; grid-row: 2; min-width: 0; }
/* Apaga los floats nativos de WooCommerce. */
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
	float: none;
	width: auto;
	margin: 0;
}
.woocommerce-account .woocommerce-MyAccount-content { max-width: 100%; }

/* ───────── SIDEBAR (menú Mi Cuenta) ───────── */
.woocommerce-account .woocommerce-MyAccount-navigation { position: sticky; top: calc(var(--nav-h) + 24px); }
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation li { margin: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation a { display: block; padding: 13px 16px; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--marron-med); font-weight: 500; text-decoration: none; transition: all 0.2s; border-left: 2px solid transparent; }
.woocommerce-account .woocommerce-MyAccount-navigation a:hover { color: var(--marron); background: var(--crema); }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { color: var(--marron); border-left-color: var(--marron); background: var(--crema); font-weight: 600; }

/* ───────── DASHBOARD ───────── */
.myaccount-dashboard { margin-bottom: 72px; }

.dashboard-welcome { margin-bottom: 44px; }
.dashboard-title { font-family: var(--font-display); font-size: clamp(28px, 3.5vw, 42px); color: var(--marron); line-height: 1.15; margin-bottom: 8px; }
.dashboard-sub { font-size: 14px; font-weight: 300; color: var(--texto-2); }

/* Tarjeta de puntos */
.dashboard-points-card { background: linear-gradient(135deg, var(--marron) 0%, #6F4E2E 100%); color: var(--crema); padding: 40px 36px; margin-bottom: 48px; border-radius: 0; }
.dashboard-points-card .card-content { }
.dashboard-points-card .card-label { font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--camel-light); font-weight: 600; margin-bottom: 12px; }
.dashboard-points-card .card-balance { font-family: var(--font-display); font-style: italic; font-size: clamp(42px, 6vw, 64px); color: var(--crema); line-height: 1; margin-bottom: 10px; }
.dashboard-points-card .card-value { font-size: 14px; font-weight: 300; color: rgba(255,255,255,.85); margin-bottom: 18px; }
.dashboard-points-card .card-link { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; color: var(--camel-light); transition: color 0.2s; }
.dashboard-points-card .card-link:hover { color: var(--crema); }

/* Grid de acciones rápidas */
.dashboard-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; margin-bottom: 64px; }
.dashboard-card { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: 168px; padding: 34px 24px; background: var(--crema); border: 1px solid var(--arena-med); text-decoration: none; color: inherit; transition: all 0.3s; }
.dashboard-card:hover { border-color: var(--marron); box-shadow: 0 8px 24px rgba(60,39,0,0.08); }
.dashboard-card .card-icon { font-size: 32px; margin-bottom: 12px; }
.dashboard-card h3 { font-family: var(--font-display); font-size: 18px; color: var(--marron); margin-bottom: 6px; }
.dashboard-card p { font-size: 12px; color: var(--texto-2); font-weight: 300; line-height: 1.5; }

/* Órdenes recientes */
.dashboard-orders { margin-bottom: 56px; padding-top: 32px; border-top: 1px solid var(--arena-med); }
.dashboard-orders .section-title { font-family: var(--font-display); font-size: 22px; color: var(--marron); margin-bottom: 24px; font-weight: 400; }
.orders-list { display: flex; flex-direction: column; gap: 16px; margin-bottom: 24px; }
.order-item { display: grid; grid-template-columns: 80px 1fr 120px 60px; gap: 16px; align-items: center; padding: 16px 20px; background: var(--crema); border: 1px solid var(--arena-med); transition: border-color 0.2s; }
.order-item:hover { border-color: var(--marron); }
.order-num { font-family: var(--font-display); font-size: 16px; font-weight: 600; color: var(--marron); }
.order-info { }
.order-date { font-size: 12px; color: var(--texto-2); margin-bottom: 4px; }
.order-status { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; padding: 4px 8px; background: var(--arena-med); color: var(--marron-med); border-radius: 2px; width: fit-content; }
.order-status.status-completed { background: rgba(46,80,68,0.15); color: var(--verde-ok); }
.order-status.status-processing { background: rgba(201,173,149,0.15); color: var(--camel); }
.order-status.status-pending { background: rgba(244,255,146,0.4); color: var(--marron-med); }
.order-total { font-size: 16px; font-weight: 600; color: var(--marron); text-align: right; }
.order-link { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; color: var(--camel); }
.order-link:hover { color: var(--marron); }
.link-all-orders { display: inline-block; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; color: var(--marron); padding: 12px 0; }
.link-all-orders:hover { color: var(--camel); }

/* Info */
.dashboard-info { }
.info-box { padding: 20px; background: var(--arena); border-left: 3px solid var(--camel); display: flex; gap: 16px; align-items: flex-start; }
.info-icon { font-size: 20px; flex-shrink: 0; }
.info-text { font-size: 13px; color: var(--texto-2); line-height: 1.6; }
.info-text strong { color: var(--marron); font-weight: 600; }

/* ───────── FORMULARIOS (Detalles de la cuenta + Direcciones) ─────────
   WooCommerce usa DOS convenciones de clases para los campos:
     · Detalles de la cuenta → <p class="woocommerce-form-row woocommerce-form-row--first|--last|--wide">
     · Direcciones           → <p class="form-row form-row-first|form-row-last|form-row-wide">
   El bug previo: el CSS trataba .form-row-first como un CONTENEDOR con grid, pero es
   un MODIFICADOR por campo. Acá hacemos grid en el CONTENEDOR de campos y colocamos
   cada <p> según su modificador, soportando las dos convenciones. */

/* Intro/encabezados del contenido de Mi Cuenta. */
.woocommerce-MyAccount-content > h2,
.woocommerce-MyAccount-content > h3 { font-family: var(--font-display); font-size: 26px; font-weight: 400; color: var(--marron); margin-bottom: 12px; }
.woocommerce-MyAccount-content > p { font-size: 14px; color: var(--texto-2); font-weight: 300; line-height: 1.6; margin-bottom: 24px; }

/* Campos: tipografía de label + inputs (común a ambos formularios). */
/* Sin margin por campo: el espaciado vertical lo da el row-gap del grid (uniforme). */
.woocommerce-account form .form-row,
.woocommerce-account form .woocommerce-form-row { margin: 0; }
.woocommerce-account form label { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--marron-med); font-weight: 600; display: block; margin-bottom: 8px; }
.woocommerce-account form label .required { color: var(--camel); text-decoration: none; }
.woocommerce-account form label.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.woocommerce-account form .woocommerce-input-wrapper { width: 100%; display: block; }
.woocommerce-account form input[type="text"],
.woocommerce-account form input[type="email"],
.woocommerce-account form input[type="tel"],
.woocommerce-account form input[type="number"],
.woocommerce-account form input[type="password"],
.woocommerce-account form select,
.woocommerce-account form .select2-container .select2-selection { width: 100%; padding: 12px 14px; border: 1px solid var(--arena-med); background: var(--blanco); font-family: Montserrat, sans-serif; font-size: 14px; color: var(--texto); transition: border-color 0.2s; box-sizing: border-box; }
.woocommerce-account form .select2-container .select2-selection--single { height: 46px; display: flex; align-items: center; }
.woocommerce-account form input:focus,
.woocommerce-account form select:focus { outline: none; border-color: var(--marron); box-shadow: 0 0 0 3px rgba(60,39,0,0.05); }
.woocommerce-account form em,
.woocommerce-account form .description { font-size: 12px; font-style: normal; color: var(--texto-2); font-weight: 300; display: block; margin-top: 6px; }

/* Contenedor de campos → grilla de 2 columnas. */
.woocommerce-account .woocommerce-EditAccountForm,
.woocommerce-account .woocommerce-address-fields__field-wrapper {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 24px;
	row-gap: 18px;
	align-items: start;
}
/* Colocación por modificador (las dos convenciones). */
.woocommerce-account .form-row-first,
.woocommerce-account .woocommerce-form-row--first { grid-column: 1; }
.woocommerce-account .form-row-last,
.woocommerce-account .woocommerce-form-row--last { grid-column: 2; }
.woocommerce-account .form-row-wide,
.woocommerce-account .woocommerce-form-row--wide,
.woocommerce-account .woocommerce-EditAccountForm > fieldset,
.woocommerce-account .woocommerce-EditAccountForm > p.woocommerce-form-row:not(.woocommerce-form-row--first):not(.woocommerce-form-row--last) { grid-column: 1 / -1; }
/* Los <div class="clear"> de los floats nativos ya no hacen falta. */
.woocommerce-account .woocommerce-EditAccountForm .clear,
.woocommerce-account .woocommerce-address-fields .clear { display: none; }

/* Fieldset de cambio de contraseña (Detalles de la cuenta). margin:0 para no duplicar el
   row-gap del grid (el fieldset es un item del grid). Los campos de contraseña viven DENTRO
   del fieldset (no son items del grid), así que su espaciado se da acá explícito. */
.woocommerce-account .woocommerce-EditAccountForm fieldset { margin: 0; padding: 28px 0 0; border: 0; border-top: 1px solid var(--arena-med); }
.woocommerce-account .woocommerce-EditAccountForm fieldset legend { font-family: var(--font-display); font-size: 20px; font-weight: 400; color: var(--marron); margin-bottom: 20px; padding: 0; }
.woocommerce-account .woocommerce-EditAccountForm fieldset .woocommerce-form-row,
.woocommerce-account .woocommerce-EditAccountForm fieldset .form-row { margin-bottom: 18px; }
.woocommerce-account .woocommerce-EditAccountForm fieldset .woocommerce-form-row:last-child,
.woocommerce-account .woocommerce-EditAccountForm fieldset .form-row:last-child { margin-bottom: 0; }

/* Botón "Guardar cambios" / "Guardar dirección". */
.woocommerce-account .woocommerce-EditAccountForm button,
.woocommerce-account .woocommerce-address-fields button,
.woocommerce-account .woocommerce-Address button { background: var(--marron); color: var(--crema); border: none; padding: 14px 36px; font-size: 12px; letter-spacing: 0.15em; text-transform: uppercase; font-weight: 600; cursor: pointer; transition: background 0.2s; margin-top: 8px; }
.woocommerce-account .woocommerce-EditAccountForm button:hover,
.woocommerce-account .woocommerce-address-fields button:hover { background: var(--marron-med); }

/* Toggle "mostrar/ocultar contraseña": WooCommerce lo inyecta como <button class="show-password-input">
   y lo dibuja con su FUENTE de íconos propia (content "\e010" en ::after). Como el tema no
   carga el CSS de WooCommerce, ese glyph cae en un carácter roto (macOS lo muestra como un
   emoji de ojo raro). Acá: neutralizamos la regla genérica de botones, MATAMOS el glyph de la
   fuente y ponemos nuestro propio ícono de ojo como SVG en color de marca (variante "ojo
   tachado" cuando la contraseña está visible, clase .display-password que agrega WooCommerce). */
.woocommerce-account form .password-input { position: relative; display: flex; align-items: center; width: 100%; }
.woocommerce-account form .password-input input { flex: 1 1 auto; width: 100%; padding-right: 46px; }
.woocommerce-account form button.show-password-input,
.woocommerce-account form .show-password-input {
	position: absolute; top: 0; bottom: 0; right: 0; width: 44px; height: auto; margin: 0; padding: 0;
	background-color: transparent; border: none; box-shadow: none; cursor: pointer;
	font-size: 0; line-height: 0; color: transparent; letter-spacing: 0; text-transform: none;
	background-repeat: no-repeat; background-position: center; background-size: 19px 19px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%238B6D5B' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
	opacity: 0.85; transition: opacity 0.2s;
}
/* Por si en producción sí cargara la fuente de WooCommerce: anula su glyph. */
.woocommerce-account form .show-password-input::after,
.woocommerce-account form .show-password-input::before { content: none !important; }
.woocommerce-account form button.show-password-input:hover,
.woocommerce-account form .show-password-input:hover { opacity: 1; background-color: transparent; }
/* Estado "contraseña visible": ojo tachado. */
.woocommerce-account form .show-password-input.display-password {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%233C2700' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-10-7-10-7a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 10 7 10 7a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24'/%3E%3Cline x1='1' y1='1' x2='23' y2='23'/%3E%3C/svg%3E");
}

/* FIX login/registro deslogueado: el mismo toggle de contraseña se rompía acá (el ojo
   quedaba ARRIBA del campo, a la altura del label). El wrapper .password-input lo crea el
   JS de WC (woocommerce.js: envuelve el input y appendea el botón); dentro del card de
   #customer_login el contexto de posición se perdía. Re-anclamos con mayor especificidad
   (#customer_login gana) y display:block para evitar cualquier quirk de flex. El fondo/ícono
   los hereda de la regla .show-password-input de arriba. */
.woocommerce-account #customer_login .password-input { position: relative; display: block; width: 100%; }
.woocommerce-account #customer_login .password-input input[type="password"] { width: 100%; padding-right: 46px; }
.woocommerce-account #customer_login .password-input .show-password-input,
.woocommerce-account #customer_login .password-input button.show-password-input { position: absolute; top: 0; bottom: 0; right: 0; height: auto; margin: 0; }

/* ───────── DIRECCIONES: vista de tarjetas (billing + shipping) ─────────
   WooCommerce trae estas columnas con float (.u-column1/.col-1 a la izquierda, .u-column2/
   .col-2 a la derecha). Sin el CSS de WC, esos floats quedan a medias y las dos tarjetas se
   ven ESCALONADAS (una arriba-derecha, otra abajo-izquierda). Acá forzamos grid de 2 columnas,
   matamos floats/anchos heredados y colocamos cada columna en su celda. */
.woocommerce-account .woocommerce-Addresses { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 0; align-items: stretch; }
.woocommerce-account .woocommerce-Addresses::before,
.woocommerce-account .woocommerce-Addresses::after { content: none !important; } /* mata el clearfix de WC */
.woocommerce-account .woocommerce-Addresses .u-column1,
.woocommerce-account .woocommerce-Addresses .u-column2,
.woocommerce-account .woocommerce-Addresses .col-1,
.woocommerce-account .woocommerce-Addresses .col-2 { width: auto !important; float: none !important; margin: 0; display: flex; }
.woocommerce-account .woocommerce-Addresses .u-column1,
.woocommerce-account .woocommerce-Addresses .col-1 { grid-column: 1; }
.woocommerce-account .woocommerce-Addresses .u-column2,
.woocommerce-account .woocommerce-Addresses .col-2 { grid-column: 2; }
.woocommerce-account .woocommerce-Address { height: 100%; flex: 1; display: flex; flex-direction: column; }
.woocommerce-account .woocommerce-Address address { flex: 1 1 auto; }
.woocommerce-account .woocommerce-Address .woocommerce-Address-title { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--arena-med); }
.woocommerce-account .woocommerce-Address .woocommerce-Address-title h3 { font-family: var(--font-display); font-size: 20px; font-weight: 400; color: var(--marron); margin: 0; }
.woocommerce-account .woocommerce-Address .woocommerce-Address-title .edit { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; color: var(--camel); white-space: nowrap; }
.woocommerce-account .woocommerce-Address .woocommerce-Address-title .edit:hover { color: var(--marron); }
.woocommerce-account .woocommerce-Address address { font-style: normal; font-size: 14px; line-height: 1.7; color: var(--texto); font-weight: 300; padding: 24px; background: var(--crema); border: 1px solid var(--arena-med); }

/* ───────── ÓRDENES ───────── */
.woocommerce-MyAccount-content table { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 40px; }
.woocommerce-MyAccount-content table thead { background: var(--arena-med); }
.woocommerce-MyAccount-content table th { text-align: left; font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--marron-med); font-weight: 600; padding: 12px 16px; }
.woocommerce-MyAccount-content table td { padding: 14px 16px; border-bottom: 1px solid var(--arena-med); color: var(--texto); }
.woocommerce-MyAccount-content table .woocommerce-orders-table__cell-order-number a { color: var(--marron); font-weight: 600; }
.woocommerce-MyAccount-content table .woocommerce-orders-table__cell-order-date { color: var(--texto-2); font-size: 12px; }
.woocommerce-MyAccount-content table .woocommerce-orders-table__cell-order-status mark { background: transparent; color: inherit; }

/* ───────── PANTALLA DE LOGIN / REGISTRO (deslogueado) ─────────
   Sin sidebar: el bloque de Google + las columnas login/registro se centran. */
.woocommerce-account .rnc-google-auth,
.woocommerce-account #customer_login { max-width: 940px; margin-left: auto; margin-right: auto; }

.woocommerce-account #customer_login.col2-set { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.woocommerce-account #customer_login.col1-set { max-width: 460px; }
.woocommerce-account #customer_login .u-column1,
.woocommerce-account #customer_login .u-column2 { width: auto; float: none; margin: 0; }
.woocommerce-account #customer_login h2 { font-family: var(--font-display); font-size: 26px; font-weight: 400; color: var(--marron); margin-bottom: 24px; padding-bottom: 14px; border-bottom: 1px solid var(--arena-med); }
.woocommerce-account #customer_login .woocommerce-form { background: var(--crema); border: 1px solid var(--arena-med); padding: 32px 30px; }
.woocommerce-account .woocommerce-form-login__rememberme { display: flex; align-items: center; gap: 8px; font-size: 12px; text-transform: none; letter-spacing: 0; color: var(--texto-2); font-weight: 400; }
.woocommerce-account .woocommerce-form-login__rememberme input { width: auto; }
.woocommerce-account .woocommerce-LostPassword { margin-top: 14px; font-size: 12px; }
.woocommerce-account .woocommerce-LostPassword a { color: var(--marron-med); text-decoration: underline; }

/* ───────── BOTÓN "CONTINUAR CON GOOGLE" ───────── */
.rnc-google-auth { margin-bottom: 40px; text-align: center; }
.rnc-google-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 12px;
	width: 100%; max-width: 460px; margin: 0 auto; padding: 14px 20px;
	background: var(--blanco); border: 1px solid var(--arena-med); color: var(--texto);
	font-family: Montserrat, sans-serif; font-size: 14px; font-weight: 500; text-decoration: none;
	transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.rnc-google-btn:hover { border-color: var(--marron-med); box-shadow: 0 4px 16px rgba(60,39,0,0.08); background: var(--crema); }
.rnc-google-icon { flex-shrink: 0; }
.rnc-google-divider { display: flex; align-items: center; gap: 16px; max-width: 460px; margin: 24px auto 0; color: var(--texto-2); }
.rnc-google-divider::before,
.rnc-google-divider::after { content: ""; flex: 1; height: 1px; background: var(--arena-med); }
.rnc-google-divider span { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 500; }
.rnc-google-msg { max-width: 460px; margin: 0 auto 20px; padding: 12px 16px; font-size: 13px; line-height: 1.5; border-left: 3px solid; text-align: left; }
.rnc-google-msg--info { background: var(--arena); border-left-color: var(--camel); color: var(--marron-med); }
.rnc-google-msg--error { background: rgba(160,44,44,0.06); border-left-color: #a02c2c; color: #a02c2c; }

/* ───────── RESPONSIVE ───────── */
/* Tablet ancho: achicamos el sidebar y el aire, pero mantenemos las 2 columnas. */
@media (max-width: 1100px) {
	.woocommerce-account .woocommerce { padding: 64px 36px; }
	body.woocommerce-account.logged-in .woocommerce { grid-template-columns: 200px minmax(0, 1fr); column-gap: 48px; }
	.dashboard-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
	/* El sidebar pasa arriba como barra de tabs horizontal scrollable. */
	.woocommerce-account .woocommerce { padding: 48px 32px; }
	body.woocommerce-account.logged-in .woocommerce { grid-template-columns: 1fr; gap: 32px; }
	/* Una sola columna: liberamos el placement explícito para que apilen (nav arriba, contenido abajo). */
	body.woocommerce-account.logged-in .woocommerce-notices-wrapper,
	body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation,
	body.woocommerce-account.logged-in .woocommerce-MyAccount-content { grid-column: auto; grid-row: auto; }
	.woocommerce-account .woocommerce-MyAccount-navigation { position: static; top: auto; border-bottom: 1px solid var(--arena-med); }
	.woocommerce-account .woocommerce-MyAccount-navigation ul { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; gap: 0; -webkit-overflow-scrolling: touch; }
	.woocommerce-account .woocommerce-MyAccount-navigation li { flex: 0 0 auto; }
	.woocommerce-account .woocommerce-MyAccount-navigation a { white-space: nowrap; border-left: none; border-bottom: 2px solid transparent; }
	.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { border-left: none; border-bottom-color: var(--marron); background: transparent; }
	.order-item { grid-template-columns: 70px 1fr auto; gap: 12px; }
	.order-total { text-align: left; }
	.order-link { grid-column: 1 / -1; text-align: right; }
	/* Formularios y direcciones: una sola columna apilada. */
	.woocommerce-account .woocommerce-EditAccountForm,
	.woocommerce-account .woocommerce-address-fields__field-wrapper,
	.woocommerce-account .woocommerce-Addresses { grid-template-columns: 1fr; }
	.woocommerce-account .form-row-first,
	.woocommerce-account .form-row-last,
	.woocommerce-account .woocommerce-form-row--first,
	.woocommerce-account .woocommerce-form-row--last { grid-column: 1; }
	/* Direcciones apiladas: las tarjetas vuelven a columna automática (no forzar la 2). */
	.woocommerce-account .woocommerce-Addresses .u-column1,
	.woocommerce-account .woocommerce-Addresses .u-column2,
	.woocommerce-account .woocommerce-Addresses .col-1,
	.woocommerce-account .woocommerce-Addresses .col-2 { grid-column: auto; }
	/* Login: las dos columnas se apilan. */
	.woocommerce-account #customer_login.col2-set { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 600px) {
	.woocommerce-account .woocommerce { padding: 32px 20px; }
	body.woocommerce-account.logged-in .woocommerce { gap: 28px; }
	.woocommerce-account #customer_login .woocommerce-form { padding: 24px 20px; }
	.dashboard-welcome { margin-bottom: 32px; }
	.dashboard-title { font-size: clamp(24px, 3vw, 32px); }
	.dashboard-grid { grid-template-columns: 1fr; gap: 12px; }
	.dashboard-card { padding: 18px 14px; }
	.dashboard-card h3 { font-size: 14px; }
	.dashboard-card .card-icon { font-size: 28px; margin-bottom: 8px; }
	.order-item { grid-template-columns: 1fr; }
	.order-num { font-size: 14px; }
	.order-status { display: inline-block; }
	.order-total { font-size: 14px; }
	.order-link { text-align: left; }
	.woocommerce-account .woocommerce-MyAccount-navigation a { padding: 12px 14px; font-size: 10px; }
	.info-box { flex-direction: row; gap: 12px; }
	.info-box .info-icon { font-size: 18px; }
	.info-text { font-size: 12px; }
}