/* ═══════════════════════════════════════════════════════════════════
* KOCKPIT · AVATAR FOTO (CSS COMPARTILHADO)
* ═══════════════════════════════════════════════════════════════════
*
* Faz qualquer avatar circular do app aceitar uma dentro dele
* sem quebrar o layout. A imagem fica perfeitamente circular,
* centralizada e preenche todo o espaço.
*
* Como usar:
* 1. No do HTML, adicione DEPOIS do CSS principal:
*
*
* 2. No JS, ao renderizar o avatar:
* if (session.foto_url) {
* elemento.innerHTML = '';
* } else {
* elemento.textContent = iniciais; // fallback
* }
*
* Funciona em qualquer container com as classes abaixo. Se aparecer
* um avatar novo no app que não está coberto aqui, basta adicionar
* a classe nova na lista de seletores.
*
* 🎯 IMPORTANTE: este arquivo NÃO sobrescreve o estilo do avatar com
* iniciais (gradient, cor, fonte). Ele só atua quando tem dentro.
* ═══════════════════════════════════════════════════════════════════ */
/* ─── Seletores cobertos ─────────────────────────────────────────
* Lista de classes/IDs onde renderizamos avatar no app:
*
* .sb-avatar → sidebar de DRE / Vendas / Status (avatar pequeno)
* .avatar-circle → topbar de Admin / Perfil (avatar médio)
* .avatar-big → tela de perfil (avatar grande, 110px)
* .user-avatar → genérico (qualquer outra tela)
* .topbar-avatar → topbar de telas que ainda não usam as classes acima
*
* Se uma tela tiver uma classe DIFERENTE, basta adicionar aqui.
* ─────────────────────────────────────────────────────────────── */
.sb-avatar,
.avatar-circle,
.avatar-big,
.user-avatar,
.topbar-avatar {
/* Garante que a foto não vaze do círculo. Não mexe no resto do estilo. */
overflow: hidden;
}
.sb-avatar img,
.avatar-circle img,
.avatar-big img,
.user-avatar img,
.topbar-avatar img {
/* Faz a foto preencher o container sem distorcer */
width: 100%;
height: 100%;
object-fit: cover;
display: block;
/* Garante que a foto siga o formato circular do container pai */
border-radius: inherit;
/* Remove qualquer espaço acidental */
margin: 0;
padding: 0;
border: none;
/* Suaviza a renderização em telas Retina */
image-rendering: -webkit-optimize-contrast;
}
/* ─── Estado de loading ──────────────────────────────────────────
* Quando a foto está carregando, mostra um shimmer suave.
* Opcional — só funciona se você setar a classe .avatar-loading no JS.
* ─────────────────────────────────────────────────────────────── */
.sb-avatar.avatar-loading,
.avatar-circle.avatar-loading,
.avatar-big.avatar-loading,
.user-avatar.avatar-loading,
.topbar-avatar.avatar-loading {
position: relative;
}
.sb-avatar.avatar-loading::after,
.avatar-circle.avatar-loading::after,
.avatar-big.avatar-loading::after,
.user-avatar.avatar-loading::after,
.topbar-avatar.avatar-loading::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
90deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.15) 50%,
rgba(255, 255, 255, 0) 100%
);
animation: avatar-shimmer 1.5s infinite;
pointer-events: none;
}
@keyframes avatar-shimmer {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
/* ─── Erro ao carregar foto ──────────────────────────────────────
* Se a foto der erro 404 ou base64 inválido, esconde a img quebrada
* com display:none via JS (basta usar onerror="this.style.display='none'")
* Esta regra é apenas um fallback CSS adicional.
* ─────────────────────────────────────────────────────────────── */
.sb-avatar img[alt=""],
.avatar-circle img[alt=""],
.avatar-big img[alt=""] {
/* Imagem sem alt provavelmente é quebrada — esconde */
display: none;
}