/* =========================================================
   PANEL COMPRADOR (Nav + Contenido) — CSS optimizado
   ========================================================= */

/* ===================== 1) BASE / VARIABLES ===================== */
:root {
    --mi-accent: var(--e-global-color-accent, #ff5a3c);
    /* en mobile la define el header; si no existe, vale 0 */
    --mi-header-offset: 0px;
}

/* UX: ocultar Descargas sin parpadeo */
.woocommerce-MyAccount-navigation-link--downloads {
    display: none !important;
}

/* (Temporal) ocultar Logout en el menú de mi cuenta */
.woocommerce-MyAccount-navigation-link--customer-logout {
    display: none !important;
}

/* ===================== 2) NAV: ESTRUCTURA ===================== */
.woocommerce-MyAccount-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.woocommerce-MyAccount-navigation ul li {
    position: relative;
}

/* Enlace del item (padding doble y espacio para icono) */
.woocommerce-MyAccount-navigation ul li a {
    position: relative;
    display: flex;
    align-items: center;
    line-height: 1.3;
    min-height: 4.6em;
    padding: 2.4em 1.4em 2.4em 4.6em !important;
    box-sizing: border-box;
    color: inherit;
    text-decoration: none;
    transition: color .18s ease;
}

/* Icono por máscara; color via var (--mi-icon-color) */
.woocommerce-MyAccount-navigation ul li a::before {
    content: "";
    position: absolute;
    left: 1.4em;
    top: 50%;
    transform: translateY(-50%);
    width: 1.725em;
    height: 1.725em;
    background: var(--mi-icon-color, currentColor);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
    opacity: .95;
    transition: background-color .18s ease, opacity .18s ease;
}

/* Estados (desktop) */
.woocommerce-MyAccount-navigation ul li a:hover {
    color: #fff;
}

.woocommerce-MyAccount-navigation ul li a:hover::before {
    background: var(--mi-accent);
}

.woocommerce-MyAccount-navigation .is-active>a {
    color: #fff !important;
}

.woocommerce-MyAccount-navigation .is-active>a::before {
    background: var(--mi-accent);
}

/* “Pill” vertical activo */
.woocommerce-MyAccount-navigation .is-active>a::after {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: .6em;
    height: 3.3em;
    background: var(--mi-accent);
    border-radius: 0 1.2em 1.2em 0;
}

/* Nunca aclarar fondo del item (tema) */
.woocommerce-MyAccount-navigation li.is-active,
.woocommerce-MyAccount-navigation li:hover,
.woocommerce-MyAccount-navigation li.is-active>a,
.woocommerce-MyAccount-navigation li:hover>a {
    background-color: transparent !important;
    box-shadow: none !important;
}

/* ===================== 3) ICONOS POR ITEM (máscaras) ===================== */
.woocommerce-MyAccount-navigation-link--dashboard>a::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 24 24' stroke='black' fill='none' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.2' xmlns='http://www.w3.org/2000/svg'><path d='M3 10.5 12 3l9 7.5'/><path d='M5 10v10h14V10'/><path d='M9 20v-6h6v6'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 24 24' stroke='black' fill='none' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.2' xmlns='http://www.w3.org/2000/svg'><path d='M3 10.5 12 3l9 7.5'/><path d='M5 10v10h14V10'/><path d='M9 20v-6h6v6'/></svg>");
}

.woocommerce-MyAccount-navigation-link--orders>a::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 24 24' stroke='black' fill='none' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'><path d='M6 3h12v18l-3-2-3 2-3-2-3 2V3z'/><path d='M9 8h6M9 12h6M9 16h4'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 24 24' stroke='black' fill='none' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'><path d='M6 3h12v18l-3-2-3 2-3-2-3 2V3z'/><path d='M9 8h6M9 12h6M9 16h4'/></svg>");
}

.woocommerce-MyAccount-navigation-link--request-a-quote>a::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 24 24' stroke='black' fill='none' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'><path d='M6 2h8l4 4v16H6z'/><path d='M14 2v6h4'/><path d='M8 15l2.5 2.5L16 12'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 24 24' stroke='black' fill='none' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'><path d='M6 2h8l4 4v16H6z'/><path d='M14 2v6h4'/><path d='M8 15l2.5 2.5L16 12'/></svg>");
}

.woocommerce-MyAccount-navigation-link--edit-address>a::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 24 24' stroke='black' fill='none' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'><path d='M12 21s7-5.1 7-11A7 7 0 0 0 5 10c0 5.9 7 11 7 11z'/><circle cx='12' cy='10' r='2.5'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 24 24' stroke='black' fill='none' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'><path d='M12 21s7-5.1 7-11A7 7 0 0 0 5 10c0 5.9 7 11 7 11z'/><circle cx='12' cy='10' r='2.5'/></svg>");
}

.woocommerce-MyAccount-navigation-link--rma-requests>a::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 24 24' stroke='black' fill='none' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'><path d='M3 12a9 9 0 0 1 15.5-6.4M21 12a9 9 0 0 1-15.5 6.4'/><path d='M6 5v4h4M18 19v-4h-4'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 24 24' stroke='black' fill='none' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'><path d='M3 12a9 9 0 0 1 15.5-6.4M21 12a9 9 0 0 1-15.5 6.4'/><path d='M6 5v4h4M18 19v-4h-4'/></svg>");
}

.woocommerce-MyAccount-navigation-link--edit-account>a::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 24 24' stroke='black' fill='none' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'><circle cx='12' cy='8' r='4'/><path d='M4 21a8 8 0 0 1 16 0'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 24 24' stroke='black' fill='none' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'><circle cx='12' cy='8' r='4'/><path d='M4 21a8 8 0 0 1 16 0'/></svg>");
}

.woocommerce-MyAccount-navigation-link--following>a::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 24 24' stroke='black' fill='none' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'><path d='M4 10h16l-1.2 8.5a2 2 0 0 1-2 1.5H7.2a2 2 0 0 1-2-1.5L4 10z'/><path d='M6 10V6h12v4'/><path d='M9 6V4h6v2'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 24 24' stroke='black' fill='none' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'><path d='M4 10h16l-1.2 8.5a2 2 0 0 1-2 1.5H7.2a2 2 0 0 1-2-1.5L4 10z'/><path d='M6 10V6h12v4'/><path d='M9 6V4h6v2'/></svg>");
}

.woocommerce-MyAccount-navigation-link--support-tickets>a::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 24 24' stroke='black' fill='none' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'><circle cx='12' cy='12' r='9'/><path d='M12 3v4M21 12h-4M12 21v-4M3 12h4'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 24 24' stroke='black' fill='none' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'><circle cx='12' cy='12' r='9'/><path d='M12 3v4M21 12h-4M12 21v-4M3 12h4'/></svg>");
}

/* ===================== 4) LAYOUT BASE (flex) ===================== */
.e-my-account-tab .woocommerce {
    display: flex;
    align-items: stretch;
    background: #fff;
    /* asegura blanco a la derecha del nav */
}

/* ===================== 5) DESKTOP (>=993px) ===================== */
@media (min-width: 993px) {
    .woocommerce-MyAccount-navigation {
        flex: 0 0 20vw;
        /* ancho “elástico” */
        position: sticky;
        top: var(--mi-header-offset, 0px);
        height: auto !important;
        /* crece con el contenido */
        min-height: calc(100vh - var(--mi-header-offset, 0px));
        overflow: visible !important;
        /* sin scroll interno */
        background-color: #232A31 !important;
        padding: 2vh 0 !important;
        /* sin padding bottom exagerado */
        box-shadow: none !important;
    }

    .woocommerce-MyAccount-content {
        flex: 1 1 auto;
        min-width: 0;
        margin-left: 0 !important;
        padding-top: 3vh !important;
        padding-right: 2vh !important;
        background: #fff;
        min-height: calc(100vh - var(--mi-header-offset, 0px));
    }

    /* Ocultar el botón de colapso en desktop */
    .mi-nav-toggle {
        display: none !important;
    }
}

/* ===================== 6) MOBILE (<=992px) ===================== */
@media (max-width: 992px) {
    :root {
        --mi-header-offset: 72px;
        --mi-nav-collapsed: 45px;
        /* solo iconos */
        --mi-nav-expanded: clamp(260px, 35vw, 420px);
        --mi-item-h: 3.6rem;
    }

    /* Wrapper: alturas parejas mínimas y sin separación entre columnas */
    .e-my-account-tab .woocommerce {
        min-height: calc(100vh - var(--mi-header-offset, 0px));
        gap: 0 !important;
        /* ← evita la franja blanca */
        overflow-x: hidden !important;
    }

    /* NAV: columna normal (NO sticky), sin scroll propio */
    .woocommerce-MyAccount-navigation {
        position: static !important;
        top: auto !important;

        height: auto !important;
        max-height: none !important;
        min-height: calc(100vh - var(--mi-header-offset, 0px)) !important;

        width: var(--mi-nav-collapsed) !important;
        flex: 0 0 var(--mi-nav-collapsed) !important;
        max-width: none !important;

        padding: 64px 0 0 0 !important;
        /* espacio para el botón arriba */
        overflow: visible !important;
        background-color: #232A31 !important;
        z-index: 1;
        box-shadow: none !important;
    }

    /* Expandido: solo ancho */
    body.mi-nav-expanded .woocommerce-MyAccount-navigation {
        width: var(--mi-nav-expanded) !important;
        flex-basis: var(--mi-nav-expanded) !important;
    }

    /* Contenido: ocupa resto, sin overflow horizontal */
    .woocommerce-MyAccount-content {
        flex: 1 1 auto;
        min-width: 0;
        margin-left: 0 !important;
        overflow-x: hidden !important;
        background: #fff;
        /* Padding interno (espaciado UI) */
        padding: clamp(14px, 2.5vw, 20px) clamp(14px, 3vw, 24px) 24px !important;
        border-left: 1px solid rgba(0, 0, 0, .06);
        /* leve separación visual */
        border-radius: 8px;
    }

    /* Ítems: mismas alturas, sin bordes del tema */
    .woocommerce-MyAccount-navigation ul li,
    .woocommerce-MyAccount-navigation ul li a {
        border: 0 !important;
        box-shadow: none !important;
    }

    .woocommerce-MyAccount-navigation ul li a {
        height: var(--mi-item-h) !important;
        min-height: var(--mi-item-h) !important;
        display: flex;
        align-items: center;
        padding-left: 3.4em !important;
        overflow: hidden;
    }

    /* Labels: ocultos en colapsado, visibles en expandido */
    body:not(.mi-nav-expanded) .woocommerce-MyAccount-navigation .mi-label {
        display: none !important;
    }

    body.mi-nav-expanded .woocommerce-MyAccount-navigation ul li a {
        padding-left: 4.6em !important;
        min-height: 4.2em;
    }

    body.mi-nav-expanded .woocommerce-MyAccount-navigation .mi-label {
        display: inline !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        pointer-events: auto !important;
    }

    /* Botón del nav */
    .mi-nav-toggle {
        margin-left: 3.5px !important;
        padding: 5px !important;
        line-height: 10px !important;
        border-radius: 10px;
        display: inline-flex;
        justify-content: center !important;
        align-items: center !important;
        background: var(--mi-accent) !important;
        color: #fff !important;
        text-decoration: none !important;
        box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
    }

    .mi-nav-toggle:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px rgba(255, 90, 60, .35) !important;
    }

    .mi-nav-toggle::before {
        content: "";
        display: inline-block;
        width: 25px;
        height: 25px;
        background: currentColor;
        -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M9.29 6.71a1 1 0 0 0 0 1.41L12.17 11l-2.88 2.88a1 1 0 1 0 1.41 1.41l3.59-3.59a1 1 0 0 0 0-1.41L10.7 6.7a1 1 0 0 0-1.41 0z'/></svg>") center/contain no-repeat;
        mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M9.29 6.71a1 1 0 0 0 0 1.41L12.17 11l-2.88 2.88a1 1 0 1 0 1.41 1.41l3.59-3.59a1 1 0 0 0 0-1.41L10.7 6.7a1 1 0 0 0-1.41 0z'/></svg>") center/contain no-repeat;
        transition: transform .2s ease;
    }

    body.mi-nav-expanded .mi-nav-toggle::before {
        transform: rotate(180deg);
    }

    /* Anti-FOUC del texto + color de iconos */
    .woocommerce-MyAccount-navigation ul li a {
        color: transparent !important;
        --mi-icon-color: #cfd6dc;
    }

    .woocommerce-MyAccount-navigation .is-active>a {
        color: transparent !important;
        --mi-icon-color: var(--mi-accent);
    }

    body.mi-nav-expanded .woocommerce-MyAccount-navigation ul li a {
        color: inherit !important;
        --mi-icon-color: currentColor;
    }

    body.mi-nav-expanded .woocommerce-MyAccount-navigation .is-active>a {
        color: #fff !important;
        --mi-icon-color: var(--mi-accent);
    }

    /* Fondo coherente en hover/activo (mobile) */
    .woocommerce-MyAccount-navigation li.is-active,
    .woocommerce-MyAccount-navigation li.is-active>a,
    .woocommerce-MyAccount-navigation li:hover,
    .woocommerce-MyAccount-navigation li:hover>a {
        background-color: #232A31 !important;
    }
}

/* ===================== 7) MICRO-AJUSTES <=768px ===================== */
@media (max-width: 768px) {
    .woocommerce-MyAccount-navigation ul li a {
        padding: 2.1em 1.2em 2.1em 4.2em !important;
        min-height: 4.2em;
    }

    .woocommerce-MyAccount-navigation ul li a::before {
        left: 1.2em;
        width: 1.6em;
        height: 1.6em;
    }

    .woocommerce-MyAccount-navigation .is-active>a::after {
        left: 0;
        width: .54em;
        height: 3em;
        border-radius: 0 1.1em 1.1em 0;
    }
}

/* =========================================================
   AUTH UI (Login / Registro / Reset) — (no afecta al layout)
   ========================================================= */
.u-columns.col2-set {
    padding: 5vh 4vh;
}

.woocommerce form.login,
.woocommerce form.register {
    border-radius: 25px !important;
    padding: 3vh 5vh !important;
}

.woocommerce-Button.woocommerce-button.button.woocommerce-form-register__submit,
.woocommerce-button.button.woocommerce-form-login__submit,
.woocommerce-Button.button {
    background-color: var(--e-global-color-accent, var(--mi-accent)) !important;
    border-radius: 25px !important;
    color: #fff;
}

.woocommerce form.login a,
.woocommerce form.register a {
    color: var(--e-global-color-accent, var(--mi-accent)) !important;
}

.woocommerce-ResetPassword.lost_reset_password {
    padding: 5vh 15vh !important;
    width: 100% !important;
    justify-content: center !important;
}

.woocommerce-ResetPassword.lost_reset_password input,
.woocommerce form.login input,
.woocommerce form.register input {
    border: 1px solid var(--e-global-color-text, #333) !important;
}
/* FIX: ítems no se salgan del ancho del nav en MOBILE */
@media (max-width: 992px) {

    /* el nav no debe dejar ver nada que sobresalga */
    .woocommerce-MyAccount-navigation {
        overflow-x: hidden !important;
    }

    /* los <li> sin márgenes del tema */
    .woocommerce-MyAccount-navigation ul li {
        margin: 0 !important;
    }

    /* forzar que el link ocupe estrictamente el ancho del nav */
    .woocommerce-MyAccount-navigation ul li a {
        width: 100% !important;
        max-width: 100% !important;
        padding-right: 0 !important;
        /* ← quita el 1.4em heredado de desktop */
        overflow: hidden !important;
        /* por si algún pseudo o foco se escapa */
    }

    /* (opcional) en expandido también mantenemos sin padding derecho */
    body.mi-nav-expanded .woocommerce-MyAccount-navigation ul li a {
        padding-right: 0 !important;
    }
}