/* usuario-chip.css — la ficha del usuario en la barra superior: su imagen de perfil (Fluent Emoji 3D) sobre un círculo de color
   suave, y la cabecera del menú desplegable. Se carga en todas las pantallas (por eso es corto y aparte de site.css, para no invalidar
   su caché). Las pantallas de perfil usan perfil.css. */

.user-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: linear-gradient(145deg, var(--av1, #e8eefc), var(--av2, #d3defa));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.65), 0 1px 3px rgba(15, 23, 42, 0.14);
}

.user-avatar img {
    width: 84%;
    height: 84%;
    object-fit: contain;
    display: block;
    -webkit-user-drag: none;
    user-select: none;
}

.user-avatar-lg {
    width: 44px;
    height: 44px;
}

/* El chip ya trae padding a la izquierda pensado para un círculo de 28 px. */
.user-chip .user-avatar { margin-left: 0; }

.user-menu-head {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.7rem 0.85rem;
}

.user-menu-id {
    min-width: 0;
}

.user-menu-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--t1, #1d1d1f);
    line-height: 1.25;
}

.user-menu-mail {
    font-size: 0.76rem;
    color: var(--t4, #86868b);
    line-height: 1.3;
}

.user-menu-link {
    display: flex;
    align-items: center;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--t2, #424245);
}

.user-menu-link i {
    color: var(--t4, #86868b);
}

/* En el navbar los ítems resaltan con degradado azul (site.css): el icono debe seguir al texto. */
.user-menu-link:hover i,
.user-menu-link:focus i {
    color: inherit;
}

/* La inicial que se muestra mientras la persona no haya elegido imagen (no hay imagen «por defecto»). Tamaño relativo al círculo/cuadro. */
.user-avatar { container-type: inline-size; }
.user-avatar img[hidden],
.user-avatar .av-iniciales[hidden] { display: none !important; }
.user-avatar .av-iniciales {
    display: block;
    font-weight: 700;
    font-size: 0.95rem;
    font-size: 46cqw;
    line-height: 1;
    color: #5d6b8a;
    user-select: none;
    -webkit-user-select: none;
    pointer-events: none;
}