/*=========================================
        CONTENEDOR DEL USUARIO
=========================================*/

.usuario-contenedor{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

}


/*=========================================
        BOTÓN DEL USUARIO

        MANTIENE EL DISEÑO DEL NAVBAR
=========================================*/

.usuario-boton{

    cursor:pointer;

    padding:0;

    overflow:hidden;

    display:flex;

    align-items:center;

    justify-content:center;

}


/*=========================================
        FOTO DEL USUARIO EN EL NAVBAR
=========================================*/

.usuario-contenedor .usuario-boton .usuario-foto-navbar{

    width:100% !important;

    height:100% !important;

    min-width:100%;

    min-height:100%;

    margin:0 !important;

    padding:0;

    display:block;

    object-fit:cover;

    object-position:center;

    border-radius:50%;

}


/*=========================================
        SUBMENÚ
=========================================*/

.usuario-submenu{

    position:absolute;

    top:calc(100% + 16px);

    left:50%;

    transform:translateX(-50%) translateY(-8px);

    width:255px;

    padding:9px;

    background:#ffffff;

    border:1px solid #e8ecf2;

    border-radius:14px;

    box-shadow:
        0 14px 35px rgba(42,42,95,.12),
        0 4px 10px rgba(23,32,51,.05);

    z-index:99999;

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transition:
        opacity .2s ease,
        transform .2s ease,
        visibility .2s ease;

}


/*=========================================
        SUBMENÚ ABIERTO
=========================================*/

.usuario-submenu.mostrar{

    opacity:1;

    visibility:visible;

    pointer-events:auto;

    transform:
        translateX(-50%)
        translateY(0);

}


/*=========================================
        FLECHA DEL SUBMENÚ
=========================================*/

.usuario-submenu::before{

    content:"";

    position:absolute;

    top:-6px;

    left:50%;

    width:11px;

    height:11px;

    background:#ffffff;

    border-left:1px solid #e8ecf2;

    border-top:1px solid #e8ecf2;

    transform:translateX(-50%) rotate(45deg);

}


/*=========================================
        CABECERA DEL USUARIO
=========================================*/

.usuario-cabecera{

    display:flex;

    align-items:flex-start;

    padding:11px 10px 13px;

}


/*=========================================
        INFORMACIÓN DEL USUARIO
=========================================*/

.usuario-datos{

    min-width:0;

    flex:1;

    display:flex;

    flex-direction:column;

    gap:4px;

}


/*=========================================
        NOMBRE COMPLETO

        NO SE CORTA.
        EL TEXTO PUEDE BAJAR
        A OTRA LÍNEA.
=========================================*/

.usuario-datos strong{

    display:block;

    color:#172033;

    font-size:14px;

    font-weight:700;

    line-height:1.35;

    white-space:normal;

    overflow-wrap:anywhere;

    word-break:normal;

}


/*=========================================
        USUARIO / INFORMACIÓN SECUNDARIA
=========================================*/

.usuario-datos span{

    display:block;

    color:#7a8495;

    font-size:11px;

    line-height:1.3;

    white-space:normal;

    overflow-wrap:anywhere;

}


/*=========================================
        SEPARADOR
=========================================*/

.usuario-linea{

    height:1px;

    background:#eef1f5;

    margin:3px 2px 5px;

}


/*=========================================
        OPCIONES
=========================================*/

.usuario-submenu a{

    display:flex;

    align-items:center;

    gap:11px;

    width:100%;

    min-height:42px;

    padding:8px 10px;

    border-radius:9px;

    box-sizing:border-box;

    color:#5f6878;

    text-decoration:none;

    font-size:13px;

    font-weight:600;

    transition:
        background .18s ease,
        color .18s ease,
        transform .18s ease;

}


/*=========================================
        ICONOS
=========================================*/

.usuario-submenu a i{

    width:19px;

    min-width:19px;

    text-align:center;

    color:#737c8c;

    font-size:13px;

    transition:color .18s ease;

}


/*=========================================
        HOVER
=========================================*/

.usuario-submenu a:hover{

    background:#f0f0f7;

    color:#2A2A5F;

}


.usuario-submenu a:hover i{

    color:#2A2A5F;

}


/*=========================================
        CERRAR SESIÓN
=========================================*/

.usuario-submenu a.usuario-cerrar{

    color:#dc2626;

}


.usuario-submenu a.usuario-cerrar i{

    color:#dc2626;

}


.usuario-submenu a.usuario-cerrar:hover{

    background:#fff1f1;

    color:#dc2626;

}


/*=========================================
        RESPONSIVE
=========================================*/

@media(max-width:500px){

    .usuario-submenu{

        width:240px;

    }


    .usuario-datos strong{

        font-size:13px;

    }


    .usuario-submenu a{

        font-size:12px;

    }

}