.elementor-73 .elementor-element.elementor-element-7a0e734{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:flex-start;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--border-radius:0px 0px 0px 0px;--margin-top:0px;--margin-bottom:0px;--margin-left:auto;--margin-right:auto;--padding-top:28px;--padding-bottom:60px;--padding-left:24px;--padding-right:24px;}body.elementor-page-73:not(.elementor-motion-effects-element-type-background), body.elementor-page-73 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-a2ecb1b );}:root{--page-title-display:none;}@media(max-width:1024px){.elementor-73 .elementor-element.elementor-element-7a0e734{--margin-top:0px;--margin-bottom:0px;--margin-left:auto;--margin-right:auto;--padding-top:16px;--padding-bottom:50px;--padding-left:16px;--padding-right:16px;}}@media(min-width:768px){.elementor-73 .elementor-element.elementor-element-7a0e734{--width:80%;}}@media(max-width:767px){.elementor-73 .elementor-element.elementor-element-7a0e734{--flex-wrap:nowrap;--margin-top:0px;--margin-bottom:0px;--margin-left:auto;--margin-right:auto;--padding-top:16px;--padding-bottom:50px;--padding-left:16px;--padding-right:16px;}}/* Start custom CSS for woocommerce-my-account, class: .elementor-element-76ab28a *//* ==========================================================================
   TARJETA DE USUARIO MASIVA (ESTILO SOFT LAVANDA / TODOYA)
   ========================================================================= */

/* 1. EL CONTENEDOR MAESTRO (Asegura que no se rompa tu Grid del 25%) */
.ty-menu-lateral-wrapper {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

/* 2. LA TARJETA DE PERFIL (Fondo rosáceo/morado suave) */
.ty-user-card-sidebar {
    /* Degradado sutil: de casi blanco a un lavanda/rosado clarito */
    background: linear-gradient(135deg, #fdfbfe 0%, #f4ecf8 100%) !important; 
    border-radius: 16px !important;
    border: 1px solid #ebdff2 !important; /* Borde entonado con el morado */
    border-left: 5px solid #FF9900 !important; /* Mantenemos el sobresalido Naranja */
    box-shadow: 0px 10px 30px rgba(80, 27, 115, 0.05) !important; /* Sombra ligeramente morada */
    padding: 40px !important; 
    margin-bottom: 25px !important; 
    display: flex !important;
    flex-direction: column !important; 
    align-items: center !important; 
    justify-content: center !important; 
    text-align: center !important; 
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important; 
}

.ty-user-card-sidebar:hover {
    box-shadow: 0px 15px 35px rgba(80, 27, 115, 0.1) !important;
    border-color: #dcbceb !important; /* El borde se oscurece un poco al pasar el cursor */
    transform: translateY(-3px) !important; /* Efecto flotante */
}

/* 3. EL AVATAR MASSIVE (Morado sólido como en tu referencia) */
.ty-user-avatar {
    width: 100px !important; 
    height: 100px !important; 
    background-color: #501B73 !important; /* Morado sólido fuerte */
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ffffff !important; /* Icono en blanco para contrastar */
    box-shadow: 0px 8px 20px rgba(80, 27, 115, 0.25) !important; /* Halo de luz morada */
    margin-bottom: 18px !important; 
    flex-shrink: 0 !important;
    transition: transform 0.3s ease !important;
}

.ty-user-card-sidebar:hover .ty-user-avatar {
    transform: scale(1.05) !important; /* El círculo crece un pelín al enfocar la tarjeta */
}

.ty-user-avatar svg {
    width: 45px !important; 
    height: 45px !important; 
}

/* 4. TEXTOS DE LA TARJETA LATERAL MASSIVE */
.ty-user-info {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    overflow: hidden !important; 
}

.ty-user-role {
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    color: #8c739e !important; /* Gris con un toque morado */
    letter-spacing: 1px !important;
    margin-bottom: 5px !important;
}

.ty-user-info h4 {
    font-size: 24px !important; 
    font-weight: 800 !important;
    color: #0f172a !important;
    margin: 0 0 8px 0 !important;
    letter-spacing: -0.5px !important;
    line-height: 1.2 !important;
    overflow: hidden !important;
}

.ty-user-info h4 .ty-highlight {
    color: #501B73 !important; 
}

.ty-user-email {
    font-size: 14px !important;
    color: #7b8a9c !important; /* Gris frío para balancear */
    line-height: 1.6 !important;
    margin: 0 !important;
    font-weight: 500 !important;
}

/* ==========================================================================
   4. RESPONSIVE ULTRA-DETALLADO (GRID - DESDE TABLET HASTA 320PX)
   ========================================================================== */

/* --------------------------------------------------------------------------
   TABLET (Pantallas hasta 1024px)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .elementor-73 .elementor-element.elementor-element-76ab28a .woocommerce {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
}

/* --------------------------------------------------------------------------
   MÓVIL GRANDE Y PEQUEÑO (Pantallas hasta 767px y 320px)
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .elementor-73 .elementor-element.elementor-element-76ab28a .woocommerce {
        grid-template-columns: 1fr !important;
        gap: 15px !important; 
    }

    .ty-user-card-sidebar {
        flex-direction: row !important; /* En celular vuelve a ser horizontal */
        align-items: center !important;
        justify-content: flex-start !important;
        text-align: left !important;
        padding: 24px !important;
        border-radius: 12px !important; 
    }

    .ty-user-avatar {
        width: 60px !important; /* Achicamos el círculo para el celular */
        height: 60px !important;
        margin-right: 18px !important;
        margin-bottom: 0 !important;
    }

    .ty-user-avatar svg {
        width: 28px !important;
        height: 28px !important;
    }

    .ty-user-info h4 {
        font-size: 18px !important;
        margin-bottom: 4px !important;
    }

    .ty-user-role {
        font-size: 11px !important;
    }

    .ty-user-email {
        font-size: 13px !important;
    }
}
/* ==========================================================================
   ESTRUCTURA GLOBAL: MI CUENTA (ESTILO DASHBOARD TODOYA - GRID FIX)
   ========================================================================== */

/* 1. CONTENEDOR PRINCIPAL (CSS Grid) */
.elementor-73 .elementor-element.elementor-element-76ab28a .woocommerce {
    display: grid !important;
    grid-template-columns: 25% 1fr !important; /* 25% Menú Izquierdo | 1fr (El resto) Contenido */
    gap: 30px !important; 
    align-items: start !important;
}

/* FIX ESTRUCTURAL: Si el menú no está (al cerrar sesión), desactiva el Grid para que tu plantilla externa ocupe el 100% y no se aplaste */
.elementor-73 .elementor-element.elementor-element-76ab28a .woocommerce:not(:has(.woocommerce-MyAccount-navigation)) {
    display: block !important;
    width: 100% !important;
}

/* MATAMOS LOS ELEMENTOS INVISIBLES DE WOOCOMMERCE QUE CAUSABAN EL ERROR */
.elementor-73 .elementor-element.elementor-element-76ab28a .woocommerce::before,
.elementor-73 .elementor-element.elementor-element-76ab28a .woocommerce::after {
    display: none !important;
}

/* ==========================================================================
   2. MENÚ LATERAL (Diseño Intacto)
   ========================================================================== */
.elementor-73 .elementor-element.elementor-element-76ab28a .woocommerce-MyAccount-navigation {
    width: 100% !important;
    float: none !important;
    background-color: #ffffff !important;
    border-radius: 16px !important;
    border: 1px solid #f1f5f9 !important;
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.03) !important;
    overflow: hidden !important;
}

.elementor-73 .elementor-element.elementor-element-76ab28a .woocommerce-MyAccount-navigation ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.elementor-73 .elementor-element.elementor-element-76ab28a .woocommerce-MyAccount-navigation ul li {
    margin: 0 !important;
    border-bottom: 1px solid #f8fafc !important; 
}

.elementor-73 .elementor-element.elementor-element-76ab28a .woocommerce-MyAccount-navigation ul li:last-child {
    border-bottom: none !important;
}

.elementor-73 .elementor-element.elementor-element-76ab28a .woocommerce-MyAccount-navigation ul li a {
    display: flex !important;
    align-items: center !important;
    padding: 16px 24px !important;
    color: #64748b !important; 
    font-size: 15px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    position: relative !important;
}

.elementor-73 .elementor-element.elementor-element-76ab28a .woocommerce-MyAccount-navigation ul li:not(.is-active) a:hover {
    background-color: #f8fafc !important;
    color: #501B73 !important; 
    padding-left: 28px !important; 
}

/* ==========================================================================
   3. ESTADO ACTIVO (Diseño Intacto)
   ========================================================================== */
.elementor-73 .elementor-element.elementor-element-76ab28a .woocommerce-MyAccount-navigation ul li.is-active a {
    background-color: #f4eff8 !important; 
    color: #501B73 !important; 
    font-weight: 700 !important;
}

.elementor-73 .elementor-element.elementor-element-76ab28a .woocommerce-MyAccount-navigation ul li.is-active a::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 4px !important;
    background-color: #501B73 !important;
    border-radius: 0 4px 4px 0 !important;
}

/* ==========================================================================
   4. BOTÓN DE CERRAR SESIÓN (Diseño Intacto)
   ========================================================================== */
.elementor-73 .elementor-element.elementor-element-76ab28a .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a {
    color: #ef4444 !important; 
    font-weight: 600 !important;
}
.elementor-73 .elementor-element.elementor-element-76ab28a .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a:hover {
    background-color: #fef2f2 !important; 
    color: #dc2626 !important;
}

/* ==========================================================================
   5. ÁREA DE CONTENIDO (Diseño Intacto)
   ========================================================================== */
.elementor-73 .elementor-element.elementor-element-76ab28a .woocommerce-MyAccount-content {
    width: 100% !important;
    float: none !important;
    background-color: #ffffff !important;
    border-radius: 16px !important;
    border: 1px solid #f1f5f9 !important;
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.03) !important;
    padding: 40px !important; 
}

/* ==========================================================================
   6. RESPONSIVE ULTRA-DETALLADO (GRID - DESDE TABLET HASTA 320PX)
   ========================================================================== */
@media (max-width: 1024px) {
    .elementor-73 .elementor-element.elementor-element-76ab28a .woocommerce {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    .elementor-73 .elementor-element.elementor-element-76ab28a .woocommerce-MyAccount-content {
        padding: 30px !important;
    }
}

@media (max-width: 767px) {
    .elementor-73 .elementor-element.elementor-element-76ab28a .woocommerce {
        gap: 15px !important;
    }
    .elementor-73 .elementor-element.elementor-element-76ab28a .woocommerce-MyAccount-navigation,
    .elementor-73 .elementor-element.elementor-element-76ab28a .woocommerce-MyAccount-content {
        border-radius: 12px !important;
    }
    .elementor-73 .elementor-element.elementor-element-76ab28a .woocommerce-MyAccount-content {
        padding: 24px !important;
    }
    .elementor-73 .elementor-element.elementor-element-76ab28a .woocommerce-MyAccount-navigation ul li a {
        padding: 14px 20px !important;
    }
}

@media (max-width: 480px) {
    .elementor-73 .elementor-element.elementor-element-76ab28a .woocommerce-MyAccount-navigation,
    .elementor-73 .elementor-element.elementor-element-76ab28a .woocommerce-MyAccount-content {
        border-radius: 10px !important;
    }
    .elementor-73 .elementor-element.elementor-element-76ab28a .woocommerce-MyAccount-content {
        padding: 18px !important;
    }
    .elementor-73 .elementor-element.elementor-element-76ab28a .woocommerce-MyAccount-navigation ul li a {
        padding: 12px 16px !important;
        font-size: 14px !important;
    }
    .elementor-73 .elementor-element.elementor-element-76ab28a .woocommerce-MyAccount-navigation ul li:not(.is-active) a:hover {
        padding-left: 20px !important;
    }
}

@media (max-width: 360px) {
    .elementor-73 .elementor-element.elementor-element-76ab28a .woocommerce-MyAccount-navigation,
    .elementor-73 .elementor-element.elementor-element-76ab28a .woocommerce-MyAccount-content {
        border-radius: 8px !important;
    }
    .elementor-73 .elementor-element.elementor-element-76ab28a .woocommerce-MyAccount-content {
        padding: 15px !important;
    }
    .elementor-73 .elementor-element.elementor-element-76ab28a .woocommerce-MyAccount-navigation ul li a {
        padding: 10px 14px !important;
        font-size: 13px !important;
    }
    .elementor-73 .elementor-element.elementor-element-76ab28a .woocommerce-MyAccount-navigation ul li:not(.is-active) a:hover {
        padding-left: 18px !important;
    }
}/* End custom CSS */