/* ==========================================================
   SUPERPLUS AUTH FORMS — THEME COMMON
   Estilos base para todos los temas (light, dark, none)
   ========================================================== */

/* ----------------------------------------------------
   1. CONTENEDOR PRINCIPAL (LA TARJETA)
   ---------------------------------------------------- */
#customer_login,
#customer_recovery,
#customer_register {
    width: 95% !important;
    max-width: 440px !important;
    margin: 20px auto !important;
    padding: 32px 36px !important;
    border: 1px solid rgba(0,0,0,0.04) !important;
    border-radius: var(--sp-radius-card) !important;
    box-shadow: var(--sp-shadow-card) !important;
    box-sizing: border-box !important;
    font-family: var(--sp-font-family) !important;
}

#customer_login form.woocommerce-form,
#customer_recovery form,
#customer_register form {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* ----------------------------------------------------
   2. TÍTULOS Y DESCRIPCIONES
   ---------------------------------------------------- */
.txt_acceso {
    font-size: 24px !important;
    font-weight: 700 !important;
    margin: 0 0 6px 0 !important;
    text-align: center !important;
    letter-spacing: -0.02em !important;
}

.sp-subtitle {
    font-size: 14px !important;
    line-height: 1.4 !important;
    text-align: center !important;
    margin-top: 0 !important;
    margin-bottom: 20px !important;
}

/* ----------------------------------------------------
   3. SEPARADORES
   ---------------------------------------------------- */
.sp_divider {
    display: flex !important;
    align-items: center !important;
    text-align: center !important;
    font-size: 12px !important;
    margin: 20px 0 !important;
}

.sp_divider::before,
.sp_divider::after {
    content: '' !important;
    flex: 1 !important;
    border-bottom: 1px solid var(--sp-border-color) !important;
}

.sp_divider::before { margin-right: 12px !important; }
.sp_divider::after { margin-left: 10px !important; }

/* ----------------------------------------------------
   4. CAMPOS DEL FORMULARIO
   ---------------------------------------------------- */
.woocommerce-form-row,
.form-row {
    width: 100% !important;
    margin-bottom: 14px !important;
}

.woocommerce-form-row label {
    display: block !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    margin-bottom: 6px !important;
}

.woocommerce-Input,
input.input-text {
    width: 100% !important;
    height: var(--sp-height-element) !important;
    font-size: 15px !important;
    border-radius: 20px;
    box-sizing: border-box !important;
    transition: all 0.2s ease !important;
    outline: none !important;
}

/* Diseño de respaldo (solo campos: label + input + focus), copiado tal
   cual de login-guest.css (sección "Tema Claro") con sus variables --sp-*
   resueltas a valor literal. login-guest.css/theme-dark.css solo se
   cargan si el módulo tiene tema "Claro"/"Oscuro" — con "Sin tema" estas
   reglas no existían y los campos (label + input) quedaban sin diseño,
   heredando el estilo crudo del theme del cliente. Con !important en
   ambos lados, gana quien cargue después: si hay tema activo,
   login-guest.css/theme-dark.css se encolan con este archivo como
   dependencia, así que se imprimen después y ganan la cascada. */
.woocommerce-form-row label {
    color: #09090b;
}

.woocommerce-Input,
input.input-text {
    background-color: #fafafa;
    border: 1px solid #e4e4e7;
}

.woocommerce-Input:focus,
input.input-text:focus {
    background-color: #ffffff;
    border-color: #09090b;
    box-shadow: 0 0 0 1px #09090b;
}

/* ----------------------------------------------------
   5. FILA SECUNDARIA (Recordarme / Link)
   ---------------------------------------------------- */
.segunda_fila_login {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-top: -4px !important;
    margin-bottom: 20px !important;
}

.woocommerce-form-login__rememberme {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 13px !important;
    margin: 0 !important;
}

.lost_password a {
    text-decoration: none !important;
    font-size: 13px !important;
}

shipping_first_name

/* ----------------------------------------------------
   6. BOTONES
   ---------------------------------------------------- */
button.sp_btn,
.woocommerce-Button.button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: var(--sp-height-element) !important;
    border: none !important;
    border-radius: var(--sp-radius-element) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* ----------------------------------------------------
   7. FOOTER
   ---------------------------------------------------- */
.auth_footer {
    margin-top: 24px !important;
    text-align: center !important;
    font-size: 14px !important;
    border-top: 1px solid var(--sp-border-color) !important;
    padding-top: 20px !important;
}

.auth_footer a {
    font-weight: 600 !important;
    text-decoration: none !important;
}

/* ----------------------------------------------------
   8. ALERTAS Y ERRORES
   ---------------------------------------------------- */
.woocommerce-error,
.woocommerce-message,
.woocommerce-info {
    margin: 0 auto 15px auto !important;
    padding: 14px 20px !important;
    border-radius: var(--sp-radius-element) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    list-style: none !important;
    text-align: left !important;
    box-sizing: border-box !important;
    position: relative !important;
}

/* El ancho estrecho (440px) es propio de la tarjeta de login/registro —
   fuera de ese contexto (ej. aviso "Confirma tu dirección de correo" en
   Mi Cuenta) comprimía el texto contra el botón `.wc-forward` flotante,
   partiendo palabras. Se acota solo a los formularios de auth. */
#customer_login .woocommerce-error,
#customer_login .woocommerce-message,
#customer_login .woocommerce-info,
#customer_register .woocommerce-error,
#customer_register .woocommerce-message,
#customer_register .woocommerce-info,
#customer_recovery .woocommerce-error,
#customer_recovery .woocommerce-message,
#customer_recovery .woocommerce-info {
    max-width: 440px !important;
}

/* Eliminar iconos por defecto de WooCommerce que causan el texto "D or" */
.woocommerce-error::before,
.woocommerce-message::before,
.woocommerce-info::before {
    display: none !important;
}

/* Aviso dentro de Mi Cuenta (ej. "Confirma tu dirección de correo
   electrónico para comprobar si hay pedidos anteriores") — el botón
   `.wc-forward` de WooCommerce va flotante (`float: right`) dentro del
   propio texto del notice, dejando el texto comprimido en una columna
   angosta junto a él. Se apila el botón debajo del texto en vez de
   dejarlo flotar. */
.sp-wsv-myaccount-content .woocommerce-error,
.sp-wsv-myaccount-content .woocommerce-message,
.sp-wsv-myaccount-content .woocommerce-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    max-width: none !important;
    line-height: 1.5;
}

.sp-wsv-myaccount-content .woocommerce-error .button.wc-forward,
.sp-wsv-myaccount-content .woocommerce-message .button.wc-forward,
.sp-wsv-myaccount-content .woocommerce-info .button.wc-forward {
    float: none !important;
    order: -1;
}

/* ----------------------------------------------------
   9. RESPONSIVE
   ---------------------------------------------------- */
@media (max-width: 480px) {
    #customer_login, #customer_register {
        padding: 24px 20px !important;
        margin: 10px auto !important;
    }
}

/* ----------------------------------------------------
   10. BOTÓN "INICIAR SESIÓN CON GOOGLE"
   Sigue las guías de marca de Google Sign-In: fondo blanco, borde gris,
   logo de 4 colores, texto en gris oscuro (Roboto/system font).
   ---------------------------------------------------- */
.sp-wsv-social-login {
    margin: 16px 0 0;
}

.sp-wsv-btn-google {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 10px 16px !important;
    background: #fff !important;
    color: #3c4043 !important;
    border: 1px solid #dadce0 !important;
    border-radius: 4px !important;
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-align: center;
    text-decoration: none !important;
    cursor: pointer;
    box-shadow: none !important;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.sp-wsv-btn-google:hover,
.sp-wsv-btn-google:focus {
    background: #f8f9fa !important;
    color: #3c4043 !important;
    box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15) !important;
}

.sp-wsv-btn-google:active {
    background: #f1f3f4 !important;
}

.sp-wsv-btn-google__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
}

.sp-wsv-btn-google__icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

.sp-wsv-btn-google__label {
    line-height: 1;
}

/* ----------------------------------------------------
   11. MENÚ FLOTANTE "MI CUENTA" (botón + panel de navegación)
   Estructura/posición común a los 3 temas; el color de fondo por
   defecto (--sp-fab-bg-default) lo define cada tema (login-guest.css
   / theme-dark.css), y puede sobreescribirse por sitio con
   --sp-fab-color (inline, opción "Color del botón" del panel).
   ---------------------------------------------------- */
.sp-wsv-floating-account-btn {
    cursor: pointer;
    position: fixed;
    width: 64px;
    height: 64px;
    background-color: var(--sp-fab-color, var(--sp-fab-bg-default, #000));
    border-radius: 50%;
    display: none;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    border: none !important;
    z-index: 100;
    padding: 0;
    margin: 0;
    transition: filter 0.15s ease, box-shadow 0.15s ease;
}

/* Sin color de hover propio: filter:brightness() sobre el color base
   (ajuste relativo, funciona igual con el color por defecto del tema
   o el personalizado, sin calcular un tono derivado en PHP). */
.sp-wsv-floating-account-btn:hover {
    filter: brightness(0.85);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

/* Con color de hover propio (campo "Color al pasar el mouse" del
   panel): se aplica tal cual y se anula el filter automático, para
   que el color elegido se vea exacto, no modulado por brightness(). */
.sp-wsv-floating-account-btn.has-custom-hover:hover {
    background-color: var(--sp-fab-hover-color);
    filter: none;
}

/* Estado abierto (menú desplegado, ícono de "cerrar"): se fuerza a
   negro absoluto con !important para blindarlo frente a cualquier CSS
   ajeno (otro plugin/theme) que pueda estar pintando el botón con otro
   color al cambiar su contenido/estado — visto en el sitio real. */
.sp-wsv-floating-account-btn.is-open {
    background-color: #000 !important;
    filter: none !important;
}

.sp-wsv-floating-account-btn svg {
    fill: var(--sp-fab-icon-color, #fff) !important;
}

.sp-wsv-floating-account-btn--bottom-left {
    left: 48px;
    bottom: 48px;
}

.sp-wsv-floating-account-btn--bottom-right {
    right: 48px;
    bottom: 48px;
}

.sp-wsv-floating-account-btn--top-left {
    left: 48px;
    top: 96px;
}

.sp-wsv-floating-account-btn--top-right {
    right: 48px;
    top: 96px;
}

@media (max-width: 1024px) {
    .sp-wsv-floating-account-btn {
        display: flex;
    }
}

@media (max-width: 767px) {
    .sp-wsv-floating-account-btn.sp-wsv-floating-account-btn--bottom-left,
    .sp-wsv-floating-account-btn.sp-wsv-floating-account-btn--bottom-right {
        bottom: 92px;
        width: 48px;
        height: 48px;
    }

    .sp-wsv-floating-account-btn.sp-wsv-floating-account-btn--bottom-left {
        left: 16px;
    }

    .sp-wsv-floating-account-btn.sp-wsv-floating-account-btn--bottom-right {
        right: 16px;
    }

    .sp-wsv-floating-account-btn.sp-wsv-floating-account-btn--top-left,
    .sp-wsv-floating-account-btn.sp-wsv-floating-account-btn--top-right {
        width: 48px;
        height: 48px;
    }
}

/* Ocultamiento robusto del nav clásico: solo se activa cuando el
   toggle está encendido (clase añadida al <body> vía body_class()),
   con !important para ganar sobre cualquier estilo de layout que el
   theme activo aplique a este nav (evita el problema detectado donde
   un simple display:none sin scope perdía la cascada). */
@media (max-width: 1024px) {
    body.sp-wsv-floating-account-menu-active nav.woocommerce-MyAccount-navigation {
        border: 1px solid var(--sp-border-color, #000);
        display: flex !important;
        flex-direction: column !important;
        overflow-x: visible !important;
        padding: 10px !important;
        z-index: 100;
        position: fixed;
        top: auto !important;
        bottom: 126px;
        left: 16px;
        width: 344px !important;
        max-height: calc(100vh - 160px);
        overflow-y: auto;
        box-sizing: border-box;
        /* Transición de apertura/cierre: en vez de display:none/slideUp
           (que jQuery no puede animar limpiamente sobre un display
           forzado por !important), se anima solo opacidad + un
           desplazamiento vertical (sin scale, que se percibía como un
           cierre "horizontal" por el ancho fijo del panel), y se saca
           del flujo de accesibilidad/clicks con visibility cuando
           está cerrado. */
        opacity: 0;
        visibility: hidden;
        transform: translateY(16px);
        transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
    }

    body.sp-wsv-floating-account-menu-active nav.woocommerce-MyAccount-navigation.active {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0s;
    }

    /* El theme activo pone el <ul> en fila (tabs horizontales con
       scroll); dentro del panel flotante debe verse como lista
       vertical de opciones. */
    body.sp-wsv-floating-account-menu-active nav.woocommerce-MyAccount-navigation.active ul {
        display: flex !important;
        flex-direction: column !important;
        gap: 2px !important;
        min-width: 0 !important;
        width: 100% !important;
    }

    body.sp-wsv-floating-account-menu-active nav.woocommerce-MyAccount-navigation.active ul li a {
        white-space: normal !important;
        width: 100%;
        box-sizing: border-box;
    }

    /* El contraste del icono activo (opacity + filter) ya se fija de
       forma incondicional en theme-dark.css/login-guest.css (no solo
       aquí dentro del panel flotante), así no se duplica esa regla. */

    body.sp-wsv-floating-account-menu-active .woocommerce-MyAccount-content {
        width: 34rem !important;
        margin-left: -50px;
    }
}

/* El ancho fijo `34rem` + `margin-left: -50px` de arriba está pensado
   para tablet, donde sobra espacio horizontal al colapsar el sidebar
   al menú flotante. En mobile (≤767px) ese ancho fijo (544px) se salía
   del viewport — desbordaba el toolbar de filtros, las filas de la
   tabla de pedidos y el botón de paginación fuera de la pantalla. Aquí
   el contenido debe ocupar el 100% del padding lateral que ya pone
   `.sp-wsv-myaccount` (16px), sin desplazamiento. */
@media (max-width: 767px) {
    body.sp-wsv-floating-account-menu-active .woocommerce-MyAccount-content {
        width: 100% !important;
        margin-left: 0;
    }
}

@media (max-width: 767px) {
    body.sp-wsv-floating-account-menu-active nav.woocommerce-MyAccount-navigation {
        bottom: 154px;
        width: calc(100% - 32px) !important;
    }
}

@media (min-width: 1025px) {
    body.sp-wsv-floating-account-menu-active nav.woocommerce-MyAccount-navigation {
        display: block !important;
        padding: 10px;
    }
}

/* ----------------------------------------------------
   12. MI CUENTA — LAYOUT
   Plantillas nuevas de includes/modules/custom-login/templates/woocommerce/myaccount/.
   Todo el layout (grid, tarjetas, tablas, iconos) vive aquí, SIN color ni
   scope de tema — el color se añade aparte en login-guest.css (sección
   10-bis) y theme-dark.css (sección 10-bis), con selectores
   `body.sp-wsv-theme-light/dark .sp-wsv-myaccount-*`. Este bloque debe
   verse completo y ordenado incluso con el tema del módulo en "Ninguno"
   (heredando el theme del cliente instalado en el proyecto): solo
   `color: inherit`/`currentColor`, `background: transparent` y bordes
   neutros semitransparentes, cero hex/rgb/var(--sp-*) de color aquí.
   Breakpoints: 1024px / 767px / 480px (los mismos que usa el resto de
   este fichero).
   ---------------------------------------------------- */

/* --- Grid principal: sidebar + contenido --- */
.sp-wsv-myaccount {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 32px;
    align-items: start;
    width: 100%;
    max-width: 1280px;
    margin: 32px auto;
    padding: 0 24px;
    box-sizing: border-box;
    font-family: var(--sp-font-family, inherit);
}

.sp-wsv-myaccount-content {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
    /* Anula el float/width/padding/border/background que algunos themes
       (ej. Hello Elementor Child, `style.css?ver=3.1.0`) aplican a
       `.woocommerce-MyAccount-content` para su layout de 2 columnas antiguo
       basado en floats (`float: right; width: 68%` / `width: calc(100% - 300px)`)
       — aquí el ancho lo da el grid de `.sp-wsv-myaccount`, y el contenido
       se compone de sub-tarjetas `.sp-wsv-card` propias. Sin este reset con
       !important en width, la columna queda encogida a un porcentaje del
       theme y rompe cualquier grid interno (ej.
       `.sp-wsv-dashboard-last-order__row`). */
    float: none !important;
    width: 50rem !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
}

/* --- Sidebar de navegación --- */
.sp-wsv-myaccount-sidebar {
    display: block;
    position: sticky;
    top: 24px;
    padding: 20px;
    border-radius: 16px;
    box-shadow: inset 0 0 0 1px rgba(127, 127, 127, 0.18);
    box-sizing: border-box;
}

.sp-wsv-myaccount-sidebar ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sp-wsv-myaccount-sidebar li {
    margin: 0;
}

.sp-wsv-myaccount-sidebar a {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    color: inherit;
    transition: background-color 0.15s ease, opacity 0.15s ease;
    /* El theme del sitio (ej. Hello Elementor Child) reserva un
       `border-left: 3px solid transparent` en cada item del nav para el
       indicador del item activo — se anula para que ningún item, activo o
       no, tenga ese hueco lateral reservado. */
    border-left: none !important;
}

/* El theme del sitio (ej. Hello Elementor Child) añade un icono decorativo
   propio vía `a::before` a los enlaces de `.woocommerce-MyAccount-navigation`
   — con el icono Phosphor de `.sp-wsv-myaccount-nav-icon` ya presente,
   ese `::before` queda duplicado visualmente. Se anula solo aquí, sin tocar
   el `::before` en ningún otro contexto del sitio. */
.sp-wsv-myaccount-sidebar a::before {
    content: none !important;
    display: none !important;
}

.sp-wsv-myaccount-sidebar li.is-active a {
    font-weight: 700;
    /* El theme del sitio (ej. Hello Elementor Child) añade `border-left` +
       `padding-left` propios al item activo del nav — se anulan para que
       el fondo del item activo (color, sección 10-bis) quede como una
       píldora uniforme con el mismo padding que el resto de items, en vez
       de un bloque con muesca lateral pegado al borde de la tarjeta. */
    border-left: none !important;
    padding-left: 16px !important;
}

.sp-wsv-myaccount-sidebar li:not(:last-child) {
    /* Separador visual antes del item "Salir" — se aplica solo al
       penúltimo item vía la clase de logout de abajo, no de forma
       genérica a todos. */
}

.sp-wsv-myaccount-nav-item--logout {
    margin-top: 20px;
    padding-top: 16px;
    box-shadow: inset 0 1px 0 0 rgba(127, 127, 127, 0.18);
}

.sp-wsv-myaccount-nav-icon {
    flex-shrink: 0;
    font-size: 18px;
    line-height: 1;
    width: 18px;
    text-align: center;
}

/* --- Tarjeta genérica de contenido --- */
.sp-wsv-card {
    border-radius: 16px;
    padding: 24px;
    box-shadow: inset 0 0 0 1px rgba(127, 127, 127, 0.18);
    box-sizing: border-box;
}

.sp-wsv-card h2 {
    margin: 0 0 16px;
    font-size: 17px;
    font-weight: 700;
}

body.sp-wsv-theme-dark .sp-wsv-order-detail__table .woocommerce-table--order-details th{
    opacity: 1;
}

/* --- Dashboard: tarjeta de saludo --- */
.sp-wsv-myaccount-dashboard-greeting p {
    margin: 0 0 8px;
    font-size: 14px;
    line-height: 1.6;
}

.sp-wsv-myaccount-dashboard-greeting p:last-child {
    margin-bottom: 0;
}

/* --- Dashboard: "Tu último pedido" --- */
.sp-wsv-dashboard-last-order__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.sp-wsv-dashboard-last-order__header h2 {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
}

.sp-wsv-dashboard-last-order__all-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    color: inherit;
    opacity: 0.75;
    white-space: nowrap;
}

.sp-wsv-dashboard-last-order__row {
    display: grid;
    grid-template-columns: repeat(4, 1fr) auto;
    gap: 16px;
    align-items: start;
    padding-top: 12px;
    box-shadow: inset 0 1px 0 0 rgba(127, 127, 127, 0.18);
}

.sp-wsv-dashboard-last-order__cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.sp-wsv-dashboard-last-order__cell--status {
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    align-self: center;
}

.sp-wsv-dashboard-last-order__label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.5;
}



.sp-wsv-dashboard-last-order__number,
.sp-wsv-dashboard-last-order__amount {
    font-size: 14px;
    font-weight: 700;
}

.sp-wsv-dashboard-last-order__items {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sp-wsv-dashboard-last-order__thumb {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: inset 0 0 0 1px rgba(127, 127, 127, 0.18);
}

.sp-wsv-dashboard-last-order__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sp-wsv-dashboard-last-order__thumb--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    opacity: 0.5;
}

.sp-wsv-dashboard-last-order__items-count {
    font-size: 12px;
    font-weight: 600;
}

.sp-wsv-dashboard-last-order__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: inset 0 0 0 1px rgba(127, 127, 127, 0.18);
}

/* --- Pedidos: cabecera de página (solo diseño, sin tocar colores) --- */
.sp-wsv-orders-page-header {
    margin-bottom: 16px;
}

.sp-wsv-orders-page-header h1 {
    margin: 0;
    font-size: 26px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.sp-wsv-orders-page-header p {
    margin: 6px 0 0;
    max-width: 560px;
    font-size: 13px;
    line-height: 1.5;
    opacity: 0.65;
}

/* --- Pedidos: toolbar de búsqueda/filtro (solo diseño, colores intactos) --- */
.sp-wsv-orders-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px;
    border-radius: 16px;
    border: 1px solid rgba(127, 127, 127, 0.12);
    box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(127, 127, 127, 0.08);
    margin-bottom: 22px;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(8px);
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.sp-wsv-orders-toolbar:focus-within {
    border-color: rgba(78, 101, 246, 0.2);
}

.sp-wsv-orders-toolbar__search {
    position: relative;
    flex: 1 1 280px;
    display: flex;
    align-items: center;
}

.sp-wsv-orders-toolbar__search input {
    width: 100%;
    height: 40px;
    padding: 0 24px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1;
    box-sizing: border-box;
    border: 1px solid #e2e8f0;
    background: #f1f5f9;
    color: #0f172a;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.sp-wsv-orders-toolbar__search input::placeholder {
    color: #94a3b8;
    font-weight: 500;
    opacity: 1;
    padding-right: 8px;
}

/* Fallback WebKit/Gecko: margin no aplica a ::placeholder, se usa text-indent simulado vía padding del input si necesitas más separación del borde dcho */
.sp-wsv-orders-toolbar__search input::-webkit-input-placeholder {
    padding-right: 8px;
}

.sp-wsv-orders-toolbar__search input::-moz-placeholder {
    padding-right: 8px;
}

.sp-wsv-orders-toolbar__search input:hover {
    border-color: #cbd5e1;
    background: #e8eef6;
}

.sp-wsv-orders-toolbar__search input:focus {
    border-color: #4e65f6;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(78, 101, 246, 0.15), 0 1px 2px rgba(0,0,0,0.04);
}

.sp-wsv-orders-toolbar__filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.sp-wsv-orders-toolbar__select-wrap {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 168px;
}

.sp-wsv-orders-toolbar__select-wrap select {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    height: 40px;
    padding: 0 34px 0 14px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1;
    border: 1px solid #e2e8f0;
    background: #f1f5f9;
    color: #334155;
    cursor: pointer;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.sp-wsv-orders-toolbar__select-wrap select:hover {
    border-color: #cbd5e1;
    background: #e8eef6;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.sp-wsv-orders-toolbar__select-wrap select:focus {
    border-color: #4e65f6;
    background: #fff;
    color: #0f172a;
    box-shadow: 0 0 0 3px rgba(78, 101, 246, 0.15), 0 1px 2px rgba(0,0,0,0.04);
}

.sp-wsv-orders-toolbar__select-wrap select:active {
    transform: scale(0.99);
}

/* Options — estilizado nativo premium (Chrome/Firefox respetan background+color+padding). */
.sp-wsv-orders-toolbar__select-wrap select option {
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    background: #f8fafc;
    color: #334155;
}

.sp-wsv-orders-toolbar__select-wrap select option:checked,
.sp-wsv-orders-toolbar__select-wrap select option:hover {
    background: #eef2ff !important;
    color: #3c4fe0 !important;
}

.sp-wsv-orders-toolbar__select-wrap select option:disabled {
    color: #94a3b8;
}

.sp-wsv-orders-toolbar__select-wrap i {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    opacity: 0.7;
    color: #64748b;
    pointer-events: none;
    transition: transform 0.2s ease, opacity 0.2s ease, color 0.2s ease;
}

.sp-wsv-orders-toolbar__select-wrap:has(select:focus) i {
    opacity: 1;
    color: #4e65f6;
    transform: translateY(-50%) rotate(180deg);
}

/* Evita que la rotación del caret afecte al icono calendar de Rango de fechas */
.sp-wsv-orders-toolbar__select-wrap--date:has(select:focus) .sp-wsv-orders-toolbar__select-icon {
    transform: translateY(-50%) scale(1.05) !important;
}

.sp-wsv-orders-toolbar__select-wrap--date:has(select:focus) i.ph-caret-down {
    transform: translateY(-50%) rotate(180deg) !important;
}

.sp-wsv-orders-toolbar__select-icon {
    position: absolute;
    left: 12px;
    right: auto;
    top: 50%;
    transform: translateY(-50%);
    font-size: 15px;
    opacity: 0.85;
    color: #64748b;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    transition: opacity 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.sp-wsv-orders-toolbar__select-wrap:has(select:focus) .sp-wsv-orders-toolbar__select-icon {
    opacity: 1;
    color: #4e65f6;
    transform: translateY(-50%) scale(1.05);
}

.sp-wsv-orders-toolbar__select-wrap:has(.sp-wsv-orders-toolbar__select-icon) select {
    padding-left: 34px;
}

/* Rango de fechas: sin icono calendario, solo caret fijo dcha / texto centrado */
.sp-wsv-orders-toolbar__select-wrap--date select {
    text-align: center;
    text-align-last: center;
    padding-left: 16px !important;
    padding-right: 36px !important;
}

.sp-wsv-orders-toolbar__select-wrap--date select option {
    text-align: left;
    text-align-last: left;
}

.sp-wsv-orders-toolbar__filter-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 18px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -0.01em;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    background: #0f172a;
    color: #ffffff;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 4px 10px rgba(15,23,42,0.12);
    transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.sp-wsv-orders-toolbar__filter-btn:hover {
    background: #1e293b;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(15,23,42,0.16);
}

.sp-wsv-orders-toolbar__filter-btn:active {
    transform: translateY(0) scale(0.98);
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}

.sp-wsv-orders-toolbar__filter-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(78, 101, 246, 0.35), 0 4px 10px rgba(15,23,42,0.12);
}

.sp-wsv-orders-toolbar__filter-btn i {
    font-size: 15px;
    opacity: 0.95;
}

/* --- Tabla de pedidos (solo diseño) --- */
.sp-wsv-orders-card {
    padding: 0;
    overflow-x: auto;
    border-radius: 16px;
}

.sp-wsv-orders-table__header-thumb,
.sp-wsv-orders-table__cell-thumb {
    width: 68px;
}

.sp-wsv-orders-table__thumb {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(127, 127, 127, 0.18);
}

.sp-wsv-orders-table__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sp-wsv-orders-table__thumb--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    opacity: 0.5;
}

.sp-wsv-orders-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.sp-wsv-orders-table thead th {
    text-align: left;
    padding: 14px 18px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.2;
    white-space: nowrap;
    box-shadow: inset 0 -1px 0 0 rgba(127, 127, 127, 0.18);
}

.sp-wsv-orders-table__row td,
.sp-wsv-orders-table__row th {
    padding: 16px 18px;
    vertical-align: middle;
    line-height: 1.45;
    box-shadow: inset 0 -1px 0 0 rgba(127, 127, 127, 0.1);
}

.sp-wsv-orders-table__row:last-child td,
.sp-wsv-orders-table__row:last-child th {
    box-shadow: none;
}

.sp-wsv-orders-table__row:hover {
    background: rgba(127, 127, 127, 0.06);
}

/* El theme del sitio (Hello Elementor `reset.css`) aplica un fondo
   "cebra" por defecto a `tr:nth-child(2n+1) > td` de cualquier
   `<table>` — sobre esta tabla generaba celdas grises independientes
   en vez de una fila uniforme, rompiendo el look de tarjeta limpia
   del diseño. Se anula solo aquí, sin tocar el estilo del theme en
   ningún otro contexto del sitio. */
.sp-wsv-orders-table tbody tr:nth-child(2n+1) > td,
.sp-wsv-orders-table tbody tr:nth-child(2n+1) > th {
    background-color: transparent !important;
}

/* El mismo `reset.css` del theme añade `border: 1px solid` a cada
   celda (`table td, table th`) — sobre esta tabla generaba un efecto
   de "rejilla"/tabla duplicada (cada celda con su propio contorno)
   en vez de las líneas horizontales limpias entre filas que ya pone
   el diseño vía `box-shadow` (arriba). Se anula solo aquí. */
.sp-wsv-orders-table td,
.sp-wsv-orders-table th {
    border: none !important;
}

.sp-wsv-orders-table__row td:first-child,
.sp-wsv-orders-table__row th:first-child {
    padding-left: 18px;
}

.sp-wsv-orders-table__status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid currentColor;
    white-space: nowrap;
}

/* Fila oculta por filtros (JS añade hidden + display:none inline) + elemento hidden nativo. */
.sp-wsv-orders-table__row[hidden] {
    display: none !important;
}

.sp-wsv-orders-empty-state[hidden] {
    display: none !important;
}

.sp-wsv-orders-empty-state td {
    padding: 32px 20px;
    text-align: center;
    box-shadow: none;
}

.sp-wsv-orders-empty-state__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    max-width: 420px;
    margin: 0 auto;
}

.sp-wsv-orders-empty-state__icon {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    box-shadow: inset 0 0 0 1px rgba(127, 127, 127, 0.18);
    opacity: 0.7;
}

.sp-wsv-orders-empty-state__title {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
}

.sp-wsv-orders-empty-state__desc {
    margin: 0;
    font-size: 12px;
    opacity: 0.65;
}

.sp-wsv-orders-empty-state__reset {
    margin-top: 4px;
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    border: 1px solid currentColor;
    background: transparent;
    color: inherit;
}

/* --- Descargas: cabecera de página + KPI --- */
.sp-wsv-downloads-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 4px;
}

.sp-wsv-downloads-page-header__intro h1 {
    margin: 0;
    font-size: 26px;
    font-weight: 800;
}

.sp-wsv-downloads-page-header__intro p {
    margin: 4px 0 0;
    max-width: 520px;
    font-size: 13px;
    opacity: 0.65;
}

.sp-wsv-downloads-kpi {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
    border-radius: 16px;
    box-shadow: inset 0 0 0 1px rgba(127, 127, 127, 0.18);
    flex-shrink: 0;
}

.sp-wsv-downloads-kpi__icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

.sp-wsv-downloads-kpi__body {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.sp-wsv-downloads-kpi__count {
    font-size: 22px;
    font-weight: 800;
}

.sp-wsv-downloads-kpi__label {
    font-size: 11px;
    font-weight: 600;
    opacity: 0.6;
}

/* --- Descargas: toolbar de búsqueda/filtro (estructura visual, sin JS) --- */
.sp-wsv-downloads-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.sp-wsv-downloads-toolbar__search {
    position: relative;
    flex: 1 1 260px;
    display: flex;
    align-items: center;
}

.sp-wsv-downloads-toolbar__search i {
    position: absolute;
    left: 16px;
    font-size: 16px;
    opacity: 0.5;
    pointer-events: none;
}

.sp-wsv-downloads-toolbar__search input {
    width: 100%;
    padding: 11px 16px 11px 42px;
    border-radius: 12px;
    font-size: 13px;
    box-sizing: border-box;
    box-shadow: inset 0 0 0 1px rgba(127, 127, 127, 0.18);
    background: transparent;
    color: inherit;
}

.sp-wsv-downloads-toolbar__filter {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 36px 11px 16px;
    border-radius: 12px;
    box-shadow: inset 0 0 0 1px rgba(127, 127, 127, 0.18);
    flex-shrink: 0;
}

.sp-wsv-downloads-toolbar__filter select {
    appearance: none;
    border: none;
    background: transparent;
    color: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

.sp-wsv-downloads-toolbar__filter-caret {
    position: absolute;
    right: 14px;
    font-size: 12px;
    opacity: 0.5;
    pointer-events: none;
}

/* --- Tabla de descargas --- */
.sp-wsv-downloads-card {
    padding: 0;
    overflow-x: auto;
}

.sp-wsv-downloads-list {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.sp-wsv-downloads-list thead th {
    text-align: left;
    padding: 16px 20px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.55;
    box-shadow: inset 0 -1px 0 0 rgba(127, 127, 127, 0.18);
}

.sp-wsv-downloads-list__col-action {
    text-align: right;
}

.sp-wsv-downloads-list__item td {
    padding: 16px 20px;
    vertical-align: middle;
    box-shadow: inset 0 -1px 0 0 rgba(127, 127, 127, 0.1);
}

.sp-wsv-downloads-list__item:last-child td {
    box-shadow: none;
}

.sp-wsv-downloads-list__item:hover td {
    background: rgba(127, 127, 127, 0.05);
}

.sp-wsv-downloads-list__product {
    display: flex;
    align-items: center;
    gap: 14px;
}

.sp-wsv-downloads-list__thumb {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: inset 0 0 0 1px rgba(127, 127, 127, 0.18);
}

.sp-wsv-downloads-list__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sp-wsv-downloads-list__thumb--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    opacity: 0.5;
}

.sp-wsv-downloads-list__product-name {
    display: block;
    font-weight: 600;
    font-size: 14px;
}

.sp-wsv-downloads-list__remaining {
    display: block;
    font-size: 11px;
    opacity: 0.55;
    margin-top: 2px;
}

.sp-wsv-downloads-list__cell-type,
.sp-wsv-downloads-list__cell-date {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.sp-wsv-downloads-list__cell-type i,
.sp-wsv-downloads-list__cell-date i {
    font-size: 16px;
    opacity: 0.5;
}

.sp-wsv-downloads-list__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid currentColor;
    white-space: nowrap;
}

.sp-wsv-downloads-list__cell-action {
    text-align: right;
}

.sp-wsv-downloads-list__download-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

/* --- Grid de direcciones --- */
.sp-wsv-myaccount-addresses-intro {
    margin: 0 0 4px;
    font-size: 13px;
    opacity: 0.7;
}

.sp-wsv-addresses-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.sp-wsv-address-card {
    border-radius: 16px;
    padding: 24px;
    box-shadow: inset 0 0 0 1px rgba(127, 127, 127, 0.18);
    box-sizing: border-box;
}

.sp-wsv-address-card__header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    margin-left: -14px;
}

.sp-wsv-address-card__header i {
    font-size: 22px;
    flex-shrink: 0;
    margin-top: -15px;
}

.sp-wsv-address-card__header h2 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    flex: 1;
}

.sp-wsv-address-card address {
    font-style: normal;
    font-size: 13px;
    line-height: 1.6;
    opacity: 0.85;
    margin-bottom: 16px;
}

.sp-wsv-address-card__edit {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    color: inherit;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid currentColor;
    white-space: nowrap;
}

/* --- Formulario "Detalles de la cuenta" --- */
.sp-wsv-account-page-header {
    display: none;
}

.sp-wsv-account-page-header h1 {
    margin: 0;
    font-size: 26px;
    font-weight: 800;
}

/* El <form> en sí no lleva fondo de tarjeta — cada bloque interno
   (`.sp-wsv-account-form__section`) es su propia `.sp-wsv-card`, igual que
   el prototipo (dos tarjetas separadas: Información personal / Seguridad). */
.sp-wsv-account-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    /* El theme del sitio (ej. Hello Elementor Child) pinta fondo blanco
       por defecto sobre <form> dentro del área de cuenta — igual que hace
       con `.woocommerce-MyAccount-content`. Aquí el <form> es solo un
       contenedor de layout (las dos subtarjetas llevan su propio
       `.sp-wsv-card` con color), así que se anula explícitamente. */
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
}

.sp-wsv-account-form__section {
    display: block;
}

.sp-wsv-account-form__section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 12px;
    margin-bottom: 20px;
    box-shadow: inset 0 -1px 0 0 rgba(127, 127, 127, 0.18);
}

.sp-wsv-account-form__section-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
}

/* Grid de 2 columnas para los campos de cada sección — sustituye el
   float clásico (`form-row-first`/`form-row-last` de WooCommerce) por un
   grid explícito, más predecible con el nuevo layout de tarjetas. */
.sp-wsv-account-form__section .woocommerce-form-row {
    display: block;
    float: none;
    width: auto;
}

@media (min-width: 768px) {
    .sp-wsv-account-form__section > .woocommerce-form-row,
    .sp-wsv-account-form__section fieldset > .woocommerce-form-row,
    .sp-wsv-account-form__section fieldset > .sp-wsv-account-form__strength-cell {
        display: inline-block;
        vertical-align: top;
        width: calc(50% - 10px);
    }

    .sp-wsv-account-form__section > .woocommerce-form-row--first,
    .sp-wsv-account-form__section fieldset > .woocommerce-form-row--first {
        margin-right: 20px;
    }
}

.sp-wsv-account-form fieldset {
    border: none;
    padding: 0;
    margin: 0;
}

.sp-wsv-account-form__strength-cell {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 8px;
}

.sp-wsv-account-form__strength-label {
    font-size: 13px;
    font-weight: 600;
}

.sp-wsv-password-strength-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    height: 8px;
}

.sp-wsv-password-strength-bar span {
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px rgba(127, 127, 127, 0.18);
}

/* Color neutro de respaldo de las barritas, mismo motivo que el bloque de
   .woocommerce-Input más arriba: los tonos por nivel (short/bad/good/strong)
   solo están definidos en login-guest.css (sección 10-bis, scoped a
   body.sp-wsv-theme-light) — con "Sin tema" nunca se pintaban aunque el
   JS sí detectaba el nivel y añadía la clase correcta. */
.sp-wsv-password-strength-bar--short span:nth-child(1) {
    background: #e2401c !important;
    box-shadow: none !important;
}

.sp-wsv-password-strength-bar--bad span:nth-child(-n+2) {
    background: #f2b01e !important;
    box-shadow: none !important;
}

.sp-wsv-password-strength-bar--good span:nth-child(-n+3) {
    background: #4e65f6 !important;
    box-shadow: none !important;
}

.sp-wsv-password-strength-bar--strong span {
    background: #1cae4c !important;
    box-shadow: none !important;
}

/* Mensaje nativo de WooCommerce (.woocommerce-password-strength, inyectado
   por password-strength-meter.js, no modificado aquí) — su clase de nivel
   sigue siendo la fuente de verdad que password-strength-bar.js observa
   para colorear las barritas, así que se colapsa visualmente en vez de
   `display: none`: ese script corta checkPasswordStrength() con
   `if (meter.is(':hidden')) return;` ANTES de añadir la clase de nivel
   cuando detecta display:none/visibility:hidden — con `display:none` el
   meter nunca llega a tener clase y nuestras barritas se quedan vacías. */
.woocommerce-password-strength {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.sp-wsv-account-form__actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

/* --- Direcciones dentro del formulario de edición --- */
.sp-wsv-edit-address-card h2 {
    margin-bottom: 20px;
}

/* Grid de 2 columnas para los campos de dirección — sustituye el
   float clásico de WooCommerce por grid explícito, permitiendo que
   campos como nombre/apellido, dirección, ciudad, código postal, etc.
   se alineen correctamente en 2 columnas responsivas. */
.sp-wsv-address-fields-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.sp-wsv-address-fields-grid .woocommerce-form-row {
    display: block;
    float: none;
    width: auto;
    margin-bottom: 0;
}

/* Campos de dirección — replica exacta de .sp-wsv-account-form (apartado “Detalles de la cuenta”) */
.sp-wsv-address-fields-grid .woocommerce-form-row label {
    display: block !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--sp-text-primary, #0f172a) !important;
    margin-bottom: 6px !important;
    line-height: 1.2 !important;
}

.sp-wsv-address-fields-grid .woocommerce-form-row .woocommerce-input-wrapper {
    display: block;
    width: 100%;
}

.sp-wsv-address-fields-grid .woocommerce-form-row input.input-text,
.sp-wsv-address-fields-grid .woocommerce-form-row input[type="text"],
.sp-wsv-address-fields-grid .woocommerce-form-row input[type="email"],
.sp-wsv-address-fields-grid .woocommerce-form-row input[type="tel"],
.sp-wsv-address-fields-grid .woocommerce-form-row input[type="number"],
.sp-wsv-address-fields-grid .woocommerce-form-row textarea {
    width: 100% !important;
    min-height: 40px !important;
    height: 40px !important;
    padding: 0 14px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: -0.01em !important;
    background: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    color: #0f172a !important;
    box-sizing: border-box !important;
    outline: none !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease !important;
}

.sp-wsv-address-fields-grid .woocommerce-form-row textarea {
    height: auto !important;
    min-height: 80px !important;
    padding: 10px 14px !important;
    resize: vertical !important;
}

.sp-wsv-address-fields-grid .woocommerce-form-row input.input-text::placeholder,
.sp-wsv-address-fields-grid .woocommerce-form-row textarea::placeholder {
    color: #94a3b8 !important;
    opacity: 1 !important;
}

.sp-wsv-address-fields-grid .woocommerce-form-row input.input-text:hover,
.sp-wsv-address-fields-grid .woocommerce-form-row textarea:hover {
    border-color: #cbd5e1 !important;
    background: #e8eef6 !important;
}

.sp-wsv-address-fields-grid .woocommerce-form-row input.input-text:focus,
.sp-wsv-address-fields-grid .woocommerce-form-row textarea:focus {
    background: #fff !important;
    border-color: #4e65f6 !important;
    box-shadow: 0 0 0 3px rgba(78, 101, 246, 0.15) !important;
}

/* Wrapper premium para selects (país, estado) en formulario de dirección */
.sp-wsv-address-select-wrap {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.sp-wsv-address-select-wrap select {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    height: 40px;
    padding: 0 34px 0 14px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1;
    border: 1px solid rgba(127, 127, 127, 0.2);
    background: #f1f5f9;
    color: #0f172a;
    cursor: pointer;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    box-sizing: border-box;
}

.sp-wsv-address-select-wrap select:hover {
    border-color: rgba(127, 127, 127, 0.4);
}

.sp-wsv-address-select-wrap select:focus {
    border-color: rgba(78, 101, 246, 0.6);
    background: rgba(78, 101, 246, 0.08);
    box-shadow: 0 0 0 3px rgba(78, 101, 246, 0.15);
}

/* Icono de flecha Phosphor posicionado absolutamente */
.sp-wsv-address-select-wrap i {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    opacity: 0.7;
    color: #64748b;
    pointer-events: none;
    transition: transform 0.2s ease, opacity 0.2s ease;
    z-index: 2;
}

.sp-wsv-address-select-wrap select:focus ~ i {
    opacity: 1;
    transform: translateY(-50%) rotate(180deg);
}

/* ===================== Select2 (selectWoo) — replica diseño premium del <select> nativo ===================== */
.sp-wsv-address-select-wrap .select2-container,
.sp-wsv-address-fields-grid .select2-container,
.woocommerce-address-fields .select2-container {
    width: 100% !important;
    display: block;
}

.sp-wsv-address-select-wrap .select2-container--default .select2-selection--single,
.sp-wsv-address-fields-grid .select2-container--default .select2-selection--single {
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    border: 1px solid rgba(127, 127, 127, 0.2) !important;
    border-radius: 12px !important;
    background: transparent !important;
    box-sizing: border-box !important;
    outline: none !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease !important;
}

.sp-wsv-address-select-wrap .select2-container--default .select2-selection--single:hover,
.sp-wsv-address-fields-grid .select2-container--default .select2-selection--single:hover {
    border-color: rgba(127, 127, 127, 0.4) !important;
}

.sp-wsv-address-select-wrap .select2-container--default.select2-container--open .select2-selection--single,
.sp-wsv-address-select-wrap .select2-container--default.select2-container--focus .select2-selection--single,
.sp-wsv-address-fields-grid .select2-container--default.select2-container--open .select2-selection--single,
.sp-wsv-address-fields-grid .select2-container--default.select2-container--focus .select2-selection--single {
    border-color: rgba(78, 101, 246, 0.6) !important;
    background: rgba(78, 101, 246, 0.08) !important;
    box-shadow: 0 0 0 3px rgba(78, 101, 246, 0.15) !important;
}

.sp-wsv-address-select-wrap .select2-container--default .select2-selection--single .select2-selection__rendered,
.sp-wsv-address-fields-grid .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 38px !important;
    padding-left: 14px !important;
    padding-right: 34px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
    color: inherit !important;
}

.sp-wsv-address-select-wrap .select2-container--default .select2-selection--single .select2-selection__arrow,
.sp-wsv-address-fields-grid .select2-container--default .select2-selection--single .select2-selection__arrow {
    display: none !important;
}

.sp-wsv-address-select-wrap .select2-container--default .select2-selection--single .select2-selection__arrow b,
.sp-wsv-address-fields-grid .select2-container--default .select2-selection--single .select2-selection__arrow b {
    display: none !important;
}

/* Dropdown panel */
.select2-container--default .select2-dropdown.sp-wsv-select2-dropdown,
.select2-dropdown {
    border: 1px solid rgba(127, 127, 127, 0.18) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08) !important;
    margin-top: 6px !important;
}

.select2-container--default .select2-results__option {
    padding: 10px 14px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
    background: #eef2ff !important;
    color: #3c4fe0 !important;
}

.select2-container--default .select2-results__option[aria-selected=true] {
    background: #eef2ff !important;
    color: #3c4fe0 !important;
}

/* Rota caret Phosphor cuando Select2 está abierto */
.sp-wsv-address-select-wrap:has(.select2-container--open) i,
.sp-wsv-address-fields-grid:has(.select2-container--open) i {
    opacity: 1;
    transform: translateY(-50%) rotate(180deg);
}

.sp-wsv-address-form__actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 16px;
}

/* --- Detalle de pedido --- */
.sp-wsv-order-detail {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.sp-wsv-order-detail__summary p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
}

.sp-wsv-order-detail__notes h2 {
    margin: 0 0 16px;
    font-size: 16px;
    font-weight: 700;
}

.sp-wsv-order-detail__table {
    overflow: hidden;
}

.sp-wsv-order-detail__table .woocommerce-order-details__title {
    margin: 0;
    padding: 20px 24px;
    font-size: 16px;
    font-weight: 700;
    box-shadow: inset 0 -1px 0 0 rgba(127, 127, 127, 0.18);
}

.sp-wsv-order-detail__table .woocommerce-table--order-details {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.sp-wsv-order-detail__table .woocommerce-table--order-details th,
.sp-wsv-order-detail__table .woocommerce-table--order-details td {
    padding: 14px 24px;
    text-align: left;
    box-shadow: inset 0 -1px 0 0 rgba(127, 127, 127, 0.1);
}

.sp-wsv-order-detail__table .woocommerce-table--order-details thead th {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.55;
}

.sp-wsv-order-detail__table .woocommerce-table--order-details tfoot th,
.sp-wsv-order-detail__table .woocommerce-table--order-details tfoot td {
    font-weight: 600;
}

.sp-wsv-order-detail__table .woocommerce-customer-details {
    padding: 24px;
}

.sp-wsv-order-detail__table .woocommerce-columns--addresses {
    display: grid;
    gap: 20px;
    margin: 0;
    align-items: start;
    margin-top: -40px;
}

/* Cada columna (Dirección de facturación / de envío) es su propia
   tarjeta — sin esto, el texto queda "flotando" suelto dentro del
   contenedor grande de `.woocommerce-customer-details`, sin caja visual
   propia que delimite cada dirección.
   WooCommerce core (woocommerce-layout.css) aplica además `.col-1
   { float: left; width: 48% }` / `.col-2 { float: right; width: 48% }`
   sobre estas mismas columnas (clases legacy `col2-set`/`col-1`/`col-2`
   que WC sigue emitiendo junto a `.woocommerce-columns--addresses`) —
   ese float compite con el `display: grid` del contenedor y descuadra
   cada tarjeta fuera de su celda (una arriba-derecha, otra
   abajo-izquierda). Se anula para que el grid controle la posición. */
.sp-wsv-order-detail__table .woocommerce-column {
    float: none !important;
    width: 100% !important;
    border-radius: 14px;
    padding: 18px 20px;
    box-shadow: inset 0 0 0 1px rgba(127, 127, 127, 0.18);
    box-sizing: border-box;
}

.sp-wsv-order-detail__table .woocommerce-column__title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 10px;
    font-size: 14px;
    font-weight: 700;
}

/* Mismo icono que en my-address.php (.sp-wsv-address-card__header i) —
   el <i class="ph-fill ph-..."> se inyecta vía JS
   (order-detail-address-icons.js) porque este título lo genera
   WooCommerce core (order-details-customer.php, hook
   woocommerce_order_details_after_order_table), sin plantilla propia
   que editar. Aquí solo el tamaño/alineación del icono ya insertado. */
.sp-wsv-order-detail__table .woocommerce-column__title i {
    font-size: 18px;
    flex-shrink: 0;
}

.sp-wsv-order-detail__table address {
    font-style: normal;
    font-size: 13px;
    line-height: 1.6;
    opacity: 0.85;
}

/* --- Responsive: 1024px / 767px / 480px --- */
@media (max-width: 1024px) {
    .sp-wsv-myaccount {
        grid-template-columns: 240px 1fr;
        gap: 24px;
    }

    /* El `width: 50rem !important` de `.sp-wsv-myaccount-content` (arriba)
       está pensado para el grid de 2 columnas fijas de desktop — bajo este
       breakpoint el sidebar ya colapsa a menú flotante (ver
       `body.sp-wsv-floating-account-menu-active`), así que ese ancho fijo
       queda huérfano y desborda al padre (toolbar, filas de la tabla de
       pedidos y paginación se salían del viewport). El contenido debe
       ocupar el 100% de su columna, como en desktop lo hace el grid. */
    .sp-wsv-myaccount-content {
        width: 100% !important;
    }
}

/* Pedidos: tabla a cards — aplica desde 1024px (tablet incluida), no
   solo mobile (767px). En tablet el ancho ya no alcanza para las 7
   columnas de la tabla (Producto/Pedido/Fecha/Estado/Total/Acciones)
   sin recortar la columna Acciones, así que se usa el mismo layout de
   tarjeta apilada que en mobile. */
@media (max-width: 1024px) {
    .sp-wsv-orders-card {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    .sp-wsv-orders-table {
        display: block;
        border-collapse: separate;
        border-spacing: 0;
    }

    .sp-wsv-orders-table thead {
        display: none;
    }

    .sp-wsv-orders-table tbody {
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    .sp-wsv-orders-table__row {
        display: grid;
        grid-template-columns: 56px 1fr;
        gap: 0 14px;
        padding: 14px 16px 8px;
        border-radius: 16px;
        border: 1px solid var(--sp-border-color, #e2e8f0);
        background: var(--sp-bg-surface, #fff);
        box-shadow: 0 4px 14px rgba(0,0,0,0.04) !important;
    }

    /* WooCommerce (`woocommerce-smallscreen.css`) oculta con
       `display: none` cualquier `tbody th` de `table.shop_table_responsive`
       — aquí el número de pedido es justo ese `<th scope="row">`, así que
       desaparecía por completo de la tarjeta en mobile. Se restaura solo
       en esta tabla, con la misma regla `display: flex` que ya aplica al
       resto de celdas de la fila. */
    .sp-wsv-orders-table.shop_table_responsive tbody th.woocommerce-orders-table__cell {
        display: flex !important;
    }

    .sp-wsv-orders-table__row[hidden] {
        display: none !important;
    }

    .sp-wsv-orders-table__header-thumb,
    .sp-wsv-orders-table__cell-thumb {
        grid-row: 1 / span 3;
        width: 56px;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        padding: 0 !important;
        box-shadow: none !important;
    }

    .sp-wsv-orders-table__thumb {
        width: 56px;
        height: 56px;
        border-radius: 12px;
    }

    .sp-wsv-orders-table__row td,
    .sp-wsv-orders-table__row th {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 8px 0 !important;
        font-size: 13px;
        line-height: 1.4;
        border: none !important;
        box-shadow: none !important;
        text-align: right;
        white-space: normal;
    }

    .sp-wsv-orders-table__row td:last-child,
    .sp-wsv-orders-table__row th:last-child {
        box-shadow: none !important;
    }

    .sp-wsv-orders-table__row td::before,
    .sp-wsv-orders-table__row th::before {
        content: attr(data-title);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        opacity: 0.6;
        text-align: left;
        flex-shrink: 0;
        max-width: 44%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .sp-wsv-orders-table__cell-thumb::before {
        display: none;
    }

    /* El total incluye precio (con posible `<del>`/`<ins>` si hay
       descuento) + "para X artículos" corrido en el mismo texto — en la
       misma línea que el label ("T…") se truncaba y el contenido se
       envolvía desordenado. Se apila label arriba, contenido debajo. */
    .sp-wsv-orders-table__row .woocommerce-orders-table__cell-order-total {
        grid-column: 1 / -1;
        flex-direction: column;
        align-items: flex-end;
        gap: 4px;
    }

    .sp-wsv-orders-table__row .woocommerce-orders-table__cell-order-total::before {
        max-width: none;
        overflow: visible;
        text-overflow: clip;
    }

    .sp-wsv-orders-table__row .woocommerce-orders-table__cell-order-actions {
        /* WooCommerce (`woocommerce-smallscreen.css`) fuerza
           `display: block` en `table.shop_table_responsive tr td` — sin
           volver a declarar `flex` aquí, `justify-content`/`gap` no
           tenían efecto y los botones Pagar/Ver/Cancelar quedaban en
           flujo normal (pegados, con el margin propio del theme). */
        display: flex !important;
        grid-column: 1 / -1;
        justify-content: center;
        padding-top: 12px !important;
        flex-wrap: nowrap;
        gap: 8px;
    }

    .sp-wsv-orders-table__row .woocommerce-orders-table__cell-order-actions a.button {
        margin: 0 !important;
        padding: 9px 16px !important;
        
    }

    .sp-wsv-orders-table__row .woocommerce-orders-table__cell-order-actions::before {
        display: none;
    }

    /* El mismo fondo "cebra" de `reset.css` (Hello Elementor) que se
       anuló en la tabla de escritorio reaparece aquí: en la vista de
       tarjeta mobile cada `td`/`th` sigue siendo una celda de `<table>`
       real, así que hereda `background-color` en las filas impares. */
    .sp-wsv-orders-table__row td,
    .sp-wsv-orders-table__row th {
        background-color: transparent !important;
    }

    /* Aviso nativo de WooCommerce ("Confirmar dirección de correo
       electrónico") — se oculta solo en esta página (`body.woocommerce-orders`)
       y solo en mobile; la confirmación de email se reimplementará más
       adelante en el login. No se toca su lógica PHP, solo su visibilidad. */
    body.woocommerce-orders .woocommerce-notices-wrapper .woocommerce-info {
        display: none;
    }
}

/* --- Tablet (768px–1024px): sidebar+contenido siguen en 2 columnas
   (heredado del breakpoint de 1024px de arriba) — aquí solo se ajusta
   el toolbar de filtros (Pedidos/Descargas) para aprovechar el ancho
   disponible: buscador a ancho completo arriba, los 2 selects en fila
   debajo, en vez de las 3 piezas apiladas 1x1 como en mobile (767px). */
@media (max-width: 1024px) and (min-width: 768px) {
    .sp-wsv-orders-toolbar,
    .sp-wsv-downloads-toolbar {
        flex-wrap: wrap;
    }

    .sp-wsv-orders-toolbar__search {
        flex: 1 1 100%;
    }

    .sp-wsv-orders-toolbar__filters {
        flex: 1 1 100%;
        flex-wrap: nowrap;
    }

    .sp-wsv-orders-toolbar__select-wrap {
        flex: 1 1 0;
        min-width: 0;
    }

    .sp-wsv-addresses-grid,
    .sp-wsv-address-fields-grid {
        grid-template-columns: repeat(2, 1fr);
    }

     body.sp-wsv-floating-account-menu-active .woocommerce-MyAccount-content{
        width: 40rem !important;
     }
}

@media (max-width: 767px) {
    /* Ancho/padding lateral igualado al del header (`header.site-header`
       usa `padding: 18.75px` a cada lado en este viewport), para que
       "Mis pedidos" quede alineado verticalmente con la cabecera del
       sitio en vez de usar un padding distinto. El padding-top de 20px
       proporciona espaciado desde el top después de eliminar el
       `.container-page-title-inner` vacío. */
    .sp-wsv-myaccount {
        grid-template-columns: 1fr;
        padding: 0 18.75px;
        padding-top: 20px;
        margin: 0 auto;
        gap: 20px;
    }

    .sp-wsv-myaccount-sidebar {
        position: static;
    }

    .sp-wsv-addresses-grid,
    .sp-wsv-address-fields-grid,
    .sp-wsv-order-detail__table .woocommerce-columns--addresses {
        grid-template-columns: 1fr;
    }

    /* Detalle de pedido — tabla de productos/desglose de totales.
       Solo 2 columnas (Producto/Total), pero el nombre del producto +
       el precio no caben cómodos en pantallas estrechas; se reduce
       padding y tamaño de fuente en vez de convertir a tarjetas (como
       en Pedidos), porque aquí el contenido de cada fila ya es simple
       (label + valor). */
    .sp-wsv-order-detail__table .woocommerce-order-details__title {
        padding: 16px;
        font-size: 15px;
    }

    .sp-wsv-order-detail__table .woocommerce-table--order-details th,
    .sp-wsv-order-detail__table .woocommerce-table--order-details td {
        padding: 12px 16px;
        font-size: 12px;
    }

    .sp-wsv-order-detail__table .woocommerce-table--order-details .product-name {
        word-break: break-word;
    }

    .sp-wsv-order-detail__table .woocommerce-customer-details {
        padding: 16px;
    }

    .sp-wsv-order-detail__table .woocommerce-column {
        padding: 14px 16px;
    }

    .sp-wsv-account-form__avatar {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }

    .sp-wsv-dashboard-last-order__row {
        grid-template-columns: 1fr 1fr;
        row-gap: 16px;
    }

    .sp-wsv-dashboard-last-order__cell--status {
        grid-column: 1 / -1;
        justify-content: space-between;
    }



    .sp-wsv-downloads-page-header,
    .sp-wsv-downloads-toolbar,
    .sp-wsv-orders-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .sp-wsv-orders-toolbar__filters {
        flex-direction: column;
        align-items: stretch;
    }

    .sp-wsv-orders-toolbar__select-wrap select,
    .sp-wsv-orders-toolbar__filter-btn {
        width: 100%;
        height: 44px;
    }

    .sp-wsv-orders-toolbar {
        gap: 12px;
        padding: 14px;
    }

    .sp-wsv-orders-toolbar__search {
        flex: 1 1 100%;
    }

    .sp-wsv-orders-toolbar__search input {
        height: 44px;
        font-size: 14px;
    }

    .sp-wsv-orders-toolbar__filters {
        gap: 10px;
    }

    .sp-wsv-orders-toolbar__select-wrap {
        min-width: 0;
        flex: 1 1 100%;
    }

    .sp-wsv-orders-toolbar__select-wrap select {
        font-size: 14px;
        text-align: left;
        text-align-last: left;
        padding-left: 14px !important;
        padding-right: 36px !important;
    }

    .sp-wsv-orders-toolbar__select-wrap--date select {
        text-align: center;
        text-align-last: center;
        padding-left: 16px !important;
        padding-right: 36px !important;
    }

    .sp-wsv-orders-empty-state td {
        display: block;
        width: 100%;
    }

    .sp-wsv-orders-empty-state td::before {
        display: none;
    }
}

@media (max-width: 480px) {
    .sp-wsv-card,
    .sp-wsv-address-card {
        padding: 16px;
    }

    .sp-wsv-orders-table__row {
        grid-template-columns: 48px 1fr;
        padding: 12px 12px 8px;
    }

    .sp-wsv-orders-table__thumb {
        width: 48px;
        height: 48px;
        border-radius: 10px;
    }

    .sp-wsv-orders-toolbar {
        padding: 12px;
        gap: 10px;
    }

    .sp-wsv-dashboard-last-order__row {
        grid-template-columns: 1fr;
    }

    .sp-wsv-dashboard-last-order__cell--status {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
    }

    .sp-wsv-dashboard-last-order__items {
        flex-wrap: wrap;
    }

    .sp-wsv-dashboard-last-order__cta {
        width: 100%;
        justify-content: center;
    }

    .sp-wsv-downloads-list thead {
        display: none;
    }

    .sp-wsv-downloads-list,
    .sp-wsv-downloads-list__item,
    .sp-wsv-downloads-list__item td {
        display: block;
        width: 100%;
    }
}

.woocommerce-account .woocommerce-MyAccount-content label{
    color: #000000; 
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-customer-details{
    border: none;
    background: none;
}

.woocommerce-account .woocommerce-MyAccount-content table.shop_table thead th{
    background: none;
    color: #000;
}

.container-page-title-inner{
    display: none;
}

.woocommerce table.shop_table{
    border: none !important;
}

/* Quita translate del icono ojo en ::before/::after (Woo core) — sin desplazamiento */
.woocommerce form .show-password-input::before,
.woocommerce-page form .show-password-input::before,
.woocommerce form .show-password-input::after,
.woocommerce-page form .show-password-input::after,
.woocommerce form .show-password-input,
.woocommerce-page form .show-password-input {
    transform: none !important;
    top: auto !important;
}