.elementor-25 .elementor-element.elementor-element-4d4e5319{--display:flex;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-25 .elementor-element.elementor-element-1ebdb942{font-family:"Roboto", Sans-serif;font-size:18px;font-weight:400;color:#2B2B2B;}/* Start custom CSS for text-editor, class: .elementor-element-1ebdb942 *//* --- REDISEÑO PÁGINA MI CUENTA MÓVIL (ESTILO APP) --- */

@media (max-width: 767px) {

    /* 1. Contenedor principal: Dar aire */
    .woocommerce-account .woocommerce {
        padding: 10px 0;
    }

    /* 2. Transformar el menú de navegación */
    /* Quitar estilos de lista aburridos */
    .woocommerce-MyAccount-navigation ul {
        padding: 0;
        margin: 0 !important;
        display: flex;
        flex-direction: column;
        gap: 12px; /* Espacio entre botones */
    }

    .woocommerce-MyAccount-navigation ul li {
        list-style: none !important;
        margin: 0 !important;
        border: none !important;
    }

    /* 3. Estilo de los BOTONES del menú */
    .woocommerce-MyAccount-navigation ul li a {
        display: flex !important; /* Para alinear texto y flecha */
        justify-content: space-between;
        align-items: center;
        padding: 18px 20px !important; /* Botones grandes y fáciles de tocar */
        background-color: #f8f9fa; /* Fondo gris muy claro y limpio */
        border-radius: 12px; /* Bordes muy redondeados y modernos */
        text-decoration: none !important;
        color: #333 !important; /* Texto oscuro */
        font-weight: 600 !important;
        font-size: 16px !important;
        box-shadow: 0 2px 5px rgba(0,0,0,0.03); /* Sombra muy sutil */
        transition: all 0.3s ease;
    }

    /* Añadir una pequeña flecha al final de cada botón */
    .woocommerce-MyAccount-navigation ul li a::after {
        content: '›'; /* Carácter de flecha simple */
        font-size: 22px;
        color: #ccc; /* Color sutil para la flecha */
        font-weight: 300;
    }

    /* 4. Estado ACTIVO (En la sección que estás viendo) */
    .woocommerce-MyAccount-navigation ul li.is-active a {
        background-color: #eef6fc !important; /* Un azul muy clarito de fondo */
        color: #3498db !important; /* Texto azul */
        box-shadow: none;
    }
    .woocommerce-MyAccount-navigation ul li.is-active a::after {
        color: #3498db; /* Flecha azul también */
    }

    /* 5. Botón de Cerrar Sesión (Hacerlo diferente) */
    .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a {
        background-color: #fff5f5 !important; /* Fondo rojizo muy claro */
        color: #e74c3c !important; /* Texto rojo */
    }
    .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a::after {
        color: #e74c3c; /* Flecha roja */
    }

    /* 6. El área de CONTENIDO (Cuando pulsas una opción) */
    .woocommerce-MyAccount-content {
        padding-top: 30px !important; /* Separarlo del menú */
    }
    
    /* Mensaje de bienvenida más grande */
    .woocommerce-MyAccount-content p:first-child {
        font-size: 18px;
        margin-bottom: 25px;
        padding: 15px;
        background: #f0f8ff;
        border-radius: 10px;
    }

    /* Arreglar tablas de pedidos para que no se rompan en móvil */
    .woocommerce-account table.shop_table {
        display: block;
        width: 100%;
        overflow-x: auto; /* Permite scroll horizontal si la tabla es muy ancha */
        border: none;
    }
}


/* --- REDISEÑO PÁGINA MI CUENTA ESCRITORIO (DASHBOARD MODERNO) --- */

@media (min-width: 768px) {

    /* 1. Contenedor Principal: Crear la sensación de "Tarjeta" */
    .woocommerce-account .woocommerce {
        display: flex; /* Asegura que el menú y el contenido estén lado a lado */
        gap: 40px; /* Espacio entre la barra lateral y el contenido */
        background: #ffffff;
        padding: 40px;
        border-radius: 20px; /* Bordes redondeados modernos */
        box-shadow: 0 10px 30px rgba(0,0,0,0.05); /* Sombra suave para dar profundidad */
        max-width: 1200px; /* Ancho máximo para que no se desparrame en pantallas gigantes */
        margin: 30px auto; /* Centrado */
    }

    /* 2. La Barra Lateral de Navegación (Izquierda) */
    .woocommerce-MyAccount-navigation {
        flex: 0 0 280px; /* Ancho fijo para el menú lateral */
    }

    .woocommerce-MyAccount-navigation ul {
        list-style: none !important;
        padding: 0;
        margin: 0;
        background: #f8f9fa; /* Fondo gris claro para la columna del menú */
        padding: 20px;
        border-radius: 15px;
    }

    .woocommerce-MyAccount-navigation ul li {
        margin-bottom: 10px;
        border: none !important;
    }

    /* Estilo de los Enlaces del Menú (Pestañas) */
    .woocommerce-MyAccount-navigation ul li a {
        display: block;
        padding: 15px 20px;
        border-radius: 10px;
        text-decoration: none;
        color: #555;
        font-weight: 600;
        font-size: 15px;
        transition: all 0.3s ease;
        /* Añadimos un pequeño icono sutil antes del texto (opcional) */
        display: flex;
        align-items: center;
    }

    /* Efecto Hover (al pasar el ratón) */
    .woocommerce-MyAccount-navigation ul li a:hover {
        background-color: #e9ecef;
        color: #333;
        transform: translateX(5px); /* Pequeño desplazamiento a la derecha */
    }

    /* 3. Estado ACTIVO (La pestaña seleccionada) */
    .woocommerce-MyAccount-navigation ul li.is-active a {
        background-color: #3498db !important; /* Color azul principal */
        color: #ffffff !important; /* Texto blanco */
        box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3); /* Sombra azul brillante */
    }

    /* Botón de Salir diferenciado */
    .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a {
        color: #e74c3c; /* Texto rojo */
        margin-top: 20px; /* Separarlo un poco del resto */
        background: transparent;
        border: 1px solid #eee;
    }
    .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a:hover {
         background-color: #fff5f5;
         border-color: #e74c3c;
    }


    /* 4. El Área de Contenido (Derecha) */
    .woocommerce-MyAccount-content {
        flex: 1; /* Ocupa el resto del espacio disponible */
        padding-top: 10px;
    }

    /* Mensaje de bienvenida */
    .woocommerce-MyAccount-content p:first-child {
        font-size: 22px;
        font-weight: 300;
        margin-bottom: 30px;
        color: #333;
    }
    .woocommerce-MyAccount-content p:first-child strong {
        font-weight: 700;
        color: #3498db; /* Destacar el nombre del usuario en azul */
    }

    /* Títulos de sección (ej: "Mis Pedidos") */
    .woocommerce-MyAccount-content h2,
    .woocommerce-MyAccount-content h3 {
        font-size: 24px;
        margin-bottom: 25px;
        padding-bottom: 15px;
        border-bottom: 2px solid #f0f0f0;
    }

    /* Estilizar las tablas (Pedidos, Descargas) */
    .woocommerce-account table.shop_table {
        border: none;
        width: 100%;
        border-collapse: separate;
        border-spacing: 0 10px; /* Espacio entre filas */
    }

    .woocommerce-account table.shop_table th {
        font-weight: 600;
        color: #777;
        text-transform: uppercase;
        font-size: 13px;
        letter-spacing: 1px;
        padding: 15px;
        border: none;
    }

    .woocommerce-account table.shop_table td {
        background: #f8f9fa;
        padding: 20px;
        vertical-align: middle;
        border-top: none;
        border-bottom: none;
    }
    /* Redondear esquinas de la primera y última celda de cada fila */
    .woocommerce-account table.shop_table tr td:first-child { border-top-left-radius: 10px; border-bottom-left-radius: 10px; }
    .woocommerce-account table.shop_table tr td:last-child { border-top-right-radius: 10px; border-bottom-right-radius: 10px; }
    
    /* Botones dentro del contenido (ej: "Ver pedido") */
    .woocommerce-MyAccount-content .button {
        padding: 10px 20px !important;
        border-radius: 8px !important;
        font-weight: 600 !important;
        text-transform: none !important;
    }
}/* End custom CSS */