/* * SGM My Account — Estilizado de la página "Mi cuenta" de WooCommerce * * Cargado SOLO en is_account_page() — ni guests ni otras páginas reciben este CSS. * La página usa el template elementor_header_footer, igual que /mayoristas. * * Tokens del sitio: * Primary : #493936 (marrón oscuro) * Secondary : #D4C9B7 (beige cálido) * Body Text : #866B5A * Crema : #F1EBE0 * Light bg : #F3EFE9 * * Tipografía: Roboto (cuerpo) + Questrial (titulares) */ /* ───────────────────────────────────────────────────────────────────────────── STICKY FOOTER — empuja el footer al fondo del viewport en páginas cortas ───────────────────────────────────────────────────────────────────────────── El template elementor_header_footer usa un con: - [data-elementor-type="header"] — header fijo o estático de Elementor - .site-content / .wp-site-blocks (cuerpo del contenido) - [data-elementor-type="footer"] — footer de Elementor Técnica: flexbox column en el body, con el contenido principal en flex:1. Así el footer siempre toca el borde inferior, sin importar cuánto contenido haya. Funciona tanto para páginas cortas (dashboard) como largas (pedidos, formularios de dirección), ya que flex:1 solo EMPUJA hacia abajo, no corta. Scoped a .woocommerce-account para no afectar nada fuera de Mi cuenta. ─────────────────────────────────────────────────────────────────────────────*/ /* * 1. Body en flex column abarcando el 100% de la ventana. * min-height evita que el body colapse en contenido corto. */ .woocommerce-account body, body.woocommerce-account { display: flex; flex-direction: column; min-height: 100vh; } /* * 2. El contenido principal crece para llenar el espacio restante. * * En este tema (elementor_header_footer template), el DOM directo de body es: * HEADER.elementor-location-header * DIV.woocommerce ← salida del shortcode [woocommerce_my_account] * FOOTER.elementor-location-footer * * No hay site-content ni wp-site-blocks — el shortcode de WC es hijo directo * de body. Usamos el selector de hijo directo para máxima especificidad. * * Los selectores adicionales cubren variantes de otros temas/templates. */ body.woocommerce-account > div.woocommerce, body.woocommerce-account .site-content, body.woocommerce-account #content, body.woocommerce-account .wp-site-blocks, body.woocommerce-account .elementor-location-single { flex: 1 0 auto; } /* * 3. Header y footer no crecen (permanecen en su tamaño natural). * Esto asegura que solo el área de contenido absorbe el espacio libre. */ body.woocommerce-account [data-elementor-type="header"], body.woocommerce-account [data-elementor-type="footer"], body.woocommerce-account .elementor-location-header, body.woocommerce-account .elementor-location-footer { flex: 0 0 auto; } /* ── Reset / box-sizing local ────────────────────────────────────────────── */ .woocommerce-account .woocommerce, .woocommerce-account .woocommerce * { box-sizing: border-box; } /* ───────────────────────────────────────────────────────────────────────────── WRAPPER PRINCIPAL DE WOO EN LA PÁGINA DE CUENTA ───────────────────────────────────────────────────────────────────────────── */ /* * El shortcode [woocommerce_my_account] genera .woocommerce > .woocommerce-MyAccount-navigation * + .woocommerce-MyAccount-content. Bajo el template elementor_header_footer ese * wrapper cae directamente en el entry-content del tema (TwentyTwentyFive sin * constrained layout) o en el wp-block-post-content. * Usamos .woocommerce-account como scope raíz (body class de WC en páginas de cuenta). */ .woocommerce-account .woocommerce { display: flex; flex-direction: row; align-items: flex-start; gap: 2.5rem; width: 100%; /* permite que max-width + margin:auto centren el bloque */ max-width: 1100px; margin: 3rem auto 4rem; padding: 0 1.5rem; box-sizing: border-box; font-family: 'Roboto', sans-serif; font-size: 15px; line-height: 1.6; color: #493936; } /* ───────────────────────────────────────────────────────────────────────────── NAVEGACIÓN LATERAL (sidebar izquierdo) ───────────────────────────────────────────────────────────────────────────── */ .woocommerce-account .woocommerce-MyAccount-navigation { flex: 0 0 210px; width: 210px; min-width: 0; } .woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; border: 1px solid #D4C9B7; border-radius: 6px; overflow: hidden; background-color: #FFFFFF; } .woocommerce-account .woocommerce-MyAccount-navigation ul li { margin: 0; padding: 0; border-bottom: 1px solid #D4C9B7; } .woocommerce-account .woocommerce-MyAccount-navigation ul li:last-child { border-bottom: none; } .woocommerce-account .woocommerce-MyAccount-navigation ul li a { display: block; padding: 0.75rem 1.1rem; color: #866B5A; text-decoration: none; font-family: 'Roboto', sans-serif; font-size: 14px; font-weight: 400; letter-spacing: 0.01em; transition: background-color 0.15s ease, color 0.15s ease; } .woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover { background-color: #F3EFE9; color: #493936; text-decoration: none; } /* Ítem activo */ .woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a, .woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--active a { background-color: #493936; color: #F1EBE0; font-weight: 500; } .woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a:hover, .woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--active a:hover { background-color: #5d4a46; color: #F1EBE0; } /* ───────────────────────────────────────────────────────────────────────────── CONTENIDO PRINCIPAL (área derecha) ───────────────────────────────────────────────────────────────────────────── */ .woocommerce-account .woocommerce-MyAccount-content { flex: 1 1 0; min-width: 0; /* previene overflow en flex */ } /* Título de sección */ .woocommerce-account .woocommerce-MyAccount-content h2, .woocommerce-account .woocommerce-MyAccount-content h3 { font-family: 'Questrial', sans-serif; font-weight: 400; color: #493936; margin-top: 0; margin-bottom: 1.25rem; line-height: 1.25; } .woocommerce-account .woocommerce-MyAccount-content h2 { font-size: clamp(1.3rem, 2.5vw, 1.7rem); } .woocommerce-account .woocommerce-MyAccount-content h3 { font-size: clamp(1.05rem, 2vw, 1.3rem); } /* Párrafos y texto general */ .woocommerce-account .woocommerce-MyAccount-content p { color: #866B5A; margin-bottom: 1rem; } /* ── Mensaje de bienvenida del dashboard ────────────────────────────────── */ .woocommerce-account .woocommerce-MyAccount-content .woocommerce-info, .woocommerce-account .woocommerce-MyAccount-content .woocommerce-Message { background-color: #F3EFE9; border-left: 3px solid #493936; border-radius: 0 4px 4px 0; padding: 0.85rem 1.1rem; color: #493936; font-size: 14px; margin-bottom: 1.5rem; } .woocommerce-account .woocommerce-MyAccount-content .woocommerce-info::before, .woocommerce-account .woocommerce-MyAccount-content .woocommerce-Message::before { color: #493936; } /* ───────────────────────────────────────────────────────────────────────────── TABLAS DE PEDIDOS ───────────────────────────────────────────────────────────────────────────── */ .woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table, .woocommerce-account .woocommerce-MyAccount-content table.shop_table { width: 100%; border-collapse: collapse; font-size: 14px; margin-bottom: 1.5rem; } .woocommerce-account .woocommerce-MyAccount-content table th { text-align: left; padding: 0.65rem 0.85rem; background-color: #493936; color: #F1EBE0; font-family: 'Questrial', sans-serif; font-weight: 400; font-size: 13px; letter-spacing: 0.03em; white-space: nowrap; } .woocommerce-account .woocommerce-MyAccount-content table td { padding: 0.65rem 0.85rem; border-bottom: 1px solid #e8dfd4; color: #493936; vertical-align: middle; } .woocommerce-account .woocommerce-MyAccount-content table tr:last-child td { border-bottom: none; } .woocommerce-account .woocommerce-MyAccount-content table tbody tr:hover td { background-color: #F3EFE9; } /* Estado del pedido */ .woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-status mark, .woocommerce-account .woocommerce-MyAccount-content .order-status { background: none; padding: 0.2rem 0.55rem; border-radius: 3px; font-size: 12px; font-weight: 500; letter-spacing: 0.02em; } .woocommerce-account .woocommerce-MyAccount-content mark.on-hold, .woocommerce-account .woocommerce-MyAccount-content .order-status.status-on-hold { background-color: #FFF3CD; color: #856404; } .woocommerce-account .woocommerce-MyAccount-content mark.completed, .woocommerce-account .woocommerce-MyAccount-content .order-status.status-completed { background-color: #D1E7DD; color: #0A3622; } .woocommerce-account .woocommerce-MyAccount-content mark.processing, .woocommerce-account .woocommerce-MyAccount-content .order-status.status-processing { background-color: #CFE2FF; color: #0A3476; } .woocommerce-account .woocommerce-MyAccount-content mark.cancelled, .woocommerce-account .woocommerce-MyAccount-content .order-status.status-cancelled { background-color: #F8D7DA; color: #58151C; } /* ───────────────────────────────────────────────────────────────────────────── BOTONES (estilo de marca) ───────────────────────────────────────────────────────────────────────────── */ .woocommerce-account .woocommerce-MyAccount-content .button, .woocommerce-account .woocommerce-MyAccount-content .woocommerce-Button, .woocommerce-account .woocommerce-MyAccount-content input[type="submit"], .woocommerce-account .woocommerce-MyAccount-content button[type="submit"] { display: inline-block; padding: 0.55rem 1.2rem; background-color: #493936; color: #F1EBE0 !important; border: 1px solid #493936; border-radius: 3px; font-family: 'Roboto', sans-serif; font-size: 13px; font-weight: 500; letter-spacing: 0.02em; text-decoration: none; cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease; white-space: nowrap; } .woocommerce-account .woocommerce-MyAccount-content .button:hover, .woocommerce-account .woocommerce-MyAccount-content .woocommerce-Button:hover, .woocommerce-account .woocommerce-MyAccount-content input[type="submit"]:hover, .woocommerce-account .woocommerce-MyAccount-content button[type="submit"]:hover { background-color: #5d4a46; border-color: #5d4a46; color: #F1EBE0 !important; text-decoration: none; } /* Variante secundaria (View) */ .woocommerce-account .woocommerce-MyAccount-content .button.view { background-color: transparent; color: #493936 !important; border-color: #D4C9B7; } .woocommerce-account .woocommerce-MyAccount-content .button.view:hover { background-color: #F3EFE9; border-color: #493936; } /* ───────────────────────────────────────────────────────────────────────────── FORMULARIOS (detalles de cuenta, direcciones) ───────────────────────────────────────────────────────────────────────────── */ .woocommerce-account .woocommerce-MyAccount-content .woocommerce-form-row, .woocommerce-account .woocommerce-MyAccount-content .form-row { margin-bottom: 1rem; } .woocommerce-account .woocommerce-MyAccount-content label { display: block; font-size: 13px; font-weight: 500; color: #866B5A; margin-bottom: 0.3rem; letter-spacing: 0.01em; } .woocommerce-account .woocommerce-MyAccount-content input[type="text"], .woocommerce-account .woocommerce-MyAccount-content input[type="email"], .woocommerce-account .woocommerce-MyAccount-content input[type="password"], .woocommerce-account .woocommerce-MyAccount-content input[type="tel"], .woocommerce-account .woocommerce-MyAccount-content select, .woocommerce-account .woocommerce-MyAccount-content textarea { width: 100%; padding: 0.55rem 0.85rem; border: 1px solid #D4C9B7; border-radius: 3px; font-family: 'Roboto', sans-serif; font-size: 14px; color: #493936; background-color: #FFFFFF; transition: border-color 0.15s ease, box-shadow 0.15s ease; outline: none; } .woocommerce-account .woocommerce-MyAccount-content input[type="text"]:focus, .woocommerce-account .woocommerce-MyAccount-content input[type="email"]:focus, .woocommerce-account .woocommerce-MyAccount-content input[type="password"]:focus, .woocommerce-account .woocommerce-MyAccount-content input[type="tel"]:focus, .woocommerce-account .woocommerce-MyAccount-content select:focus, .woocommerce-account .woocommerce-MyAccount-content textarea:focus { border-color: #493936; box-shadow: 0 0 0 2px rgba(73, 57, 54, 0.1); } /* Fieldset de direcciones */ .woocommerce-account .woocommerce-MyAccount-content fieldset { border: 1px solid #D4C9B7; border-radius: 4px; padding: 1.25rem; margin-bottom: 1.5rem; } .woocommerce-account .woocommerce-MyAccount-content fieldset legend { font-family: 'Questrial', sans-serif; font-size: 1rem; color: #493936; padding: 0 0.5rem; font-weight: 400; } /* Password strength meter */ .woocommerce-account .woocommerce-MyAccount-content .woocommerce-password-strength { font-size: 12px; margin-top: 0.25rem; } /* ───────────────────────────────────────────────────────────────────────────── BLOQUES DE DIRECCIÓN (my-address + edit-address) ───────────────────────────────────────────────────────────────────────────── WooCommerce genera dos estructuras distintas: 1. /mi-cuenta/edit-address/ (vista listado): .woocommerce-Addresses (o .addresses.col2-set) con tarjetas .woocommerce-Address, encabezado .woocommerce-Address-title.title (h2), y link .edit para editar. 2. /mi-cuenta/edit-address/billing|shipping/ (formulario): form con .woocommerce-address-fields y botón submit.button. Ambos están cubiertos por los selectores abajo. ───────────────────────────────────────────────────────────────────────────── */ /* * Contenedor de tarjetas (ambas variantes de clase que genera Woo). * * Grid 2 columnas de igual ancho y alto de fila parejo (align-items: stretch, * default de grid) para que .u-column1 / .u-column2 (billing/shipping) queden * alineadas entre sí sin importar cuál tenga más contenido. FIX 2026-07-01. * * BUG ENCONTRADO: este contenedor también tiene la clase "col2-set", que en * woocommerce-layout.css trae un clearfix clásico: * .woocommerce .col2-set::before, .col2-set::after { content:" "; display:table; } * Esos pseudo-elementos SE CUENTAN como grid items (::before y ::after) al * pasar el contenedor a display:grid, agregando 2 celdas invisibles que * empujaban las tarjetas reales a filas/columnas equivocadas (una tarjeta * quedaba arriba-derecha, la otra abajo-izquierda). Neutralizados abajo. */ .woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses, .woocommerce-account .woocommerce-MyAccount-content .addresses { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: stretch; } .woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses::before, .woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses::after, .woocommerce-account .woocommerce-MyAccount-content .addresses::before, .woocommerce-account .woocommerce-MyAccount-content .addresses::after { display: none !important; content: none !important; } /* * Tarjeta individual de dirección — alto completo de su celda de grid. * * IMPORTANTE: WooCommerce core (woocommerce-layout.css) define * ".woocommerce .col2-set .col-1/.col-2 { float:left/right; width:48% }" * con especificidad mayor a la de un solo selector de clase. Aunque el padre * sea display:grid (donde float no debería aplicar), ese width:48% seguía * ganando la cascada y rompía el ancho de columna del grid. Reset explícito * de float + width aquí para que el grid del padre sea la única fuente de * layout. FIX 2026-07-01 (alineación de columnas). */ .woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address { display: flex; flex-direction: column; float: none !important; width: 100% !important; height: 100%; background-color: #F3EFE9; border: 1px solid #D4C9B7; border-radius: 6px; padding: 1.25rem 1.5rem; min-width: 0; box-sizing: border-box; } /* Encabezado de tarjeta: título arriba, botón Agregar/Editar debajo (flex column) */ .woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title { display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; margin-bottom: 0.85rem; padding-bottom: 0.75rem; border-bottom: 1px solid #D4C9B7; } /* El template Woo usa h2 dentro de .woocommerce-Address-title */ .woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title h2, .woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title h3 { margin: 0; font-family: 'Questrial', sans-serif; font-size: 1rem; font-weight: 400; color: #493936; line-height: 1.3; } /* Link "Agregar/Editar" en la tarjeta */ .woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title .edit { flex-shrink: 0; display: inline-block; padding: 0.25rem 0.65rem; background-color: transparent; color: #493936; border: 1px solid #D4C9B7; border-radius: 3px; font-family: 'Roboto', sans-serif; font-size: 12px; font-weight: 500; text-decoration: none; white-space: nowrap; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title .edit:hover { background-color: #493936; border-color: #493936; color: #F1EBE0; text-decoration: none; } /* Contenido de la dirección (texto) */ .woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address address { font-style: normal; color: #866B5A; font-size: 14px; line-height: 1.75; } /* Texto cuando no hay dirección cargada todavía */ .woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address address:empty::after { content: 'Aún no agregaste esta dirección.'; font-style: italic; color: #D4C9B7; font-size: 13px; } /* ── Formulario de edición de dirección (.woocommerce-address-fields) ────── */ /* Wrapper de fields en el form */ .woocommerce-account .woocommerce-MyAccount-content .woocommerce-address-fields { max-width: 640px; } .woocommerce-account .woocommerce-MyAccount-content .woocommerce-address-fields__field-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.25rem; } /* Campos de ancho completo */ .woocommerce-account .woocommerce-MyAccount-content .woocommerce-address-fields__field-wrapper .form-row-wide { grid-column: 1 / -1; } /* Primera mitad */ .woocommerce-account .woocommerce-MyAccount-content .woocommerce-address-fields__field-wrapper .form-row-first { grid-column: 1; } /* Segunda mitad */ .woocommerce-account .woocommerce-MyAccount-content .woocommerce-address-fields__field-wrapper .form-row-last { grid-column: 2; } /* Mobile: una columna */ @media (max-width: 600px) { .woocommerce-account .woocommerce-MyAccount-content .woocommerce-address-fields__field-wrapper { grid-template-columns: 1fr; } .woocommerce-account .woocommerce-MyAccount-content .woocommerce-address-fields__field-wrapper .form-row-first, .woocommerce-account .woocommerce-MyAccount-content .woocommerce-address-fields__field-wrapper .form-row-last { grid-column: 1; } .woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses, .woocommerce-account .woocommerce-MyAccount-content .addresses { grid-template-columns: 1fr; } } /* Botón "Guardar dirección" dentro del form de edición */ .woocommerce-account .woocommerce-MyAccount-content .woocommerce-address-fields p > .button { margin-top: 0.5rem; } /* ───────────────────────────────────────────────────────────────────────────── DETALLE DE UN PEDIDO (order-view) ───────────────────────────────────────────────────────────────────────────── */ .woocommerce-account .woocommerce-MyAccount-content .woocommerce-order-details__title { font-family: 'Questrial', sans-serif; font-weight: 400; font-size: 1.1rem; color: #493936; margin-bottom: 0.75rem; } .woocommerce-account .woocommerce-MyAccount-content .woocommerce-customer-details address { font-style: normal; background-color: #F3EFE9; border: 1px solid #D4C9B7; border-radius: 4px; padding: 1rem 1.25rem; font-size: 14px; color: #493936; line-height: 1.65; } /* Totales del pedido */ .woocommerce-account .woocommerce-MyAccount-content .woocommerce-order-totals tfoot tr th, .woocommerce-account .woocommerce-MyAccount-content .shop_table.order_details tfoot tr th { text-align: right; color: #866B5A; font-weight: 400; background: none; padding: 0.45rem 0.85rem; } .woocommerce-account .woocommerce-MyAccount-content .woocommerce-order-totals tfoot tr.order-total th, .woocommerce-account .woocommerce-MyAccount-content .shop_table.order_details tfoot tr.order-total th { color: #493936; font-weight: 600; } /* ───────────────────────────────────────────────────────────────────────────── MENSAJES DE ERROR / ÉXITO ───────────────────────────────────────────────────────────────────────────── */ .woocommerce-account .woocommerce-MyAccount-content .woocommerce-error { background-color: #F8D7DA; border-left: 3px solid #842029; border-radius: 0 4px 4px 0; padding: 0.85rem 1.1rem; color: #842029; list-style: none; margin: 0 0 1.25rem; font-size: 14px; } .woocommerce-account .woocommerce-MyAccount-content .woocommerce-error::before { display: none; /* ocultar ícono por defecto si interfiere */ } .woocommerce-account .woocommerce-MyAccount-content .woocommerce-success, .woocommerce-account .woocommerce-MyAccount-content .woocommerce-message { background-color: #D1E7DD; border-left: 3px solid #0A3622; border-radius: 0 4px 4px 0; padding: 0.85rem 1.1rem; color: #0A3622; margin: 0 0 1.25rem; font-size: 14px; } /* ───────────────────────────────────────────────────────────────────────────── TÍTULO DE PÁGINA WP (ocultar — el contenido de Woo ya sirve de heading) ───────────────────────────────────────────────────────────────────────────── */ .woocommerce-account .wp-block-post-title, .woocommerce-account .entry-title { display: none !important; } /* ───────────────────────────────────────────────────────────────────────────── RESPONSIVE — TABLET (≤ 768px) ───────────────────────────────────────────────────────────────────────────── */ @media (max-width: 768px) { .woocommerce-account .woocommerce { flex-direction: column; gap: 1.5rem; margin: 2rem auto 3rem; padding: 0 1rem; } .woocommerce-account .woocommerce-MyAccount-navigation { flex: none; width: 100%; } /* En mobile la nav se convierte en una lista apilada */ .woocommerce-account .woocommerce-MyAccount-navigation ul { display: flex; flex-wrap: wrap; border-radius: 4px; } .woocommerce-account .woocommerce-MyAccount-navigation ul li { flex: 1 1 auto; border-bottom: none; border-right: 1px solid #D4C9B7; } .woocommerce-account .woocommerce-MyAccount-navigation ul li:last-child { border-right: none; } .woocommerce-account .woocommerce-MyAccount-navigation ul li a { text-align: center; font-size: 12px; padding: 0.6rem 0.5rem; white-space: nowrap; } .woocommerce-account .woocommerce-MyAccount-content { width: 100%; } } /* ───────────────────────────────────────────────────────────────────────────── RESPONSIVE — MOBILE (≤ 480px) ───────────────────────────────────────────────────────────────────────────── */ @media (max-width: 480px) { .woocommerce-account .woocommerce { margin: 1.25rem auto 2rem; padding: 0 0.875rem; } /* En mobile muy angosto la nav se apila verticalmente */ .woocommerce-account .woocommerce-MyAccount-navigation ul { flex-direction: column; } .woocommerce-account .woocommerce-MyAccount-navigation ul li { border-right: none; border-bottom: 1px solid #D4C9B7; } .woocommerce-account .woocommerce-MyAccount-navigation ul li:last-child { border-bottom: none; } .woocommerce-account .woocommerce-MyAccount-navigation ul li a { text-align: left; font-size: 13px; padding: 0.7rem 1rem; } .woocommerce-account .woocommerce-MyAccount-content table { font-size: 12px; } .woocommerce-account .woocommerce-MyAccount-content table th, .woocommerce-account .woocommerce-MyAccount-content table td { padding: 0.5rem 0.6rem; } .woocommerce-account .woocommerce-Addresses, .woocommerce-account .woocommerce-MyAccount-content .addresses { grid-template-columns: 1fr; } } /* ───────────────────────────────────────────────────────────────────────────── OVERFLOW — prevención global en esta página ───────────────────────────────────────────────────────────────────────────── */ .woocommerce-account .woocommerce-MyAccount-content table { overflow-x: auto; display: block; max-width: 100%; } @media (min-width: 769px) { /* En desktop las tablas no necesitan overflow scroll */ .woocommerce-account .woocommerce-MyAccount-content table { display: table; overflow-x: visible; } } /* ───────────────────────────────────────────────────────────────────────────── PREFERS-REDUCED-MOTION ───────────────────────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .woocommerce-account .woocommerce-MyAccount-navigation ul li a, .woocommerce-account .woocommerce-MyAccount-content .button, .woocommerce-account .woocommerce-MyAccount-content input[type="text"], .woocommerce-account .woocommerce-MyAccount-content input[type="email"], .woocommerce-account .woocommerce-MyAccount-content input[type="password"] { transition: none; } }