/*
 * AVATAR — círculo com iniciais (até 2 letras), ícone ou foto.
 * FONTE ÚNICA do componente: entity-header dos shows, linhas de listas
 * (via shared/_avatar e _property_avatar) e blocos de pessoa em cards.
 * Tamanho cheio por padrão; --sm para linhas/cards; --photo para foto de
 * imóvel (quadrado); tons --neutral/--accent trocam fundo/cor.
 */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: var(--radius-full);
  background-color: var(--color-accent-soft);
  color: var(--color-link); /* petróleo com contraste AA sobre o fundo suave */
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  user-select: none;
}

/* Avatar com ícone (ex.: imóvel) em vez de iniciais. */
.avatar svg {
  width: 1.5rem;
  height: 1.5rem;
}

/* Avatar menor, para blocos de pessoa dentro de cards e linhas de listas. */
.avatar--sm {
  width: 2.5rem;
  height: 2.5rem;
  font-size: var(--text-sm);
}

/* Avatar com foto do imóvel: quadrado (cantos suaves) e um pouco maior que o
   avatar de iniciais, para a foto aparecer melhor. A imagem preenche o quadro. */
.avatar--photo {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: var(--radius-md);
  overflow: hidden;
  background-color: var(--color-surface-2);
}

.avatar--photo.avatar--sm {
  width: 3rem;
  height: 3rem;
}

.avatar--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar--neutral {
  background-color: var(--color-status-neutral-soft);
  color: var(--color-text);
}

.avatar--accent {
  background-color: var(--color-accent-soft);
  color: var(--color-accent);
}