/*
 * Mi cuenta - invitado (etapa 14.08, tanda 1: iniciar sesion + tarjeta
 * "Compraste sin cuenta?").
 *
 * Copiado propiedad por propiedad de `_project/prototipo/mi-cuenta.html`
 * (bloque <style> propio de esa pagina) y de `_project/prototipo/css/style.css`
 * (`.btn`, `.field`, `.auth-card` y vecinos), mismo criterio que la tarjeta de
 * producto: donde el prototipo ya decidio un valor, se copia tal cual, no la
 * version mas cercana entre los tokens neutros del tema.
 *
 * Los colores/tamanios reutilizan las variables --pc-* (definidas en
 * woocommerce.css sobre `.woocommerce-page`, presente tambien en la pagina de
 * Mi cuenta) en vez de declarar un juego nuevo: son los mismos valores del
 * prototipo, ya con nombre propio para no chocar con --wp--preset--*.
 *
 * `--pc-fs-sm` vale 1rem (no los 0.875rem del prototipo): correccion de
 * accesibilidad ya aprobada en la etapa 08, se mantiene igual aca para no
 * volver a un tamanio de letra mas chico que el piso de legibilidad.
 *
 * Formulario: los campos (`username`, `password`, nonce) son los reales de
 * WooCommerce (`woocommerce/myaccount/form-login.php` del tema), solo
 * reordenados dentro de `.field`/`.btn` en vez de los `<p class="form-row">`
 * por defecto -el login sigue procesandolo WooCommerce, esto es nomas la
 * pintura-.
 *
 * Tanda 2 (registro en 2 pasos: datos y contraseña): agrega el enlace
 * "¿No tenés cuenta?" y el popup `#registerModal`. Se aparta a proposito del
 * `#registerModal` del prototipo, que traia un primer paso "Como comprás"
 * (consumidor/comercio) para dar precio mayorista solo con cuenta -ver la
 * nota completa en `woocommerce/myaccount/form-login.php`-; el resto de las
 * propiedades (`.register-modal`, `.reg-step-*`) si son copia del prototipo.
 * El formulario lo procesa WooCommerce de verdad (`woocommerce-form-register`,
 * mismo nonce); el wizard de pasos es solo la capa visual, en
 * `account-register.js`.
 */

/*
 * ============ Etapa 14.14f: sin sesion, sin cabecera/pie ============
 *
 * `.myaccount-guest-body` la agrega `inc/account.php`
 * (`add_myaccount_guest_body_class()`) solo cuando NO hay sesion iniciada en
 * "Mi cuenta" -el panel ya logueado (pedidos, direcciones) sigue con la
 * cabecera y el pie normales, decision de Adriano del 04/09/2026-.
 */
.myaccount-guest-body header.wp-block-template-part,
.myaccount-guest-body footer.wp-block-template-part,
.myaccount-guest-body .wp-block-post-title,
.myaccount-guest-body .wp-block-post-featured-image {
	display: none;
}

/*
 * El tema le pone `margin-top:24px` a `main` Y a `.entry-content` -pensado
 * para separar el contenido de la cabecera normal-. Con la cabecera
 * escondida (arriba) ese margen se acumula solo, como espacio muerto arriba
 * de todo -en celular era un hueco enorme antes de "A&N Distribuciones",
 * "no tiene sentido" (reporte de Adriano, 04/09/2026, con captura). Sin la
 * cabecera, no hace falta ningun margen que la separe de nada.
 */
.myaccount-guest-body main,
.myaccount-guest-body .entry-content {
	margin-top: 0;
}

/*
 * WooCommerce trae su propia hoja de estilos "generica para cualquier tema"
 * (`woocommerce-blocktheme.css`, del plugin, no se puede editar) con
 * `.woocommerce-account main .woocommerce { max-width: 1000px }` -pensada
 * para temas sin su propio ancho de contenido definido. Ese limite le ganaba
 * al `max-width:1100px` de `.myaccount-auth-shell` de aca abajo (el shell es
 * HIJO de ese `.woocommerce`, asi que quedaba apretado a 1000px sin importar
 * lo que dijera esta hoja) -encontrado con las herramientas del navegador
 * (`CSS.getMatchedStylesForNode`), no adivinando: la unica forma de estar
 * seguro de que una regla ajena esta ganando es verla en la lista de reglas
 * que el navegador aplica de verdad. Por eso Mi cuenta quedaba mas angosta y
 * con la ilustracion descuadrada contra Seguimiento y el ingreso, que no
 * tienen ese contenedor (reporte de Adriano, 04/09/2026). `body` + 2 clases
 * le gana a la regla de WooCommerce (2 clases) sin depender del orden de
 * carga de las hojas de estilo.
 */
body.woocommerce-account main .woocommerce {
	max-width: none;
}

/*
 * `.account-auth-solo`/`.woocommerce-form-row` traen `margin:0 auto` para
 * poder centrarse solos en la pantalla CHICA (donde no hay columna de
 * ilustracion al lado). En escritorio, adentro de `.auth-panel` (grilla
 * compartida, `auth-shell.css`), ese margen automatico gana la alineacion
 * aunque el padre diga `align-items:flex-start` -sin este reset quedaban
 * centrados en su propia columna en vez de pegados contra el icono de inicio
 * de arriba.
 */
.auth-panel .account-auth-solo,
.auth-panel .woocommerce-form-row,
.auth-panel .woocommerce-ResetPassword {
	margin-left: 0;
	margin-right: 0;
}

/*
 * `width:100%` explicito, no solo `max-width` -mismo bug que se encontro y
 * corrigio en Seguimiento (`.ace-tracking`, `tracking.css`, 04/09/2026): sin
 * esto, dentro de `.auth-panel` (`display:flex;flex-direction:column`,
 * auth-shell.css), el navegador encoge esta caja al ancho de su contenido en
 * vez de estirarla hasta 440px en pantallas de ancho intermedio (tablet).
 */
.woocommerce-account .account-auth-solo {
	width: 100%;
	max-width: 440px;
	margin: 0;
	box-sizing: border-box;
}

/*
 * El tamaño/color/borde de `.auth-card` ya sale de `auth-shell.css`
 * (compartida con Seguimiento y el ingreso de WordPress); aca solo queda lo
 * que es propio de ESTA tarjeta en particular (el `margin-bottom` antes de
 * "No tenés cuenta?", debajo).
 */
.woocommerce-account .auth-card {
	margin-bottom: 24px;
}

/*
 * WooCommerce de fabrica le pone SU PROPIO marco a cualquier
 * `form.login`/`form.register`/`form.checkout_coupon` (`.woocommerce
 * form.login{border:1px solid ...}` en woocommerce.css) -pensado para cuando
 * ese formulario se muestra suelto, sin tarjeta propia alrededor. Aca
 * el formulario ya vive adentro de `.auth-card`, que es SU marco -el de
 * fabrica quedaba de mas, un cuadro adentro de otro cuadro.
 */
.woocommerce-account .auth-card form.woocommerce-form-login {
	border: none;
	margin: 0;
	padding: 0;
}

.woocommerce-account .auth-card h2 {
	font-size: 1.125rem;
	margin: 0 0 6px;
}

.woocommerce-account .auth-card .sub {
	font-size: var(--pc-fs-sm);
	color: var(--pc-dark-gray);
	margin: 0 0 18px;
}

.woocommerce-account .auth-card .form-links {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	font-size: var(--pc-fs-sm);
	margin-top: 12px;
}

.woocommerce-account .auth-card .form-links label {
	display: flex;
	gap: 6px;
	align-items: center;
	font-weight: 400;
	color: var(--pc-dark-gray);
}

.woocommerce-account .auth-card .form-links input[type="checkbox"] {
	width: 16px;
	height: 16px;
}

/*
 * El prototipo no define un color propio para este enlace (`.auth-card
 * .form-links` no tiene regla `a`): hereda el gris oscuro del texto de
 * alrededor y no lleva subrayado (`a{color:inherit;text-decoration:none}`
 * es la base de _project/prototipo/css/style.css). Sin este override, el
 * tema le pone el azul-gris neutro de `theme.json` con subrayado -el color
 * de enlace generico del sitio, no el del prototipo-.
 */
.woocommerce-account .auth-card .form-links a {
	color: inherit;
	text-decoration: none;
}

.woocommerce-account .auth-card .form-links a:hover {
	color: var(--pc-black);
	text-decoration: underline;
}

/* =================== Botones (copiados de .btn del prototipo) =================== */
.woocommerce-account .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border: 2px solid transparent;
	border-radius: var(--pc-radius-pill);
	padding: 12px 24px;
	font-weight: 500;
	font-size: var(--pc-fs-sm);
	font-family: inherit;
	min-height: 44px;
	cursor: pointer;
	text-decoration: none;
	transition: transform var(--pc-dur-fast) var(--pc-ease-out), background var(--pc-dur-fast), box-shadow var(--pc-dur-fast);
}

.woocommerce-account .btn:hover {
	text-decoration: none;
}

.woocommerce-account .btn:active {
	transform: scale(0.97);
}

.woocommerce-account .btn-primary {
	background: var(--pc-light-gray);
	color: var(--pc-dark-gray);
}

.woocommerce-account .btn-primary:hover {
	background: var(--pc-dark-gray);
	color: var(--pc-white);
}

.woocommerce-account .btn-outline {
	background: transparent;
	border-color: var(--pc-gray);
	color: var(--pc-dark-gray);
}

.woocommerce-account .btn-outline:hover {
	background: var(--pc-dark-gray);
	border-color: var(--pc-dark-gray);
	color: var(--pc-white);
}

.woocommerce-account .btn-block {
	width: 100%;
}

.woocommerce-account .btn .icon-sm {
	width: 16px;
	height: 16px;
}

.woocommerce-account .btn-dark {
	background: var(--pc-light-gray);
	color: var(--pc-dark-gray);
}

.woocommerce-account .btn-dark:hover {
	background: var(--pc-dark-gray);
	color: var(--pc-white);
}

/* =================== Enlace "¿No tenés cuenta?" =================== */
.woocommerce-account .auth-switch {
	text-align: center;
	font-size: var(--pc-fs-sm);
	color: var(--pc-dark-gray);
	margin-top: 18px;
}

.woocommerce-account .link-btn {
	background: none;
	border: none;
	padding: 0;
	font: inherit;
	font-weight: 600;
	color: var(--pc-primary);
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.woocommerce-account .link-btn:hover {
	color: var(--pc-primary-dark);
}

/* =================== Popup de registro por pasos =================== */
.woocommerce-account .modal-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(17, 17, 17, 0.65);
	z-index: 300;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 16px;
}

.woocommerce-account .modal-backdrop.is-open {
	display: flex;
}

.woocommerce-account .register-modal {
	position: relative;
	background: var(--pc-white);
	border-radius: var(--pc-radius-lg);
	max-width: 520px;
	width: 100%;
	max-height: min(680px, 92vh);
	overflow-y: auto;
	box-shadow: var(--pc-shadow-popover);
	animation: ace-account-pop-in var(--pc-dur-slow) var(--pc-ease-out);
}

@keyframes ace-account-pop-in {
	from {
		opacity: 0;
		transform: scale(0.92) translateY(12px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.woocommerce-account .reg-modal-close {
	position: absolute;
	top: 14px;
	right: 14px;
	background: var(--pc-bg);
	border: none;
	border-radius: 50%;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
	color: var(--pc-dark-gray);
	cursor: pointer;
}

.woocommerce-account .reg-modal-close:hover {
	background: var(--pc-light-gray);
}

.woocommerce-account .reg-modal-head {
	padding: 24px 24px 0;
}

.woocommerce-account .reg-modal-head h2 {
	font-size: 1.375rem;
	margin: 0 0 4px;
	padding-right: 36px;
}

.woocommerce-account .reg-modal-head .sub {
	font-size: var(--pc-fs-sm);
	color: var(--pc-dark-gray);
	margin: 0 0 24px;
}

.woocommerce-account .reg-steps-nav {
	display: flex;
	align-items: flex-start;
	margin-bottom: 24px;
}

.woocommerce-account .reg-step-dot {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	flex: 0 0 auto;
	width: 84px;
	text-align: center;
}

.woocommerce-account .reg-step-dot .dot-circle {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--pc-bg);
	border: 1.5px solid var(--pc-light-gray);
	color: var(--pc-gray);
	transition: background var(--pc-dur-fast), border-color var(--pc-dur-fast), color var(--pc-dur-fast);
}

.woocommerce-account .reg-step-dot .dot-circle svg {
	width: 18px;
	height: 18px;
}

.woocommerce-account .reg-step-dot .dot-label {
	font-size: 11px;
	font-weight: 500;
	color: var(--pc-gray);
	line-height: 1.2;
}

.woocommerce-account .reg-step-dot.is-active .dot-circle {
	background: var(--pc-primary);
	border-color: var(--pc-primary);
	color: var(--pc-white);
}

.woocommerce-account .reg-step-dot.is-active .dot-label {
	color: var(--pc-black);
}

.woocommerce-account .reg-step-dot.is-done .dot-circle {
	background: var(--pc-black);
	border-color: var(--pc-black);
	color: var(--pc-white);
}

.woocommerce-account .reg-step-dot.is-done .dot-label {
	color: var(--pc-dark-gray);
}

.woocommerce-account .reg-step-line {
	flex: 1 1 auto;
	height: 1.5px;
	background: var(--pc-light-gray);
	margin-top: 20px;
}

.woocommerce-account .reg-step-line.is-done {
	background: var(--pc-black);
}

.woocommerce-account .reg-step {
	padding: 0 24px 24px;
}

.woocommerce-account .reg-step-actions {
	display: flex;
	gap: 10px;
	margin-top: 6px;
	position: sticky;
	bottom: 0;
	z-index: 2;
	background: var(--pc-white);
	padding: 10px 0 2px;
	box-shadow: 0 -8px 16px -10px rgba(0, 0, 0, 0.12);
}

.woocommerce-account .reg-step-actions .btn {
	flex: 1;
}

.woocommerce-account .reg-step-note {
	font-size: 12px;
	color: var(--pc-dark-gray);
	margin-top: 10px;
}

/*
 * Mismo marco de fabrica de WooCommerce que en `.auth-card` de arriba
 * (`.woocommerce form.register{border:1px solid ...}`), aca sin ninguna
 * tarjeta propia alrededor -quedaba como un recuadro suelto sin sentido
 * dentro del popup.
 */
.woocommerce-account .register-modal form.woocommerce-form-register {
	border: none;
	margin: 0;
	padding: 0;
}

/* Campos del paso 2/3: mismas reglas de `.field` que el prototipo, no las de
 * `.auth-card .field` (el register-modal no es una `.auth-card`). */
.woocommerce-account .register-modal .field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 14px;
}

.woocommerce-account .register-modal .field label {
	font-size: var(--pc-fs-sm);
	font-weight: 400;
}

.woocommerce-account .register-modal .field input:not([type="radio"]) {
	height: 44px;
	padding: 0 14px;
	border: 1px solid var(--pc-light-gray);
	border-radius: var(--pc-radius-md);
	font-size: var(--pc-fs-sm);
	font-family: inherit;
	color: var(--pc-black);
	background: var(--pc-white);
	width: 100%;
}

.woocommerce-account .register-modal .field input:not([type="radio"]):focus {
	outline: none;
	border-color: var(--pc-primary);
}

/*
 * El clearfix clasico de WooCommerce (`.woocommerce form .form-row::before,
 * ::after{content:" ";display:table}`, pensado para el `float` de
 * `.form-row-first`/`.form-row-last`) convierte esos pseudo-elementos en
 * items reales de esta grilla -invisibles pero ocupan casilla-, corriendo
 * "Nombre" a la columna 2 y "Apellido" a la fila 2 en vez de quedar los dos
 * en la misma fila. Encontrado revisando en pantalla, no por lectura de
 * codigo: se veian en diagonal. Se anulan porque una grilla no necesita
 * clearfix -no hay flotantes que contener-.
 */
.woocommerce-account .form-row.two-col::before,
.woocommerce-account .form-row.two-col::after {
	content: none;
	display: none;
}

.woocommerce-account .form-row.two-col {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

@media (max-width: 520px) {
	.woocommerce-account .form-row.two-col {
		grid-template-columns: 1fr;
	}
}

/*
 * =================== Panel de cuenta logueado (tanda 3) ===================
 * Copiado de `_project/prototipo/mi-cuenta.html` (`.account-layout`,
 * `.account-nav`, `.account-panel`, `.order-row`), pero sobre el marcado
 * NATIVO de WooCommerce (menu `woocommerce/myaccount/navigation.php` y
 * envoltorio `my-account.php`, ambos sobreescritos en este tema; contenido de
 * cada endpoint -pedidos, direcciones, datos- sin tocar). El prototipo usaba
 * <button> propios con JS para cambiar de panel; aca son <a> reales del menu
 * de WooCommerce, uno por pagina, asi que solo cambia el selector, no el
 * dibujo.
 */
.woocommerce-account .account-layout {
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: 32px;
	align-items: start;
}

@media (max-width: 800px) {
	.woocommerce-account .account-layout {
		grid-template-columns: 1fr;
	}
}

/*
 * WooCommerce core (`woocommerce-layout.css`) da por sentado su propio
 * layout de 2 columnas con flotantes: `.woocommerce-MyAccount-navigation{
 * float:left;width:30%}` y `.woocommerce-MyAccount-content{float:right;
 * width:68%}`. Esas reglas siguen aplicando aunque el elemento sea celda de
 * ESTA grilla -"float" no ocupa lugar propio en un grid, pero el ancho en
 * porcentaje si se sigue resolviendo contra el ancho de la celda (220px),
 * asi que "30%" da 66px reales en vez de 220px-. Efecto real visto en
 * pantalla: el menu quedaba comprimido a un cuadradito que recortaba
 * "Pedidos" a "Pe" y los demas items sin lugar para su icono. Se anulan las
 * dos reglas -mismo criterio que ya usa WooCommerce en su propia hoja de
 * pantalla chica (`woocommerce-smallscreen.css`), aca aplicado siempre
 * porque la grilla ya resuelve las dos columnas.
 */
.woocommerce-account .account-layout .woocommerce-MyAccount-navigation,
.woocommerce-account .account-layout .woocommerce-MyAccount-content {
	float: none;
	width: 100%;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	display: flex;
	flex-direction: column;
	gap: 4px;
	list-style: none;
	margin: 0;
	padding: 0;
}

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

.woocommerce-account .woocommerce-MyAccount-navigation a {
	display: flex;
	align-items: center;
	gap: 10px;
	border-radius: 8px;
	padding: 11px 14px;
	font-weight: 400;
	font-size: var(--pc-fs-sm);
	color: var(--pc-dark-gray);
	min-height: 44px;
	text-decoration: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation a:hover {
	background: var(--pc-bg);
}

.woocommerce-account .woocommerce-MyAccount-navigation a[aria-current="page"] {
	background: var(--pc-dark-gray);
	color: var(--pc-white);
}

/*
 * Boton de "Cerrar sesion" en rojo primario, igual que `.account-nav
 * button.danger` del prototipo: se detecta por la clase que ya agrega
 * `wc_get_account_menu_item_classes()` en el <li>, no hay que agregar nada
 * propio en la plantilla.
 */
.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout a {
	color: var(--pc-primary);
}

.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout a[aria-current="page"] {
	background: var(--pc-dark-gray);
	color: var(--pc-white);
}

.woocommerce-account .woocommerce-MyAccount-content {
	background: var(--pc-white);
	border: 1px solid var(--pc-light-gray);
	border-radius: var(--pc-radius-md);
	padding: 24px;
	min-height: 280px;
}

.woocommerce-account .woocommerce-MyAccount-content > h2:first-child,
.woocommerce-account .woocommerce-MyAccount-content > h3:first-child {
	margin-top: 0;
}

.woocommerce-account .woocommerce-MyAccount-content h2 {
	font-size: 1.125rem;
	margin: 0 0 16px;
}

/* ---------- Botones nativos de WooCommerce dentro del panel ---------- */
.woocommerce-account .woocommerce-MyAccount-content .button,
.woocommerce-account .woocommerce-MyAccount-content button[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border: none;
	border-radius: var(--pc-radius-pill);
	padding: 12px 24px;
	font-weight: 500;
	font-size: var(--pc-fs-sm);
	font-family: inherit;
	min-height: 44px;
	cursor: pointer;
	text-decoration: none;
	background: var(--pc-light-gray);
	color: var(--pc-dark-gray);
	transition: background var(--pc-dur-fast), color var(--pc-dur-fast), transform var(--pc-dur-fast);
}

.woocommerce-account .woocommerce-MyAccount-content .button:hover,
.woocommerce-account .woocommerce-MyAccount-content button[type="submit"]:hover {
	background: var(--pc-dark-gray);
	color: var(--pc-white);
	text-decoration: none;
}

.woocommerce-account .woocommerce-MyAccount-content .button:active,
.woocommerce-account .woocommerce-MyAccount-content button[type="submit"]:active {
	transform: scale(0.97);
}

/* ---------- Pedidos (orders.php nativo) ---------- */
.woocommerce-account table.woocommerce-orders-table {
	width: 100%;
	border-collapse: collapse;
}

.woocommerce-account table.woocommerce-orders-table th {
	text-align: left;
	font-size: var(--pc-fs-xs);
	font-weight: 500;
	color: var(--pc-dark-gray);
	padding: 8px 10px;
	border-bottom: 1px solid var(--pc-light-gray);
}

.woocommerce-account table.woocommerce-orders-table td {
	padding: 14px 10px;
	border-bottom: 1px solid var(--pc-light-gray);
	font-size: var(--pc-fs-sm);
}

.woocommerce-account table.woocommerce-orders-table tr:last-child td {
	border-bottom: none;
}

.woocommerce-account .woocommerce-orders-table__cell-order-status {
	font-size: var(--pc-fs-xs);
	font-weight: 400;
}

/*
 * Nada de `display:flex` aca: este selector apunta al `<td>` de la fila
 * (`orders.php` de WooCommerce), y un `<td>` con `display:flex` deja de
 * comportarse como celda de tabla -el navegador arma una caja anonima
 * alrededor para sostener la fila, y esa caja de mas es la "linea doble"
 * que veia Adriano entre pedidos-. El acomodo en una sola linea sale de
 * cada boton (`display:inline-flex` mas abajo) y el espacio entre ellos,
 * de su propio margen: no hace falta tocar el `display` de la celda.
 */
.woocommerce-account .woocommerce-orders-table__cell-order-actions {
	white-space: nowrap;
}

.woocommerce-account .woocommerce-orders-table__cell-order-actions .button {
	padding: 8px 16px;
	min-height: 36px;
	font-size: var(--pc-fs-xs);
}

/*
 * "Ver", "Ver seguimiento" y "Repetir pedido": pedido de Adriano del 03/09
 * de pasarlos de boton con texto a boton solo-icono, uno al lado del otro.
 * Mismo circulo gris que ya usa el resto del sitio para botones de icono
 * (ver `.wc-block-cart-item__remove-link` en woocommerce.css): fondo gris
 * claro en reposo, se oscurece al tocar. El texto ("Ver", "Ver
 * seguimiento", "Repetir pedido") no se borra: sigue en el DOM para el
 * lector de pantalla, solo se achica a 0 para que no se vea; el nombre
 * accesible real lo da el atributo `aria-label` que WooCommerce ya agrega
 * a cada accion.
 *
 * Circulo perfecto: la seccion 4 de foundations.css (area minima tocable)
 * le pone a todo boton `min-inline-size:2.75rem` (44px) ademas de
 * `min-block-size`. Fijar solo `min-height:0` -como en el primer intento-
 * dejaba el ancho minimo en 44px contra un alto de 36px: salia ovalo, no
 * circulo. Hay que pisar el minimo en los dos ejes.
 *
 * Iconos Lucide (lucide.dev), pedido explicito: "Eye" para Ver, "ScanBox"
 * para Ver seguimiento, "ShoppingCartPlus" para Repetir pedido. Se dibujan
 * como mascara CSS -no como archivo aparte- para heredar el color del
 * boton, mismo criterio que el icono de basurero de "Quitar producto".
 */
.woocommerce-account .woocommerce-orders-table__cell-order-actions .button.view,
.woocommerce-account .woocommerce-orders-table__cell-order-actions .button.ace_seguimiento,
.woocommerce-account .woocommerce-orders-table__cell-order-actions .button.order-again {
	position: relative;
	display: inline-block;
	text-align: left;
	vertical-align: middle;
	margin-inline-end: 8px;
	margin-block-end: 0;
	width: 36px;
	height: 36px;
	min-width: 0;
	min-height: 0;
	min-inline-size: 0;
	min-block-size: 0;
	padding: 0;
	border-radius: var(--pc-radius-pill);
	background: var(--pc-light-gray);
	color: var(--pc-dark-gray);
	font-size: 0;
	line-height: 0;
	overflow: hidden;
	transition: background var(--pc-dur-fast), color var(--pc-dur-fast);
}

.woocommerce-account .woocommerce-orders-table__cell-order-actions .button.view:hover,
.woocommerce-account .woocommerce-orders-table__cell-order-actions .button.ace_seguimiento:hover,
.woocommerce-account .woocommerce-orders-table__cell-order-actions .button.order-again:hover {
	background: var(--pc-dark-gray);
	color: var(--pc-white);
}

/*
 * Centrado por posicion absoluta (`inset:0` + `margin:auto`), no por
 * flexbox: `woocommerce-blocktheme.css` del plugin (pensada para temas
 * genericos, no para este sitio) le pone a estos mismos enlaces
 * `text-align:center` y otras propiedades por su cuenta, en una hoja de
 * estilos que no se puede editar (es de WooCommerce, no del tema). Un
 * ::after centrado por flex depende de como el navegador reparta el
 * espacio entre TODOS los hijos del boton -incluido el texto invisible
 * ("Ver", etc.)-, asi que cualquier property inesperada de esa hoja ajena
 * lo puede correr un par de pixeles. `inset:0;margin:auto` no compite con
 * nada de eso: ubica el icono al centro exacto de la caja del boton sin
 * importar que reglas de layout tenga el padre.
 */
.woocommerce-account .woocommerce-orders-table__cell-order-actions .button.view::after,
.woocommerce-account .woocommerce-orders-table__cell-order-actions .button.ace_seguimiento::after,
.woocommerce-account .woocommerce-orders-table__cell-order-actions .button.order-again::after {
	content: '';
	position: absolute;
	inset: 0;
	margin: auto;
	display: block;
	width: 18px;
	height: 18px;
	background-color: currentColor;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}

.woocommerce-account .woocommerce-orders-table__cell-order-actions .button.view::after {
	-webkit-mask-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='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
	mask-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='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}

.woocommerce-account .woocommerce-orders-table__cell-order-actions .button.ace_seguimiento::after {
	-webkit-mask-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='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 12v5.5'/%3E%3Cpath d='M17 3h2a2 2 0 012 2v2'/%3E%3Cpath d='M21 17v2a2 2 0 01-2 2h-2'/%3E%3Cpath d='M3 7V5a2 2 0 012-2h2'/%3E%3Cpath d='M7 21H5a2 2 0 01-2-2v-2'/%3E%3Cpath d='M7.264 9.252 12 12l4.737-2.748'/%3E%3Cpath d='M7.995 8.514A2 2 0 007 10.244v3.516a2 2 0 00.996 1.73l3 1.74a2 2 0 002.008 0l3-1.74A2 2 0 0017 13.76v-3.517a2 2 0 00-.995-1.73l-3-1.742a2 2 0 00-1.892-.064z'/%3E%3C/svg%3E");
	mask-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='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 12v5.5'/%3E%3Cpath d='M17 3h2a2 2 0 012 2v2'/%3E%3Cpath d='M21 17v2a2 2 0 01-2 2h-2'/%3E%3Cpath d='M3 7V5a2 2 0 012-2h2'/%3E%3Cpath d='M7 21H5a2 2 0 01-2-2v-2'/%3E%3Cpath d='M7.264 9.252 12 12l4.737-2.748'/%3E%3Cpath d='M7.995 8.514A2 2 0 007 10.244v3.516a2 2 0 00.996 1.73l3 1.74a2 2 0 002.008 0l3-1.74A2 2 0 0017 13.76v-3.517a2 2 0 00-.995-1.73l-3-1.742a2 2 0 00-1.892-.064z'/%3E%3C/svg%3E");
}

.woocommerce-account .woocommerce-orders-table__cell-order-actions .button.order-again::after {
	-webkit-mask-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='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 5h6'/%3E%3Cpath d='M19 2v6'/%3E%3Cpath d='m2.05 2.05 1.099-.028a1 1 0 011.008.815l2.69 14.347A1 1 0 007.83 18H18'/%3E%3Cpath d='M4.564 5H12'/%3E%3Cpath d='M6.25 14h12.712a2 2 0 001.991-1.57l.172-1.041'/%3E%3Ccircle cx='18' cy='20' r='2'/%3E%3Ccircle cx='8' cy='20' r='2'/%3E%3C/svg%3E");
	mask-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='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 5h6'/%3E%3Cpath d='M19 2v6'/%3E%3Cpath d='m2.05 2.05 1.099-.028a1 1 0 011.008.815l2.69 14.347A1 1 0 007.83 18H18'/%3E%3Cpath d='M4.564 5H12'/%3E%3Cpath d='M6.25 14h12.712a2 2 0 001.991-1.57l.172-1.041'/%3E%3Ccircle cx='18' cy='20' r='2'/%3E%3Ccircle cx='8' cy='20' r='2'/%3E%3C/svg%3E");
}

/* Sin pedidos todavia: mismo aviso "vacio" que `.account-empty` del prototipo. */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info {
	list-style: none;
	text-align: center;
	padding: 48px 16px;
	margin: 0;
	color: var(--pc-dark-gray);
	font-size: var(--pc-fs-sm);
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info::before {
	display: none;
}

/*
 * ---------- Direcciones (my-address.php / form-edit-address.php nativos) ----------
 * Mismo problema que ya se documento arriba para `.form-row.two-col`: el
 * clearfix clasico de WooCommerce (`.col2-set::before,::after{content:" ";
 * display:table}`, pensado para su propio layout con flotantes) genera dos
 * cajas fantasma dentro de la grilla -una grilla no necesita clearfix, no
 * hay flotantes que contener-, que corrian "Direccion de facturacion" y
 * "Direccion de envio" a celdas cruzadas en vez de quedar una al lado de la
 * otra. Encontrado revisando en pantalla: se veian en diagonal, superpuestas.
 */
.woocommerce-account .woocommerce-Addresses.col2-set::before,
.woocommerce-account .woocommerce-Addresses.col2-set::after {
	content: none;
	display: none;
}

.woocommerce-account .woocommerce-Addresses.col2-set {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

.woocommerce-account .woocommerce-Addresses.col2-set .u-column1,
.woocommerce-account .woocommerce-Addresses.col2-set .u-column2,
.woocommerce-account .woocommerce-Addresses.col2-set .col-1,
.woocommerce-account .woocommerce-Addresses.col2-set .col-2 {
	float: none;
	width: 100%;
}

@media (max-width: 600px) {
	.woocommerce-account .woocommerce-Addresses.col2-set {
		grid-template-columns: 1fr;
	}
}

.woocommerce-account .woocommerce-Address {
	background: var(--pc-bg);
	border-radius: var(--pc-radius-md);
	padding: 18px;
}

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

.woocommerce-account .woocommerce-Address-title h2 {
	font-size: var(--pc-fs-sm);
	font-weight: 500;
	margin: 0;
}

.woocommerce-account .woocommerce-Address-title .edit {
	font-size: var(--pc-fs-xs);
	font-weight: 600;
	color: var(--pc-primary);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.woocommerce-account .woocommerce-Address address {
	font-style: normal;
	font-size: var(--pc-fs-sm);
	color: var(--pc-dark-gray);
	line-height: 1.6;
}

/* ---------- Formularios nativos: editar direccion y datos de la cuenta ---------- */
.woocommerce-account form .form-row {
	margin: 0 0 16px;
}

.woocommerce-account form label {
	display: block;
	font-size: var(--pc-fs-sm);
	font-weight: 400;
	color: var(--pc-black);
	margin-bottom: 6px;
}

/*
 * Doble selector (con y sin `.form-row`) a proposito: WooCommerce trae su
 * propio borde de fabrica en `.woocommerce form .form-row .input-text`
 * (`woocommerce.css` del plugin, variable `--wc-form-border-color`, un gris
 * casi negro) con 3 clases + 1 etiqueta de especificidad. La version sin
 * `.form-row` de aca abajo tenia esa misma cuenta pero UNA clase menos
 * (`.woocommerce-account form .input-text`), asi que WooCommerce le ganaba
 * siempre -tambien en el estado de foco de mas abajo-: el campo se veia con
 * el borde negro del plugin y encima, al enfocar, el halo rojo de
 * `foundations.css` (`box-shadow`, que no tiene con que competir) - de ahi
 * el "borde negro y borde rojo pegados" que reporto Adriano (3 de
 * septiembre) en "Detalles de la cuenta". Repitiendo `.form-row` se empata
 * la cuenta de clases y se agrega `.woocommerce-page` (la pagina de cuenta
 * siempre trae las dos clases de body) para ganar la pulseada sin depender
 * del orden de carga de las hojas de estilo.
 */
.woocommerce-page.woocommerce-account form .form-row .input-text,
.woocommerce-page.woocommerce-account form .form-row select,
.woocommerce-account form .input-text,
.woocommerce-account form select {
	width: 100%;
	height: 44px;
	padding: 0 14px;
	border: 1px solid var(--pc-light-gray);
	border-radius: var(--pc-radius-md);
	font-size: var(--pc-fs-sm);
	font-family: inherit;
	color: var(--pc-black);
	background: var(--pc-white);
}

.woocommerce-page.woocommerce-account form .form-row .input-text:focus,
.woocommerce-page.woocommerce-account form .form-row select:focus,
.woocommerce-account form .input-text:focus,
.woocommerce-account form select:focus {
	outline: none;
	border-color: var(--pc-primary);
	box-shadow: 0 0 0 1px var(--pc-primary);
}

.woocommerce-account form .select2-container {
	width: 100% !important;
}

/*
 * ---------- Etiqueta flotante en los formularios nativos restantes ----------
 * (editar direccion, editar cuenta/cambiar contraseña, recuperar contraseña,
 * agregar metodo de pago -- etapa 14.xx, sin numero de sub-etapa asignado
 * todavia).
 *
 * Es el mismo patron `.ace-field` de `foundations.css` (ver el comentario
 * largo alli: la etiqueta vive DENTRO de la caja como si fuera el
 * placeholder, y sube al enfocar o al completar el campo), pero declarado
 * ACA como una variante standalone en vez de agregar la clase `.ace-field`
 * en el HTML: estos 4 formularios los arma `woocommerce_form_field()` (o el
 * `<p class="form-row">` a mano de `form-edit-account.php`/
 * `form-lost-password.php`), plantillas 100% nativas de WooCommerce que este
 * tema NO sobreescribe -sobreescribirlas para agregar una clase seria mas
 * codigo y mas mantenimiento (WooCommerce las actualiza de tanto en tanto)
 * para el mismo resultado visual que ya se logra apuntando directo al
 * `.form-row` que WooCommerce ya imprime.
 *
 * Una diferencia real con `.ace-field`: WooCommerce mete el campo DENTRO de
 * `<span class="woocommerce-input-wrapper">` (`<p class="form-row"><label>
 * ..</label><span class="woocommerce-input-wrapper"><input>...</span></p>`),
 * no como hijo directo de `.form-row` -por eso las reglas de mas abajo no
 * usan el combinador `>` para el input/select/textarea (serian hijos del
 * span, no del `.form-row`), solo para el `<label>` que si es hijo directo.
 * `:has()` igual encuentra el input aunque este mas anidado: por defecto
 * busca en CUALQUIER descendiente, no solo en los hijos directos.
 *
 * El input ya trae `placeholder=""` (cadena vacia) puesto por WooCommerce
 * mismo en `woocommerce_form_field()` -no hizo falta ningun filtro PHP
 * (`woocommerce_form_field_args`) para agregarlo-, asi que `:placeholder-shown`
 * ya funciona sin tocar ninguna plantilla.
 *
 * El selector arranca en `.woocommerce-account form`, SIN pasar por
 * `.woocommerce-MyAccount-content` (visto revisando en pantalla): "Recuperar
 * contraseña" es la unica de estas 4 pantallas que WooCommerce dibuja
 * directo dentro de `.woocommerce`, sin el envoltorio de
 * `my-account.php`/`.woocommerce-MyAccount-content` que si tienen las otras
 * 3 (siempre logueado) -entrar sin sesion iniciada a esa URL no es un caso
 * raro, es el camino normal para pedir el enlace de recuperacion-.
 */
.woocommerce-account form .form-row {
	position: relative;
}

.woocommerce-account form .form-row > label {
	position: absolute;
	left: 14px;
	top: 50%;
	z-index: 1;
	transform: translateY(-50%);
	margin: 0;
	padding: 0 4px;
	max-width: calc(100% - 28px);
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	background: var(--pc-white);
	color: var(--pc-dark-gray);
	pointer-events: none;
	transform-origin: left center;
	transition: top 0.15s ease-out, transform 0.15s ease-out, color 0.15s ease-out;
}

/* Mismo motivo que `.ace-field .password-input` en foundations.css: el
 * envoltorio que WooCommerce agrega por JS al campo de contraseña (icono de
 * mostrar/ocultar) tapaba la etiqueta al no ocupar el 100% del ancho. */
.woocommerce-account form .form-row .password-input {
	width: 100%;
}

.woocommerce-account form .form-row:has(input:focus) > label,
.woocommerce-account form .form-row:has(select:focus) > label,
.woocommerce-account form .form-row:has(textarea:focus) > label,
.woocommerce-account form .form-row:has(input:not(:placeholder-shown)) > label,
.woocommerce-account form .form-row:has(textarea:not(:placeholder-shown)) > label,
.woocommerce-account form .form-row:has(select) > label {
	top: 0;
	transform: translateY(-50%) scale(0.85);
}

.woocommerce-account form .form-row:has(input:focus) > label,
.woocommerce-account form .form-row:has(select:focus) > label,
.woocommerce-account form .form-row:has(textarea:focus) > label {
	color: var(--pc-primary);
}

/* Un <select> (pais/provincia) siempre muestra un valor, nunca queda
 * "vacio" como un texto: su etiqueta queda arriba siempre, sin animar. */
.woocommerce-account form .form-row:has(select) > label {
	transition: none;
}

.woocommerce-account .woocommerce-MyAccount-content fieldset {
	border: none;
	padding: 0;
	margin: 24px 0 0;
}

.woocommerce-account .woocommerce-MyAccount-content fieldset legend {
	font-size: 1rem;
	font-weight: 500;
	color: var(--pc-black);
	padding: 0;
	margin: 0 0 14px;
}

/*
 * =================== Favoritos (tanda 5) ===================
 * El "renglon de favorito" en si (miniatura, nombre, precio, agregar, quitar)
 * es el mismo componente que ya dibuja y estiliza el cajon de la cabecera
 * (`ace-commerce-widgets`, clases `.ace-favorites-panel__*`, cargado en todo
 * el sitio via `parts/footer.html`): no se repite ese CSS aca, solo se
 * acomoda en una grilla de 2 columnas en vez de la lista vertical angosta del
 * cajon -hay mas ancho disponible dentro de Mi cuenta-.
 */
.ace-account-favorites__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 4px 24px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ace-account-favorites__list .ace-favorites-panel__item {
	border-block-end: none;
}

.ace-account-favorites .ace-favorites-panel__empty {
	padding-block: 32px;
}