/* cabecalho-global-v3.css — barra + cápsula do cabeçalho global mobile (rodada 3A).
 *
 * Spec: design-system-v4/canonical/features/cabecalho-global-v3/ (§1-§3, §5) — "cápsula".
 * Onde a spec e este arquivo divergirem, vale DECISOES-DE-IMPLEMENTACAO.md do mesmo pacote.
 *
 * Só mobile (<768px): no desktop a sidebar continua, sem barra nenhuma — mesmo corte de
 * largura de .sidebar/.bottom-nav (design-system/components.css). Injetada por
 * js/cabecalho-global-v3.js, chamado de dentro de renderNav() (js/nav.js).
 *
 * Escopo desta rodada: só as 5 telas raiz (Início, Planos, Grupos, Conquistas, Perfil).
 * A Leitura (cápsula Aa · Chama · Avatar, chip do dia) fica para outra rodada.
 */

/* Utilitário: some no mobile (<768px), mantém como estava no desktop. Marca todo trecho de
 * conteúdo que o cabeçalho v3 substitui SÓ no mobile (§0 da spec: "o desktop não muda") — o
 * elemento original continua no HTML e no JS de quem o preenche; só o CSS muda. */
@media (max-width: 767px) {
  .cbv3-oculto-mobile { display: none !important; }
}
/* Inverso: conteúdo NOVO desta rodada, que só existe no mobile (a barra/cápsula é mobile-only
 * — no desktop o elemento correspondente antigo, marcado .cbv3-oculto-mobile, continua). */
.cbv3-so-mobile { display: none; }
@media (max-width: 767px) {
  .cbv3-so-mobile { display: block; }
}

.cbv3-barra { display: none; }

@media (max-width: 767px) {
  .cbv3-barra {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    position: sticky;
    top: 0;
    z-index: 40;                       /* abaixo da sidebar/bottom-nav (100) — nunca competem, não se sobrepõem */
    /* 68px, não os 58px da §1 da spec — divergência aprovada pelo Sérgio (22/09/2026) por causa
       da escala real da marca: a logo do Início (.cbv3-logo) valida em 52px de altura (medido no
       inspetor), e 52 + 8px de respiro acima e abaixo = 68px. Mesma altura nas 5 telas raiz —
       inclusive onde o slot esquerdo é texto — para a barra não pular de tamanho ao trocar de
       aba. Ver DECISOES-DE-IMPLEMENTACAO.md do pacote. */
    height: 68px;
    box-sizing: content-box;
    padding-top: env(safe-area-inset-top, 0);
    padding-left: calc(18px + env(safe-area-inset-left, 0));
    padding-right: calc(12px + env(safe-area-inset-right, 0));
    background: var(--bg);             /* cor da página, opaca — sem --nav-glass, sem backdrop-filter (§9, sinalização 4) */
    transition: box-shadow 160ms var(--ease-out);
  }
  .cbv3-barra.is-rolado { box-shadow: var(--shadow-sm); }

  /* Respiro entre a barra e o primeiro elemento do conteúdo (§1: 10-14px — a barra já tem
     68px de área própria). Cada página zera o próprio padding-top nesse intervalo mobile;
     ver o comentário "respiro do cabeçalho v3" nas 5 telas raiz. Esse respiro não muda com a
     altura da barra: ela é normal-flow (nunca overlay), então crescer não cobre nada — só
     empurra o conteúdo mais para baixo. */
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .cbv3-barra { transition: none; }
}

.cbv3-titulo {
  font-family: var(--font-display);
  font-size: var(--fs-h4);             /* 21px — bate exatamente com a spec */
  font-weight: 600;
  color: var(--fg);
  letter-spacing: -0.01em;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* Só no Início: a marca "Hagá" vira a logo horizontal (troca de tema por CSS — ver
 * .logo-claro/.logo-escuro em design-system/colors_and_type.css, mesmo mecanismo do logo da
 * sidebar em nav.js). O <h1> segue sendo o único título da tela; só o CONTEÚDO dele muda. */
.cbv3-titulo-logo { display: flex; align-items: center; overflow: visible; }
.cbv3-logo {
  display: block;
  height: 52px;                        /* valor validado por Sérgio no inspetor (22/09/2026) —
                                           não é o cálculo de "58px de barra - respiro", é a
                                           própria altura que define a barra em 68px agora. */
  width: auto;
  object-fit: contain;
}

/* ── Tela empilhada (grupo específico, plano aberto, desafios, panorama, diário...) ──
 * Voltar + título sempre; cápsula (Chama · Avatar) opcional, ligada quando a tela contém o
 * leitor (panorama, diário) — ver montarEmpilhada() em js/cabecalho-global-v3.js. Voltar+título
 * ficam num wrapper só (.cbv3-empilhada-esquerda), então a barra tem 1 filho (sem cápsula) ou 2
 * (com cápsula) — a base .cbv3-barra{justify-content:space-between} já resolve os dois casos,
 * sem precisar de override aqui. */
.cbv3-empilhada-esquerda {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  flex: 1;
}

/* ── Leitura (rodada 3B): slot esquerdo = voltar + bloco de duas linhas, não <h1> ──
 * .tema-titulo (conteúdo) é o h1 de verdade desta tela — ver montarLeitura() em
 * js/cabecalho-global-v3.js. */
.cbv3-leitura-esquerda {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  flex: 1;
}
.cbv3-voltar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-left: -12px;                  /* §2: alvo de 44×44, mas visualmente alinhado ao padding da barra */
  flex-shrink: 0;
  border: none;
  background: none;
  color: var(--fg);
  cursor: pointer;
}
.cbv3-voltar svg { width: 22px; height: 22px; }
.cbv3-leitura-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.cbv3-leitura-plano {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 600;
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cbv3-leitura-dia {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 11.5px;
  color: var(--fg-3);
}

/* ── Chip do dia (§6) — primeiro elemento do conteúdo da Leitura, substitui o ícone de
 * calendário do cabeçalho antigo. Só mobile — no desktop #dia-label/#data-label continuam
 * (.cbv3-oculto-mobile neles, nada muda lá — §0 da spec). */
.cbv3-chip-dia {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px;
  margin: 0 auto;                      /* centralizado; os 14px abaixo da barra vêm do padding-top
                                           mobile de .leitura-wrapper (leitura.html), não daqui —
                                           assim o skeleton (sem chip) também respira igual */
  border: none;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  cursor: pointer;
}
.cbv3-chip-dia-icone { width: 18px; height: 18px; color: var(--fg-2); flex-shrink: 0; }
.cbv3-chip-dia-texto {
  font-family: var(--font-ui); font-size: 13px; font-weight: 600; color: var(--fg);
  white-space: nowrap;
}
.cbv3-chip-dia-chevron { width: 14px; height: 14px; color: var(--fg-3); flex-shrink: 0; }

/* ── Cápsula ── */
.cbv3-capsula {
  display: flex;
  align-items: center;
  height: 46px;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  padding: 0 1px 0 3px;
  flex-shrink: 0;
}

.cbv3-seg {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  min-width: 44px;
  border: none;
  background: none;
  padding: 0 10px;
  cursor: pointer;
  color: var(--fg);
  font-family: var(--font-ui);
  transition: transform 120ms var(--ease-out);
}
.cbv3-seg:active { transform: scale(.96); }
.cbv3-seg:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 999px; }

/* Só na Leitura (§3/§6): "Aa", texto puro, alvo de 46×44. */
.cbv3-seg-aa { width: 46px; font-family: var(--font-ui); font-size: 14.5px; font-weight: 600; color: var(--fg); }

.cbv3-seg-chama { gap: 5px; min-width: 48px; }
.cbv3-seg-chama svg { width: 16px; height: 16px; color: var(--ember-500); flex-shrink: 0; }
.cbv3-seg-chama span { font-size: 14px; font-weight: 600; color: var(--fg); }
/* Conquistas: a Chama já leva à tela em que a pessoa está — não é botão (§3). */
.cbv3-seg-chama.cbv3-inerte { cursor: default; }
.cbv3-seg-chama.cbv3-inerte:active { transform: none; }

.cbv3-seg-avatar { width: 46px; padding: 0; }
.cbv3-avatar-img {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--grad-primary); color: var(--fg-on-primary);
  font-family: var(--font-display); font-weight: 600; font-size: 15px;
  overflow: hidden; flex-shrink: 0;
}
.cbv3-avatar-img img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }

.cbv3-divisor {
  width: 1px; height: 22px;
  background: var(--border);           /* --divider não existe no DS real — mapeado para --border, ver DECISOES §g */
  flex-shrink: 0;
}

/* ── Folha de conta (aberta pelo Avatar da cápsula) ──
 * Reaproveita js/folha.js / css/folha.css (alça, scrim, animação) — só o CONTEÚDO é deste
 * pacote. Segmentado de Aparência: js/segmentado.js + js/tema-segmentado.js (mesmo motor
 * das rodadas 1/2), sem CSS próprio aqui. */
.cbv3-conta-header {
  display: flex;
  align-items: center;
  gap: 14px;
}
.cbv3-conta-avatar {
  width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--grad-primary); color: var(--fg-on-primary);
  font-family: var(--font-display); font-weight: 600; font-size: 18px;
  overflow: hidden;
}
.cbv3-conta-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.cbv3-conta-texto { min-width: 0; }
.cbv3-conta-nome {
  font-family: var(--font-ui); font-size: 16px; font-weight: 600; color: var(--fg);
  margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cbv3-conta-nivel { font-family: var(--font-ui); font-size: 12.5px; color: var(--fg-3); margin: 2px 0 0; }

.cbv3-secao-label {
  font-family: var(--font-ui); font-size: var(--fs-label); font-weight: 700;
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--fg-2);
  margin: 0 0 10px;
}

.cbv3-divisor-h { height: 1px; background: var(--border); border: none; margin: 0; }

.cbv3-linha {
  display: flex; align-items: center; gap: 12px;
  height: 48px;
  background: none; border: none; width: 100%;
  font-family: var(--font-ui); font-size: 15px; font-weight: 600; color: var(--fg);
  cursor: pointer; text-align: left; padding: 0;
}
.cbv3-linha-icone { width: 19px; height: 19px; color: var(--fg-3); flex-shrink: 0;
  stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cbv3-linha-chevron { margin-left: auto; width: 18px; height: 18px; color: var(--fg-3); flex-shrink: 0; }

/* ── Perfil: linha "Suas conquistas" (§4 — substitui o troféu do cabeçalho antigo) ──
 * Mesma receita visual de .atalho-diario/.atalho-icone (conquistas.html): ícone num círculo
 * tingido de --primary-text, não um valor novo. */
.cbv3-suas-conquistas {
  display: flex; align-items: center; gap: var(--space-4);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl);
  padding: var(--space-5); text-decoration: none;
  transition: border-color var(--dur-fast), transform var(--dur-fast);
}
.cbv3-suas-conquistas:hover { border-color: var(--mark-subtle); transform: translateY(-1px); }
.cbv3-suas-conquistas-icone {
  width: 44px; height: 44px; border-radius: var(--radius-md); flex-shrink: 0;
  background: rgba(123,127,232,.12); color: var(--primary-text);
  display: flex; align-items: center; justify-content: center;
}
.cbv3-suas-conquistas-icone svg { width: 22px; height: 22px; }
.cbv3-suas-conquistas-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cbv3-suas-conquistas-titulo { font-family: var(--font-display); font-weight: 700; color: var(--fg); }
.cbv3-suas-conquistas-contagem {
  font-size: var(--fs-body-sm); color: var(--fg-2);
  font-family: var(--font-ui); font-variant-numeric: tabular-nums;   /* não JetBrains Mono — ver DECISOES §i */
}
.cbv3-suas-conquistas-chevron { color: var(--primary-text); flex-shrink: 0; width: 20px; height: 20px; }