/* AFTERMAN v818 - Mi cuenta móvil Offcanvas real.
   Objetivo: separar completamente el menú móvil del dropdown del header.
   No depende de Bootstrap 5 ni del dropdown nativo. */

.am-account-mobile-offcanvas {
    display: none;
}

@media (max-width: 1200px), (hover: none), (pointer: coarse) {
    html.am-account-mobile-lock,
    html.am-account-mobile-lock body {
        overflow: hidden !important;
        overscroll-behavior: none !important;
    }

    html body [data-am-account-mobile-open] {
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    /* El dropdown del header queda completamente deshabilitado en móvil.
       Esto evita el síntoma reportado: menú visible solo dentro del marco de Mi cuenta. */
    html body .am-account-menu > .am-account-dropdown,
    html body .am-account-menu.is-open > .am-account-dropdown,
    html body [data-am-account-menu] > [data-am-account-dropdown],
    html body [data-am-account-menu].is-open > [data-am-account-dropdown] {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        position: fixed !important;
        top: -9999px !important;
        left: -9999px !important;
        width: 0 !important;
        height: 0 !important;
        max-width: 0 !important;
        max-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        transform: none !important;
        z-index: -1 !important;
    }

    html body .am-account-mobile-offcanvas {
        --am-account-font: "Segoe UI Variable Display", "Segoe UI", Inter, Arial, sans-serif;
        --am-account-bg: rgba(7, 9, 22, .992);
        --am-account-line: rgba(120, 230, 255, .16);
        --am-account-cyan: #72e8ff;
        --am-account-pink: #ff5bd7;
        --am-account-violet: #9c7bff;
        position: fixed !important;
        inset: 0 !important;
        z-index: 2147483600 !important;
        display: block !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        font-family: var(--am-account-font) !important;
        transition: opacity .18s ease, visibility .18s ease !important;
        isolation: isolate !important;
        contain: none !important;
    }

    html body .am-account-mobile-offcanvas.is-open {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    html body .am-account-mobile-offcanvas__backdrop {
        position: fixed !important;
        inset: 0 !important;
        z-index: 1 !important;
        display: block !important;
        background:
            radial-gradient(circle at 15% 12%, rgba(255, 91, 215, .14), transparent 0 32%),
            radial-gradient(circle at 90% 86%, rgba(114, 232, 255, .13), transparent 0 34%),
            rgba(0, 2, 10, .78) !important;
        backdrop-filter: blur(12px) saturate(1.08) !important;
        -webkit-backdrop-filter: blur(12px) saturate(1.08) !important;
        opacity: 0 !important;
        transition: opacity .18s ease !important;
    }

    html body .am-account-mobile-offcanvas.is-open .am-account-mobile-offcanvas__backdrop {
        opacity: 1 !important;
    }

    html body .am-account-mobile-offcanvas__sheet {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: auto !important;
        z-index: 2 !important;
        display: flex !important;
        flex-direction: column !important;
        width: min(430px, calc(100vw - 16px)) !important;
        max-width: calc(100vw - 16px) !important;
        height: 100vh !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        margin: 0 !important;
        padding: calc(16px + env(safe-area-inset-top, 0px)) 14px calc(18px + env(safe-area-inset-bottom, 0px)) !important;
        overflow: hidden !important;
        border-left: 1px solid var(--am-account-line) !important;
        border-radius: 24px 0 0 24px !important;
        background:
            radial-gradient(circle at 22% 0%, rgba(255, 91, 215, .13), transparent 0 30%),
            radial-gradient(circle at 95% 22%, rgba(114, 232, 255, .12), transparent 0 33%),
            linear-gradient(180deg, rgba(18, 21, 43, .995), var(--am-account-bg)) !important;
        box-shadow: -22px 0 60px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.045) inset !important;
        transform: translate3d(104%, 0, 0) !important;
        transition: transform .22s cubic-bezier(.2,.82,.2,1) !important;
        color: #fff !important;
        -webkit-transform: translate3d(104%, 0, 0) !important;
    }

    html body .am-account-mobile-offcanvas.is-open .am-account-mobile-offcanvas__sheet {
        transform: translate3d(0, 0, 0) !important;
        -webkit-transform: translate3d(0, 0, 0) !important;
    }

    html body .am-account-mobile-offcanvas__head {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
        margin-bottom: 12px !important;
        flex: 0 0 auto !important;
    }

    html body .am-account-mobile-offcanvas__title strong,
    html body .am-account-mobile-offcanvas__title small {
        display: block !important;
        font-family: var(--am-account-font) !important;
        font-style: normal !important;
    }

    html body .am-account-mobile-offcanvas__title strong {
        font-size: 18px !important;
        line-height: 1.05 !important;
        font-weight: 760 !important;
        letter-spacing: -.02em !important;
    }

    html body .am-account-mobile-offcanvas__title small {
        margin-top: 4px !important;
        color: rgba(220,230,255,.62) !important;
        font-size: 11px !important;
        font-weight: 650 !important;
        letter-spacing: .09em !important;
        text-transform: uppercase !important;
    }

    html body .am-account-mobile-offcanvas__close {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        border: 1px solid rgba(255,255,255,.12) !important;
        border-radius: 16px !important;
        background: rgba(255,255,255,.06) !important;
        color: #fff !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        margin: 0 !important;
        box-shadow: none !important;
        appearance: none !important;
        -webkit-appearance: none !important;
    }

    html body .am-account-mobile-offcanvas__profile {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        margin: 0 0 12px !important;
        padding: 11px !important;
        border: 1px solid rgba(255,255,255,.09) !important;
        border-radius: 22px !important;
        background: rgba(255,255,255,.045) !important;
        flex: 0 0 auto !important;
    }

    html body .am-account-mobile-offcanvas__avatar {
        width: 44px !important;
        height: 44px !important;
        border-radius: 50% !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
        background: linear-gradient(135deg, rgba(255,45,222,.42), rgba(77,213,255,.24)) !important;
        border: 1px solid rgba(255,255,255,.26) !important;
        color: #fff !important;
        font: 850 12px/1 var(--am-account-font) !important;
        text-transform: uppercase !important;
    }

    html body .am-account-mobile-offcanvas__avatar img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
    }

    html body .am-account-mobile-offcanvas__profile strong,
    html body .am-account-mobile-offcanvas__profile small {
        display: block !important;
        font-family: var(--am-account-font) !important;
        font-style: normal !important;
    }

    html body .am-account-mobile-offcanvas__profile strong {
        font-size: 15px !important;
        font-weight: 760 !important;
        color: #fff !important;
    }

    html body .am-account-mobile-offcanvas__profile small {
        margin-top: 3px !important;
        font-size: 10px !important;
        font-weight: 760 !important;
        letter-spacing: .14em !important;
        text-transform: uppercase !important;
        color: rgba(119,230,255,.72) !important;
    }

    html body .am-account-mobile-offcanvas__content {
        display: grid !important;
        gap: 8px !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important;
        padding: 0 1px 8px !important;
    }

    html body .am-account-mobile-offcanvas__content .am-account-item {
        min-height: 58px !important;
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 42px minmax(0, 1fr) !important;
        align-items: center !important;
        column-gap: 11px !important;
        padding: 9px 11px !important;
        border-radius: 18px !important;
        border: 1px solid rgba(255,255,255,.09) !important;
        background: rgba(255,255,255,.045) !important;
        color: #f8fbff !important;
        text-decoration: none !important;
        box-shadow: 0 10px 24px rgba(0,0,0,.15) !important;
        font-family: var(--am-account-font) !important;
    }

    html body .am-account-mobile-offcanvas__content .am-account-item > span {
        width: 40px !important;
        height: 40px !important;
        border-radius: 15px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: linear-gradient(135deg, rgba(255,91,215,.25), rgba(114,232,255,.16)) !important;
        color: #fff !important;
    }

    html body .am-account-mobile-offcanvas__content .am-account-item strong,
    html body .am-account-mobile-offcanvas__content .am-account-item em {
        display: block !important;
        font-style: normal !important;
        min-width: 0 !important;
    }

    html body .am-account-mobile-offcanvas__content .am-account-item strong {
        font-size: 13px !important;
        line-height: 1.08 !important;
        font-weight: 740 !important;
        color: #fff !important;
    }

    html body .am-account-mobile-offcanvas__content .am-account-item em {
        margin-top: 4px !important;
        font-size: 10px !important;
        line-height: 1.1 !important;
        font-weight: 620 !important;
        color: rgba(224,232,255,.58) !important;
    }

    html body .am-account-mobile-offcanvas__content .am-account-item-danger {
        border-color: rgba(255,55,113,.26) !important;
        background: rgba(255,55,113,.08) !important;
    }

    html body .am-account-mobile-offcanvas__empty {
        padding: 14px !important;
        border-radius: 18px !important;
        border: 1px solid rgba(255,255,255,.09) !important;
        color: rgba(235,240,255,.72) !important;
        background: rgba(255,255,255,.045) !important;
        font-size: 12px !important;
    }
}