/* header.css */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  /* revisão visual 3 (item 2): mais compacto (menos padding vertical) e
     integrado ao fundo azul-claro da página — antes era uma faixa branca
     alta, separada por uma borda, destoando do mockup. */
  padding: var(--space-2) var(--space-5);
  background: transparent;
  border-bottom: 1px solid var(--border-muted);
  flex-wrap: wrap;
}

.header__left {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.header__menu-toggle {
  /* display é decidido só em app-shell.css (media queries de
     .app-shell__menu-toggle) — declarar "display: none" aqui também
     causava conflito de cascata: como header.css carrega DEPOIS de
     app-shell.css no index.html, esta regra sem media query vencia e
     o botão de menu nunca aparecia no celular, mesmo com a sidebar
     escondida fora da tela. Bug real encontrado em teste com Playwright
     em 390×844 (menu_toggle_visible: false) — corrigido aqui. */
  align-items: center;
  justify-content: center;
  width: var(--control-height-sm);
  height: var(--control-height-sm);
  border-radius: var(--radius-control);
  border: 1px solid var(--border-control);
  background: var(--surface-card-solid);
  cursor: pointer;
}

/* Patch layout/suporte/governança (14/08/2026), Parte B: botão "Home/Voltar"
   — mesmo tamanho/formato do menu-toggle ao lado, para não desalinhar o
   cabeçalho em nenhuma largura já testada por header__menu-toggle acima. */
.header__icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--control-height-sm);
  height: var(--control-height-sm);
  border-radius: var(--radius-control);
  border: 1px solid var(--border-control);
  background: var(--surface-card-solid);
  cursor: pointer;
  font-size: var(--font-size-md);
  flex-shrink: 0;
}

.breadcrumb {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  margin: 0 0 var(--space-1);
  display: flex;
  gap: var(--space-1);
  flex-wrap: wrap;
}

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

.header__right {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  min-width: 0;
  /* sem flex-wrap aqui, o conjunto seletor de tema + indicador de perfil
     não cabia em 390px e a PÁGINA inteira ganhava rolagem horizontal
     (scrollWidth 439px em viewport de 390px) mesmo com .header já tendo
     flex-wrap — o filho também precisava poder quebrar internamente.
     Bug real encontrado em teste com Playwright em 390×844 — corrigido aqui. */
}

/* revisão visual 3 (item 8): cápsula com borda, avatar circular + "Autenticado
   como {perfil}" — antes era um badge de texto solto ("Developer autenticado"),
   hierarquia diferente do mockup.
   Ajuste pequeno 3/6 (mesma rodada, sem nova aprovação): ordem invertida —
   texto vem antes do avatar (ver header.js) — padding espelhado (mais
   espaço à esquerda do texto, menos à direita do avatar que agora é o
   último elemento). */
.profile-indicator {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  border: 1px solid var(--border-control);
  border-radius: 999px;
  padding: 4px 4px 4px 12px;
  background: var(--surface-card-solid);
}

.profile-indicator__avatar {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--brand-navy);
  color: var(--text-on-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
}

/* Patch layout/suporte/governança (14/08/2026), Parte B: botão "Sair" —
   usa as classes já existentes .btn.btn--secondary (components/button.css),
   só acrescenta o espaçamento em relação à cápsula de perfil ao lado. */
.header__sair {
  flex-shrink: 0;
}

/* Revisão visual 2: o seletor de tema saiu do cabeçalho (mockup aprovado não
   tem esse controle nesta tela) — a regra de estilo dele agora mora em
   components/dev-tools-panel.css, junto com o restante do componente. */

@media (max-width: 640px) {
  .header {
    padding: var(--space-2) var(--space-3);
  }
  .header__title {
    font-size: var(--font-size-lg);
  }
}