/**
 * Archivo: assets/css/cuenta.css
 * Módulo: shop-core — estilos del área "Mi cuenta" (login, registro,
 * recuperar/restablecer contraseña, panel, pedidos, direcciones, datos
 * de la cuenta).
 *
 * Se enqueuea solo en is_account_page() (ver sc_cargar_assets_cuenta()
 * en includes/plantilla-cuenta.php). Usa las variables de
 * assets/css/variables.css, igual que el resto de plantillas propias
 * (portada, categoría, historial) — mismo criterio de diseño.
 *
 * Layout general: .sc-cuenta-cuerpo es el <main> de
 * templates/cuenta/cuenta.php, entre la cabecera y el pie fijos
 * (regla body:not(.sc-inicio-body) de cabecera-pie.css) — se lleva
 * flex:1 y hace su propio scroll interno, mismo criterio que
 * .sc-gestion-cuerpo (historial/diccionario) y .sc-categoria.
 *
 * Además de las clases propias (sc-cuenta-*), este archivo también
 * reestiliza las clases que WooCommerce genera él mismo y que no
 * pasan por ninguna plantilla nuestra (woocommerce_form_field() en
 * los campos de dirección, wc_print_notices(), y las plantillas
 * internas order/order-details*.php que pinta la acción
 * woocommerce_view_order sin que las hayamos sobrescrito) — así todo
 * el bloque de "Mi cuenta" se ve consistente con el resto del sitio
 * aunque parte del HTML no lo generemos nosotros.
 */

.sc-cuenta-cuerpo {
    flex: 1 1 0%;
    min-height: 0;
    overflow-y: auto;
    padding: 2.2rem 2rem;
    display: flex;
    justify-content: center;
}

/* Defensa contra fondos "fijos al viewport" dentro de este panel con
   scroll PROPIO (18/9/2026, Javier: "las imágenes del teléfono y el
   sobre... cuando haces scroll se quedan en su sitio"). Los iconos de
   teléfono/email delante de esos datos en "Detalles del pedido" no son
   nuestros — los pinta Astra/WooCommerce, sin ninguna clase propia del
   proyecto que se pueda apuntar con precisión. Si alguno de esos
   iconos usa background-attachment:fixed (típico truco de parallax que
   Astra reutiliza en otros sitios del tema), dentro de un contenedor
   que YA hace su propio scroll interno (este, overflow-y:auto) ese
   fondo queda "fijo respecto a la ventana" en vez de moverse con el
   texto — exactamente el síntoma descrito. No tiene sentido ningún
   fondo fijo dentro de un panel que ya scrollea por su cuenta, así que
   se neutraliza para cualquier cosa dentro de él, venga de donde venga. */
.sc-cuenta-cuerpo,
.sc-cuenta-cuerpo * {
    background-attachment: scroll !important;
}

.sc-cuenta-cuerpo > * {
    width: 100%;
    max-width: 980px;
}

/* ===== Login / Registro ===== */
.sc-cuenta-acceso-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    /* Antes "flex-start": la tarjeta quedaba pegada arriba, con más
       distancia hasta el pie que hasta la cabecera. "center" la
       centra dentro de .sc-cuenta-cuerpo (que ya tiene el mismo
       padding arriba y abajo), quedando a la misma distancia de
       cabecera y pie — a petición de Javier, agosto 2026. */
    align-self: center;
    margin: 0 auto;
}

/* Login SOLO (registro desactivado, woocommerce_enable_myaccount_registration
   en "no" — form-login.php no añade la clase --doble en ese caso):
   sin esto, la tarjeta usaba los 980px completos de .sc-cuenta-cuerpo,
   y como .sc-cuenta-campo/.sc-cuenta-form .form-row son flex-column sin
   align-items propio (stretch por defecto), el botón "Acceder" se
   estiraba a todo ese ancho — se veía descomunal para lo poco que
   dice. Ancho máximo de formulario de acceso normal y centrado; el
   botón, los campos y el espaciado se reducen todos juntos con la
   tarjeta, sin tocar el caso de dos columnas (login + registro) que ya
   se reparte el ancho de forma razonable por sí solo. */
/* Ensanchada (agosto 2026, a petición de Javier tras ver el primer
   rediseño en vivo): a 460px de ancho, la etiqueta "USUARIO O CORREO
   ELECTRÓNICO" (mayúsculas + letter-spacing, como el resto de
   etiquetas del sitio) no cabía en una línea y se partía en 2-3,
   dejando la tarjeta más alta de lo necesario — justo lo contrario de
   lo pedido ("tipo tarjeta de visita": ancha y baja). A 620px la
   etiqueta más larga de este formulario entra de sobra en una sola
   línea sin tener que acortar el texto ni bajar la letra. */
.sc-cuenta-acceso-layout:not(.sc-cuenta-acceso-layout--doble) {
    max-width: 620px;
    margin: 0 auto;
}

.sc-cuenta-acceso-layout--doble {
    grid-template-columns: 1fr 1fr;
}

@media (max-width: 760px) {
    .sc-cuenta-acceso-layout--doble {
        grid-template-columns: 1fr;
    }
}

/* Rediseño agosto 2026 (a petición de Javier — la tarjeta se veía
   plana/"horrible" comparada con la referencia que pasó). Se mantiene
   la paleta del sitio (negro + dorado, sección 2.1), pero con más aire
   entre elementos y un radio de borde mayor, más parecido al de una
   tarjeta tipo modal — sin llegar a serlo: sigue siendo la plantilla
   de página completa de siempre (cabecera/pie fijos, sección 20.1),
   no un overlay. */
.sc-cuenta-acceso-col {
    background: var(--sc-surface);
    border: 1px solid rgba(var(--sc-gold-rgb), 0.25);
    border-radius: 18px;
    /* Más horizontal que vertical a propósito: junto con el ancho de
       620px de arriba, es lo que le da el aire "tarjeta de visita"
       (ancha y baja) en vez de la columna estrecha y alta de antes.
       Vertical bajado otra vez (1.6rem, era 2.1rem) a petición de
       Javier — "un poco menos alta". */
    padding: 1.6rem 3rem;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

.sc-cuenta-acceso-registro {
    border-left: 1px dashed rgba(var(--sc-gold-rgb), 0.3);
}

@media (max-width: 760px) {
    .sc-cuenta-acceso-registro {
        border-left: none;
        border-top: 1px dashed rgba(var(--sc-gold-rgb), 0.3);
    }
}

/* Tamaño y trackeo bajados respecto al resto de títulos del sitio
   (var(--sc-fs-title)/2px, usados en panel, categoría...) — a
   petición de Javier, se veía demasiado grande y gritón para una
   pantalla de acceso. Solo afecta a esta clase, el resto de títulos
   del sitio no se toca. */
.sc-cuenta-acceso-titulo {
    font-family: var(--sc-font-title);
    font-size: clamp(16.80px, calc(11.995px + 0.3518vw), 21px);
    color: var(--sc-gold);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin: 0 0 0.3rem;
}

/* Línea de apoyo bajo el título ("Introduce tus credenciales para
   entrar."), igual que en la referencia — opcional: solo se pinta si
   form-login.php añade el <p class="sc-cuenta-acceso-subtitulo">. Si
   ese párrafo no existe todavía en la plantilla, esta regla no hace
   nada y el resto del rediseño sigue funcionando igual. */
.sc-cuenta-acceso-subtitulo {
    font-size: var(--sc-fs-small);
    color: var(--sc-muted);
    margin: 0 0 1rem;
}

.sc-cuenta-subtitulo {
    font-family: var(--sc-font-title);
    font-size: clamp(14.40px, calc(10.281px + 0.3015vw), 18px);
    color: var(--sc-gold);
    letter-spacing: 1px;
    margin: 0 0 1rem;
}

/* ===== Formularios (comunes a login/registro/contraseña/direcciones/datos) ===== */
.sc-cuenta-form {
    display: flex;
    flex-direction: column;
    /* Bajado de 1.3rem a 1.1rem y ahora a 0.9rem: con la etiqueta ya
       en una línea (arriba) sobra aire vertical entre campos para el
       efecto "ancha y baja" pedido. */
    gap: 0.9rem;
}

.sc-cuenta-campo,
.sc-cuenta-form .form-row {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin: 0;
}

/* Etiquetas más discretas (agosto 2026, tercera vuelta — a petición
   de Javier: "textos muy grandes... no tanto en mayúsculas"). Se
   mantiene una pizca de mayúscula/trackeo porque sin ella se pierde
   el contraste visual con el valor escrito debajo, pero mucho más
   pequeña, más apagada y con mucho menos tracking que antes —
   discreta de verdad, no un titular. Afecta a TODAS las etiquetas del
   área de cuenta (login, direcciones, datos...), no solo esta
   pantalla, para que quede uniforme en todo "Mi cuenta". */
.sc-cuenta-campo label,
.sc-cuenta-form label {
    font-size: clamp(11.60px, calc(8.282px + 0.2429vw), 14.5px);
    color: var(--sc-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    opacity: 0.85;
}

/* Fuerza la etiqueta a una sola línea a partir de un ancho donde ya
   cabe de sobra (con la tarjeta a 620px, sobra sitio) — evita que
   vuelva a partirse en 2-3 líneas si el texto de alguna etiqueta crece
   en otro idioma (FR/EN). Por debajo de 480px (móvil, tarjeta muy
   estrecha) se deja envolver con normalidad: ahí no hay sitio real y
   forzar una sola línea desbordaría la tarjeta en vez de acortar su
   alto. */
@media (min-width: 480px) {
    .sc-cuenta-campo label,
    .sc-cuenta-form label {
        white-space: nowrap;
    }
}

.sc-cuenta-campo .required,
.sc-cuenta-form .required {
    color: var(--sc-gold);
}

/* Campos de texto/contraseña — fondo e input.
   IMPORTANTE (bug reportado por Javier, agosto 2026): el campo de
   contraseña se veía con fondo blanco/pálido y el texto prácticamente
   invisible en producción, pese a que `color` ya llevaba !important.
   Solo `background` NO lo llevaba — mismo patrón de guerra de
   especificidad que ya documentado varias veces en este archivo contra
   reglas de Astra/WooCommerce/el propio navegador (ver comentarios de
   .sc-cuenta-boton:hover y del bloque de autofill más abajo): sin
   !important en el fondo, algo con más peso (muy probablemente el
   estilo nativo `input[type="password"]` que Astra/el navegador
   aplican con fondo claro) lo pisaba, y SOLO afectaba a los campos de
   contraseña porque los de texto no tienen ese estilo nativo
   equivalente. Añadir !important aquí replica exactamente la misma
   solución que el resto del archivo ya usa para este tipo de choque. */
/* Fondo subido de 0.04 a 0.07 (agosto 2026, segunda vuelta): a 0.04
   el campo apenas se distinguía de la tarjeta que lo envuelve —
   "cuerpo" insuficiente comparado con la referencia, donde el campo
   se lee como una pieza propia y bien definida, no un hueco casi
   transparente. */
.sc-cuenta-input,
.sc-cuenta-form input[type="text"],
.sc-cuenta-form input[type="email"],
.sc-cuenta-form input[type="password"],
.sc-cuenta-form input[type="tel"],
.sc-cuenta-form select,
.sc-cuenta-form textarea,
.woocommerce-Input {
    background: rgba(255, 255, 255, 0.07) !important;
    border: 1px solid rgba(var(--sc-gold-rgb), 0.22);
    border-radius: 10px;
    color: var(--sc-text) !important;
    font-family: var(--sc-font-body);
    font-size: var(--sc-fs-form);
    padding: 0.75rem 1rem;
}

.sc-cuenta-input:focus,
.sc-cuenta-form input:focus,
.sc-cuenta-form select:focus,
.sc-cuenta-form textarea:focus,
.woocommerce-Input:focus {
    outline: none;
    border-color: var(--sc-gold);
    box-shadow: 0 0 0 3px rgba(var(--sc-gold-rgb), 0.18);
}

/* Autocompletado del navegador (usuario/contraseña recordados,
   detectado en las contraseñas de "Datos de la cuenta"): el navegador
   pinta el campo con un fondo azul/amarillo fuerte y texto negro por
   su cuenta, saltándose nuestro fondo oscuro — un `background` normal
   no lo pisa porque el navegador lo aplica con más prioridad que el
   CSS de la página. El truco estándar para Chrome/Edge/Safari es un
   box-shadow enorme por dentro del mismo color que nuestro fondo, que
   sí gana esa pelea. transition con un retardo larguísimo evita que se
   note el cambio de color si el navegador llega a pintarlo un instante
   antes de que se aplique esta regla. */
.sc-cuenta-form input:-webkit-autofill,
.sc-cuenta-form input:-webkit-autofill:hover,
.sc-cuenta-form input:-webkit-autofill:focus,
.sc-cuenta-form input:-webkit-autofill:active,
.woocommerce-Input:-webkit-autofill,
.woocommerce-Input:-webkit-autofill:hover,
.woocommerce-Input:-webkit-autofill:focus,
.woocommerce-Input:-webkit-autofill:active {
    -webkit-text-fill-color: var(--sc-text) !important;
    -webkit-box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.04) inset !important;
    box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.04) inset !important;
    caret-color: var(--sc-text) !important;
    border-color: rgba(var(--sc-gold-rgb), 0.25) !important;
    transition: background-color 5000s ease-in-out 0s, color 5000s ease-in-out 0s;
}

/* Refuerzo específico para el campo de contraseña (agosto 2026,
   segunda vuelta): el bloque de arriba ya existía en la versión
   anterior y, según Javier, el fondo blanco seguía apareciendo pese a
   él — la sospecha es que algo con más especificidad o cargado más
   tarde en la cascada (Astra o el propio WooCommerce) le gana
   específicamente a input[type="password"], que es el único que
   lleva el botón nativo de "contraseña guardada" de por medio. Esta
   regla repite el mismo truco pero apuntando directo al tipo de campo
   y con !important en TODAS las propiedades, así no depende de ganar
   por especificidad si la regla que compite también lleva !important
   — en un empate de !important gana quien se declara después en el
   CSS, así que este bloque se deja aquí, al final del archivo, para
   que sea literalmente el último en cargarse. Si con esto sigue sin
   verse bien, hace falta abrir las herramientas de desarrollador sobre
   el campo en el estado en que falla y mirar qué regla concreta está
   tachando esta (pestaña "Styles"/"Estilos" del inspector). */
.sc-cuenta-form input[type="password"]:-webkit-autofill,
.sc-cuenta-form input[type="password"]:-webkit-autofill:hover,
.sc-cuenta-form input[type="password"]:-webkit-autofill:focus,
.sc-cuenta-form input[type="password"]:-webkit-autofill:active {
    background-color: transparent !important;
    -webkit-text-fill-color: var(--sc-text) !important;
    -webkit-box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.04) inset !important;
    box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.04) inset !important;
    caret-color: var(--sc-text) !important;
}

/* ===== Botón propio de "mostrar/ocultar contraseña" (agosto 2026) =====
   El icono nativo de cada navegador para esto no se puede recolorear
   de forma fiable: Chrome no expone ningún gancho de CSS para el suyo
   (lo que se veía era ::-webkit-credentials-auto-fill-button, el icono
   de "hay una contraseña guardada para este campo" — de ahí que
   apareciera justo cuando el campo también se autocompletaba en azul,
   ver el bloque de autocompletado más arriba), y el ::-ms-reveal de
   Edge se distinguía mal por mucho filtro que se le aplicara. En vez
   de perseguir el estilo de cada navegador, cuenta.js añade su propio
   botón (icono SVG propio, mismos colores que el resto del sitio) y
   aquí se ocultan los dos nativos para que no aparezcan los dos a la
   vez. Si JavaScript está desactivado, cuenta.js no llega a añadir el
   botón propio, pero estas reglas siguen ocultando los nativos — se
   pierde la opción de revelar el texto, no la de escribirlo. */
.sc-cuenta-form input[type="password"]::-ms-reveal {
    display: none;
}

.sc-cuenta-form input[type="password"]::-webkit-credentials-auto-fill-button {
    /* Solo visibility:hidden (detectado agosto 2026 en Login): combinar
       esto con display:none rompía el truco del fondo oscuro en
       :-webkit-autofill de arriba — el campo de contraseña se quedaba
       con el resaltado blanco/amarillo nativo de Chrome pese a esa
       regla, mientras que campos de texto normales (sin este botón) sí
       se veían bien. visibility:hidden sigue ocultando el icono sin
       tocar esa otra capa. */
    visibility: hidden;
}

/* Envoltorio que cuenta.js pone alrededor de cada <input
   type="password"> — solo alrededor del campo, no de la etiqueta ni
   del texto de ayuda, para que el botón quede centrado verticalmente
   respecto a la caja del campo y no respecto a todo el bloque. */
.sc-cuenta-contrasena-envoltorio {
    position: relative;
    display: block;
}

.sc-cuenta-contrasena-envoltorio input {
    padding-right: 2.7rem;
}

/* Icono más grande (24px, antes 22) y algo apagado en reposo (opacity
   0.6) en vez de un gris plano — se lee más fino y menos "cargado", y
   al pasar el ratón o enfocar sube a opacidad completa y a dorado, con
   la misma lógica de interacción que el resto de iconos del sitio
   (.sc-header-right, sección 9.5/12.2: solo se colorean al hover). */
.sc-cuenta-mostrar-contrasena {
    position: absolute;
    top: 50%;
    right: 0.6rem;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--sc-text);
    opacity: 0.55;
    transition: color 0.2s, opacity 0.2s;
}

.sc-cuenta-mostrar-contrasena:hover,
.sc-cuenta-mostrar-contrasena:focus-visible {
    color: var(--sc-gold);
    opacity: 1;
    outline: none;
}

.sc-cuenta-mostrar-contrasena svg {
    display: block;
}

/* Dos SVG dentro del botón (ojo abierto / ojo tachado, ver cuenta.js)
   — se muestra uno u otro según si el botón lleva la clase --activo
   (contraseña visible en texto plano ahora mismo).
   BUG real (18/9/2026, reportado por Javier: "sale el ojo ese fatal,
   que se vea solo uno"): esta regla de ocultar el tachado por defecto
   tenía MENOS especificidad CSS (una sola clase) que la regla de arriba
   ".sc-cuenta-mostrar-contrasena svg { display: block; }" (una clase +
   un tipo, cuenta más) — así que esa ganaba la cascada y el ojo
   tachado se veía IGUAL, los dos SVG a la vez lado a lado. Comprobado
   en vivo con getComputedStyle(): display:block en los dos. Arreglo:
   subir la especificidad a dos clases, igual que ya tenían las reglas
   de --activo de abajo (por eso el toggle en sí funcionaba bien, solo
   el estado inicial salía mal). */
.sc-cuenta-mostrar-contrasena .sc-cuenta-mostrar-contrasena-ojo-tachado {
    display: none;
}

.sc-cuenta-mostrar-contrasena--activo .sc-cuenta-mostrar-contrasena-ojo {
    display: none;
}

.sc-cuenta-mostrar-contrasena--activo .sc-cuenta-mostrar-contrasena-ojo-tachado {
    display: block;
}

.select2-container .select2-selection--single {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(var(--sc-gold-rgb), 0.2) !important;
    height: 42px !important;
    display: flex !important;
    align-items: center;
}

/* El desplegable de Provincia (Select2) no tenía font-size propio —
   heredaba el tamaño base del texto normal del sitio (~17px), mucho
   más grande que los demás campos (13px, --sc-fs-small). En vez de
   bajarlo para igualarlo, Javier prefirió el tamaño grande (18/9/2026:
   "ese tamaño me gusta") — así que ahora el resto de campos sube a
   juego (--sc-fs-form, ver variables.css) y este se fija explícito
   para no depender de una herencia que podría cambiar sola en el
   futuro.
   CENTRADO VERTICAL (18/9/2026, segunda vuelta — Javier: "Madrid
   debería estar centrado en el campo, como están el resto"): un
   primer intento ajustó el line-height a mano para que coincidiera con
   los 42px de la caja, pero Select2 trae de fábrica su propio
   posicionamiento interno (pensado para su alto por defecto de 28px)
   que ese cálculo no llegaba a corregir del todo. Arreglo más robusto:
   display:flex + align-items:center en la caja — centra el texto de
   verdad sea cual sea el alto o el tamaño de letra, sin tener que
   acertar un line-height exacto a mano. El icono de la flecha de
   Select2 sigue posicionado con position:absolute por su cuenta, así
   que no le afecta este cambio. */
.select2-container .select2-selection--single .select2-selection__rendered {
    font-size: var(--sc-fs-form);
    line-height: normal !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    font-size: var(--sc-fs-form);
}

.sc-cuenta-recordar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-transform: none;
    letter-spacing: normal;
    font-size: var(--sc-fs-small);
    color: var(--sc-muted);
    margin-bottom: 0.8rem;
}

.sc-cuenta-campo-extra {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.sc-cuenta-nota {
    font-size: var(--sc-fs-small);
    color: var(--sc-muted);
    line-height: 1.5;
    margin: 0 0 1rem;
}

.sc-cuenta-ayuda {
    font-size: var(--sc-fs-caption);
    color: var(--sc-subtle);
}

.sc-cuenta-olvido {
    font-size: var(--sc-fs-small);
    margin-top: 0.6rem;
    text-align: center;
}

.sc-cuenta-olvido a,
.sc-cuenta-acceso-col a {
    color: var(--sc-gold);
    text-decoration: none;
}

.sc-cuenta-olvido a:hover,
.sc-cuenta-acceso-col a:hover {
    text-decoration: underline;
}

/* ===== Botones ===== */
.sc-cuenta-boton {
    display: inline-block;
    width: 100%;
    text-align: center;
    background: var(--sc-gold);
    color: var(--sc-bg) !important;
    border: none;
    border-radius: var(--sc-btn-radius, 10px);
    font-family: var(--sc-font-body);
    font-size: clamp(12.80px, calc(9.139px + 0.2680vw), 16px);
    font-weight: 600;
    /* Bajado de 0.6px — el trackeo tan abierto sumaba a la sensación
       de "todo grita" que comentaba Javier; se conserva la mayúscula
       (identidad de los botones en todo el sitio) pero más comedida. */
    letter-spacing: 0.3px;
    text-transform: uppercase;
    text-decoration: none;
    padding: 0.8rem 1.2rem;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.sc-cuenta-boton:hover {
    /* !important necesario (detectado agosto 2026 en "Datos de la
       cuenta"): el botón lleva también las clases woocommerce-Button
       button, y WooCommerce/Astra traen su propio :hover de botón con
       más especificidad que una sola clase nuestra (algo del estilo
       ".woocommerce button.button:hover", dos clases + etiqueta).
       Sin !important aquí, esa regla gana y el fondo se queda con su
       color oscuro por defecto — mientras el texto sigue forzado a
       var(--sc-bg) (también oscuro) por el !important del color de
       arriba. Resultado: el botón se veía negro sobre negro al pasar
       el ratón. Mismo criterio que .sc-cuenta-contenido.woocommerce-
       MyAccount-content más abajo, contra el mismo tipo de choque de
       especificidad con el CSS de WooCommerce. */
    background: var(--sc-btn-primary-hover, #E0BC60) !important;
}

/* Mismo problema, reaparece en Login/Registro (agosto 2026): esos
   botones llevan ADEMÁS woocommerce-form-login__submit /
   woocommerce-form-register__submit — Astra suele apuntar a esas
   clases de WooCommerce por su nombre exacto con su propio :hover, con
   más especificidad todavía que ".woocommerce button.button:hover"
   (dos clases nuestras + una suya = más peso que el genérico de
   arriba). Se combina sc-cuenta-boton con cada clase de WooCommerce
   que ya usan los botones del sitio, para no depender de adivinar cuál
   compite en cada pantalla — mismo !important, mismo motivo. */
.sc-cuenta-boton.woocommerce-button:hover,
.sc-cuenta-boton.woocommerce-Button:hover,
.sc-cuenta-boton.woocommerce-form-login__submit:hover,
.sc-cuenta-boton.woocommerce-form-register__submit:hover,
.sc-cuenta-boton.button:hover {
    background: var(--sc-btn-primary-hover, #E0BC60) !important;
    color: var(--sc-bg) !important;
}

/* A petición de Javier (18/9/2026, "los botones demasiado grandes" en
   la tabla de Pedidos — el "VER" de cada fila).
   !important en TODO (segunda vuelta — el primer ajuste, sin
   !important, no se notó): este botón también lleva las clases nativas
   "woocommerce-button button", y Astra trae su propia regla para
   ".woocommerce a.button" con MÁS especificidad que una sola clase
   nuestra (2 clases + el tipo "a" vs. nuestra 1 clase) — exactamente el
   mismo tipo de choque ya documentado arriba para el color de :hover
   de estos botones, pero aquí afectando al padding/letra/radio en
   TODOS los estados, no solo al pasar el ratón. Por eso el primer
   intento (bajar el border-radius sin más) no se notó de verdad: el
   padding y la letra grandes de Astra seguían ganando por debajo. */
.sc-cuenta-boton--pequeno {
    padding: 0.3rem 0.65rem !important;
    font-size: clamp(8.00px, calc(5.712px + 0.1675vw), 10px) !important;
    margin: 0 0.3rem 0.3rem 0 !important;
    width: auto !important;
    border-radius: 6px !important;
    line-height: normal !important;
}

/* Variante discreta — para acciones secundarias/informativas (p.ej.
   "Ir a la portada" cuando no hay pedidos, o "Editar" en una tarjeta
   de dirección): mismo tamaño y forma que el botón normal, pero sin
   el relleno dorado sólido, para que no compita visualmente con las
   acciones principales de cada pantalla. */
.sc-cuenta-boton--sutil {
    width: auto;
    background: transparent;
    color: var(--sc-muted) !important;
    border: 1px solid rgba(var(--sc-gold-rgb), 0.35);
}

.sc-cuenta-boton--sutil:hover {
    background: rgba(var(--sc-gold-rgb), 0.08);
    color: var(--sc-gold) !important;
}

/* ===== Layout logueado: una sola columna =====
   Antes había un menú lateral (.sc-cuenta-nav) — se ha quitado a
   petición: la navegación ahora vive en los recuadros del panel
   (.sc-cuenta-accesos, más abajo).
   display:flow-root (en vez de block a secas) es un "clearfix"
   moderno: sin él, si el contenido de dentro queda flotado (ver
   comentario de .sc-cuenta-contenido), este contenedor no se entera
   de su altura real y se queda colapsado a 0px. */
.sc-cuenta-layout {
    display: flow-root;
}

/* La clase woocommerce-MyAccount-content (ver my-account.php) se
   mantiene en el HTML por si algún script/plugin de WooCommerce la
   necesita, pero WooCommerce trae su propio CSS base para esa clase
   (woocommerce-layout.css, se carga SIEMPRE que WooCommerce está
   activo, da igual el tema) pensado para el diseño de DOS columnas
   (menú + contenido) que había antes de quitar el menú lateral:
   float:right + width:68% — confirmado con las herramientas del
   navegador (computed style float:"right", width:"666px" sobre
   980px = exactamente 68%). Como ya no hay menú al lado, ese float
   sobra y empujaba todo el bloque a la derecha, dejando el hueco a
   la izquierda.
   Ya se probó a ganarle solo con más especificidad (repitiendo las
   dos clases juntas) y NO fue suficiente — señal de que la regla de
   WooCommerce lleva !important. Contra una regla con !important no
   vale tener más especificidad: hace falta iguales armas, así que
   aquí también se usa !important, con las dos clases juntas además
   para que, si el día de mañana alguna otra regla entra en la
   pelea, esta siga ganando por especificidad Y por !important. */
.sc-cuenta-contenido.woocommerce-MyAccount-content {
    min-width: 0;
    float: none !important;
    width: 100% !important;
}

/* Enlace "Volver al panel" que my-account.php añade arriba del
   contenido en cualquier pantalla interior (Pedidos, Direcciones...),
   para no dejar al cliente sin forma de volver ahora que no hay menú
   lateral fijo. No aparece en el panel mismo. */
.sc-cuenta-volver {
    margin: 0 0 1.4rem;
}

.sc-cuenta-volver a {
    color: var(--sc-muted);
    text-decoration: none;
    font-size: var(--sc-fs-nav);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.sc-cuenta-volver a:hover {
    color: var(--sc-gold);
}

/* Aviso visual (no bloqueante) de cuenta.js cuando "repite la
   contraseña" todavía no coincide con la nueva contraseña. */
.sc-cuenta-input-error {
    border-color: #b3261e !important;
}

/* ===== Panel (dashboard) =====
   Todo el bloque centrado en la pantalla — el contenedor
   .sc-cuenta-cuerpo ya centra su columna de 980px en el viewport,
   pero dentro de esa columna el panel se quedaba pegado a la
   izquierda porque los recuadros tienen un ancho máximo propio
   (640px, se ven mejor así de grandes que estirados a todo lo
   ancho). text-align centra el título/saludo (texto), y el
   margin:auto de .sc-cuenta-accesos centra el bloque de recuadros. */
.sc-cuenta-panel {
    text-align: center;
}

/* Título de pantalla — mismo criterio tipográfico que
   .sc-cuenta-acceso-titulo (login/registro): puede reutilizarse tal
   cual el día que las demás pantallas de Mi cuenta (Pedidos,
   Direcciones...) también lleven su propio título arriba. */
.sc-cuenta-titulo-pantalla {
    font-family: var(--sc-font-title);
    font-size: var(--sc-fs-title);
    color: var(--sc-gold);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0 0 1.4rem;
}

.sc-cuenta-saludo {
    font-size: var(--sc-fs-small);
    color: var(--sc-text);
    margin: 0 0 1.8rem;
}

.sc-cuenta-saludo strong {
    color: var(--sc-gold);
}

.sc-cuenta-saludo a {
    color: var(--sc-muted);
}

/* Recuadros de acceso — 2x2 fijo en escritorio/tablet (más grandes,
   se ven mejor que muchos recuadros pequeños en fila), 1 columna en
   móvil. */
.sc-cuenta-accesos {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.4rem;
    max-width: 640px;
    margin: 0 auto;
}

@media (max-width: 560px) {
    .sc-cuenta-accesos {
        grid-template-columns: 1fr;
    }
}

.sc-cuenta-acceso {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.9rem;
    text-align: center;
    background: var(--sc-surface);
    border: 1px solid rgba(var(--sc-gold-rgb), 0.25);
    border-radius: 10px;
    padding: 2.4rem 1.5rem;
    color: var(--sc-muted);
    text-decoration: none;
    font-size: var(--sc-fs-card);
    transition: border-color 0.2s, color 0.2s;
}

.sc-cuenta-acceso:hover {
    border-color: var(--sc-gold);
    color: var(--sc-gold);
}

.sc-cuenta-acceso i {
    font-size: clamp(28.80px, calc(20.563px + 0.6030vw), 36px);
    color: var(--sc-gold);
}

/* El recuadro de "Salir" es una acción distinta a las demás (sales de
   la cuenta en vez de entrar a gestionar algo) — mismo tamaño y forma
   que el resto para que los 4 recuadros queden uniformes, pero con un
   tono apagado en vez de dorado, para diferenciarlo sin romper el
   conjunto. */
.sc-cuenta-acceso--salir {
    border-style: dashed;
}

.sc-cuenta-acceso--salir i,
.sc-cuenta-acceso--salir:hover {
    color: var(--sc-muted);
}

.sc-cuenta-acceso--salir:hover {
    border-color: var(--sc-muted);
}

/* ===== Pedidos ===== */
.sc-cuenta-tabla-pedidos {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--sc-fs-small);
}

.sc-cuenta-tabla-pedidos th,
.sc-cuenta-tabla-pedidos td {
    padding: 0.7rem 0.6rem;
    border-bottom: 1px solid rgba(var(--sc-gold-rgb), 0.15);
    text-align: left;
}

/* Antes usaba --sc-fs-label (10px como mucho, el token MÁS pequeño de
   todo el sistema) — quedaba diminuto al lado del resto de la pantalla
   (a petición de Javier, 18/9/2026: "los títulos es demasiado
   pequeño"). Sin font-size propio hereda --sc-fs-small de
   .sc-cuenta-tabla-pedidos, igual que ya hace la tabla de detalle de
   UN pedido (.woocommerce-table--order-details, más abajo) — mismo
   criterio en las dos tablas de "Mi cuenta". Letter-spacing bajado de
   1px a 0.5px a juego: con la letra más grande, 1px de trackeo se
   notaba excesivo. */
.sc-cuenta-tabla-pedidos th {
    color: var(--sc-gold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sc-cuenta-tabla-pedidos td {
    color: var(--sc-text);
}

.sc-cuenta-tabla-pedidos a {
    color: var(--sc-gold);
}

.sc-cuenta-paginacion {
    display: flex;
    justify-content: space-between;
    margin-top: 1.2rem;
}

.sc-cuenta-aviso {
    background: rgba(var(--sc-gold-rgb), 0.08);
    border: 1px solid rgba(var(--sc-gold-rgb), 0.3);
    border-radius: 6px;
    padding: 1rem 1.2rem;
    color: var(--sc-muted);
    font-size: var(--sc-fs-small);
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

/* ===== Detalle de pedido =====
   18/9/2026, a petición de Javier: "la letra en general debe de ser
   más grande" Y "quiero que coja en la página" (sin scroll interno,
   mismo criterio de toda la web) — dos peticiones que tiran en
   direcciones opuestas si no se toca también el espaciado. Solución:
   subir la letra (--sc-fs-form en vez de --sc-fs-small, mismo tamaño
   ya usado en formularios) y APRETAR los márgenes/line-height de todo
   este bloque para compensar, en vez de subir la letra sin más y dejar
   que la pantalla necesite scroll otra vez. */
.sc-cuenta-pedido-resumen {
    font-size: var(--sc-fs-form);
    color: var(--sc-muted);
    margin-bottom: 0.6rem;
}

/* "DETALLES DEL PEDIDO" (h2 nativo de WooCommerce,
   .woocommerce-order-details__title, sin sobrescribir) heredaba el
   tamaño de titular grande de Astra — a petición de Javier (18/9/2026,
   "más pequeño" + "que no salga la barra de scroll"), se baja a
   --sc-fs-title (ya usado para títulos de sección en el resto del
   sitio, más comedido que un H2 suelto de tema) y se recorta su
   margen inferior. */
.sc-cuenta-cuerpo .woocommerce-order-details__title {
    font-size: var(--sc-fs-title) !important;
    margin: 0 0 0.5rem !important;
}

/* Menos hueco antes de las cajas de dirección (mismo motivo: que quepa
   todo sin scroll). .woocommerce-customer-details es el envoltorio
   nativo de WooCommerce alrededor de las dos columnas de dirección —
   trae su propio margen superior de fábrica. */
.sc-cuenta-cuerpo .woocommerce-customer-details {
    margin-top: 0 !important;
}

.sc-cuenta-pedido-estado {
    background: rgba(var(--sc-gold-rgb), 0.15);
    color: var(--sc-gold);
    padding: 0.1rem 0.5rem;
    border-radius: 3px;
    font-weight: 600;
}

.sc-cuenta-pedido-notas {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.sc-cuenta-pedido-notas li {
    background: var(--sc-surface);
    border: 1px solid rgba(var(--sc-gold-rgb), 0.2);
    border-radius: 6px;
    padding: 0.8rem 1rem;
    font-size: var(--sc-fs-small);
    color: var(--sc-muted);
}

/* Tablas de artículos/direcciones que pinta WooCommerce directamente
   (order/order-details.php, order-details-customer.php) — no las
   sobrescribimos, solo se retocan sus clases estándar para que
   encajen con la paleta oscura/dorada del resto del sitio. */
.woocommerce-table--order-details,
.sc-cuenta-cuerpo table.shop_table {
    width: 100%;
    border-collapse: collapse;
    margin: 0.5rem 0 0.8rem;
    font-size: var(--sc-fs-form);
    color: var(--sc-text);
}

.woocommerce-table--order-details th,
.woocommerce-table--order-details td,
.sc-cuenta-cuerpo table.shop_table th,
.sc-cuenta-cuerpo table.shop_table td {
    padding: 0.4rem 0.6rem;
    border-bottom: 1px solid rgba(var(--sc-gold-rgb), 0.15);
    text-align: left;
}

.woocommerce-table--order-details tfoot th,
.woocommerce-table--order-details tfoot td {
    color: var(--sc-gold);
}

.sc-cuenta-cuerpo address {
    font-style: normal;
    color: var(--sc-muted);
    font-size: var(--sc-fs-form);
    line-height: 1.35;
}

/* Cajas "Dirección de facturación"/"Dirección de envío" del detalle de
   pedido (18/9/2026) — las pinta WooCommerce directamente
   (order-details-customer.php, sin sobrescribir — ver view-order.php),
   y Astra les pone fondo BLANCO por defecto. El título heredaba el
   color claro pensado para el fondo oscuro del resto del sitio, así
   que quedaba casi invisible sobre ese blanco ("DIRECCIÓN DE
   FACTURACIÓN" ilegible, reportado por Javier). Mismo tratamiento de
   tarjeta oscura que ya usa "Gestionar tus direcciones"
   (.sc-cuenta-direccion, más abajo), para que las dos pantallas de
   "Mi cuenta" se vean coherentes en vez de tener una caja blanca suelta.
   SEGUNDA VUELTA (18/9/2026, Javier: "te dije que quites el fondo
   blanco en los títulos"): el fondo blanco no era de la CAJA entera
   (ya arreglado la primera vez) sino del propio título — WooCommerce
   trae su PROPIO fondo de fábrica para .woocommerce-column__title (un
   "banner" claro tipo tarjeta, pensado para temas claros) que la regla
   de abajo nunca llegó a tocar porque solo fijaba tipografía/color, no
   background. Con !important porque ya se ha visto en esta misma
   pantalla que WooCommerce/Astra ganan la cascada sobre una sola clase
   nuestra sin él. Padding/margen negativos para que el título ocupe
   todo el ancho de la tarjeta hasta el borde, como una cabecera de
   verdad, en vez de quedar descuadrado tras quitarle su propio padding
   de fábrica. Espaciado general del bloque (18/9/2026, "que quepa todo
   en la página"): letra más grande (--sc-fs-form) pero padding/márgenes
   más ajustados, para más contenido sin subir la altura total. */
.sc-cuenta-cuerpo .woocommerce-column {
    background: var(--sc-surface);
    border: 1px solid rgba(var(--sc-gold-rgb), 0.25);
    border-radius: 8px;
    padding: 0.9rem 1.1rem;
}

.sc-cuenta-cuerpo .woocommerce-column__title {
    background: transparent !important;
    font-family: var(--sc-font-title);
    font-size: clamp(13.60px, calc(9.710px + 0.2848vw), 17px);
    color: var(--sc-gold) !important;
    letter-spacing: 1px;
    margin: 0 0 0.5rem;
    padding: 0 !important;
    text-transform: uppercase;
}

/* ===== Direcciones ===== */
.sc-cuenta-direcciones {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.2rem;
}

.sc-cuenta-direccion {
    background: var(--sc-surface);
    border: 1px solid rgba(var(--sc-gold-rgb), 0.25);
    border-radius: 8px;
    padding: 1.2rem 1.3rem;
}

.sc-cuenta-direccion-cabecera {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.6rem;
}

.sc-cuenta-direccion-cabecera h2 {
    font-family: var(--sc-font-title);
    font-size: clamp(13.60px, calc(9.710px + 0.2848vw), 17px);
    color: var(--sc-gold);
    letter-spacing: 1px;
    margin: 0;
}

.sc-cuenta-direccion-editar {
    font-size: var(--sc-fs-caption);
    color: var(--sc-muted);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.sc-cuenta-direccion-editar:hover {
    color: var(--sc-gold);
}

.sc-cuenta-direccion-campos-rejilla {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem 1.2rem;
}

@media (max-width: 600px) {
    .sc-cuenta-direccion-campos-rejilla {
        grid-template-columns: 1fr;
    }
}

.sc-cuenta-direccion-campos-rejilla .form-row-wide {
    grid-column: 1 / -1;
}

/* ===== Direcciones: un formulario común para todos los países (rediseño agosto 2026) =====
   Ya no hay resumen + botón "Editar" — mismos campos y mismo orden
   para todos los países soportados (de momento España, Francia,
   Alemania, Italia y Suiza, ver sc_paises_direccion_soportados() en
   guardar-direcciones-cuenta.php); solo "provincia" varía según el
   país (sc_paises_con_provincia()). Arriba, el selector de país
   (mini-formulario propio, recarga la página al cambiar — ver
   cuenta.js) y la casilla "es la misma dirección"; debajo, dos
   columnas con los campos que correspondan, agrupados en filas
   compactas (.sc-cuenta-direccion-fila, uno o varios campos por fila,
   repartidos a partes iguales) — sin número fijo de columnas por
   rejilla CSS,
   para que cualquier país (con o sin "provincia") encaje sin dejar
   huecos. Estilos más compactos que .sc-cuenta-form normal (menos
   relleno) para que quepa en pantalla sin scroll. */
.sc-cuenta-direccion-pais {
    max-width: 260px;
    margin: 0 0 0.8rem;
}

.sc-cuenta-direccion-pais .form-row {
    margin: 0;
}

.sc-cuenta-direccion-misma {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--sc-fs-caption);
    color: var(--sc-muted);
    cursor: pointer;
    margin: 0 0 1rem;
}

.sc-cuenta-direccion-misma input {
    margin: 0;
}

/* Teléfono + botón "Guardar", en la misma fila y al final del
   formulario (ver comentario de cabecera de my-address.php). El
   teléfono no necesita ser ancho, así que el botón cabe justo a su
   lado sin perder espacio.
   HISTORIAL (18/9/2026): dos intentos por CSS para que el botón
   quedara a la misma altura que el campo (igualar alturas +
   align-items:flex-end; luego un espaciador invisible calcando el
   tamaño de la etiqueta) se quedaron cortos o se pasaron — algo en el
   alto real de la etiqueta/campo no cuadraba con lo calculado a mano.
   ARREGLO DEFINITIVO: en vez de seguir adivinando en CSS, se mide con
   JavaScript la posición real del campo en pantalla y se coloca el
   botón exactamente ahí — ver alinearBotonGuardarDireccion() en
   cuenta.js. Aquí solo queda el tamaño del botón en sí (mismo alto que
   el campo, para que "quepan" igual de altos uno al lado del otro) y
   el ancho de la columna del teléfono. */
.sc-cuenta-direccion-telefono-fila {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    margin: 0 0 1rem;
}

.sc-cuenta-direccion-telefono {
    max-width: 200px;
}

.sc-cuenta-direccion-telefono-fila .sc-cuenta-boton,
.sc-cuenta-direccion-telefono input {
    height: 38px;
    box-sizing: border-box;
}

.sc-cuenta-direccion-telefono-fila .sc-cuenta-boton {
    width: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 1.2rem;
}

/* Etiquetas (Nombre, Apellidos, Dirección...) más pequeñas que en el
   resto de pantallas de "Mi cuenta" (login, datos de la cuenta...) —
   aquí sí hace falta apretar para que quepa todo sin scroll; en las
   demás pantallas, con menos campos, no compensa perder legibilidad.
   8px (bajado de 9px) para que etiquetas largas como "Código postal /
   ZIP" no lleguen a partirse en dos líneas y descuadren la fila. */
.sc-cuenta-direccion-columna label,
.sc-cuenta-direccion-telefono label,
.sc-cuenta-direccion-pais label {
    font-size: clamp(9.60px, calc(6.854px + 0.2010vw), 12px);
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.sc-cuenta-direcciones-rejilla {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 1.6rem;
}

.sc-cuenta-direccion-columna h3 {
    font-family: var(--sc-font-title);
    font-size: clamp(13.60px, calc(9.710px + 0.2848vw), 17px);
    color: var(--sc-gold);
    letter-spacing: 1px;
    margin: 0 0 0.6rem;
}

.sc-cuenta-direccion-fila {
    display: flex;
    gap: 0.7rem;
    margin: 0 0 0.5rem;
}

.sc-cuenta-direccion-fila > .form-row {
    flex: 1;
    min-width: 0;
    gap: 0.15rem;
}

/* Reparto del ancho entre Población/Provincia/Código postal (18/9/2026,
   a petición de Javier: "Provincia más ancho, el del ZIP más estrecho"
   — el código postal es corto (5 dígitos) y no necesita tanto hueco,
   mientras que nombres de provincia largos ("Comunidad de Madrid",
   "Castilla y León"...) sí lo agradecen, sobre todo ahora que el texto
   de los campos es más grande (--sc-fs-form, ver variables.css).
   [id$="_field"] es el envoltorio que genera woocommerce_form_field()
   (id="{clave}_field"), así que esto alcanza tanto a
   billing_state_field/billing_postcode_field como a sus equivalentes
   de shipping_. 0.9 (antes 1.6, cuando era el campo ancho) sigue
   dejando sitio de sobra para su propia etiqueta ("Código postal /
   ZIP", la más larga de la fila) sin que se parta en dos líneas. */
.sc-cuenta-direccion-fila > [id$="_state_field"] {
    flex: 1.7;
}

.sc-cuenta-direccion-fila > [id$="_postcode_field"] {
    flex: 0.9;
}

.sc-cuenta-direccion-columna .sc-cuenta-input,
.sc-cuenta-direccion-columna input,
.sc-cuenta-direccion-columna select,
.sc-cuenta-direccion-pais input,
.sc-cuenta-direccion-pais select,
.sc-cuenta-direccion-telefono input {
    padding: 0.45rem 0.6rem;
}

.sc-cuenta-direccion-columna--oculta {
    display: none;
}

@media (max-width: 700px) {
    .sc-cuenta-direcciones-rejilla {
        grid-template-columns: 1fr;
        gap: 1.4rem;
    }

    .sc-cuenta-direccion-fila {
        flex-wrap: wrap;
    }

    .sc-cuenta-direccion-fila > .form-row {
        flex: 1 1 45%;
    }

    .sc-cuenta-direccion-telefono-fila {
        flex-wrap: wrap;
    }

    .sc-cuenta-direccion-telefono {
        max-width: none;
        flex: 1 1 100%;
    }
}

/* ===== Datos de la cuenta (rediseño agosto 2026: sin scroll) =====
   4 líneas en total: (1) Nombre + Apellidos, (2) Nombre público +
   Correo, (3) las tres contraseñas, (4) el botón "Guardar cambios".
   Las 3 filas usan el mismo contenedor .sc-cuenta-datos-fila (más
   abajo) — display:flex propio, NO las clases nativas de WooCommerce
   form-row-first/form-row-last. Motivo: .sc-cuenta-form tiene
   display:flex + flex-direction:column, así que TODOS sus hijos
   directos se apilan en columna pase lo que pase — flexbox ignora el
   float en el que se apoyan form-row-first/form-row-last, así que esas
   clases no ponían nada en paralelo aquí dentro (tampoco antes de este
   rediseño). Mismo patrón que ya resuelve esto en Direcciones
   (.sc-cuenta-direccion-fila, sección 20.6).
   Las etiquetas de las contraseñas conservan su texto original y largo
   ("... déjalo en blanco para no cambiarla") — a 1/3 de ancho pueden
   partirse en dos líneas, y no pasa nada: cada campo es una columna
   flex (label encima, input debajo), así que el input simplemente baja
   con la etiqueta, sin romper la fila.
   .sc-cuenta-form--compacto reduce un poco el espaciado general del
   formulario (gap entre filas) para ganar algo más de aire sin tener
   que encoger la letra de las etiquetas. */
.sc-cuenta-form--compacto {
    gap: 0.8rem;
}

.sc-cuenta-form--compacto .sc-cuenta-campo-contrasena {
    margin: 0.2rem 0 0;
}

.sc-cuenta-campo-contrasena {
    border: 1px dashed rgba(var(--sc-gold-rgb), 0.3);
    border-radius: 6px;
    padding: 1rem 1.2rem;
    margin: 0.4rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.sc-cuenta-campo-contrasena legend {
    color: var(--sc-gold);
    font-size: var(--sc-fs-nav);
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 0 0.4rem;
}

/* Contenedor de fila propio para poner varios campos en paralelo
   dentro de .sc-cuenta-form — usado para las 3 filas de Datos de la
   cuenta (2 campos las dos primeras, 3 la de contraseñas). flex-wrap
   para que en pantallas estrechas los campos bajen en vez de
   estrujarse. */
.sc-cuenta-datos-fila {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 0 0 1rem;
}

.sc-cuenta-datos-fila > .form-row {
    flex: 1 1 0;
    min-width: 200px;
    margin: 0;
}

@media (max-width: 700px) {
    .sc-cuenta-datos-fila {
        flex-direction: column;
    }
}

/* ===== Avisos de WooCommerce (wc_print_notices) ===== */
.woocommerce-error,
.woocommerce-message,
.woocommerce-info {
    list-style: none;
    background: var(--sc-surface);
    border-left: 3px solid var(--sc-gold);
    border-radius: 4px;
    padding: 0.9rem 1.1rem;
    margin: 0 0 1.2rem;
    font-size: var(--sc-fs-small);
    color: var(--sc-text);
}

.woocommerce-error {
    border-left-color: #b3261e;
}

.woocommerce-error li,
.woocommerce-message li,
.woocommerce-info li {
    list-style: none;
    margin: 0;
}
/* "Valorar" junto a cada producto en el detalle de un pedido (18/9/2026,
   reseñas — ver includes/producto/producto-resenas.php). Enlace discreto
   al panel Reseñas de la ficha del producto. */
.sc-valorar-enlace,
.sc-valorar-hecho {
    margin-left: 0.6rem;
    padding: 0.05rem 0.5rem;
    border: 1px solid rgba(var(--sc-gold-rgb), 0.4);
    border-radius: 6px;
    font-size: 0.8em;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    text-decoration: none;
    white-space: nowrap;
}
.sc-valorar-enlace { color: var(--sc-gold) !important; }
.sc-valorar-enlace:hover { background: rgba(var(--sc-gold-rgb), 0.1); }
.sc-valorar-hecho { color: var(--sc-muted); border-color: rgba(var(--sc-gold-rgb), 0.2); }

/* Iconos de teléfono y correo de las direcciones de un pedido: mismo arreglo
   que en finalizar-compra.css (se quedaban quietos al hacer scroll). */
.sc-cuenta-cuerpo .woocommerce-customer-details--phone,
.sc-cuenta-cuerpo .woocommerce-customer-details--email {
    position: relative;
}