/* ========================================================== SUPERPLUS AUTH FORMS — COMPACT ULTRA PREMIUM Optimizado para eliminar scroll y corregir alertas ========================================================== */ :root { --sp-black: #09090b; --sp-white: #ffffff; --sp-bg-page: #ffffff; --sp-bg-main: #ffffff; --sp-bg-input: #fafafa; --sp-bg-surface: #ffffff; --sp-text-primary: #09090b; --sp-text-secondary: #71717a; --sp-border-color: #e4e4e7; --sp-border-focus: #09090b; --sp-error-bg: #fef2f2; --sp-error-text: #b91c1c; --sp-error-border: #fecaca; --sp-fab-bg-default: #09090b; --sp-fab-icon-color: #ffffff; --sp-radius-card: 20px; --sp-radius-element: 10px; --sp-height-element: 46px; --sp-shadow-card: 0 20px 40px -10px rgba(0, 0, 0, 0.08); --sp-shadow-btn: 0 4px 12px 0 rgba(0, 0, 0, 0.12); --sp-font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* Colores de estado de pedido (tema claro) — usados solo por .sp-wsv-orders-table__status en la sección 10-bis de este fichero. No existen en theme-common.css a propósito (ese fichero es layout-only, sin color). */ --sp-status-processing-bg: #eff6ff; --sp-status-processing-text: #2563eb; --sp-status-completed-bg: #f0fdf4; --sp-status-completed-text: #15803d; --sp-status-on-hold-bg: #fffbeb; --sp-status-on-hold-text: #b45309; --sp-status-cancelled-bg: #fef2f2; --sp-status-cancelled-text: #b91c1c; --sp-status-default-bg: #f4f4f5; --sp-status-default-text: #52525b; } /* El theme activo (Hello Elementor Child, style.css) define `.woocommerce-account { background: #ffffff !important; }` (clase que WooCommerce añade al ), `.page-content.container-page-content { background: #ffffff; }` y `.container-page-title { background: #ffffff; }` (wrappers genéricos de layout de página, no exclusivos de WooCommerce). Todos coinciden hoy con el blanco del tema claro del módulo, pero se fijan explícitamente para que el diseño siga siendo correcto si estas variables cambian al adaptar el tema a otro sitio. */ body.sp-wsv-theme-light.woocommerce-account { background: var(--sp-bg-page) !important; } body.sp-wsv-theme-light .page-content.container-page-content, body.sp-wsv-theme-light .container-page-title { background: var(--sp-bg-page) !important; } /* ---------------------------------------------------- 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; background: var(--sp-bg-main) !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; color: var(--sp-text-primary) !important; margin: 0 0 6px 0 !important; text-align: center !important; letter-spacing: -0.02em !important; } .sp-subtitle { color: var(--sp-text-secondary) !important; 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; color: var(--sp-text-secondary) !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: 12px !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; color: var(--sp-text-primary) !important; margin-bottom: 6px !important; } .woocommerce-Input, input.input-text { width: 100% !important; height: var(--sp-height-element) !important; padding: 0 14px !important; font-size: 15px !important; background-color: var(--sp-bg-input) !important; border: 1px solid var(--sp-border-color) !important; border-radius: var(--sp-radius-element) !important; box-sizing: border-box !important; transition: all 0.2s ease !important; outline: none !important; } .woocommerce-Input:focus, input.input-text:focus { background-color: var(--sp-bg-main) !important; border-color: var(--sp-border-focus) !important; box-shadow: 0 0 0 1px var(--sp-border-focus) !important; } /* ---------------------------------------------------- 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; color: var(--sp-text-secondary) !important; font-size: 13px !important; margin: 0 !important; } .lost_password a { color: var(--sp-text-secondary) !important; text-decoration: none !important; font-size: 13px !important; } /* ---------------------------------------------------- 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; background-color: var(--sp-black) !important; color: var(--sp-white) !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; } button.sp_btn:hover, .woocommerce-Button.button:hover { background-color: #27272a !important; transform: translateY(-1px) !important; box-shadow: var(--sp-shadow-btn) !important; } /* ---------------------------------------------------- 7. FOOTER ---------------------------------------------------- */ .auth_footer { margin-top: 24px !important; text-align: center !important; font-size: 14px !important; color: var(--sp-text-secondary) !important; border-top: 1px solid var(--sp-border-color) !important; padding-top: 20px !important; } .auth_footer a { color: var(--sp-black) !important; font-weight: 600 !important; text-decoration: none !important; } /* ---------------------------------------------------- 8. ALERTAS Y ERRORES (CORREGIDO) ---------------------------------------------------- */ .woocommerce-error, .woocommerce-message, .woocommerce-info { max-width: 440px !important; margin: 0 auto 15px auto !important; /* Margen para que no pegue a la tarjeta */ 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; } /* Eliminar iconos por defecto de WooCommerce que causan el texto "D or" */ .woocommerce-error::before, .woocommerce-message::before, .woocommerce-info::before { display: none !important; } .woocommerce-error { background-color: var(--sp-error-bg) !important; color: var(--sp-error-text) !important; border: 1px solid var(--sp-error-border) !important; } .woocommerce-message { background-color: #f0fdf4 !important; color: #15803d !important; border: 1px solid #bbf7d0 !important; } /* ---------------------------------------------------- 9. RESPONSIVE ---------------------------------------------------- */ @media (max-width: 480px) { #customer_login, #customer_register { padding: 24px 20px !important; margin: 10px auto !important; } } /* ---------------------------------------------------- 10. DASHBOARD DE "MI CUENTA" (usuario ya logueado) — LEGADO Bloque histórico sobre los selectores estándar de WooCommerce (.woocommerce-MyAccount-*), previo a las plantillas propias `.sp-wsv-myaccount-*`. Se conserva sin tocar (compatibilidad con instalaciones que aún no tengan las plantillas nuevas activas). Las extensiones nuevas de color para las plantillas propias NO siguen este patrón — ver sección "10-bis" más abajo, que sigue el patrón correcto (color aparte de theme-common.css, con scope de tema). ---------------------------------------------------- */ /* Ver theme-dark.css: el theme activo (Hello Elementor Child) fuerza `.woocommerce-account { background: #ffffff !important; }` sobre el (esa clase la añade WooCommerce vía body_class(), es hermana de sp-wsv-theme-light, no ancestro). Coincide por defecto con --sp-bg-page en el tema claro, pero se fija explícitamente para no depender de que el theme mantenga ese valor. */ body.sp-wsv-theme-light.woocommerce-account { background: var(--sp-bg-page) !important; } body.sp-wsv-theme-light .woocommerce-MyAccount-navigation { background: var(--sp-bg-surface) !important; border: 1px solid var(--sp-border-color) !important; border-radius: var(--sp-radius-element) !important; } body.sp-wsv-theme-light .woocommerce-MyAccount-navigation-link a { color: var(--sp-text-primary) !important; border-color: var(--sp-border-color) !important; } body.sp-wsv-theme-light .woocommerce-MyAccount-navigation-link.is-active a { background: var(--sp-bg-input) !important; color: var(--sp-text-primary) !important; font-weight: 600 !important; } /* El fondo del item activo en este tema es claro (--sp-bg-input), así que su icono debe verse oscuro. El theme activo del sitio invierte este icono a blanco asumiendo que el fondo activo siempre es negro (#111111) — aquí se anula ese filtro de forma explícita e incondicional (no solo dentro del panel flotante) para que el contraste sea correcto en cualquier contexto donde aparezca el nav. */ body.sp-wsv-theme-light .woocommerce-MyAccount-navigation-link.is-active a::before { opacity: 1 !important; filter: none !important; } body.sp-wsv-theme-light .woocommerce-MyAccount-content { background: var(--sp-bg-surface) !important; color: var(--sp-text-primary) !important; border: none !important; border-radius: var(--sp-radius-element) !important; margin-top: -60px; } /* Mobile: el ancho fijo que otras reglas imponen a este contenedor (pensado para el layout de 2 columnas de tablet/desktop) se salía del viewport en pantallas angostas — desbordaba el toolbar de filtros, las tarjetas de "Mis pedidos" y el botón de paginación. Se iguala al 100% del padding lateral del contenedor padre y se compensa con `margin-left` para quedar alineado al mismo ancho que usa el header del sitio. */ @media (max-width: 767px) { body.sp-wsv-theme-light .woocommerce-MyAccount-content { width: 20rem !important; margin-left: -20px; } } @media (min-width: 768px) and (max-width: 1024px) { body.sp-wsv-theme-light .woocommerce-MyAccount-content { width: 43rem !important; margin-left: -80px; } } body.sp-wsv-theme-light .woocommerce-MyAccount-content a { color: var(--sp-text-primary) !important; text-decoration: none; transition: 0.3s; } body.sp-wsv-theme-light .woocommerce-MyAccount-content .woocommerce-Button.button, body.sp-wsv-theme-light .woocommerce-MyAccount-content .button { background-color: var(--sp-black) !important; color: var(--sp-white) !important; border-color: var(--sp-border-color) !important; margin-top: 10px; } /* ---------------------------------------------------- 10-bis. MI CUENTA — COLOR (plantillas propias .sp-wsv-myaccount-*) Solo color (background/color/border-color/box-shadow de sombra) sobre el layout ya definido en theme-common.css sección 12. Nunca se repite aquí display/grid-template-columns/padding/border-radius/gap. ---------------------------------------------------- */ body.sp-wsv-theme-light .sp-wsv-myaccount-sidebar, body.sp-wsv-theme-light .sp-wsv-card, body.sp-wsv-theme-light .sp-wsv-address-card { background: var(--sp-bg-surface) !important; color: var(--sp-text-primary) !important; box-shadow: 0 0 0 1px var(--sp-border-color) !important; } body.sp-wsv-theme-light .sp-wsv-myaccount-sidebar a { color: var(--sp-text-secondary) !important; } body.sp-wsv-theme-light .sp-wsv-myaccount-sidebar li.is-active a { background: var(--sp-bg-input) !important; color: var(--sp-text-primary) !important; } body.sp-wsv-theme-light .sp-wsv-myaccount-sidebar a:hover { background: var(--sp-bg-input) !important; color: var(--sp-text-primary) !important; } /* Select2 en light — replica premium */ body.sp-wsv-theme-light .sp-wsv-address-select-wrap .select2-selection--single, body.sp-wsv-theme-light .select2-container--default .select2-selection--single { background: #fff !important; border-color: #e2e8f0 !important; color: #0f172a !important; } body.sp-wsv-theme-light .sp-wsv-myaccount-nav-item--logout a { color: var(--sp-error-text) !important; } body.sp-wsv-theme-light .sp-wsv-myaccount-nav-item--logout a:hover { background: var(--sp-error-bg) !important; color: var(--sp-error-text) !important; } body.sp-wsv-theme-light .sp-wsv-orders-table thead th { background: var(--sp-bg-input) !important; color: var(--sp-text-secondary) !important; } body.sp-wsv-theme-light .sp-wsv-orders-table__row:hover { background: var(--sp-bg-input) !important; } body.sp-wsv-theme-light .sp-wsv-orders-table__status--processing { background: var(--sp-status-processing-bg) !important; color: var(--sp-status-processing-text) !important; } body.sp-wsv-theme-light .sp-wsv-orders-table__status--completed { background: var(--sp-status-completed-bg) !important; color: var(--sp-status-completed-text) !important; } body.sp-wsv-theme-light .sp-wsv-orders-table__status--on-hold { background: var(--sp-status-on-hold-bg) !important; color: var(--sp-status-on-hold-text) !important; } body.sp-wsv-theme-light .sp-wsv-orders-table__status--cancelled, body.sp-wsv-theme-light .sp-wsv-orders-table__status--refunded, body.sp-wsv-theme-light .sp-wsv-orders-table__status--failed { background: var(--sp-status-cancelled-bg) !important; color: var(--sp-status-cancelled-text) !important; } body.sp-wsv-theme-light .sp-wsv-orders-table__status--pending { background: var(--sp-status-default-bg) !important; color: var(--sp-status-default-text) !important; } body.sp-wsv-theme-light .sp-wsv-address-card__edit { color: var(--sp-text-primary) !important; border-color: var(--sp-border-color) !important; text-decoration: none; margin-top: 20px; } body.sp-wsv-theme-light .sp-wsv-password-strength-bar span { background: var(--sp-bg-input) !important; box-shadow: 0 0 0 1px var(--sp-border-color) !important; } /* Sincronizado por includes/modules/custom-login/assets/js/password-strength-bar.js con el medidor nativo de WooCommerce (.woocommerce-password-strength), que ese script observa sin modificarlo. Cada nivel ilumina 1/2/3/4 barritas — mismos tonos de estado ya usados en pedidos. */ body.sp-wsv-theme-light .sp-wsv-password-strength-bar--short span:nth-child(1) { background: var(--sp-status-cancelled-text) !important; box-shadow: none !important; } body.sp-wsv-theme-light .sp-wsv-password-strength-bar--bad span:nth-child(-n+2) { background: var(--sp-status-on-hold-text) !important; box-shadow: none !important; } body.sp-wsv-theme-light .sp-wsv-password-strength-bar--good span:nth-child(-n+3) { background: var(--sp-status-processing-text) !important; box-shadow: none !important; } body.sp-wsv-theme-light .sp-wsv-password-strength-bar--strong span { background: var(--sp-status-completed-text) !important; box-shadow: none !important; } body.sp-wsv-theme-light .sp-wsv-order-detail__table, body.sp-wsv-theme-light .sp-wsv-order-detail__table .woocommerce-order-details__title { background: var(--sp-bg-surface) !important; color: var(--sp-text-primary) !important; } body.sp-wsv-theme-light .sp-wsv-order-detail__table .woocommerce-order-details__title { box-shadow: inset 0 -1px 0 0 var(--sp-border-color) !important; } body.sp-wsv-theme-light .sp-wsv-order-detail__table .woocommerce-table--order-details th, body.sp-wsv-theme-light .sp-wsv-order-detail__table .woocommerce-table--order-details td { box-shadow: inset 0 -1px 0 0 var(--sp-border-color) !important; } /* --- Dashboard: "Tu último pedido" --- */ body.sp-wsv-theme-light .sp-wsv-dashboard-last-order__all-link { color: var(--sp-text-secondary) !important; } body.sp-wsv-theme-light .sp-wsv-dashboard-last-order__thumb, body.sp-wsv-theme-light .sp-wsv-dashboard-last-order__thumb--placeholder { background: var(--sp-bg-input) !important; box-shadow: 0 0 0 1px var(--sp-border-color) !important; } /* Especificidad reforzada (`.woocommerce-MyAccount-content` incluido en el selector) para ganarle a `.woocommerce-MyAccount-content a` de arriba, que si no queda por delante fuerza `--sp-text-primary` sobre el texto de este botón en vez de `--sp-white`. */ body.sp-wsv-theme-light .woocommerce-MyAccount-content .sp-wsv-dashboard-last-order__cta { background: var(--sp-black) !important; color: var(--sp-white) !important; box-shadow: none !important; text-decoration: none; } /* --- Descargas: KPI, toolbar y tabla --- */ body.sp-wsv-theme-light .sp-wsv-downloads-kpi { background: var(--sp-bg-surface) !important; box-shadow: 0 0 0 1px var(--sp-border-color) !important; } body.sp-wsv-theme-light .sp-wsv-downloads-kpi__icon { background: var(--sp-status-processing-bg) !important; color: var(--sp-status-processing-text) !important; } body.sp-wsv-theme-light .sp-wsv-downloads-toolbar__search input, body.sp-wsv-theme-light .sp-wsv-downloads-toolbar__filter { background: var(--sp-bg-surface) !important; box-shadow: 0 0 0 1px var(--sp-border-color) !important; } body.sp-wsv-theme-light .sp-wsv-downloads-list thead th { background: var(--sp-bg-input) !important; color: var(--sp-text-secondary) !important; } body.sp-wsv-theme-light .sp-wsv-downloads-list__item:hover td { background: var(--sp-bg-input) !important; } body.sp-wsv-theme-light .sp-wsv-downloads-list__thumb, body.sp-wsv-theme-light .sp-wsv-downloads-list__thumb--placeholder { background: var(--sp-bg-input) !important; box-shadow: 0 0 0 1px var(--sp-border-color) !important; } body.sp-wsv-theme-light .sp-wsv-downloads-list__badge--no-expiry { background: var(--sp-status-completed-bg) !important; color: var(--sp-status-completed-text) !important; } body.sp-wsv-theme-light .sp-wsv-downloads-list__badge--expiry { background: var(--sp-status-on-hold-bg) !important; color: var(--sp-status-on-hold-text) !important; } /* Especificidad reforzada, mismo motivo que `.sp-wsv-dashboard-last-order__cta` más arriba: es un `` dentro de `.woocommerce-MyAccount-content`. */ body.sp-wsv-theme-light .woocommerce-MyAccount-content .sp-wsv-downloads-list__download-btn { background: var(--sp-black) !important; color: var(--sp-white) !important; } /* --- Pedidos: toolbar y miniaturas (light) --- */ body.sp-wsv-theme-light .sp-wsv-orders-toolbar { background: #ffffff !important; border-color: #e2e8f0 !important; box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05), 0 0 0 1px #e2e8f0 !important; } body.sp-wsv-theme-light .sp-wsv-orders-toolbar__search input { background: #f1f5f9 !important; border-color: #e2e8f0 !important; color: #0f172a !important; box-shadow: none !important; } body.sp-wsv-theme-light .sp-wsv-orders-toolbar__search input::placeholder { color: #94a3b8 !important; } body.sp-wsv-theme-light .sp-wsv-orders-toolbar__search input:hover { background: #e8eef6 !important; border-color: #cbd5e1 !important; } body.sp-wsv-theme-light .sp-wsv-orders-toolbar__search input:focus { background: #fff !important; border-color: #4e65f6 !important; box-shadow: 0 0 0 3px rgba(78,101,246,0.15) !important; } body.sp-wsv-theme-light .sp-wsv-orders-toolbar__select-wrap select { background: #f1f5f9 !important; border-color: #e2e8f0 !important; color: #334155 !important; box-shadow: none !important; } body.sp-wsv-theme-light .sp-wsv-orders-toolbar__select-wrap select:hover { background: #e8eef6 !important; border-color: #cbd5e1 !important; } body.sp-wsv-theme-light .sp-wsv-orders-toolbar__select-wrap select:focus { background: #fff !important; border-color: #4e65f6 !important; color: #0f172a !important; box-shadow: 0 0 0 3px rgba(78,101,246,0.15) !important; } body.sp-wsv-theme-light .sp-wsv-orders-toolbar__select-wrap select option { background: #f8fafc !important; color: #334155 !important; } body.sp-wsv-theme-light .sp-wsv-orders-toolbar__select-wrap select option:checked { background: #eef2ff !important; color: #3c4fe0 !important; } body.sp-wsv-theme-light .sp-wsv-orders-toolbar__filter-btn { background: #0f172a !important; color: #ffffff !important; box-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 4px 10px rgba(15,23,42,0.12) !important; } body.sp-wsv-theme-light .sp-wsv-orders-toolbar__filter-btn:hover { background: #1e293b !important; } /* Iconos Rango de fechas (light) — gris elegante, bien centrados */ body.sp-wsv-theme-light .sp-wsv-orders-toolbar__select-icon { color: #64748b !important; opacity: 0.9 !important; } body.sp-wsv-theme-light .sp-wsv-orders-toolbar__select-wrap i.ph-caret-down, body.sp-wsv-theme-light .sp-wsv-orders-toolbar__select-wrap i.ph-caret-down + i { color: #64748b !important; opacity: 0.75 !important; } body.sp-wsv-theme-light .sp-wsv-orders-toolbar__select-wrap:has(select:focus) .sp-wsv-orders-toolbar__select-icon { color: #4e65f6 !important; } body.sp-wsv-theme-light .sp-wsv-orders-table__thumb, body.sp-wsv-theme-light .sp-wsv-orders-table__thumb--placeholder { background: var(--sp-bg-input) !important; } .woocommerce-account .woocommerce-MyAccount-content label{ color: #000; } .woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table, .woocommerce-account .woocommerce-MyAccount-content table.shop_table { opacity: 1; }