.elementor-9060 .elementor-element.elementor-element-238d002{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:30px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:30px;--padding-bottom:30px;--padding-left:30px;--padding-right:30px;}.elementor-9060 .elementor-element.elementor-element-238d002.e-con{--e-con-transform-scaleX:1;--e-con-transform-scaleY:0.95;}.elementor-9060 .elementor-element.elementor-element-ddac094{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-9060 .elementor-element.elementor-element-9008ceb{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-9060 .elementor-element.elementor-element-be80aee{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-9060 .elementor-element.elementor-element-be80aee.e-con{--e-con-transform-scaleX:1;--e-con-transform-scaleY:0.8;--flex-grow:1;--flex-shrink:1;}.elementor-9060 .elementor-element.elementor-element-610aec0{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:50px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-9060 .elementor-element.elementor-element-610aec0.e-con{--flex-grow:1;--flex-shrink:1;}body.elementor-page-9060:not(.elementor-motion-effects-element-type-background), body.elementor-page-9060 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#000000;}:root{--page-title-display:none;}body.elementor-page-9060{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}/* Start custom CSS for container, class: .elementor-element-238d002 *//* ========================================================= PELISANIME - MI CUENTA DESKTOP CONTENEDOR AISLADO VERSIÓN CORREGIDA ========================================================= */ /* ========================================================= SECCIÓN 01 — CONTENEDOR PRINCIPAL 100% ANCHO + 90VH ========================================================= */ #mi-cuenta-desktop .pa-mi-cuenta-desktop{ --pa-bg:#050911; --pa-card:#0b1019; --pa-card-2:#0d131e; --pa-border:rgba(255,255,255,.10); --pa-border-hover:rgba(77,86,255,.55); --pa-text:#f5f7ff; --pa-muted:#aeb5c7; --pa-blue:#4d5cff; --pa-blue-light:#6673ff; --pa-purple:#7b3cff; /* ===================================================== ANCHO ===================================================== */ width:100% !important; max-width:none !important; margin:0 !important; /* ===================================================== ESTRUCTURA ===================================================== */ display:grid !important; grid-template-columns: 250px minmax(0,1fr); gap:20px; /* ===================================================== ALTURA ===================================================== */ height:90vh !important; min-height:0 !important; max-height:90vh !important; /* ===================================================== EVITAR QUE EL GRID CREZCA ===================================================== */ grid-template-rows:minmax(0,1fr); align-items:stretch !important; overflow:hidden !important; /* ===================================================== ESTILO ===================================================== */ color:var(--pa-text); font-family:inherit; box-sizing:border-box; } /* ========================================================= SECCIÓN 02 — RESET INTERNO ========================================================= */ #mi-cuenta-desktop .pa-mi-cuenta-desktop *, #mi-cuenta-desktop .pa-mi-cuenta-desktop *::before, #mi-cuenta-desktop .pa-mi-cuenta-desktop *::after{ box-sizing:border-box; } #mi-cuenta-desktop .pa-mi-cuenta-desktop a{ text-decoration:none; } #mi-cuenta-desktop .pa-mi-cuenta-desktop svg{ width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; } /* ========================================================= SECCIÓN 03 — OCULTAR WOOCOMMERCE NATIVO ========================================================= */ #mi-cuenta-desktop > .elementor-widget-shortcode, #mi-cuenta-desktop .elementor-widget-shortcode .woocommerce{ display:none !important; } /* ========================================================= SECCIÓN 04 — SIDEBAR ========================================================= */ /* 04.1 — CONTENEDOR SIDEBAR */ #mi-cuenta-desktop .pa-sidebar{ min-width:0; width:100%; height:100%; min-height:0; align-self:stretch; } /* 04.2 — CONTENEDOR INTERNO */ #mi-cuenta-desktop .pa-sidebar-inner{ /* * IMPORTANTE: * El sidebar ocupa exactamente toda * la altura disponible. */ width:100%; height:100%; min-height:0; max-height:100%; padding:20px; background: linear-gradient( 180deg, rgba(10,16,27,.96), rgba(5,10,18,.96) ); border:1px solid var(--pa-border); border-radius:12px; display:flex; flex-direction:column; overflow:hidden; /* * No usamos sticky aquí porque el propio * dashboard ya tiene una altura controlada. */ position:relative; } /* 04.3 — MENÚ */ #mi-cuenta-desktop .pa-sidebar-menu{ display:flex; flex-direction:column; gap:4px; flex-shrink:0; } /* 04.4 — ELEMENTOS DEL MENÚ */ #mi-cuenta-desktop .pa-side-item{ min-height:58px; display:flex; align-items:center; gap:16px; padding:0 14px; color:#f1f3fa; border:1px solid transparent; border-radius:10px; transition: background .25s ease, border-color .25s ease, color .25s ease, transform .25s ease; } /* 04.5 — ICONOS */ #mi-cuenta-desktop .pa-side-item svg{ flex:0 0 24px; color:#b7bfd2; } /* 04.6 — TEXTO */ #mi-cuenta-desktop .pa-side-label{ font-size:15px; font-weight:500; } /* 04.7 — HOVER */ #mi-cuenta-desktop .pa-side-item:hover{ color:#fff; background:rgba(72,83,255,.09); border-color:rgba(72,83,255,.20); transform:translateX(2px); } #mi-cuenta-desktop .pa-side-item:hover svg{ color:#6675ff; } /* 04.8 — ELEMENTO ACTIVO */ #mi-cuenta-desktop .pa-side-item.pa-active{ background: linear-gradient( 135deg, rgba(61,73,190,.42), rgba(46,55,133,.32) ); border-color:rgba(75,88,255,.65); box-shadow: inset 0 0 20px rgba(67,80,255,.08), 0 0 20px rgba(53,65,255,.06); } #mi-cuenta-desktop .pa-side-item.pa-active svg{ color:#7990ff; } /* 04.9 — CERRAR SESIÓN */ #mi-cuenta-desktop .pa-side-logout{ margin-top:4px; } /* ========================================================= SECCIÓN 05 — CLUB ========================================================= */ /* 05.1 — TARJETA */ #mi-cuenta-desktop .pa-club-card{ /* * Empuja la tarjeta hacia abajo. */ margin-top:auto; flex-shrink:0; padding:25px 18px 20px; text-align:center; background: radial-gradient( circle at 50% 0%, rgba(114,43,255,.30), transparent 65% ), rgba(39,17,75,.45); border:1px solid rgba(126,65,255,.35); border-radius:11px; } /* 05.2 — ICONO */ #mi-cuenta-desktop .pa-club-icon{ margin-bottom:8px; font-size:38px; line-height:1; color:#8157ff; text-shadow: 0 0 15px rgba(116,73,255,.65); } /* 05.3 — TÍTULO */ #mi-cuenta-desktop .pa-club-card h3{ margin:0 0 9px; color:#fff; font-size:17px; font-weight:700; } /* 05.4 — DESCRIPCIÓN */ #mi-cuenta-desktop .pa-club-card p{ margin:0 0 18px; color:#c1bad2; font-size:13px; line-height:1.65; } /* 05.5 — BOTÓN */ #mi-cuenta-desktop .pa-club-button{ display:flex; align-items:center; justify-content:center; min-height:42px; color:#fff; background: linear-gradient( 135deg, #5b4cff, #3945e8 ); border-radius:10px; font-size:14px; font-weight:600; box-shadow: 0 8px 25px rgba(67,62,255,.20); transition: transform .25s ease; } /* 05.6 — HOVER */ #mi-cuenta-desktop .pa-club-button:hover{ transform:translateY(-2px); } /* ========================================================= SECCIÓN 06 — CONTENIDO PRINCIPAL / DASHBOARD ========================================================= */ /* * ESTA ES LA PARTE MÁS IMPORTANTE. * * El dashboard tiene una altura fija igual al sidebar. * * Si el contenido supera esa altura: * → aparece scroll interno. * * El scroll NO mueve el sidebar. */ #mi-cuenta-desktop .pa-main-content{ width:100%; height:100%; min-width:0; min-height:0; max-height:100%; align-self:stretch; display:flex; flex-direction:column; gap:18px; /* * IMPORTANTE: * NO utilizar overflow:hidden aquí. */ overflow-x:hidden !important; overflow-y:auto !important; /* * El padding forma parte del tamaño total. */ padding:20px; background: linear-gradient( 145deg, rgba(10,16,26,.98), rgba(5,10,18,.98) ); border:1px solid rgba(255,255,255,.10); border-radius:14px; box-shadow: 0 15px 45px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.025); /* * Mantiene reservado el espacio de la * scrollbar para que el contenido no * salte horizontalmente. */ scrollbar-gutter:stable; } /* ========================================================= SECCIÓN 07 — BIENVENIDA ========================================================= */ #mi-cuenta-desktop .pa-welcome-card{ min-height:122px; padding:20px 25px; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-shrink:0; background: linear-gradient( 135deg, rgba(13,19,30,.98), rgba(9,14,23,.96) ); border:1px solid var(--pa-border); border-radius:12px; } /* 07.1 — USUARIO */ #mi-cuenta-desktop .pa-user-area{ display:flex; align-items:center; gap:17px; min-width:0; } /* 07.2 — AVATAR */ #mi-cuenta-desktop .pa-avatar{ width:76px; height:76px; flex:0 0 76px; display:flex; align-items:center; justify-content:center; border-radius:50%; background: radial-gradient( circle at 35% 25%, #343c55, #151b28 65%, #090d15 ); border:1px solid rgba(255,255,255,.24); box-shadow: 0 0 0 5px rgba(255,255,255,.025); } /* 07.3 — LETRA */ #mi-cuenta-desktop #pa-desktop-avatar-letter{ font-size:25px; font-weight:700; color:#fff; } /* 07.4 — INFORMACIÓN */ #mi-cuenta-desktop .pa-user-info h2{ margin:0 0 6px; font-size:22px; line-height:1.2; font-weight:700; } #mi-cuenta-desktop .pa-user-info p{ margin:0; color:var(--pa-muted); font-size:14px; } /* 07.5 — EMOJI */ #mi-cuenta-desktop .pa-wave{ display:inline-block; } /* 07.6 — BOTÓN PERFIL */ #mi-cuenta-desktop .pa-profile-button{ min-height:42px; padding:0 17px; display:inline-flex; align-items:center; justify-content:center; gap:9px; flex-shrink:0; color:#e9ecff; border:1px solid #5361ff; border-radius:7px; font-size:14px; font-weight:500; transition: background .25s ease, box-shadow .25s ease; } /* 07.7 — ICONO */ #mi-cuenta-desktop .pa-profile-button svg{ width:18px; height:18px; color:#6c7aff; } /* 07.8 — HOVER */ #mi-cuenta-desktop .pa-profile-button:hover{ background:rgba(71,82,255,.10); box-shadow: 0 0 20px rgba(71,82,255,.12); } /* ========================================================= SECCIÓN 08 — ESTADÍSTICAS ========================================================= */ #mi-cuenta-desktop .pa-stat-grid{ display:grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap:13px; flex-shrink:0; } #mi-cuenta-desktop .pa-stat-card{ min-height:126px; padding:18px; display:flex; align-items:flex-start; gap:14px; color:#fff; background: linear-gradient( 145deg, rgba(15,21,32,.98), rgba(10,15,24,.98) ); border:1px solid rgba(255,255,255,.085); border-radius:10px; transition: border-color .25s ease, transform .25s ease, background .25s ease; } #mi-cuenta-desktop .pa-stat-card:hover{ transform:translateY(-2px); border-color:var(--pa-border-hover); background:#0e1522; } #mi-cuenta-desktop .pa-stat-icon{ width:29px; height:29px; flex:0 0 29px; color:#c2c8d7; } #mi-cuenta-desktop .pa-stat-icon svg{ width:27px; height:27px; } #mi-cuenta-desktop .pa-stat-text{ min-width:0; display:flex; flex-direction:column; } #mi-cuenta-desktop .pa-stat-title{ margin-bottom:6px; color:#e9ecf3; font-size:14px; } #mi-cuenta-desktop .pa-stat-text strong{ margin-bottom:7px; color:#fff; font-size:28px; line-height:1; } #mi-cuenta-desktop .pa-stat-link{ color:#6575ff; font-size:12px; } /* ========================================================= SECCIÓN 09 — PANELES GENERALES ========================================================= */ #mi-cuenta-desktop .pa-panel{ padding:20px; background: linear-gradient( 145deg, rgba(13,19,29,.98), rgba(9,14,22,.98) ); border:1px solid rgba(255,255,255,.085); border-radius:11px; flex-shrink:0; } /* 09.1 — HEADER */ #mi-cuenta-desktop .pa-panel-header{ display:flex; align-items:center; justify-content:space-between; gap:15px; } #mi-cuenta-desktop .pa-panel-header h3{ margin:0; color:#fff; font-size:16px; } #mi-cuenta-desktop .pa-panel-header a{ color:#6877ff; font-size:12px; } /* ========================================================= SECCIÓN 10 — PEDIDOS RECIENTES ========================================================= */ #mi-cuenta-desktop .pa-orders-list{ min-height:165px; display:flex; align-items:center; justify-content:center; } #mi-cuenta-desktop .pa-empty-orders{ text-align:center; } #mi-cuenta-desktop .pa-empty-icon{ margin-bottom:5px; color:#6774ff; font-size:25px; } #mi-cuenta-desktop .pa-empty-orders p{ margin:0 0 9px; color:#aeb5c7; font-size:14px; } #mi-cuenta-desktop .pa-empty-orders a{ color:#6877ff; font-size:13px; } /* ========================================================= SECCIÓN 11 — GRID INFERIOR ========================================================= */ #mi-cuenta-desktop .pa-bottom-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:16px; min-height:0; flex-shrink:0; } /* ========================================================= SECCIÓN 12 — INFORMACIÓN DE CUENTA ========================================================= */ #mi-cuenta-desktop .pa-info-list{ padding-top:18px; display:flex; flex-direction:column; gap:20px; } #mi-cuenta-desktop .pa-info-item{ display:flex; align-items:flex-start; gap:15px; } #mi-cuenta-desktop .pa-info-icon{ width:27px; height:27px; flex:0 0 27px; color:#aeb6ca; } #mi-cuenta-desktop .pa-info-icon svg{ width:25px; height:25px; } #mi-cuenta-desktop .pa-info-item > div:last-child{ min-width:0; display:flex; flex-direction:column; gap:4px; } #mi-cuenta-desktop .pa-info-item span{ color:#8e96aa; font-size:12px; } #mi-cuenta-desktop .pa-info-item strong{ color:#f4f5fa; font-size:14px; font-weight:500; word-break:break-word; } #mi-cuenta-desktop .pa-small-button{ padding:6px 10px; color:#e5e8f0 !important; border:1px solid rgba(255,255,255,.18); border-radius:6px; font-size:12px !important; } /* ========================================================= SECCIÓN 13 — DIRECCIONES ========================================================= */ #mi-cuenta-desktop .pa-address-list{ padding-top:18px; } #mi-cuenta-desktop .pa-address-item{ display:flex; align-items:flex-start; gap:15px; } #mi-cuenta-desktop .pa-address-icon{ width:38px; height:38px; flex:0 0 38px; display:flex; align-items:center; justify-content:center; color:#b7bfd0; background:rgba(255,255,255,.035); border-radius:7px; } #mi-cuenta-desktop .pa-address-icon svg{ width:22px; height:22px; } #mi-cuenta-desktop .pa-address-item > div:last-child{ display:flex; flex-direction:column; gap:5px; } #mi-cuenta-desktop .pa-address-item strong{ color:#f5f6fa; font-size:14px; } #mi-cuenta-desktop .pa-address-item span{ max-width:300px; color:#8f97aa; font-size:13px; line-height:1.5; } /* ========================================================= SECCIÓN 14 — BENEFICIOS ========================================================= */ #mi-cuenta-desktop .pa-benefits{ padding:21px 28px; background: linear-gradient( 145deg, rgba(13,19,29,.98), rgba(9,14,22,.98) ); border:1px solid rgba(255,255,255,.085); border-radius:11px; flex-shrink:0; } #mi-cuenta-desktop .pa-benefits h3{ margin:0 0 20px; font-size:16px; } #mi-cuenta-desktop .pa-benefits-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:25px; } #mi-cuenta-desktop .pa-benefit{ display:flex; align-items:center; gap:13px; } #mi-cuenta-desktop .pa-benefit-icon{ width:32px; flex:0 0 32px; font-size:27px; line-height:1; } #mi-cuenta-desktop .pa-benefit > div:last-child{ display:flex; flex-direction:column; gap:4px; } #mi-cuenta-desktop .pa-benefit strong{ color:#f1f3f8; font-size:13px; } #mi-cuenta-desktop .pa-benefit span{ color:#8d95a7; font-size:12px; } /* ========================================================= SECCIÓN 15 — FOOTER ========================================================= */ #mi-cuenta-desktop .pa-account-footer{ min-height:90px; padding:20px 5px; display:grid; grid-template-columns: 1fr auto 1fr; align-items:center; gap:20px; border-top:1px solid rgba(255,255,255,.08); flex-shrink:0; } #mi-cuenta-desktop .pa-footer-logo{ display:flex; flex-direction:column; } #mi-cuenta-desktop .pa-footer-logo strong{ font-size:22px; font-style:italic; font-weight:800; line-height:1; } #mi-cuenta-desktop .pa-footer-logo strong span{ color:#4553ff; } #mi-cuenta-desktop .pa-footer-logo small{ margin-top:3px; color:#8d94a6; font-size:7px; letter-spacing:1.4px; } #mi-cuenta-desktop .pa-socials{ display:flex; align-items:center; gap:9px; } #mi-cuenta-desktop .pa-socials a{ width:31px; height:31px; display:flex; align-items:center; justify-content:center; color:#e4e7ef; background:rgba(255,255,255,.055); border-radius:50%; font-size:13px; transition: background .25s ease, transform .25s ease; } #mi-cuenta-desktop .pa-socials a:hover{ background:rgba(70,82,255,.22); transform:translateY(-2px); } #mi-cuenta-desktop .pa-account-footer > p{ margin:0; color:#71798c; font-size:12px; text-align:right; } /* ========================================================= SECCIÓN 16 — ALTURA GENERAL 90VH SIDEBAR + DASHBOARD ========================================================= */ #mi-cuenta-desktop .pa-mi-cuenta-desktop{ /* * TODO EL DASHBOARD OCUPA EXACTAMENTE * EL 90% DE LA ALTURA DE LA VENTANA. */ height:90vh !important; min-height:0 !important; max-height:90vh !important; align-items:stretch !important; } /* ========================================================= SECCIÓN 18 — DASHBOARD 90VH ========================================================= */ #mi-cuenta-desktop .pa-main-content{ width:100%; height:100% !important; min-width:0; min-height:0 !important; max-height:100% !important; align-self:stretch; /* * El contenido puede ser más alto que el dashboard, * pero el dashboard NO aumenta de tamaño. */ overflow-x:hidden !important; overflow-y:auto !important; /* * El padding queda incluido dentro * del tamaño total. */ box-sizing:border-box; scrollbar-gutter:stable; } /* ========================================================= SECCIÓN 19 — EVITAR CRECIMIENTO DEL DASHBOARD ========================================================= */ /* * Los elementos internos no pueden obligar * al dashboard a crecer verticalmente. */ #mi-cuenta-desktop .pa-main-content > *{ flex-shrink:0 !important; } /* ========================================================= SECCIÓN 20 — SCROLLBAR DEL DASHBOARD ========================================================= */ #mi-cuenta-desktop .pa-main-content::-webkit-scrollbar{ width:7px; } #mi-cuenta-desktop .pa-main-content::-webkit-scrollbar-track{ background:transparent; } #mi-cuenta-desktop .pa-main-content::-webkit-scrollbar-thumb{ background:transparent; border-radius:20px; transition: background .25s ease; } #mi-cuenta-desktop .pa-main-content.pa-is-scrolling::-webkit-scrollbar-thumb{ background:rgba(100,112,255,.85); } #mi-cuenta-desktop .pa-main-content.pa-is-scrolling::-webkit-scrollbar-thumb:hover{ background:rgba(123,60,255,.95); } /* ========================================================= SECCIÓN 21 — SCROLLBAR FIREFOX ========================================================= */ #mi-cuenta-desktop .pa-main-content{ scrollbar-width:thin; scrollbar-color: transparent transparent; } #mi-cuenta-desktop .pa-main-content.pa-is-scrolling{ scrollbar-color: rgba(100,112,255,.85) transparent; } /* ========================================================= SECCIÓN 22 — RECUADRO PRINCIPAL DEL DASHBOARD ========================================================= */ #mi-cuenta-desktop .pa-main-content{ position:relative; padding:20px; background: linear-gradient( 145deg, rgba(10,16,26,.98), rgba(5,10,18,.98) ); border:1px solid rgba(255,255,255,.10); border-radius:14px; box-shadow: 0 15px 45px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.025); /* * EL SCROLL ES ÚNICAMENTE VERTICAL. */ overflow-x:hidden !important; overflow-y:auto !important; scrollbar-gutter:stable; } /* ========================================================= SECCIÓN 23 — PROTECCIÓN FINAL 100% ANCHO + 90VH ========================================================= */ #mi-cuenta-desktop .pa-mi-cuenta-desktop{ width:100% !important; max-width:none !important; height:90vh !important; min-height:0 !important; max-height:90vh !important; margin:0 !important; overflow:hidden !important; box-sizing:border-box !important; } /* ========================================================= SECCIÓN 25 — PROTECCIÓN FINAL DEL SIDEBAR ========================================================= */ #mi-cuenta-desktop .pa-sidebar{ height:100% !important; min-height:0 !important; max-height:100% !important; } #mi-cuenta-desktop .pa-sidebar-inner{ height:100% !important; min-height:0 !important; max-height:100% !important; overflow:hidden !important; } /* ========================================================= SECCIÓN 25.1 — TABLET / MOBILE ========================================================= */ @media (max-width:1024px){ #mi-cuenta-desktop{ display:none !important; } } /* ========================================================= SECCIÓN 25.2 — REDUCCIÓN A 1200PX ========================================================= */ @media (max-width:1200px){ #mi-cuenta-desktop .pa-mi-cuenta-desktop{ grid-template-columns: 220px minmax(0,1fr); } #mi-cuenta-desktop .pa-stat-grid{ grid-template-columns: repeat(2,1fr); } #mi-cuenta-desktop .pa-benefits-grid{ grid-template-columns: repeat(2,1fr); } } /* ========================================================= 26.3 — ESTADÍSTICAS MÁS COMPACTAS ========================================================= */ #mi-cuenta-desktop .pa-stat-grid{ gap:10px !important; } #mi-cuenta-desktop .pa-stat-card{ min-height:94px !important; padding:13px !important; gap:10px !important; } /* Icono */ #mi-cuenta-desktop .pa-stat-icon{ width:25px !important; height:25px !important; flex:0 0 25px !important; } #mi-cuenta-desktop .pa-stat-icon svg{ width:23px !important; height:23px !important; } /* Título */ #mi-cuenta-desktop .pa-stat-title{ margin-bottom:3px !important; font-size:12px !important; } /* Número */ #mi-cuenta-desktop .pa-stat-text strong{ margin-bottom:4px !important; font-size:22px !important; } /* Enlace */ #mi-cuenta-desktop .pa-stat-link{ font-size:10px !important; } /* ========================================================= 26.4 — PANELES MÁS COMPACTOS ========================================================= */ #mi-cuenta-desktop .pa-panel{ padding:14px !important; } /* Encabezado */ #mi-cuenta-desktop .pa-panel-header h3{ font-size:14px !important; } #mi-cuenta-desktop .pa-panel-header a{ font-size:11px !important; } /* ========================================================= 26.5 — PEDIDOS RECIENTES ========================================================= */ #mi-cuenta-desktop .pa-orders-list{ min-height:105px !important; } #mi-cuenta-desktop .pa-empty-icon{ margin-bottom:2px !important; font-size:20px !important; } #mi-cuenta-desktop .pa-empty-orders p{ margin-bottom:5px !important; font-size:12px !important; } #mi-cuenta-desktop .pa-empty-orders a{ font-size:11px !important; } /* ========================================================= 26.6 — GRID INFERIOR ========================================================= */ #mi-cuenta-desktop .pa-bottom-grid{ gap:10px !important; } /* ========================================================= 26.7 — INFORMACIÓN DE CUENTA ========================================================= */ #mi-cuenta-desktop .pa-info-list{ padding-top:12px !important; gap:12px !important; } #mi-cuenta-desktop .pa-info-item{ gap:10px !important; } #mi-cuenta-desktop .pa-info-icon{ width:23px !important; height:23px !important; flex:0 0 23px !important; } #mi-cuenta-desktop .pa-info-icon svg{ width:21px !important; height:21px !important; } #mi-cuenta-desktop .pa-info-item span{ font-size:10px !important; } #mi-cuenta-desktop .pa-info-item strong{ font-size:12px !important; } /* ========================================================= 26.8 — DIRECCIONES ========================================================= */ #mi-cuenta-desktop .pa-address-list{ padding-top:12px !important; } #mi-cuenta-desktop .pa-address-item{ gap:10px !important; } #mi-cuenta-desktop .pa-address-icon{ width:32px !important; height:32px !important; flex:0 0 32px !important; } #mi-cuenta-desktop .pa-address-icon svg{ width:19px !important; height:19px !important; } #mi-cuenta-desktop .pa-address-item strong{ font-size:12px !important; } #mi-cuenta-desktop .pa-address-item span{ font-size:10px !important; line-height:1.35 !important; } /* ========================================================= 26.9 — BENEFICIOS ========================================================= */ #mi-cuenta-desktop .pa-benefits{ padding:14px 18px !important; } #mi-cuenta-desktop .pa-benefits h3{ margin-bottom:12px !important; font-size:14px !important; } #mi-cuenta-desktop .pa-benefits-grid{ gap:14px !important; } #mi-cuenta-desktop .pa-benefit{ gap:8px !important; } #mi-cuenta-desktop .pa-benefit-icon{ width:26px !important; flex:0 0 26px !important; font-size:21px !important; } #mi-cuenta-desktop .pa-benefit > div:last-child{ gap:2px !important; } #mi-cuenta-desktop .pa-benefit strong{ font-size:11px !important; } #mi-cuenta-desktop .pa-benefit span{ font-size:9px !important; } /* ========================================================= 26.10 — FOOTER COMPACTO ========================================================= */ #mi-cuenta-desktop .pa-account-footer{ min-height:60px !important; padding:10px 3px !important; gap:10px !important; } #mi-cuenta-desktop .pa-footer-logo strong{ font-size:17px !important; } #mi-cuenta-desktop .pa-footer-logo small{ font-size:6px !important; } #mi-cuenta-desktop .pa-socials{ gap:6px !important; } #mi-cuenta-desktop .pa-socials a{ width:26px !important; height:26px !important; font-size:11px !important; } #mi-cuenta-desktop .pa-account-footer > p{ font-size:9px !important; } /* ========================================================= 26.11 — SIDEBAR COMPACTO ========================================================= */ #mi-cuenta-desktop .pa-sidebar-inner{ padding:14px !important; } #mi-cuenta-desktop .pa-sidebar-menu{ gap:2px !important; } #mi-cuenta-desktop .pa-side-item{ min-height:45px !important; gap:11px !important; padding:0 11px !important; } #mi-cuenta-desktop .pa-side-item svg{ width:20px !important; height:20px !important; flex:0 0 20px !important; } #mi-cuenta-desktop .pa-side-label{ font-size:12px !important; } /* ========================================================= SECCIÓN 27 — LIBERAR WIDGET DE ELEMENTOR ANCHO COMPLETO ========================================================= */ /* * El widget HTML que contiene todo el dashboard * es el elemento 7fba2b4. * * Lo sacamos de cualquier límite de ancho * impuesto por Elementor. */ #mi-cuenta-desktop.elementor-widget-html, #mi-cuenta-desktop .elementor-widget-html{ width:100% !important; max-width:none !important; } /* Widget padre que contiene .pa-mi-cuenta-desktop */ .elementor-element-7fba2b4{ width:100% !important; max-width:none !important; min-width:0 !important; } /* El HTML interno */ .elementor-element-7fba2b4 > div{ width:100% !important; max-width:none !important; min-width:0 !important; } /* ========================================================= SECCIÓN 28 — SIDEBAR ALTURA CONTROLADA ========================================================= */ #mi-cuenta-desktop .pa-sidebar{ width:100% !important; height:100% !important; min-height:0 !important; max-height:100% !important; min-width:0 !important; align-self:stretch !important; } #mi-cuenta-desktop .pa-sidebar-inner{ width:100% !important; height:100% !important; min-height:0 !important; max-height:100% !important; overflow:hidden !important; position:relative; } /* ========================================================= SECCIÓN 29 — DASHBOARD ALTURA FIJA + SCROLL INTERNO ========================================================= */ #mi-cuenta-desktop .pa-main-content{ width:100% !important; min-width:0 !important; height:100% !important; min-height:0 !important; max-height:100% !important; align-self:stretch !important; /* ===================================================== FLEX ===================================================== */ display:flex !important; flex-direction:column !important; gap:12px !important; /* ===================================================== SCROLL INTERNO ===================================================== */ overflow-x:hidden !important; overflow-y:auto !important; /* ===================================================== TAMAÑO ===================================================== */ padding:14px !important; box-sizing:border-box !important; /* ===================================================== APARIENCIA ===================================================== */ position:relative; background: linear-gradient( 145deg, rgba(10,16,26,.98), rgba(5,10,18,.98) ); border:1px solid rgba(255,255,255,.10); border-radius:14px; box-shadow: 0 15px 45px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.025); /* ===================================================== SCROLLBAR ===================================================== */ scrollbar-gutter:stable; } /* ========================================================= LOS HIJOS NO PUEDEN CAMBIAR LA ALTURA DEL DASHBOARD ========================================================= */ #mi-cuenta-desktop .pa-main-content > *{ flex-shrink:0 !important; min-width:0; } /* ========================================================= SECCIÓN 27 — CONTENIDO DINÁMICO WOOCOMMERCE ========================================================= */ #mi-cuenta-desktop .pa-dynamic-content{ width:100%; min-width:0; } /* ========================================================= SECCIÓN 27.1 — EVITAR QUE WOOCOMMERCE ROMPA EL LAYOUT ========================================================= */ #mi-cuenta-desktop .pa-dynamic-content .woocommerce{ width:100%; max-width:100%; } #mi-cuenta-desktop .pa-dynamic-content .woocommerce-MyAccount-content{ width:100%; max-width:100%; float:none; } /* ========================================================= SECCIÓN 27.2 — CARGANDO ========================================================= */ #mi-cuenta-desktop .pa-loading{ overflow:hidden !important; } #mi-cuenta-desktop .pa-loading-screen{ width:100%; min-height:300px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; color:#aeb5c7; font-size:13px; } /* ========================================================= SECCIÓN 27.3 — SPINNER ========================================================= */ #mi-cuenta-desktop .pa-loading-spinner{ width:32px; height:32px; border:3px solid rgba(255,255,255,.10); border-top-color:#6575ff; border-radius:50%; animation: paDashboardSpin .7s linear infinite; } @keyframes paDashboardSpin{ to{ transform:rotate(360deg); } } /* ========================================================= SECCIÓN 27.4 — ERROR ========================================================= */ #mi-cuenta-desktop .pa-load-error{ min-height:220px; display:flex; align-items:center; justify-content:center; } /* ========================================================= SECCIÓN 27.5 — TABLAS WOOCOMMERCE ========================================================= */ #mi-cuenta-desktop .pa-dynamic-content table{ width:100%; border-collapse:collapse; } /* ========================================================= SECCIÓN 27.6 — IMÁGENES ========================================================= */ #mi-cuenta-desktop .pa-dynamic-content img{ max-width:100%; height:auto; } /* ========================================================= SECCIÓN 27.7 — BOTONES ========================================================= */ #mi-cuenta-desktop .pa-dynamic-content .button, #mi-cuenta-desktop .pa-dynamic-content .woocommerce-button{ transition: transform .2s ease, background .2s ease, border-color .2s ease; } /* ========================================================= DASHBOARD — CARGANDO CONTENIDO ========================================================= */ .pa-main-content.pa-main-loading { position: relative; min-height: 300px; } /* ========================================================= OVERLAY DE CARGA ========================================================= */ .pa-dashboard-loader { position: absolute; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: rgba(5, 9, 18, 0.72); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } /* ========================================================= SPINNER ========================================================= */ .pa-dashboard-loader-spinner { width: 32px; height: 32px; border-radius: 50%; border: 3px solid rgba(255,255,255,0.15); border-top-color: #5967ff; animation: paDashboardSpin .7s linear infinite; } @keyframes paDashboardSpin { to { transform: rotate(360deg); } } /* ========================================================= PELISANIME — CARGA DEL CONTENIDO ========================================================= */ .pa-main-content { position: relative; } /* ========================================================= ESTADO DE CARGA ========================================================= */ .pa-main-content.pa-cargando { pointer-events: none; } /* ========================================================= LOADER ========================================================= */ .pa-loader { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; background: rgba( 7, 10, 18, .72 ); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); } /* ========================================================= SPINNER ========================================================= */ .pa-loader-spinner { width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba( 255, 255, 255, .15 ); border-top-color: #5967ff; animation: paLoaderSpin .7s linear infinite; } @keyframes paLoaderSpin { to { transform: rotate(360deg); } } /* ========================================================= PELISANIME — MI CUENTA DESKTOP ANCHO COMPLETO DE PANTALLA ========================================================= */ /* --------------------------------------------------------- 01 — WIDGET HTML DE ELEMENTOR --------------------------------------------------------- */ .elementor-element-7fba2b4 { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; align-self: stretch !important; } /* --------------------------------------------------------- 02 — CONTENEDORES PADRE DE ELEMENTOR Permite que el widget pueda salir del ancho limitado del contenedor de Elementor. --------------------------------------------------------- */ .elementor-element-7fba2b4, .elementor-element-7fba2b4 > .elementor-widget-container { box-sizing: border-box !important; } /* --------------------------------------------------------- 03 — CONTENEDOR PRINCIPAL --------------------------------------------------------- */ .elementor-element-7fba2b4 .pa-mi-cuenta-desktop { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box !important; } /* --------------------------------------------------------- 04 — SIDEBAR --------------------------------------------------------- */ .elementor-element-7fba2b4 .pa-sidebar { box-sizing: border-box !important; } /* --------------------------------------------------------- 05 — CONTENIDO PRINCIPAL --------------------------------------------------------- */ .elementor-element-7fba2b4 .pa-main-content { box-sizing: border-box !important; min-width: 0 !important; } /* --------------------------------------------------------- 06 — SI ELEMENTOR ESTÁ LIMITANDO EL CONTENEDOR --------------------------------------------------------- */ .elementor-element-7fba2b4 { align-self: stretch !important; } /* --------------------------------------------------------- 07 — FULL WIDTH REAL Descomenta esta sección SOLAMENTE si el contenedor de Elementor sigue dejando márgenes laterales. --------------------------------------------------------- */ /* .elementor-element-7fba2b4 { width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; } */ /* --------------------------------------------------------- 08 — EVITAR SCROLL HORIZONTAL --------------------------------------------------------- */ body { overflow-x: hidden; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-9008ceb *//* ============================================================ PELISANIME — MI CUENTA CSS FINAL LIMPIO SIDEBAR RETRÁCTIL + DASHBOARD ============================================================ */ /* ============================================================ 1. VARIABLES PRINCIPALES ============================================================ */ .pa-mi-cuenta { --pa-sidebar-closed: 82px; --pa-sidebar-open: 300px; --pa-bg: #070a10; --pa-bg-2: #0b1018; --pa-card: #0d131d; --pa-card-2: #101722; --pa-border: rgba(255,255,255,.075); --pa-text: #f4f6fb; --pa-text-soft: #9ca7ba; --pa-text-muted: #687386; --pa-accent: #6977ff; --pa-accent-2: #805cff; --pa-sidebar-bg: #080c14; --pa-sidebar-bg-2: #0b101a; --pa-sidebar-text: #aeb7c8; --pa-sidebar-hover: rgba(255,255,255,.065); --pa-sidebar-active: linear-gradient( 135deg, rgba(89,104,255,.42), rgba(113,76,255,.25) ); position: relative !important; display: block !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; color: var(--pa-text) !important; background: var(--pa-bg) !important; box-sizing: border-box !important; overflow: hidden !important; } /* ============================================================ 2. RESET INTERNO ============================================================ */ .pa-mi-cuenta *, .pa-mi-cuenta *::before, .pa-mi-cuenta *::after { box-sizing: border-box !important; } /* ============================================================ 3. SIDEBAR PRINCIPAL ============================================================ */ .pa-mi-cuenta > .pa-sidebar { position: fixed !important; top: 0 !important; left: 0 !important; width: var(--pa-sidebar-closed) !important; min-width: var(--pa-sidebar-closed) !important; max-width: var(--pa-sidebar-closed) !important; height: 100vh !important; min-height: 100vh !important; max-height: 100vh !important; margin: 0 !important; padding: 0 !important; display: block !important; overflow: visible !important; z-index: 1 !important; pointer-events: auto !important; } /* ============================================================ 4. SIDEBAR INTERNO ============================================================ */ .pa-mi-cuenta > .pa-sidebar > .pa-sidebar-inner { position: absolute !important; top: 0 !important; left: 0 !important; width: var(--pa-sidebar-closed) !important; min-width: var(--pa-sidebar-closed) !important; max-width: var(--pa-sidebar-closed) !important; height: 100vh !important; min-height: 100vh !important; max-height: 100vh !important; margin: 0 !important; padding: 60px 0 20px !important; background: linear-gradient( 180deg, var(--pa-sidebar-bg) 0%, var(--pa-sidebar-bg-2) 100% ) !important; border-right: 1px solid var(--pa-border) !important; box-shadow: 8px 0 30px rgba(0,0,0,.22) !important; overflow: hidden !important; transition: width .30s cubic-bezier(.4,0,.2,1), box-shadow .30s ease !important; z-index: 999999 !important; } /* ============================================================ 5. SIDEBAR ABIERTO ============================================================ */ .pa-mi-cuenta > .pa-sidebar.pa-sidebar-open > .pa-sidebar-inner { width: var(--pa-sidebar-open) !important; min-width: var(--pa-sidebar-open) !important; max-width: var(--pa-sidebar-open) !important; box-shadow: 18px 0 50px rgba(0,0,0,.48) !important; } /* ============================================================ 6. MENÚ ============================================================ */ .pa-mi-cuenta .pa-sidebar-menu { width: var(--pa-sidebar-open) !important; min-width: var(--pa-sidebar-open) !important; max-width: var(--pa-sidebar-open) !important; margin: 0 !important; padding: 15px 14px !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 7px !important; overflow: visible !important; transition: width .30s cubic-bezier(.4,0,.2,1) !important; } /* ============================================================ 7. ELEMENTOS DEL SIDEBAR CERRADO = SOLO ICONO ============================================================ */ .pa-mi-cuenta .pa-sidebar .pa-side-item { position: relative !important; width: 54px !important; min-width: 54px !important; max-width: 54px !important; height: 52px !important; min-height: 52px !important; max-height: 52px !important; flex: 0 0 54px !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; color: var(--pa-sidebar-text) !important; background: transparent !important; border: 0 !important; border-radius: 13px !important; text-decoration: none !important; white-space: nowrap !important; overflow: hidden !important; cursor: pointer !important; transition: width .30s cubic-bezier(.4,0,.2,1), min-width .30s cubic-bezier(.4,0,.2,1), max-width .30s cubic-bezier(.4,0,.2,1), flex-basis .30s cubic-bezier(.4,0,.2,1), background .22s ease, color .22s ease, transform .22s ease !important; } /* ============================================================ 8. ELEMENTOS DEL SIDEBAR ABIERTO = ICONO + TEXTO ============================================================ */ .pa-mi-cuenta .pa-sidebar.pa-sidebar-open .pa-side-item { width: 272px !important; min-width: 272px !important; max-width: 272px !important; flex: 0 0 272px !important; justify-content: flex-start !important; padding-left: 17px !important; padding-right: 17px !important; } /* ============================================================ 9. ICONOS ============================================================ */ .pa-mi-cuenta .pa-sidebar .pa-side-item > svg { display: block !important; width: 22px !important; height: 22px !important; min-width: 22px !important; min-height: 22px !important; max-width: 22px !important; max-height: 22px !important; flex: 0 0 22px !important; fill: none !important; stroke: currentColor !important; stroke-width: 1.8 !important; stroke-linecap: round !important; stroke-linejoin: round !important; color: currentColor !important; overflow: visible !important; transition: transform .22s ease, color .22s ease !important; } /* ============================================================ 10. SVG — TODOS LOS ELEMENTOS ============================================================ */ .pa-mi-cuenta .pa-sidebar svg path, .pa-mi-cuenta .pa-sidebar svg circle, .pa-mi-cuenta .pa-sidebar svg rect, .pa-mi-cuenta .pa-sidebar svg line, .pa-mi-cuenta .pa-sidebar svg polyline, .pa-mi-cuenta .pa-sidebar svg polygon { fill: none !important; stroke: currentColor !important; stroke-width: 1.8 !important; stroke-linecap: round !important; stroke-linejoin: round !important; } /* ============================================================ 11. TEXTO DEL SIDEBAR CERRADO = OCULTO ============================================================ */ .pa-mi-cuenta .pa-sidebar .pa-side-label { display: block !important; width: 0 !important; max-width: 0 !important; margin-left: 0 !important; overflow: hidden !important; color: #ffffff !important; font-size: 14px !important; font-weight: 500 !important; line-height: 1.2 !important; white-space: nowrap !important; opacity: 0 !important; visibility: hidden !important; transform: translateX(-8px) !important; pointer-events: none !important; transition: width .25s ease, max-width .25s ease, margin-left .25s ease, opacity .18s ease, transform .22s ease, visibility .18s ease !important; } /* ============================================================ 12. TEXTO DEL SIDEBAR ABIERTO = VISIBLE ============================================================ */ .pa-mi-cuenta .pa-sidebar.pa-sidebar-open .pa-side-label { width: auto !important; max-width: 210px !important; margin-left: 14px !important; opacity: 1 !important; visibility: visible !important; transform: translateX(0) !important; pointer-events: auto !important; } /* ============================================================ 13. ELEMENTO ACTIVO ============================================================ */ .pa-mi-cuenta .pa-sidebar .pa-side-item.pa-active { color: #ffffff !important; background: var(--pa-sidebar-active) !important; box-shadow: inset 0 0 0 1px rgba(110,120,255,.25), 0 8px 25px rgba(74,69,255,.18) !important; } /* ============================================================ 14. HOVER ============================================================ */ .pa-mi-cuenta .pa-sidebar .pa-side-item:hover { color: #ffffff !important; background: var(--pa-sidebar-hover) !important; transform: translateX(2px) !important; } /* ============================================================ 15. HOVER DEL ICONO ============================================================ */ .pa-mi-cuenta .pa-sidebar .pa-side-item:hover > svg { color: #ffffff !important; transform: scale(1.04) !important; } /* ============================================================ 16. CERRAR SESIÓN ============================================================ */ .pa-mi-cuenta .pa-side-logout { margin-top: auto !important; } /* ============================================================ 17. SIDEBAR SIN SCROLL ============================================================ */ .pa-mi-cuenta > .pa-sidebar, .pa-mi-cuenta > .pa-sidebar > .pa-sidebar-inner, .pa-mi-cuenta .pa-sidebar-menu { scrollbar-width: none !important; } .pa-mi-cuenta > .pa-sidebar::-webkit-scrollbar, .pa-mi-cuenta > .pa-sidebar > .pa-sidebar-inner::-webkit-scrollbar, .pa-mi-cuenta .pa-sidebar-menu::-webkit-scrollbar { display: none !important; width: 0 !important; } /* ============================================================ 18. CONTENIDO PRINCIPAL EL CONTENIDO NO SE MUEVE AL ABRIR EL SIDEBAR ============================================================ */ .pa-mi-cuenta > .pa-main-content { position: fixed !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: var(--pa-sidebar-closed) !important; width: auto !important; height: 100vh !important; min-height: 100vh !important; margin: 0 !important; padding: 60px 34px 60px !important; background: linear-gradient( 180deg, var(--pa-bg) 0%, var(--pa-bg-2) 100% ) !important; box-sizing: border-box !important; overflow-x: hidden !important; overflow-y: auto !important; z-index: 10 !important; transition: left .30s cubic-bezier(.4,0,.2,1) !important; } /* ============================================================ 19. IMPORTANTE AL ABRIR EL SIDEBAR EL CONTENIDO NO SE DESPLAZA ============================================================ */ .pa-mi-cuenta > .pa-sidebar.pa-sidebar-open ~ .pa-main-content { left: var(--pa-sidebar-closed) !important; } /* ============================================================ 20. CONTENIDO INTERNO ============================================================ */ .pa-mi-cuenta .pa-main-content > * { max-width: 1400px !important; margin-left: auto !important; margin-right: auto !important; } /* ============================================================ 21. TARJETA DE BIENVENIDA ============================================================ */ .pa-mi-cuenta .pa-welcome-card { width: 100% !important; min-height: 145px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 25px !important; margin-bottom: 22px !important; padding: 28px 30px !important; background: linear-gradient( 135deg, #111824, #0c111a ) !important; border: 1px solid var(--pa-border) !important; border-radius: 20px !important; box-shadow: 0 15px 45px rgba(0,0,0,.18) !important; } /* ============================================================ 22. USUARIO ============================================================ */ .pa-mi-cuenta .pa-user-area { display: flex !important; align-items: center !important; gap: 18px !important; min-width: 0 !important; } .pa-mi-cuenta .pa-avatar { width: 68px !important; height: 68px !important; min-width: 68px !important; display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 50% !important; background: linear-gradient( 135deg, #5968ff, #7d55ff ) !important; color: #ffffff !important; font-size: 26px !important; font-weight: 700 !important; box-shadow: 0 10px 30px rgba(89,104,255,.25) !important; } .pa-mi-cuenta .pa-user-info { min-width: 0 !important; } .pa-mi-cuenta .pa-user-info h2 { margin: 0 0 7px !important; color: #ffffff !important; font-size: 25px !important; line-height: 1.2 !important; font-weight: 700 !important; } .pa-mi-cuenta .pa-user-info p { margin: 0 !important; color: var(--pa-text-soft) !important; font-size: 14px !important; } .pa-mi-cuenta .pa-wave { display: inline-block !important; } /* ============================================================ 23. BOTÓN PERFIL ============================================================ */ .pa-mi-cuenta .pa-profile-button { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 120px !important; height: 44px !important; padding: 0 20px !important; color: #ffffff !important; background: linear-gradient( 135deg, #5968ff, #765cff ) !important; border: 0 !important; border-radius: 11px !important; text-decoration: none !important; font-size: 14px !important; font-weight: 600 !important; box-shadow: 0 8px 25px rgba(89,104,255,.20) !important; transition: transform .2s ease, box-shadow .2s ease !important; } .pa-mi-cuenta .pa-profile-button:hover { transform: translateY(-2px) !important; box-shadow: 0 12px 30px rgba(89,104,255,.30) !important; } /* ============================================================ 24. ESTADÍSTICAS ============================================================ */ .pa-mi-cuenta .pa-stat-grid { width: 100% !important; display: grid !important; grid-template-columns: repeat(4, minmax(0,1fr)) !important; gap: 16px !important; margin-bottom: 22px !important; } .pa-mi-cuenta .pa-stat-card { min-width: 0 !important; min-height: 125px !important; display: flex !important; align-items: center !important; gap: 15px !important; padding: 20px !important; color: #ffffff !important; background: linear-gradient( 145deg, var(--pa-card-2), var(--pa-card) ) !important; border: 1px solid var(--pa-border) !important; border-radius: 17px !important; text-decoration: none !important; transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease !important; } .pa-mi-cuenta .pa-stat-card:hover { transform: translateY(-3px) !important; border-color: rgba(105,119,255,.28) !important; box-shadow: 0 15px 35px rgba(0,0,0,.22) !important; } .pa-mi-cuenta .pa-stat-icon { width: 48px !important; height: 48px !important; min-width: 48px !important; display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 13px !important; color: #8793ff !important; background: rgba(105,119,255,.10) !important; } .pa-mi-cuenta .pa-stat-icon svg { width: 22px !important; height: 22px !important; fill: none !important; stroke: currentColor !important; stroke-width: 1.8 !important; stroke-linecap: round !important; stroke-linejoin: round !important; } .pa-mi-cuenta .pa-stat-text { min-width: 0 !important; display: flex !important; flex-direction: column !important; gap: 3px !important; } .pa-mi-cuenta .pa-stat-title { color: var(--pa-text-soft) !important; font-size: 13px !important; } .pa-mi-cuenta .pa-stat-text strong { color: #ffffff !important; font-size: 24px !important; line-height: 1.1 !important; } .pa-mi-cuenta .pa-stat-link { color: #7582ff !important; font-size: 12px !important; } /* ============================================================ 25. PANELES ============================================================ */ .pa-mi-cuenta .pa-panel { width: 100% !important; min-width: 0 !important; padding: 22px !important; background: linear-gradient( 145deg, #101722, #0d131d ) !important; border: 1px solid var(--pa-border) !important; border-radius: 18px !important; box-shadow: 0 12px 35px rgba(0,0,0,.14) !important; } .pa-mi-cuenta .pa-orders-panel { margin-bottom: 22px !important; } /* ============================================================ 26. HEADER DE PANELES ============================================================ */ .pa-mi-cuenta .pa-panel-header { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 15px !important; margin-bottom: 18px !important; } .pa-mi-cuenta .pa-panel-header h3 { margin: 0 !important; color: #ffffff !important; font-size: 16px !important; font-weight: 650 !important; } .pa-mi-cuenta .pa-panel-header a { color: #7d89ff !important; font-size: 13px !important; font-weight: 500 !important; text-decoration: none !important; } .pa-mi-cuenta .pa-panel-header a:hover { color: #aab2ff !important; } /* ============================================================ 27. PEDIDOS ============================================================ */ .pa-mi-cuenta .pa-orders-list { width: 100% !important; min-height: 80px !important; } .pa-mi-cuenta .pa-loading, .pa-mi-cuenta .pa-address-loading { display: flex !important; align-items: center !important; justify-content: center !important; min-height: 75px !important; color: var(--pa-text-muted) !important; font-size: 13px !important; } /* ============================================================ 28. INFORMACIÓN + DIRECCIONES ============================================================ */ .pa-mi-cuenta .pa-bottom-grid { width: 100% !important; display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 22px !important; margin-bottom: 22px !important; } .pa-mi-cuenta .pa-info-list { display: flex !important; flex-direction: column !important; gap: 15px !important; } .pa-mi-cuenta .pa-info-item { display: flex !important; align-items: center !important; gap: 13px !important; min-width: 0 !important; padding: 12px !important; background: rgba(255,255,255,.025) !important; border: 1px solid rgba(255,255,255,.045) !important; border-radius: 12px !important; } .pa-mi-cuenta .pa-info-icon { width: 38px !important; height: 38px !important; min-width: 38px !important; display: flex !important; align-items: center !important; justify-content: center !important; color: #7c88ff !important; background: rgba(105,119,255,.09) !important; border-radius: 10px !important; } .pa-mi-cuenta .pa-info-icon svg { width: 19px !important; height: 19px !important; fill: none !important; stroke: currentColor !important; stroke-width: 1.7 !important; stroke-linecap: round !important; stroke-linejoin: round !important; } .pa-mi-cuenta .pa-info-item > div:last-child { min-width: 0 !important; } .pa-mi-cuenta .pa-info-item span { display: block !important; margin-bottom: 3px !important; color: var(--pa-text-muted) !important; font-size: 11px !important; } .pa-mi-cuenta .pa-info-item strong { display: block !important; max-width: 100% !important; overflow: hidden !important; color: #ffffff !important; font-size: 13px !important; text-overflow: ellipsis !important; white-space: nowrap !important; } .pa-mi-cuenta .pa-small-button { display: inline-flex !important; align-items: center !important; justify-content: center !important; height: 32px !important; padding: 0 12px !important; color: #8b96ff !important; background: rgba(105,119,255,.08) !important; border: 1px solid rgba(105,119,255,.15) !important; border-radius: 8px !important; } .pa-mi-cuenta .pa-address-list { width: 100% !important; min-height: 130px !important; } /* ============================================================ 29. BENEFICIOS ============================================================ */ .pa-mi-cuenta .pa-benefits { width: 100% !important; margin-bottom: 22px !important; padding: 24px !important; background: linear-gradient( 145deg, #101722, #0d131d ) !important; border: 1px solid var(--pa-border) !important; border-radius: 18px !important; } .pa-mi-cuenta .pa-benefits > h3 { margin: 0 0 20px !important; color: #ffffff !important; font-size: 16px !important; } .pa-mi-cuenta .pa-benefits-grid { display: grid !important; grid-template-columns: repeat(4,minmax(0,1fr)) !important; gap: 15px !important; } .pa-mi-cuenta .pa-benefit { display: flex !important; align-items: center !important; gap: 12px !important; min-width: 0 !important; padding: 15px !important; background: rgba(255,255,255,.025) !important; border: 1px solid rgba(255,255,255,.045) !important; border-radius: 12px !important; } .pa-mi-cuenta .pa-benefit-icon { width: 38px !important; height: 38px !important; min-width: 38px !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 18px !important; background: rgba(105,119,255,.08) !important; border-radius: 10px !important; } .pa-mi-cuenta .pa-benefit strong { display: block !important; margin-bottom: 3px !important; color: #ffffff !important; font-size: 12px !important; } .pa-mi-cuenta .pa-benefit span { display: block !important; color: var(--pa-text-muted) !important; font-size: 11px !important; } /* ============================================================ 30. FOOTER ============================================================ */ .pa-mi-cuenta .pa-account-footer { width: 100% !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 12px !important; padding: 30px 20px 20px !important; text-align: center !important; border-top: 1px solid rgba(255,255,255,.055) !important; } .pa-mi-cuenta .pa-footer-logo strong { display: block !important; color: #ffffff !important; font-size: 18px !important; letter-spacing: .5px !important; } .pa-mi-cuenta .pa-footer-logo strong span { color: #7784ff !important; } .pa-mi-cuenta .pa-footer-logo small { display: block !important; margin-top: 4px !important; color: var(--pa-text-muted) !important; font-size: 9px !important; letter-spacing: 1.5px !important; } .pa-mi-cuenta .pa-socials { display: flex !important; align-items: center !important; gap: 8px !important; } .pa-mi-cuenta .pa-socials a { width: 32px !important; height: 32px !important; display: flex !important; align-items: center !important; justify-content: center !important; color: #aeb7c8 !important; background: rgba(255,255,255,.045) !important; border: 1px solid rgba(255,255,255,.06) !important; border-radius: 9px !important; text-decoration: none !important; font-size: 13px !important; transition: color .2s ease, background .2s ease !important; } .pa-mi-cuenta .pa-socials a:hover { color: #ffffff !important; background: rgba(105,119,255,.18) !important; } .pa-mi-cuenta .pa-account-footer > p { margin: 0 !important; color: var(--pa-text-muted) !important; font-size: 11px !important; } /* ============================================================ 31. CONTENIDO AJAX ============================================================ */ .pa-mi-cuenta .pa-dynamic-content { width: 100% !important; display: none; margin-top: 22px !important; } /* ============================================================ 32. SCROLL DEL DASHBOARD ============================================================ */ .pa-mi-cuenta > .pa-main-content::-webkit-scrollbar { width: 7px !important; } .pa-mi-cuenta > .pa-main-content::-webkit-scrollbar-track { background: transparent !important; } .pa-mi-cuenta > .pa-main-content::-webkit-scrollbar-thumb { background: rgba(255,255,255,.13) !important; border-radius: 20px !important; } .pa-mi-cuenta > .pa-main-content::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.22) !important; } /* ============================================================ 33. TABLET ============================================================ */ @media (max-width: 1100px) { .pa-mi-cuenta { --pa-sidebar-closed: 78px; --pa-sidebar-open: 290px; } .pa-mi-cuenta .pa-sidebar-menu { width: 290px !important; min-width: 290px !important; max-width: 290px !important; } .pa-mi-cuenta .pa-sidebar.pa-sidebar-open .pa-side-item { width: 262px !important; min-width: 262px !important; max-width: 262px !important; flex-basis: 262px !important; } .pa-mi-cuenta > .pa-main-content { padding: 60px 24px 50px !important; } .pa-mi-cuenta .pa-stat-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; } .pa-mi-cuenta .pa-benefits-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; } } /* ============================================================ 34. MÓVIL ============================================================ */ @media (max-width: 767px) { .pa-mi-cuenta { --pa-sidebar-closed: 68px; --pa-sidebar-open: 285px; } /* SIDEBAR CERRADO */ .pa-mi-cuenta > .pa-sidebar { width: 68px !important; min-width: 68px !important; max-width: 68px !important; } .pa-mi-cuenta > .pa-sidebar > .pa-sidebar-inner { width: 68px !important; min-width: 68px !important; max-width: 68px !important; } /* SIDEBAR ABIERTO */ .pa-mi-cuenta > .pa-sidebar.pa-sidebar-open > .pa-sidebar-inner { width: 285px !important; min-width: 285px !important; max-width: 285px !important; } .pa-mi-cuenta .pa-sidebar-menu { width: 285px !important; min-width: 285px !important; max-width: 285px !important; } /* BOTONES CERRADOS */ .pa-mi-cuenta .pa-sidebar .pa-side-item { width: 46px !important; min-width: 46px !important; max-width: 46px !important; flex-basis: 46px !important; height: 48px !important; min-height: 48px !important; max-height: 48px !important; } /* BOTONES ABIERTOS */ .pa-mi-cuenta .pa-sidebar.pa-sidebar-open .pa-side-item { width: 257px !important; min-width: 257px !important; max-width: 257px !important; flex-basis: 257px !important; } /* ICONOS */ .pa-mi-cuenta .pa-sidebar .pa-side-item > svg { width: 21px !important; height: 21px !important; min-width: 21px !important; min-height: 21px !important; max-width: 21px !important; max-height: 21px !important; } /* CONTENIDO */ .pa-mi-cuenta > .pa-main-content { left: 68px !important; padding: 60px 14px 40px !important; } /* BIENVENIDA */ .pa-mi-cuenta .pa-welcome-card { min-height: auto !important; flex-direction: column !important; align-items: flex-start !important; padding: 22px !important; } .pa-mi-cuenta .pa-profile-button { width: 100% !important; } /* ESTADÍSTICAS */ .pa-mi-cuenta .pa-stat-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 12px !important; } .pa-mi-cuenta .pa-stat-card { min-height: 105px !important; padding: 15px !important; } .pa-mi-cuenta .pa-stat-icon { width: 40px !important; height: 40px !important; min-width: 40px !important; } .pa-mi-cuenta .pa-stat-text strong { font-size: 20px !important; } /* DOS COLUMNAS → UNA */ .pa-mi-cuenta .pa-bottom-grid { grid-template-columns: 1fr !important; gap: 15px !important; } /* BENEFICIOS */ .pa-mi-cuenta .pa-benefits-grid { grid-template-columns: 1fr !important; } } /* ============================================================ 35. TELÉFONOS PEQUEÑOS ============================================================ */ @media (max-width: 480px) { .pa-mi-cuenta { --pa-sidebar-closed: 62px; --pa-sidebar-open: 275px; } /* SIDEBAR CERRADO */ .pa-mi-cuenta > .pa-sidebar { width: 62px !important; min-width: 62px !important; max-width: 62px !important; } .pa-mi-cuenta > .pa-sidebar > .pa-sidebar-inner { width: 62px !important; min-width: 62px !important; max-width: 62px !important; } /* SIDEBAR ABIERTO */ .pa-mi-cuenta > .pa-sidebar.pa-sidebar-open > .pa-sidebar-inner { width: 275px !important; min-width: 275px !important; max-width: 275px !important; } .pa-mi-cuenta .pa-sidebar-menu { width: 275px !important; min-width: 275px !important; max-width: 275px !important; } /* BOTONES CERRADOS */ .pa-mi-cuenta .pa-sidebar .pa-side-item { width: 44px !important; min-width: 44px !important; max-width: 44px !important; flex-basis: 44px !important; height: 46px !important; min-height: 46px !important; max-height: 46px !important; } /* BOTONES ABIERTOS */ .pa-mi-cuenta .pa-sidebar.pa-sidebar-open .pa-side-item { width: 247px !important; min-width: 247px !important; max-width: 247px !important; flex-basis: 247px !important; } /* ICONOS */ .pa-mi-cuenta .pa-sidebar .pa-side-item > svg { width: 21px !important; height: 21px !important; min-width: 21px !important; min-height: 21px !important; } /* CONTENIDO */ .pa-mi-cuenta > .pa-main-content { left: 62px !important; padding: 60px 10px 35px !important; } /* BIENVENIDA */ .pa-mi-cuenta .pa-welcome-card { padding: 18px !important; border-radius: 15px !important; } .pa-mi-cuenta .pa-avatar { width: 55px !important; height: 55px !important; min-width: 55px !important; font-size: 21px !important; } .pa-mi-cuenta .pa-user-info h2 { font-size: 20px !important; } .pa-mi-cuenta .pa-user-info p { font-size: 12px !important; } /* ESTADÍSTICAS */ .pa-mi-cuenta .pa-stat-grid { gap: 9px !important; } .pa-mi-cuenta .pa-stat-card { flex-direction: column !important; align-items: flex-start !important; justify-content: center !important; min-height: 120px !important; padding: 14px !important; } .pa-mi-cuenta .pa-stat-text strong { font-size: 19px !important; } /* PANELES */ .pa-mi-cuenta .pa-panel { padding: 17px !important; border-radius: 15px !important; } /* BENEFICIOS */ .pa-mi-cuenta .pa-benefits { padding: 18px !important; border-radius: 15px !important; } } ------------------------ /* ========================================================= MAIN BLOQUEADO CUANDO SIDEBAR ESTÁ ABIERTO ========================================================= */ .pa-main-content.pa-main-sidebar-locked { pointer-events: none !important; user-select: none !important; } /* Todo lo interactivo queda bloqueado */ .pa-main-content.pa-main-sidebar-locked a, .pa-main-content.pa-main-sidebar-locked button, .pa-main-content.pa-main-sidebar-locked input, .pa-main-content.pa-main-sidebar-locked select, .pa-main-content.pa-main-sidebar-locked textarea, .pa-main-content.pa-main-sidebar-locked [role="button"], .pa-main-content.pa-main-sidebar-locked [onclick], .pa-main-content.pa-main-sidebar-locked [data-pa-card-bound] { pointer-events: none !important; } /* Sidebar por encima */ .pa-sidebar.pa-sidebar-open { position: relative; z-index: 1000000 !important; } /* Sidebar siempre interactivo */ .pa-sidebar.pa-sidebar-open, .pa-sidebar.pa-sidebar-open * { pointer-events: auto !important; } /* ========================================================= PA AJAX LOADING ========================================================= */ .pa-main-content.pa-ajax-loading { min-height: 400px; } .pa-ajax-loader { min-height: 400px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; color: #888; } .pa-spinner { width: 38px; height: 38px; border: 3px solid rgba(255,255,255,.12); border-top-color: currentColor; border-radius: 50%; animation: paSpin .7s linear infinite; } @keyframes paSpin { to { transform: rotate(360deg); } } /* ========================================================= ERROR ========================================================= */ .pa-ajax-error { min-height: 400px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px; } .pa-ajax-error-icon { width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255,0,0,.1); color: #ff4d4d; font-size: 25px; font-weight: 700; margin-bottom: 15px; } .pa-ajax-error h3 { margin: 0 0 8px; } .pa-ajax-error p { opacity: .65; margin: 0 0 20px; } .pa-ajax-retry { border: 0; padding: 11px 20px; border-radius: 8px; cursor: pointer; font-weight: 600; } /* ========================================================= PELISANIME — SIDEBAR EXPANDIBLE CORRECCIÓN ========================================================= */ .pa-mi-cuenta .pa-sidebar { width: 72px; overflow: hidden; transition: width 0.28s cubic-bezier(.4,0,.2,1); } /* SIDEBAR ABIERTO */ .pa-mi-cuenta .pa-sidebar.pa-sidebar-open { width: 230px; } /* CONTENEDOR */ .pa-mi-cuenta .pa-sidebar-inner { width: 100%; } /* ITEM */ .pa-mi-cuenta .pa-side-item { width: 100%; min-width: 0; display: flex; align-items: center; gap: 14px; overflow: hidden; } /* ICONO */ .pa-mi-cuenta .pa-side-item svg { flex: 0 0 24px; width: 24px; height: 24px; } /* TEXTO CERRADO */ .pa-mi-cuenta .pa-side-label { display: block; flex: 1 1 auto; min-width: 0; white-space: nowrap; opacity: 0; visibility: hidden; transform: translateX(-8px); transition: opacity 0.18s ease, transform 0.22s ease, visibility 0s linear 0.22s; } /* TEXTO ABIERTO */ .pa-mi-cuenta .pa-sidebar.pa-sidebar-open .pa-side-label { opacity: 1; visibility: visible; transform: translateX(0); transition: opacity 0.18s ease 0.05s, transform 0.22s ease 0.05s, visibility 0s linear 0s; } /* EVITAR QUE EL TEXTO ROMPA EL ANCHO */ .pa-mi-cuenta .pa-sidebar.pa-sidebar-open .pa-side-item { overflow: hidden; } /* ========================================================= IMPORTANTE: EL SIDEBAR ABIERTO DEBE QUEDAR POR ENCIMA ========================================================= */ .pa-mi-cuenta .pa-sidebar { position: relative; z-index: 1000; } /* ========================================================= SI EL SIDEBAR ESTÁ DENTRO DE UN CONTENEDOR FLEX ========================================================= */ .pa-mi-cuenta .pa-sidebar, .pa-mi-cuenta .pa-sidebar-inner, .pa-mi-cuenta .pa-sidebar-menu { flex-shrink: 0; } /* ========================================================= EVITAR QUE ELEMENTOR O WORDPRESS RECORTE EL SIDEBAR ========================================================= */ .pa-mi-cuenta, .pa-mi-cuenta-desktop, .pa-mi-cuenta-mobile { overflow: visible; }/* End custom CSS */ /* Start custom CSS for shortcode, class: .elementor-element-bfc51b2 *//* ========================================================= PELISANIME WOOCOMMERCE LOGIN / REGISTRO DISEÑO FINAL TARJETAS ALINEADAS Y MISMA ALTURA ========================================================= */ /* ========================================================= WOOCOMMERCE GENERAL ========================================================= */ #pa-mi-cuenta .pa-loaded-woo-content .woocommerce, #pa-mi-cuenta .pa-woocommerce-slot .woocommerce, #customer_login { width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* ========================================================= ELIMINAR CLEARFIX DE WOOCOMMERCE ESTO ES LO QUE PROVOCABA EL DESORDEN ========================================================= */ #customer_login::before, #customer_login::after { content: none !important; display: none !important; } /* ========================================================= CONTENEDOR DE LAS DOS TARJETAS ========================================================= */ #customer_login { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; grid-template-rows: 1fr !important; align-items: stretch !important; justify-content: stretch !important; gap: 46px !important; width: 100% !important; max-width: 1400px !important; margin: 0 auto !important; padding: 40px 30px 60px !important; box-sizing: border-box !important; } /* ========================================================= TARJETAS ========================================================= */ #customer_login > .u-column1, #customer_login > .u-column2 { position: relative !important; float: none !important; grid-column: auto !important; grid-row: 1 !important; width: 100% !important; max-width: none !important; min-width: 0 !important; height: 720px !important; min-height: 720px !important; max-height: 720px !important; margin: 0 !important; padding: 40px !important; display: flex !important; flex-direction: column !important; align-self: stretch !important; box-sizing: border-box !important; overflow: hidden !important; border-radius: 20px !important; } /* ========================================================= ACCEDER ========================================================= */ #customer_login > .u-column1 { background: radial-gradient( circle at 0% 0%, rgba(30,100,255,.18), transparent 42% ), radial-gradient( circle at 100% 100%, rgba(20,70,200,.10), transparent 45% ), linear-gradient( 145deg, #07111f 0%, #080f1d 55%, #07101c 100% ) !important; border: 1px solid rgba(52,125,255,.58) !important; box-shadow: 0 0 0 1px rgba(40,100,255,.04), 0 25px 70px rgba(0,45,150,.22), inset 0 1px 0 rgba(255,255,255,.035) !important; } /* ========================================================= REGISTRARSE ========================================================= */ #customer_login > .u-column2 { background: radial-gradient( circle at 0% 0%, rgba(180,55,255,.17), transparent 42% ), radial-gradient( circle at 100% 100%, rgba(100,38,180,.10), transparent 45% ), linear-gradient( 145deg, #0d1020 0%, #101323 55%, #0d1020 100% ) !important; border: 1px solid rgba(145,100,210,.48) !important; box-shadow: 0 0 0 1px rgba(170,90,255,.025), 0 25px 70px rgba(90,35,160,.20), inset 0 1px 0 rgba(255,255,255,.035) !important; } /* ========================================================= BRILLO DE LAS TARJETAS ========================================================= */ #customer_login > .u-column1::before, #customer_login > .u-column2::before { content: ""; position: absolute; top: -150px; right: -130px; width: 330px; height: 330px; border-radius: 50%; pointer-events: none; filter: blur(40px); } #customer_login > .u-column1::before { background: rgba(35,105,255,.13); } #customer_login > .u-column2::before { background: rgba(180,55,255,.13); } /* ========================================================= TITULOS ========================================================= */ #customer_login > .u-column1 > h2, #customer_login > .u-column2 > h2 { position: relative !important; z-index: 3 !important; display: block !important; width: 100% !important; margin: 0 0 38px !important; padding: 5px 0 20px 78px !important; color: #ffffff !important; font-size: 34px !important; line-height: 1.1 !important; font-weight: 700 !important; box-sizing: border-box !important; } /* ========================================================= ICONOS ========================================================= */ #customer_login > .u-column1 > h2::before, #customer_login > .u-column2 > h2::before { position: absolute; left: 0; top: -5px; width: 58px; height: 58px; display: flex; align-items: center; justify-content: center; border-radius: 50%; box-sizing: border-box; } /* ========================================================= ICONO ACCEDER ========================================================= */ #customer_login > .u-column1 > h2::before { content: "🔒"; color: #5c91ff; font-size: 24px; background: radial-gradient( circle, rgba(30,95,255,.20), rgba(15,28,55,.45) ); border: 1px solid rgba(55,117,255,.85); box-shadow: 0 0 25px rgba(38,104,255,.20); } /* ========================================================= ICONO REGISTRO ========================================================= */ #customer_login > .u-column2 > h2::before { content: "♙"; color: #c35aff; font-size: 29px; background: radial-gradient( circle, rgba(180,55,255,.20), rgba(37,17,55,.45) ); border: 1px solid rgba(192,66,255,.80); box-shadow: 0 0 25px rgba(180,45,255,.20); } /* ========================================================= LINEA DECORATIVA ========================================================= */ #customer_login > .u-column1 > h2::after, #customer_login > .u-column2 > h2::after { content: ""; position: absolute; left: 78px; bottom: 0; width: 76px; height: 5px; border-radius: 10px; } /* ========================================================= LINEA AZUL ========================================================= */ #customer_login > .u-column1 > h2::after { background: linear-gradient( 90deg, #2f6fff, #477cff ); box-shadow: 0 0 12px rgba(54,115,255,.45); } /* ========================================================= LINEA MORADA ========================================================= */ #customer_login > .u-column2 > h2::after { background: linear-gradient( 90deg, #9d32e8, #c44fff ); box-shadow: 0 0 12px rgba(183,55,255,.45); } /* ========================================================= FORMULARIOS ========================================================= */ #customer_login > .u-column1 form, #customer_login > .u-column2 form { position: relative !important; z-index: 3 !important; width: 100% !important; margin: 0 !important; padding: 0 !important; display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; background: transparent !important; border: 0 !important; box-shadow: none !important; box-sizing: border-box !important; } /* ========================================================= FILAS ========================================================= */ #customer_login form .form-row, #customer_login form .woocommerce-form-row { width: 100% !important; margin: 0 0 24px !important; padding: 0 !important; float: none !important; box-sizing: border-box !important; } /* ========================================================= LABEL ========================================================= */ #customer_login label { display: block !important; margin: 0 0 10px !important; color: #dce2ef !important; font-size: 15px !important; line-height: 1.4 !important; font-weight: 500 !important; } /* ========================================================= ASTERISCO ========================================================= */ #customer_login label .required { color: #ff3d3d !important; } /* ========================================================= INPUTS ========================================================= */ #customer_login input[type="text"], #customer_login input[type="email"], #customer_login input[type="password"] { display: block !important; width: 100% !important; height: 64px !important; margin: 0 !important; padding: 0 18px !important; color: #eef2ff !important; background: rgba(12,19,34,.85) !important; border: 1px solid rgba(105,119,153,.40) !important; border-radius: 11px !important; outline: none !important; box-shadow: inset 0 1px 2px rgba(0,0,0,.20) !important; font-family: inherit !important; font-size: 15px !important; box-sizing: border-box !important; transition: .25s ease !important; } /* ========================================================= PLACEHOLDER ========================================================= */ #customer_login input::placeholder { color: #727d92 !important; opacity: 1 !important; } /* ========================================================= FOCUS AZUL ========================================================= */ #customer_login > .u-column1 input:focus { border-color: rgba(57,122,255,.90) !important; background: rgba(12,22,42,.96) !important; box-shadow: 0 0 0 3px rgba(48,112,255,.12), 0 0 25px rgba(35,100,255,.10) !important; } /* ========================================================= FOCUS MORADO ========================================================= */ #customer_login > .u-column2 input:focus { border-color: rgba(190,79,255,.80) !important; background: rgba(23,18,42,.96) !important; box-shadow: 0 0 0 3px rgba(181,65,255,.11), 0 0 25px rgba(170,50,255,.08) !important; } /* ========================================================= PASSWORD ========================================================= */ #customer_login .password-input { position: relative !important; display: block !important; width: 100% !important; } #customer_login .password-input input { padding-right: 55px !important; } /* ========================================================= OJO CONTRASEÑA ========================================================= */ #customer_login .show-password-input { position: absolute !important; top: 50% !important; right: 18px !important; width: 22px !important; height: 22px !important; margin: 0 !important; padding: 0 !important; transform: translateY(-50%) !important; background: transparent !important; border: 0 !important; box-shadow: none !important; cursor: pointer !important; opacity: .85 !important; } /* ========================================================= CHECKBOX ========================================================= */ #customer_login .woocommerce-form-login__rememberme { display: flex !important; align-items: center !important; gap: 11px !important; width: max-content !important; margin: 0 0 26px !important; cursor: pointer !important; } #customer_login input[type="checkbox"] { appearance: none !important; -webkit-appearance: none !important; width: 26px !important; height: 26px !important; min-width: 26px !important; margin: 0 !important; padding: 0 !important; background: rgba(12,19,34,.80) !important; border: 1px solid rgba(120,135,165,.65) !important; border-radius: 6px !important; cursor: pointer !important; position: relative !important; } #customer_login input[type="checkbox"]:checked { background: linear-gradient( 135deg, #2f70ff, #4167e8 ) !important; border-color: #4d82ff !important; } #customer_login input[type="checkbox"]:checked::after { content: "✓"; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-54%); color: #ffffff; font-size: 16px; font-weight: 700; } #customer_login .woocommerce-form-login__rememberme span { color: #e2e6f0 !important; font-size: 14px !important; } /* ========================================================= BOTONES ========================================================= */ #customer_login .woocommerce-form-login__submit, #customer_login .woocommerce-form-register__submit { position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 64px !important; margin: 0 !important; padding: 0 55px 0 25px !important; color: #ffffff !important; font-size: 17px !important; font-weight: 600 !important; line-height: 1 !important; border: 0 !important; border-radius: 10px !important; cursor: pointer !important; box-sizing: border-box !important; transition: transform .25s ease, filter .25s ease, box-shadow .25s ease !important; } /* ========================================================= BOTÓN AZUL ========================================================= */ #customer_login .woocommerce-form-login__submit { background: linear-gradient( 135deg, #2868ee, #315bd7 ) !important; box-shadow: 0 10px 28px rgba(39,101,235,.25), inset 0 1px 0 rgba(255,255,255,.14) !important; } /* ========================================================= BOTÓN MORADO ========================================================= */ #customer_login .woocommerce-form-register__submit { background: linear-gradient( 135deg, #a82fdf, #7926cb ) !important; box-shadow: 0 10px 28px rgba(160,42,215,.24), inset 0 1px 0 rgba(255,255,255,.14) !important; } /* ========================================================= HOVER ========================================================= */ #customer_login .woocommerce-form-login__submit:hover, #customer_login .woocommerce-form-register__submit:hover { transform: translateY(-2px) !important; filter: brightness(1.08) !important; } /* ========================================================= FLECHA ========================================================= */ #customer_login .woocommerce-form-login__submit::after, #customer_login .woocommerce-form-register__submit::after { content: "→"; position: absolute; right: 24px; font-size: 28px; font-weight: 300; } /* ========================================================= OLVIDASTE LA CONTRASEÑA ========================================================= */ #customer_login .lost_password { position: relative !important; margin: 27px 0 0 !important; padding: 27px 0 0 !important; text-align: center !important; } #customer_login .lost_password::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient( 90deg, transparent, rgba(255,255,255,.14), transparent ); } #customer_login .lost_password a { color: #4b91ff !important; font-size: 15px !important; font-weight: 500 !important; text-decoration: none !important; } #customer_login .lost_password a:hover { color: #82b0ff !important; } /* ========================================================= PRIVACIDAD ========================================================= */ #customer_login .woocommerce-privacy-policy-text { margin: -1px 0 23px !important; padding: 0 !important; } #customer_login .woocommerce-privacy-policy-text p { margin: 0 !important; color: #aeb7c9 !important; font-size: 14px !important; line-height: 1.7 !important; } #customer_login .woocommerce-privacy-policy-text a { color: #4392ff !important; text-decoration: none !important; } /* ========================================================= EVITAR FLOATS DE WOOCOMMERCE ========================================================= */ #customer_login .col-1, #customer_login .col-2, #customer_login .u-column1, #customer_login .u-column2 { float: none !important; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 900px) { #customer_login { display: grid !important; grid-template-columns: 1fr !important; grid-template-rows: auto auto !important; gap: 25px !important; padding: 25px 20px 45px !important; } #customer_login > .u-column1, #customer_login > .u-column2 { grid-column: 1 !important; width: 100% !important; height: auto !important; min-height: 620px !important; max-height: none !important; padding: 30px !important; } #customer_login > .u-column1 { grid-row: 1 !important; } #customer_login > .u-column2 { grid-row: 2 !important; } } /* ========================================================= MÓVIL ========================================================= */ @media (max-width: 600px) { #customer_login { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 18px !important; width: 100% !important; padding: 20px 12px 35px !important; } #customer_login > .u-column1, #customer_login > .u-column2 { width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; padding: 25px 20px !important; border-radius: 16px !important; } #customer_login > .u-column1 > h2, #customer_login > .u-column2 > h2 { margin-bottom: 28px !important; padding-left: 68px !important; font-size: 27px !important; } #customer_login > .u-column1 > h2::before, #customer_login > .u-column2 > h2::before { width: 50px; height: 50px; } #customer_login > .u-column1 > h2::after, #customer_login > .u-column2 > h2::after { left: 68px; width: 65px; } #customer_login input[type="text"], #customer_login input[type="email"], #customer_login input[type="password"] { height: 57px !important; } #customer_login .woocommerce-form-login__submit, #customer_login .woocommerce-form-register__submit { height: 58px !important; font-size: 15px !important; } #customer_login .woocommerce-privacy-policy-text p { font-size: 13px !important; } } /* ========================================================= MÓVIL PEQUEÑO ========================================================= */ @media (max-width: 400px) { #customer_login > .u-column1, #customer_login > .u-column2 { padding: 22px 17px !important; } #customer_login > .u-column1 > h2, #customer_login > .u-column2 > h2 { font-size: 24px !important; } }/* End custom CSS */ /* Start custom CSS for shortcode, class: .elementor-element-f3a6f69 *//* ========================================================= PELISANIME WOOCOMMERCE LOGIN / REGISTRO DISEÑO FINAL TARJETAS ALINEADAS Y MISMA ALTURA ========================================================= */ /* ========================================================= WOOCOMMERCE GENERAL ========================================================= */ #pa-mi-cuenta .pa-loaded-woo-content .woocommerce, #pa-mi-cuenta .pa-woocommerce-slot .woocommerce, #customer_login { width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* ========================================================= ELIMINAR CLEARFIX DE WOOCOMMERCE ESTO ES LO QUE PROVOCABA EL DESORDEN ========================================================= */ #customer_login::before, #customer_login::after { content: none !important; display: none !important; } /* ========================================================= CONTENEDOR DE LAS DOS TARJETAS ========================================================= */ #customer_login { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; grid-template-rows: 1fr !important; align-items: stretch !important; justify-content: stretch !important; gap: 46px !important; width: 100% !important; max-width: 1400px !important; margin: 0 auto !important; padding: 40px 30px 60px !important; box-sizing: border-box !important; } /* ========================================================= TARJETAS ========================================================= */ #customer_login > .u-column1, #customer_login > .u-column2 { position: relative !important; float: none !important; grid-column: auto !important; grid-row: 1 !important; width: 100% !important; max-width: none !important; min-width: 0 !important; height: 720px !important; min-height: 720px !important; max-height: 720px !important; margin: 0 !important; padding: 40px !important; display: flex !important; flex-direction: column !important; align-self: stretch !important; box-sizing: border-box !important; overflow: hidden !important; border-radius: 20px !important; } /* ========================================================= ACCEDER ========================================================= */ #customer_login > .u-column1 { background: radial-gradient( circle at 0% 0%, rgba(30,100,255,.18), transparent 42% ), radial-gradient( circle at 100% 100%, rgba(20,70,200,.10), transparent 45% ), linear-gradient( 145deg, #07111f 0%, #080f1d 55%, #07101c 100% ) !important; border: 1px solid rgba(52,125,255,.58) !important; box-shadow: 0 0 0 1px rgba(40,100,255,.04), 0 25px 70px rgba(0,45,150,.22), inset 0 1px 0 rgba(255,255,255,.035) !important; } /* ========================================================= REGISTRARSE ========================================================= */ #customer_login > .u-column2 { background: radial-gradient( circle at 0% 0%, rgba(180,55,255,.17), transparent 42% ), radial-gradient( circle at 100% 100%, rgba(100,38,180,.10), transparent 45% ), linear-gradient( 145deg, #0d1020 0%, #101323 55%, #0d1020 100% ) !important; border: 1px solid rgba(145,100,210,.48) !important; box-shadow: 0 0 0 1px rgba(170,90,255,.025), 0 25px 70px rgba(90,35,160,.20), inset 0 1px 0 rgba(255,255,255,.035) !important; } /* ========================================================= BRILLO DE LAS TARJETAS ========================================================= */ #customer_login > .u-column1::before, #customer_login > .u-column2::before { content: ""; position: absolute; top: -150px; right: -130px; width: 330px; height: 330px; border-radius: 50%; pointer-events: none; filter: blur(40px); } #customer_login > .u-column1::before { background: rgba(35,105,255,.13); } #customer_login > .u-column2::before { background: rgba(180,55,255,.13); } /* ========================================================= TITULOS ========================================================= */ #customer_login > .u-column1 > h2, #customer_login > .u-column2 > h2 { position: relative !important; z-index: 3 !important; display: block !important; width: 100% !important; margin: 0 0 38px !important; padding: 5px 0 20px 78px !important; color: #ffffff !important; font-size: 34px !important; line-height: 1.1 !important; font-weight: 700 !important; box-sizing: border-box !important; } /* ========================================================= ICONOS ========================================================= */ #customer_login > .u-column1 > h2::before, #customer_login > .u-column2 > h2::before { position: absolute; left: 0; top: -5px; width: 58px; height: 58px; display: flex; align-items: center; justify-content: center; border-radius: 50%; box-sizing: border-box; } /* ========================================================= ICONO ACCEDER ========================================================= */ #customer_login > .u-column1 > h2::before { content: "🔒"; color: #5c91ff; font-size: 24px; background: radial-gradient( circle, rgba(30,95,255,.20), rgba(15,28,55,.45) ); border: 1px solid rgba(55,117,255,.85); box-shadow: 0 0 25px rgba(38,104,255,.20); } /* ========================================================= ICONO REGISTRO ========================================================= */ #customer_login > .u-column2 > h2::before { content: "♙"; color: #c35aff; font-size: 29px; background: radial-gradient( circle, rgba(180,55,255,.20), rgba(37,17,55,.45) ); border: 1px solid rgba(192,66,255,.80); box-shadow: 0 0 25px rgba(180,45,255,.20); } /* ========================================================= LINEA DECORATIVA ========================================================= */ #customer_login > .u-column1 > h2::after, #customer_login > .u-column2 > h2::after { content: ""; position: absolute; left: 78px; bottom: 0; width: 76px; height: 5px; border-radius: 10px; } /* ========================================================= LINEA AZUL ========================================================= */ #customer_login > .u-column1 > h2::after { background: linear-gradient( 90deg, #2f6fff, #477cff ); box-shadow: 0 0 12px rgba(54,115,255,.45); } /* ========================================================= LINEA MORADA ========================================================= */ #customer_login > .u-column2 > h2::after { background: linear-gradient( 90deg, #9d32e8, #c44fff ); box-shadow: 0 0 12px rgba(183,55,255,.45); } /* ========================================================= FORMULARIOS ========================================================= */ #customer_login > .u-column1 form, #customer_login > .u-column2 form { position: relative !important; z-index: 3 !important; width: 100% !important; margin: 0 !important; padding: 0 !important; display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; background: transparent !important; border: 0 !important; box-shadow: none !important; box-sizing: border-box !important; } /* ========================================================= FILAS ========================================================= */ #customer_login form .form-row, #customer_login form .woocommerce-form-row { width: 100% !important; margin: 0 0 24px !important; padding: 0 !important; float: none !important; box-sizing: border-box !important; } /* ========================================================= LABEL ========================================================= */ #customer_login label { display: block !important; margin: 0 0 10px !important; color: #dce2ef !important; font-size: 15px !important; line-height: 1.4 !important; font-weight: 500 !important; } /* ========================================================= ASTERISCO ========================================================= */ #customer_login label .required { color: #ff3d3d !important; } /* ========================================================= INPUTS ========================================================= */ #customer_login input[type="text"], #customer_login input[type="email"], #customer_login input[type="password"] { display: block !important; width: 100% !important; height: 64px !important; margin: 0 !important; padding: 0 18px !important; color: #eef2ff !important; background: rgba(12,19,34,.85) !important; border: 1px solid rgba(105,119,153,.40) !important; border-radius: 11px !important; outline: none !important; box-shadow: inset 0 1px 2px rgba(0,0,0,.20) !important; font-family: inherit !important; font-size: 15px !important; box-sizing: border-box !important; transition: .25s ease !important; } /* ========================================================= PLACEHOLDER ========================================================= */ #customer_login input::placeholder { color: #727d92 !important; opacity: 1 !important; } /* ========================================================= FOCUS AZUL ========================================================= */ #customer_login > .u-column1 input:focus { border-color: rgba(57,122,255,.90) !important; background: rgba(12,22,42,.96) !important; box-shadow: 0 0 0 3px rgba(48,112,255,.12), 0 0 25px rgba(35,100,255,.10) !important; } /* ========================================================= FOCUS MORADO ========================================================= */ #customer_login > .u-column2 input:focus { border-color: rgba(190,79,255,.80) !important; background: rgba(23,18,42,.96) !important; box-shadow: 0 0 0 3px rgba(181,65,255,.11), 0 0 25px rgba(170,50,255,.08) !important; } /* ========================================================= PASSWORD ========================================================= */ #customer_login .password-input { position: relative !important; display: block !important; width: 100% !important; } #customer_login .password-input input { padding-right: 55px !important; } /* ========================================================= OJO CONTRASEÑA ========================================================= */ #customer_login .show-password-input { position: absolute !important; top: 50% !important; right: 18px !important; width: 22px !important; height: 22px !important; margin: 0 !important; padding: 0 !important; transform: translateY(-50%) !important; background: transparent !important; border: 0 !important; box-shadow: none !important; cursor: pointer !important; opacity: .85 !important; } /* ========================================================= CHECKBOX ========================================================= */ #customer_login .woocommerce-form-login__rememberme { display: flex !important; align-items: center !important; gap: 11px !important; width: max-content !important; margin: 0 0 26px !important; cursor: pointer !important; } #customer_login input[type="checkbox"] { appearance: none !important; -webkit-appearance: none !important; width: 26px !important; height: 26px !important; min-width: 26px !important; margin: 0 !important; padding: 0 !important; background: rgba(12,19,34,.80) !important; border: 1px solid rgba(120,135,165,.65) !important; border-radius: 6px !important; cursor: pointer !important; position: relative !important; } #customer_login input[type="checkbox"]:checked { background: linear-gradient( 135deg, #2f70ff, #4167e8 ) !important; border-color: #4d82ff !important; } #customer_login input[type="checkbox"]:checked::after { content: "✓"; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-54%); color: #ffffff; font-size: 16px; font-weight: 700; } #customer_login .woocommerce-form-login__rememberme span { color: #e2e6f0 !important; font-size: 14px !important; } /* ========================================================= BOTONES ========================================================= */ #customer_login .woocommerce-form-login__submit, #customer_login .woocommerce-form-register__submit { position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 64px !important; margin: 0 !important; padding: 0 55px 0 25px !important; color: #ffffff !important; font-size: 17px !important; font-weight: 600 !important; line-height: 1 !important; border: 0 !important; border-radius: 10px !important; cursor: pointer !important; box-sizing: border-box !important; transition: transform .25s ease, filter .25s ease, box-shadow .25s ease !important; } /* ========================================================= BOTÓN AZUL ========================================================= */ #customer_login .woocommerce-form-login__submit { background: linear-gradient( 135deg, #2868ee, #315bd7 ) !important; box-shadow: 0 10px 28px rgba(39,101,235,.25), inset 0 1px 0 rgba(255,255,255,.14) !important; } /* ========================================================= BOTÓN MORADO ========================================================= */ #customer_login .woocommerce-form-register__submit { background: linear-gradient( 135deg, #a82fdf, #7926cb ) !important; box-shadow: 0 10px 28px rgba(160,42,215,.24), inset 0 1px 0 rgba(255,255,255,.14) !important; } /* ========================================================= HOVER ========================================================= */ #customer_login .woocommerce-form-login__submit:hover, #customer_login .woocommerce-form-register__submit:hover { transform: translateY(-2px) !important; filter: brightness(1.08) !important; } /* ========================================================= FLECHA ========================================================= */ #customer_login .woocommerce-form-login__submit::after, #customer_login .woocommerce-form-register__submit::after { content: "→"; position: absolute; right: 24px; font-size: 28px; font-weight: 300; } /* ========================================================= OLVIDASTE LA CONTRASEÑA ========================================================= */ #customer_login .lost_password { position: relative !important; margin: 27px 0 0 !important; padding: 27px 0 0 !important; text-align: center !important; } #customer_login .lost_password::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient( 90deg, transparent, rgba(255,255,255,.14), transparent ); } #customer_login .lost_password a { color: #4b91ff !important; font-size: 15px !important; font-weight: 500 !important; text-decoration: none !important; } #customer_login .lost_password a:hover { color: #82b0ff !important; } /* ========================================================= PRIVACIDAD ========================================================= */ #customer_login .woocommerce-privacy-policy-text { margin: -1px 0 23px !important; padding: 0 !important; } #customer_login .woocommerce-privacy-policy-text p { margin: 0 !important; color: #aeb7c9 !important; font-size: 14px !important; line-height: 1.7 !important; } #customer_login .woocommerce-privacy-policy-text a { color: #4392ff !important; text-decoration: none !important; } /* ========================================================= EVITAR FLOATS DE WOOCOMMERCE ========================================================= */ #customer_login .col-1, #customer_login .col-2, #customer_login .u-column1, #customer_login .u-column2 { float: none !important; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 900px) { #customer_login { display: grid !important; grid-template-columns: 1fr !important; grid-template-rows: auto auto !important; gap: 25px !important; padding: 25px 20px 45px !important; } #customer_login > .u-column1, #customer_login > .u-column2 { grid-column: 1 !important; width: 100% !important; height: auto !important; min-height: 620px !important; max-height: none !important; padding: 30px !important; } #customer_login > .u-column1 { grid-row: 1 !important; } #customer_login > .u-column2 { grid-row: 2 !important; } } /* ========================================================= MÓVIL ========================================================= */ @media (max-width: 600px) { #customer_login { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 18px !important; width: 100% !important; padding: 20px 12px 35px !important; } #customer_login > .u-column1, #customer_login > .u-column2 { width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; padding: 25px 20px !important; border-radius: 16px !important; } #customer_login > .u-column1 > h2, #customer_login > .u-column2 > h2 { margin-bottom: 28px !important; padding-left: 68px !important; font-size: 27px !important; } #customer_login > .u-column1 > h2::before, #customer_login > .u-column2 > h2::before { width: 50px; height: 50px; } #customer_login > .u-column1 > h2::after, #customer_login > .u-column2 > h2::after { left: 68px; width: 65px; } #customer_login input[type="text"], #customer_login input[type="email"], #customer_login input[type="password"] { height: 57px !important; } #customer_login .woocommerce-form-login__submit, #customer_login .woocommerce-form-register__submit { height: 58px !important; font-size: 15px !important; } #customer_login .woocommerce-privacy-policy-text p { font-size: 13px !important; } } /* ========================================================= MÓVIL PEQUEÑO ========================================================= */ @media (max-width: 400px) { #customer_login > .u-column1, #customer_login > .u-column2 { padding: 22px 17px !important; } #customer_login > .u-column1 > h2, #customer_login > .u-column2 > h2 { font-size: 24px !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-610aec0 *//* Ocultar formulario de registro inicialmente */ .woocommerce .u-columns .u-column2.col-2 { display: none; } /* Botón Registrarme */ .boton-mostrar-registro { width: 100%; display: block; margin-top: 12px; padding: 12px 20px; border: 1px solid #ddd; border-radius: 6px; background: transparent; color: #222; font-size: 15px; font-weight: 600; text-align: center; cursor: pointer; transition: all 0.25s ease; } /* Hover */ .boton-mostrar-registro:hover { background: #f5f5f5; border-color: #999; } /* Botón volver */ .boton-volver-acceso { width: 100%; display: block; margin-top: 12px; padding: 12px 20px; border: 1px solid #ddd; border-radius: 6px; background: transparent; color: #222; font-size: 15px; font-weight: 600; text-align: center; cursor: pointer; transition: all 0.25s ease; } .boton-volver-acceso:hover { background: #f5f5f5; border-color: #999; } /* Animación */ .woocommerce .u-columns .u-column1.col-1, .woocommerce .u-columns .u-column2.col-2 { transition: opacity 0.25s ease; }/* End custom CSS */