/* ============================================================= Excellent — Cuenta del cliente Autenticación (acceder / crear cuenta / recuperar clave) y panel del cliente (resumen, pedidos, direcciones, datos). Todo tokenizado: ver assets/css/tokens.css ============================================================= */ /* ------------------------------------------------------------- Contenedor de las páginas de cuenta Bricks imprime el contenido en #brx-content sin contenedor propio y antepone el título de la página: lo neutralizamos. ------------------------------------------------------------- */ .woocommerce-account #brx-content > h1 { display: none; } .woocommerce-account #brx-content { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } /* Bricks pone display:flex en .woocommerce y el bloque de cuenta encogía al ancho de su contenido en lugar de ocupar la columna. */ .woocommerce-account .woocommerce { display: block; width: 100%; } /* Sin sesión el acceso es a sangre completa (foto editorial + formulario). */ .woocommerce-account:not(.logged-in) .site-main { padding-block: 0; } .woocommerce-account:not(.logged-in) #brx-content { max-width: none; padding-inline: 0; } /* WooCommerce enmarca sus formularios (borde punteado gris + radio + padding). No encaja con el layout editorial: los devolvemos a caja limpia. */ .woocommerce-account form.login, .woocommerce-account form.register, .woocommerce-account form.lost_reset_password, .woocommerce-account form.edit-account, .woocommerce-account .woocommerce-address-fields { border: 0; padding: 0; margin: 0; border-radius: 0; } .woocommerce-account .col2-set .col-1, .woocommerce-account .col2-set .col-2 { width: 100%; float: none; } /* WooCommerce centra el contenido de sus formularios; aquí todo va alineado a la izquierda. Bricks además los pone en flex-column con gap:10px, que se sumaba a los márgenes de cada campo: dentro del formulario todo separaba 10px más que fuera. Volvemos a flujo de bloque para que el único responsable del ritmo sean los tokens de espaciado. Se acota a .auth/.account: si se aplicara a todo form de la página, pisaría al buscador de la cabecera (.search-bar form, misma especificidad y cargado antes). */ .auth form, .account form { display: block; } .auth form, .auth form p, .account form, .account form p { text-align: left; } /* Medidor de fuerza de contraseña (lo inyecta WooCommerce por JS). */ .woocommerce-account .woocommerce-password-strength { margin: var(--space-1) 0 0; padding: var(--space-1) var(--space-2); border-radius: var(--radius); font-size: var(--fs-xs); font-weight: 500; border-left: 3px solid var(--c-muted); background: var(--c-off-soft); color: var(--c-off); } .woocommerce-account .woocommerce-password-strength.short, .woocommerce-account .woocommerce-password-strength.bad { border-left-color: var(--c-err); background: var(--c-err-soft); color: var(--c-err); } .woocommerce-account .woocommerce-password-strength.good { border-left-color: var(--c-wait); background: var(--c-wait-soft); color: var(--c-wait); } .woocommerce-account .woocommerce-password-strength.strong { border-left-color: var(--c-ok); background: var(--c-ok-soft); color: var(--c-ok); } .woocommerce-account .woocommerce-password-hint { display: block; margin: var(--space-1) 0 0; font-size: var(--fs-xs); color: var(--c-muted); line-height: 1.6; } /* Avisos de Woo: contenidos y separados del contenido. */ .woocommerce-account .woocommerce-notices-wrapper:not(:empty) { margin-bottom: var(--space-4); } .woocommerce-account:not(.logged-in) .woocommerce-notices-wrapper:not(:empty) { max-width: var(--container); margin-inline: auto; padding: var(--space-4) var(--gutter) 0; } /* ============================================================= Campos de formulario (compartidos por cuenta y autenticación) ============================================================= */ /* WooCommerce/Bricks traen label{margin-bottom:5px}, que se sumaba al gap del contenedor: la separación etiqueta↔campo salía 14px en vez de los 8.75 del token, y descuadraba el ritmo de todos los formularios. */ .auth label, .account label { margin: 0; } .field { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-3); } .field__label { font-family: var(--font-body); font-size: var(--fs-2xs); font-weight: 500; color: var(--c-ink); line-height: 1.2; } .field__label .req { color: var(--c-gold); } .field__hint { font-size: var(--fs-xs); color: var(--c-muted); } .field__input { width: 100%; height: var(--field-h); padding: 0 var(--field-pad-x); border: var(--field-border) solid var(--c-line); border-radius: var(--radius); background: var(--c-white); font-family: var(--font-body); font-size: var(--fs-base); color: var(--c-ink); transition: border-color .2s var(--ease); } .field__input::placeholder { color: var(--c-muted); } .field__input:hover { border-color: var(--c-body); } .field__input:focus { outline: none; border-color: var(--c-ink); } .field--half { flex: 1 1 12rem; } .field-row { display: flex; flex-wrap: wrap; gap: var(--space-2); } /* Casilla + enlace de utilidad bajo el formulario */ .field-check { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--fs-sm); color: var(--c-body); cursor: pointer; } .field-check input { width: 1rem; height: 1rem; accent-color: var(--c-ink); margin: 0; } /* Botón a ancho completo del formulario */ .btn--block { display: flex; width: 100%; height: var(--field-h); padding-block: 0; justify-content: center; } /* ============================================================= Autenticación — split: foto editorial + panel de formulario ============================================================= */ .auth { display: grid; grid-template-columns: 1.05fr .95fr; min-height: var(--auth-min-h); } /* --- Columna visual --- */ .auth__visual { position: relative; overflow: hidden; background: var(--c-soft); display: flex; align-items: flex-end; } .auth__visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .auth__visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(20,20,20,.72), rgba(20,20,20,.12) 55%, rgba(20,20,20,.28)); } .auth__visual-body { position: relative; z-index: 2; padding: clamp(var(--space-3), 4vw, var(--space-6)); color: var(--c-white); max-width: 34rem; } .auth__visual-body .eyebrow { color: var(--c-gold-soft); } .auth__claim { color: var(--c-white); font-size: var(--fs-h2); margin: var(--space-1) 0 var(--space-2); letter-spacing: var(--tracking-tight); } .auth__note { color: var(--c-white); opacity: .82; font-size: var(--fs-sm); margin: 0; } /* --- Columna del formulario --- */ .auth__panel { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: clamp(var(--space-4), 5vw, var(--space-6)) clamp(var(--space-3), 4vw, var(--space-5)); background: var(--c-bg); } .auth__inner { width: 100%; max-width: var(--auth-panel-max); } .auth__logo { display: block; width: 8.5rem; margin: 0 0 var(--space-5); } /* Pestañas Acceder / Crear cuenta */ .auth__tabs { display: flex; gap: var(--space-4); border-bottom: var(--hairline) solid var(--c-line); margin-bottom: var(--space-4); } .auth__tab { appearance: none; background: none; border: 0; border-bottom: var(--focus-w) solid transparent; padding: 0 0 var(--space-2); cursor: pointer; font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 500; color: var(--c-muted); transition: color .2s var(--ease), border-color .2s var(--ease); } .auth__tab:hover { color: var(--c-ink); } .auth__tab.is-active { color: var(--c-ink); border-bottom-color: var(--c-gold); } /* Paneles: sin JS se muestran los dos, uno tras otro. */ .auth__pane + .auth__pane { margin-top: var(--space-5); padding-top: var(--space-5); border-top: var(--hairline) solid var(--c-line); } .auth--js .auth__pane { display: none; margin: 0; padding: 0; border-top: 0; } .auth--js .auth__pane.is-active { display: block; } .auth--js .auth__pane-title { display: none; } .auth__pane-title { font-size: var(--fs-h4); margin: 0 0 var(--space-2); } .auth__lead { font-size: var(--fs-sm); color: var(--c-body); margin: 0 0 var(--space-4); } .auth__utils { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-4); } .auth__link { font-size: var(--fs-xs); font-weight: 500; color: var(--c-ink); border-bottom: var(--hairline) solid var(--c-line); padding-bottom: var(--space-05); } .auth__link:hover { color: var(--c-gold); border-color: var(--c-gold); } /* ---- Ritmo compacto del panel de acceso ---- El panel traía el aire de una página de contenido (52px bajo el logo, 35px entre bloques) y un formulario de dos campos quedaba desparramado: el botón «Entrar» caía muy por debajo del pliegue en un portátil. Se ajusta SOLO dentro de `.auth`; el resto de pantallas de la cuenta son de leer, no de rellenar, y ahí el aire ancho sí funciona. */ .auth__logo { margin-bottom: var(--auth-flow-lg); } .auth__tabs { gap: var(--space-3); margin-bottom: var(--auth-flow-lg); } .auth__lead { margin-bottom: var(--auth-flow-lg); } .auth__utils { margin-bottom: var(--auth-flow); } .auth .field { margin-bottom: var(--auth-flow); } .auth__pane-title { margin-bottom: var(--space-1); } /* ---- Avisos dentro del panel ---- Antes los imprimía el hook por encima de todo el layout, sobre la foto. Ahora van pegados encima de los campos: el error se lee donde está el fallo. */ .auth__avisos { margin-bottom: var(--auth-flow); } .auth__avisos .woocommerce-error, .auth__avisos .woocommerce-message, .auth__avisos .woocommerce-info { list-style: none; margin: 0; padding: var(--space-2); font-size: var(--fs-sm); line-height: 1.45; /* Filete a la izquierda, no caja de color: un bloque rojo entero dentro de un panel blanco grita más de lo que informa, y en este sitio el rojo ya significa rebaja. */ background: var(--c-soft); color: var(--c-ink); border: 0; border-left: 3px solid var(--c-err); } .auth__avisos .woocommerce-message { border-left-color: var(--c-gold); } .auth__avisos li { list-style: none; margin: 0; } /* WooCommerce marca sus avisos con un aspa por `::before`, pensada para su caja de color a todo lo ancho. Sobre nuestro panel gris queda un aspa roja suelta encima del texto, sin alinear con nada. */ .auth__avisos .woocommerce-error::before, .auth__avisos .woocommerce-error li::before, .auth__avisos .woocommerce-message::before, .auth__avisos .woocommerce-info::before { content: none; display: none; } /* El enlace de «¿Has olvidado tu contraseña?» viene SIN clase y aun así recibe fondo rosa y relleno de botón de la hoja base de Woo/Bricks. Dentro del aviso tiene que leerse como lo que es: un enlace de texto. */ .auth__avisos .woocommerce-error a, .auth__avisos .woocommerce-message a, .auth__avisos .woocommerce-info a { display: inline; background: none; border: 0; padding: 0; font-size: inherit; font-weight: 500; letter-spacing: normal; text-transform: none; color: var(--c-ink); text-decoration: underline; text-underline-offset: 3px; } .auth__avisos .woocommerce-error a:hover, .auth__avisos .woocommerce-message a:hover, .auth__avisos .woocommerce-info a:hover { color: var(--c-gold); } /* El texto legal lo imprime WooCommerce justo antes del botón: le damos el mismo aire arriba y abajo que al resto del formulario. */ .woocommerce-account .woocommerce-privacy-policy-text { margin: var(--space-3) 0; } .auth__legal, .woocommerce-account .woocommerce-privacy-policy-text p { font-size: var(--fs-xs); color: var(--c-muted); margin: 0; line-height: 1.6; text-align: left; } /* El aviso de privacidad ya lleva el margen en su contenedor; este va suelto. */ .auth__legal { margin-top: var(--space-3); } .auth__legal a, .woocommerce-account .woocommerce-privacy-policy-text a { color: var(--c-body); border-bottom: var(--hairline) solid var(--c-line); } .auth__legal a:hover, .woocommerce-account .woocommerce-privacy-policy-text a:hover { color: var(--c-gold); } /* Ventajas de crear cuenta */ .auth__perks { list-style: none; margin: var(--space-4) 0 0; padding: var(--space-3) 0 0; border-top: var(--hairline) solid var(--c-line); display: grid; gap: var(--space-1); } .auth__perks li { position: relative; padding-left: var(--space-3); font-size: var(--fs-sm); color: var(--c-body); } .auth__perks li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; background: var(--c-gold); } /* Variante centrada: recuperar / restablecer contraseña */ .auth--single { display: block; min-height: 0; padding-block: var(--space-6); } .auth--single .auth__inner { margin-inline: auto; } .auth--single .auth__panel { padding: 0; } /* ============================================================= Shell de la cuenta (con sesión iniciada) ============================================================= */ /* La cabecera separa con su borde inferior; no necesita además el hueco grande de columna (--account-gap), que dejaba casi 100px de aire muerto arriba. El padding superior es mínimo a propósito: .site-main ya aporta --section-y (50px) por encima, y sumar aquí otro tanto duplicaba el aire de entrada. */ .account__head { padding-block: var(--space-1) var(--space-2); border-bottom: var(--hairline) solid var(--c-line); margin-bottom: var(--space-3); } .account__title { font-size: var(--fs-h3); margin: var(--space-05) 0 var(--space-1); letter-spacing: var(--tracking-tight); } .account__headrow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-1) var(--space-3); } .account__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); font-size: var(--fs-sm); color: var(--c-muted); margin: 0; } /* El separador cuelga del elemento anterior: si la línea se parte, no queda un "·" suelto abriendo la línea siguiente. */ .account__meta span:not(:last-child)::after { content: "·"; margin-left: var(--space-2); color: var(--c-line); } .account__logout { font-size: var(--fs-xs); font-weight: 500; color: var(--c-ink); border-bottom: var(--hairline) solid var(--c-line); padding-bottom: var(--space-05); } .account__logout:hover { color: var(--c-err); border-color: var(--c-err); } .account__layout { display: grid; grid-template-columns: var(--account-nav-w) minmax(0, 1fr); gap: var(--account-gap); padding-bottom: var(--space-6); align-items: start; } /* --- Navegación lateral --- */ /* Bricks pinta el