/*

 * Menú de cuenta (.account-main): embellecido visual.

 * Iconos vía ::before (SVG) — sin textos hardcodeados.

 */



/* Contenedor del menú */

html body .account-main,

html body .account-container.show-dropdown .account-main {

    border-radius: 18px !important;

    border: 1px solid rgba(255, 255, 255, 0.35) !important;

    box-shadow:

        0 18px 48px rgba(18, 32, 26, 0.28),

        0 2px 0 rgba(255, 255, 255, 0.35) inset !important;

    overflow: hidden !important;

    background: #ffffff !important;

}



html body .account-main .account-main-inner {

    background: transparent !important;

    gap: 0 !important;

}



/* Cabecera: degradado vertical limpio (sin sprites) */

html body .account-main .user-info-container {

    position: relative !important;

    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;

    justify-content: flex-start !important;

    gap: 10px !important;

    width: 100% !important;

    padding: 22px 16px 18px !important;

    overflow: hidden !important;

    background: linear-gradient(180deg, #5f9a84 0%, #8bbaa5 48%, #b6d8c8 100%) !important;

    border-radius: 0 !important;

}



html body .account-main .user-info-container::before {

    content: none !important;

    display: none !important;

}



html body .account-main .user-info-container > * {

    position: relative !important;

    z-index: 1 !important;

}



/* Avatar: anillo + glow + leve pulso */

html body .account-main .logo-container,

html body .account-main .logo-container.rounded-circle {

    width: 76px !important;

    height: 76px !important;

    min-width: 76px !important;

    min-height: 76px !important;

    max-width: 76px !important;

    max-height: 76px !important;

    margin: 0 auto 2px !important;

    border: 3px solid rgba(255, 255, 255, 0.95) !important;

    box-shadow:

        0 0 0 5px rgba(255, 255, 255, 0.22),

        0 0 18px rgba(255, 255, 255, 0.35),

        0 8px 20px rgba(18, 32, 26, 0.25) !important;

    background: #d7ebe2 !important;

    animation: cicumba-account-avatar-glow 2.8s ease-in-out infinite !important;

}



@keyframes cicumba-account-avatar-glow {

    0%, 100% {

        box-shadow:

            0 0 0 5px rgba(255, 255, 255, 0.18),

            0 0 14px rgba(255, 255, 255, 0.28),

            0 8px 20px rgba(18, 32, 26, 0.22);

        transform: scale(1);

    }

    50% {

        box-shadow:

            0 0 0 7px rgba(255, 255, 255, 0.28),

            0 0 26px rgba(255, 255, 255, 0.45),

            0 10px 24px rgba(18, 32, 26, 0.28);

        transform: scale(1.03);

    }

}



@media (prefers-reduced-motion: reduce) {

    html body .account-main .logo-container,

    html body .account-main .logo-container.rounded-circle {

        animation: none !important;

    }

}



/* Ocultar iconos rotos de DX junto al correo */

html body .account-main .user-name-container .xaf-image,

html body .account-main .user-name-container .dxbl-image,

html body .account-main .user-name-container img,

html body .account-main .user-info-inner-container > .xaf-image,

html body .account-main .user-info-inner-container > .dxbl-image {

    display: none !important;

}



html body .account-main .user-name-container {

    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;

    width: 100% !important;

    gap: 4px !important;

}



html body .account-main .user-name-container .user-name-title {

    display: none !important;

}



/* Correo más pequeño + icono email */

html body .account-main .user-name-container .user-name {

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    gap: 6px !important;

    max-width: 100% !important;

    padding: 4px 10px !important;

    border-radius: 999px !important;

    background: rgba(255, 255, 255, 0.16) !important;

    border: 1px solid rgba(255, 255, 255, 0.28) !important;

    backdrop-filter: blur(6px) !important;

    -webkit-backdrop-filter: blur(6px) !important;

    color: #ffffff !important;

    font-size: 11px !important;

    font-weight: 500 !important;

    letter-spacing: 0.01em !important;

    word-break: break-all !important;

    white-space: normal !important;

    text-align: center !important;

    line-height: 1.2 !important;

    box-sizing: border-box !important;

}



html body .account-main .user-name-container .user-name::before {

    content: "" !important;

    display: inline-block !important;

    width: 13px !important;

    height: 13px !important;

    flex-shrink: 0 !important;

    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Crect x='3' y='5' width='18' height='14' rx='2.5' stroke='%23ffffff' stroke-width='1.8'/%3E%3Cpath d='M4 7.5l8 5.5 8-5.5' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;

    background-size: contain !important;

    background-repeat: no-repeat !important;

    background-position: center !important;

}



/* Mis datos: chip con icono de perfil */

html body .account-main .xaf-btn.my-details,

html body .account-main .my-details,

html body .account-main button.my-details {

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    gap: 8px !important;

    width: calc(100% - 28px) !important;

    max-width: calc(100% - 28px) !important;

    margin: 4px 14px 2px !important;

    min-height: 42px !important;

    padding: 8px 14px !important;

    border-radius: 999px !important;

    background: rgba(255, 255, 255, 0.94) !important;

    color: #2a5c45 !important;

    -webkit-text-fill-color: #2a5c45 !important;

    border: 1px solid rgba(255, 255, 255, 0.9) !important;

    box-shadow: 0 4px 14px rgba(18, 32, 26, 0.12) !important;

    font-size: 13px !important;

    font-weight: 600 !important;

    text-decoration: none !important;

    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease !important;

}



html body .account-main .xaf-btn.my-details:hover,

html body .account-main .my-details:hover,

html body .account-main button.my-details:hover {

    background: #ffffff !important;

    transform: translateY(-1px) !important;

    box-shadow: 0 6px 18px rgba(18, 32, 26, 0.16) !important;

    text-decoration: none !important;

}



html body .account-main .xaf-btn.my-details::before,

html body .account-main .my-details::before,

html body .account-main button.my-details::before {

    content: "" !important;

    display: inline-block !important;

    width: 16px !important;

    height: 16px !important;

    flex-shrink: 0 !important;

    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='8' r='3.4' stroke='%232a5c45' stroke-width='1.8'/%3E%3Cpath d='M5.5 19.2c.8-3 3.2-4.6 6.5-4.6s5.7 1.6 6.5 4.6' stroke='%232a5c45' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") !important;

    background-size: contain !important;

    background-repeat: no-repeat !important;

    background-position: center !important;

}



html body .account-main .xaf-btn.my-details .dxbl-btn-caption,

html body .account-main .my-details .dxbl-btn-caption,

html body .account-main .my-details .dxbl-text,

html body .account-main .my-details span,

html body .account-main .xaf-btn.my-details a,

html body .account-main .my-details a {

    color: #2a5c45 !important;

    -webkit-text-fill-color: #2a5c45 !important;

    text-decoration: none !important;

    font-weight: 600 !important;

}



html body .account-main .xaf-btn.my-details .xaf-image,

html body .account-main .my-details .xaf-image,

html body .account-main .xaf-btn.my-details .dxbl-image,

html body .account-main .my-details img {

    display: none !important;

}



html body .account-main .account-separator {

    width: calc(100% - 28px) !important;

    margin: 8px 14px 0 !important;

    border: none !important;

    border-top: 1px solid rgba(90, 155, 128, 0.16) !important;

    opacity: 1 !important;

}



/* Cerrar sesión */

html body .account-main .xaf-btn.log-off,

html body .account-main .log-off,

html body .account-main button.log-off,

html body .account-main .log-off.dxbl-btn {

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    gap: 8px !important;

    width: calc(100% - 28px) !important;

    max-width: calc(100% - 28px) !important;

    margin: 10px 14px 14px !important;

    min-height: 44px !important;

    padding: 10px 16px !important;

    border-radius: 999px !important;

    background: linear-gradient(180deg, #fff7f7 0%, #ffffff 100%) !important;

    color: #c45050 !important;

    -webkit-text-fill-color: #c45050 !important;

    border: 1.5px solid rgba(196, 80, 80, 0.32) !important;

    box-shadow: 0 3px 10px rgba(196, 80, 80, 0.08) !important;

    font-size: 14px !important;

    font-weight: 650 !important;

    text-decoration: none !important;

    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease !important;

}



html body .account-main .xaf-btn.log-off:hover,

html body .account-main .log-off:hover,

html body .account-main button.log-off:hover {

    background: linear-gradient(180deg, #ffe8e8 0%, #fff5f5 100%) !important;

    border-color: rgba(196, 80, 80, 0.5) !important;

    transform: translateY(-1px) !important;

    box-shadow: 0 6px 16px rgba(196, 80, 80, 0.14) !important;

}



html body .account-main .xaf-btn.log-off::before,

html body .account-main .log-off::before,

html body .account-main button.log-off::before {

    content: "" !important;

    display: inline-block !important;

    width: 17px !important;

    height: 17px !important;

    flex-shrink: 0 !important;

    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 3v9' stroke='%23c45050' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M7.2 6.4A7.5 7.5 0 1 0 16.8 6.4' stroke='%23c45050' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") !important;

    background-size: contain !important;

    background-repeat: no-repeat !important;

    background-position: center !important;

}



html body .account-main .xaf-btn.log-off .xaf-image,

html body .account-main .log-off .xaf-image,

html body .account-main .log-off .dxbl-image,

html body .account-main .log-off img {

    display: none !important;

}



html body .account-main .log-off .dxbl-btn-caption,

html body .account-main .log-off .dxbl-text,

html body .account-main .log-off span {

    color: #c45050 !important;

    -webkit-text-fill-color: #c45050 !important;

    font-weight: 650 !important;

}