/*
 * Avatar único do painel (Web#671, Brain 04-Knowledge/Avatar-Photos.md).
 * Markup (Razor: @Html.DsAvatar / JS: DsAvatar.create):
 *   <span class="ds-avatar [is-xs|is-sm|is-md|is-lg|is-xl|is-2xl] [is-brand]" role="img" aria-label="Nome">
 *     <span class="ds-avatar-ini">MS</span>                    ← iniciais, sempre por baixo
 *     <img class="ds-avatar-img" src="…" alt="" loading="lazy"> ← foto por cima; se falhar o onerror tira o <img>
 *   </span>
 * O tamanho vem de --ds-avatar-size (classes is-* ou de uma classe da tela): a caixa tem tamanho fixo, então
 * carregar ou falhar a foto nunca muda o layout. Cores: neutro (tabelas) ou is-brand (cor da marca, var(--bs-primary)).
 */
.ds-avatar {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: var(--ds-avatar-size, 36px);
    height: var(--ds-avatar-size, 36px);
    border-radius: 50%;
    overflow: hidden;
    vertical-align: middle;
    background: var(--ds-t-avatar-bg, #2a333b);
    color: var(--ds-t-text, #e9eaeb);
    font-size: calc(var(--ds-avatar-size, 36px) * .33);
    font-weight: 700;
    line-height: 1;
    letter-spacing: .3px;
    text-transform: uppercase;
    box-shadow: 0 0 0 2px var(--ds-ring-color, transparent);
}

.ds-avatar.is-xs { --ds-avatar-size: 24px; }
.ds-avatar.is-sm { --ds-avatar-size: 32px; }
.ds-avatar.is-md { --ds-avatar-size: 40px; }
.ds-avatar.is-lg { --ds-avatar-size: 48px; }
.ds-avatar.is-xl { --ds-avatar-size: 56px; }
.ds-avatar.is-2xl { --ds-avatar-size: 80px; }

.ds-avatar.is-brand {
    background: color-mix(in oklch, var(--ds-primary-deep, var(--bs-primary)) 55%, var(--ds-card, var(--ds-t-card, #141517)));
    color: var(--ds-primary-soft, var(--bs-primary));
    font-weight: 600;
}

.ds-avatar-ini { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.ds-avatar-ini i { font-size: 1.35em; line-height: 1; }

.ds-avatar-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

/* Foto carregada: as iniciais saem de baixo (foto com transparência não deixa letra vazar). */
.ds-avatar.is-loaded .ds-avatar-ini { visibility: hidden; }

/* Logo de marca usado como <img class="ds-avatar"> (AdminBrands). */
img.ds-avatar { object-fit: cover; }