/* Mi cuenta — solo se encola en is_account_page(). Tokens --bf-*, sin hex nuevos.
 * Mobile-first: la nav se apila a ancho completo <768 (paridad PROD: sin
 * acordeón ni <select>) y de ahí en arriba es columna flex del 25 % (cap
 * 323 px, medida PROD) junto al contenido.
 * Especificidad: los selectores que chocan con woocommerce-layout.css /
 * woocommerce.css se elevan anteponiendo .woocommerce (lección N-12 del checkout). */

/* Contenedor (QA R14 #2): el cap de lectura de .bf-entry__content (theme.css,
   75ch ≈ 794 px) encogía toda el área de cuenta — nav al 41 % y tarjetas de
   recomendación con imagen de 60 px frente al contenido ~1058 px de PROD.
   Mismo patrón que carrito/checkout: aquí se quita y el ancho lo manda
   .bf-container. */
.woocommerce-account .bf-entry__content { max-width: none; }

/* Columna de navegación + bloque de usuario. */
.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce .woocommerce-MyAccount-content { float: none; width: auto; }
.woocommerce-account .bf-account-user { text-align: center; padding: var(--bf-space-5) 0; }
.woocommerce-account .bf-account-user__avatar { border-radius: 50%; height: 96px; margin-inline: auto; width: 96px; }
.woocommerce-account .bf-account-user__name { color: var(--bf-color-ink); font-weight: 700; margin: var(--bf-space-3) 0 0; }
.woocommerce-account .bf-account-user__email { color: var(--bf-color-body); margin: var(--bf-space-1) 0 0; }
.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; }
.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation li { border-bottom: var(--bf-border-thin); }
/* El <a> de cada item se duplica con dos selectores: uno simple y otro con la
   clase core .woocommerce-MyAccount-navigation-link (la que usan las hojas de
   estilo de Woo para dar display:block/padding al enlace). Sin ganar esa
   posición el icono SVG quedaría fuera del alineado flex; el selector simple
   cubre además el caso de un filtro que retire la clase del enlace. */
.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation li a,
.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link a { align-items: center; color: var(--bf-color-ink); display: flex; gap: var(--bf-space-3); min-height: 41px; padding: var(--bf-space-2) var(--bf-space-1); text-decoration: none; }
.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation li a:hover,
.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link a:hover { color: var(--bf-color-accent); }
.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link.is-active a { font-weight: 700; }

/* Dashboard: título, saludo, 3 botones grandes y recomendaciones. */
.woocommerce-account .bf-account-welcome__title { color: var(--bf-color-ink); font-size: 1.5rem; margin: 0 0 var(--bf-space-4); }
.woocommerce-account .bf-account-welcome { color: var(--bf-color-body); margin: 0 0 var(--bf-space-6); }
.woocommerce-account .bf-account-dashboard-buttons { display: flex; flex-direction: column; gap: var(--bf-space-4); margin-bottom: var(--bf-space-8); }
.woocommerce-account .bf-account-dashboard-buttons__btn { align-items: center; background: var(--bf-color-accent); color: var(--bf-color-paper); display: flex; font-weight: 700; gap: var(--bf-space-2); justify-content: center; letter-spacing: var(--bf-ls-wide); min-height: 44px; padding: var(--bf-space-3) var(--bf-space-5); text-decoration: none; text-transform: uppercase; }
.woocommerce-account .bf-account-dashboard-buttons__btn:hover { opacity: .9; }
.woocommerce-account .bf-account-recommended__title { text-align: center; }
/* Tarjetas de recomendaciones: mismo look que la tarjeta del archive (woo.css
   .bf-woo-archive li.product), duplicado aquí vía selector propio sin tocar
   woo.css. Mismos tokens, sin hex nuevos. */
.woocommerce-account .bf-account-recommended ul.products li.product { background: var(--bf-color-paper); border: var(--bf-border-thin); min-width: 0; padding: var(--bf-space-3); position: relative; }
.woocommerce-account .bf-account-recommended ul.products li.product img { aspect-ratio: 1 / 1; height: auto; object-fit: contain; width: 100%; }
.woocommerce-account .woocommerce ul.products::before,
.woocommerce-account .woocommerce ul.products::after { display: none; }

/* Pedidos (clases modernas Woo 11) + estados vacíos. */
.woocommerce-account .woocommerce-orders-table { border-collapse: collapse; width: 100%; }
.woocommerce-account .woocommerce-orders-table thead th { color: var(--bf-color-ink); font-size: .8125rem; letter-spacing: var(--bf-ls-wide); text-transform: uppercase; }
.woocommerce-account .woocommerce-orders-table th, .woocommerce-account .woocommerce-orders-table td { border-bottom: var(--bf-border-thin); padding: var(--bf-space-3); text-align: left; }
.woocommerce-account .woocommerce-orders-table__cell-order-number a { color: var(--bf-color-ink); font-weight: 700; }
.woocommerce-account .woocommerce-orders-table .button { background: var(--bf-color-accent); border: 0; color: var(--bf-color-paper); display: inline-block; font-weight: 700; padding: var(--bf-space-2) var(--bf-space-4); text-decoration: none; }
.woocommerce-account .woocommerce-info { background: var(--bf-color-band); border: 0; border-left: var(--bf-form-left-border); color: var(--bf-color-ink); margin: 0 0 var(--bf-space-5); padding: var(--bf-space-4); position: relative; }
.woocommerce-account .woocommerce-info::before,
.woocommerce-account .woocommerce-message::before,
.woocommerce-account .woocommerce-error::before { display: none; }
.woocommerce-account a.woocommerce-Button.wc-forward, .woocommerce-account .woocommerce-button.button { background: var(--bf-color-accent); border: 0; color: var(--bf-color-paper); display: inline-block; font-weight: 700; letter-spacing: var(--bf-ls-wide); padding: var(--bf-space-3) var(--bf-space-5); text-decoration: none; text-transform: uppercase; }

/* Direcciones. */
.woocommerce-account .woocommerce-Addresses { display: flex; flex-wrap: wrap; gap: var(--bf-space-5); }
.woocommerce-account .woocommerce-Address { border: var(--bf-border-thin); flex: 1 1 100%; padding: var(--bf-space-5); }
.woocommerce-account .woocommerce-Address-title { align-items: baseline; display: flex; flex-wrap: wrap; justify-content: space-between; row-gap: var(--bf-space-2, 8px); }
/* Título de tarjeta de dirección: h2/h3 según versión de Woo. */
.woocommerce-account .woocommerce-Addresses .woocommerce-Address-title h2,
.woocommerce-account .woocommerce-Addresses .woocommerce-Address-title h3 { color: var(--bf-color-ink); font-size: var(--bf-font-h3, 1.5rem); margin: 0; }
.woocommerce-account .woocommerce-Addresses .woocommerce-Address-title h2,
.woocommerce-account .woocommerce-Addresses .woocommerce-Address-title h3 { flex: 1 1 auto; min-width: 0; }
/* El enlace de dirección debe conservar el aspecto de texto plano de PROD. */
.woocommerce-account .woocommerce-Addresses .woocommerce-Address-title a.edit { background: none; border: 0; color: var(--bf-color-ink); display: inline; font-weight: 400; line-height: normal; padding: 0; text-decoration: none; text-transform: uppercase; white-space: nowrap; }

/* Formularios (direcciones, detalles, login, registro, lost-password, pagos). */
.woocommerce-account .form-row { margin: 0 0 var(--bf-space-4); }
.woocommerce-account .form-row label { color: var(--bf-color-body); display: block; margin-bottom: var(--bf-space-1); }
.woocommerce-account .form-row input.input-text, .woocommerce-account .form-row textarea, .woocommerce-account .form-row select { background: var(--bf-color-paper); border: var(--bf-border-thin); border-radius: 0; color: var(--bf-color-ink); min-height: 37px; padding: var(--bf-space-2); width: 100%; }
.woocommerce-account .form-row .required { color: var(--bf-color-accent); text-decoration: none; }
.woocommerce-account .woocommerce-password-wrapper { position: relative; }
.woocommerce-account .show-password-input { position: absolute; right: var(--bf-space-2); top: 2.4rem; }
.woocommerce-account .form-row-first, .woocommerce-account .form-row-last { width: 100%; }
.woocommerce-account .woocommerce-Buttons .button, .woocommerce-account button[name=save_address], .woocommerce-account button[name=save_account_details] { background: var(--bf-color-accent); border: 0; color: var(--bf-color-paper); font-weight: 700; letter-spacing: var(--bf-ls-wide); min-height: 44px; padding: var(--bf-space-3) var(--bf-space-6); text-transform: uppercase; }
.woocommerce-account #customer_login .u-column1, .woocommerce-account #customer_login .u-column2 { border: var(--bf-border-thin); margin-bottom: var(--bf-space-5); padding: var(--bf-space-5); }
/* Core pinta su propio marco en form.login/form.register (border + padding +
   radio). El marco de la fase lo pone la columna de arriba, así que aquí se
   neutraliza (0-3-1 gana a los 0-2-1 del core) para no duplicar el recuadro. */
.woocommerce-account .woocommerce form.login, .woocommerce-account .woocommerce form.register { background: transparent; border: 0; border-radius: 0; margin: 0; padding: 0; }
.woocommerce-account #customer_login h2 { color: var(--bf-color-ink); font-style: italic; }
.woocommerce-account .woocommerce-ResetPassword, .woocommerce-account .woocommerce-form-login, .woocommerce-account .woocommerce-form-register { max-width: 560px; }
.woocommerce-account .woocommerce-privacy-policy-text { font-size: .875rem; }
.woocommerce-account :focus-visible { outline: var(--bf-focus-outline); outline-offset: var(--bf-focus-offset); }

@media (min-width: 768px) {
	.woocommerce-account .form-row-first { float: left; width: 48%; }
	.woocommerce-account .form-row-last { float: right; width: 48%; }
	.woocommerce-account .woocommerce-Addresses .woocommerce-Address { flex-basis: 46%; }
	.woocommerce-account #customer_login { display: flex; gap: var(--bf-space-6); }
	.woocommerce-account #customer_login .u-column1, .woocommerce-account #customer_login .u-column2 { flex: 1 1 50%; }
	.woocommerce-account .bf-account-dashboard-buttons { flex-direction: row; }
	.woocommerce-account .bf-account-dashboard-buttons__btn { flex: 1 1 0; }
	/* Layout nav+contenido (QA R14 #2): flex explícito sobre div.woocommerce,
	   cuyos hijos directos son la columna de nav (override de navigation.php)
	   y .woocommerce-MyAccount-content. El guard :has(> .bf-account-nav-column)
	   lo limita a la vista logueada: el /my-account/ anónimo imprime ahí
	   #customer_login (sus columnas las gestiona la regla de arriba) y no debe
	   volverse fila. flex-wrap + la regla del wrapper de notices son red de
	   seguridad si Woo emite avisos como hermanos. El basis 0 evita que el
	   grid de recomendaciones fuerce el contenido a una segunda línea. Sustituye al antiguo float
	   323px/margin-355 de ≥1024, que con el cap de 794 px dejaba la nav al 41 %.
	   Cap 323 px = medida exacta de la columna en PROD (~323/1410). */
	.woocommerce-account .woocommerce:has(> .bf-account-nav-column) { align-items: flex-start; column-gap: var(--bf-space-8); display: flex; flex-wrap: wrap; }
	/* El clearfix de core no tiene efecto útil dentro de flex/grid: sus pseudo-
	   elementos se convierten en items. */
	.woocommerce-account .woocommerce::before,
	.woocommerce-account .woocommerce::after { display: none; }
	.woocommerce-account .woocommerce > .woocommerce-notices-wrapper { flex: 0 0 100%; }
	.woocommerce-account .bf-account-nav-column { flex: 0 0 25%; max-width: 323px; }
	.woocommerce-account .woocommerce .woocommerce-MyAccount-content { flex: 1 1 0; min-width: 0; width: auto; }
}