/*
 * ENTITY HEADER — cabeçalho de tela de detalhe (show) de uma entidade.
 * Avatar (iniciais ou ícone) + identidade (nome + subtítulo) à esquerda;
 * à direita, ações e uma meta (ex.: "cliente desde"). Acima dele vem o
 * breadcrumb. Reutilizável entre cliente, imóvel e locação.
 */
.entity-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.entity-header__identity {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-width: 0;
}

/* Linha do título: nome + badge de status lado a lado. */
.entity-header__title-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.entity-header__title {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

.entity-header__subtitle {
  margin: var(--space-1) 0 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.entity-header__actions {
  display: flex;
  gap: var(--space-2);
  flex-shrink: 0;
}

/* Coluna à direita: ações em cima, meta embaixo (ex.: "cliente desde"). */
.entity-header__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-2);
  flex-shrink: 0;
}

/* Linha de meta com ícone (ex.: calendário + "cliente desde jun/2025"). */
.entity-header__meta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.entity-header__meta svg {
  width: 1rem;
  height: 1rem;
}

/* Avatar circular com iniciais, em tom de destaque suave. */
.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-accent);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
}

/* 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. */
.avatar--sm {
  width: 2.5rem;
  height: 2.5rem;
  font-size: var(--text-sm);
}