/* ═══════════════════════════════════════════════════════════════════════════
   CEDAR · cedar_topbar_redesign.css — TOPBAR, rodada 5 do brief
   (hierarquia primária/secundária · ícones · Visão como chip).  06/09/2026
   ---------------------------------------------------------------------------
   SÓ APRESENTAÇÃO. Zero JS, nenhum nó criado, movido ou escondido, nenhuma
   regra de navegação, permissão ou gating tocada. Isso importa mais aqui do
   que em qualquer outra tela: a topbar é preenchida por ~10 addons
   independentes (brand, calendário, histórico, solicitações, chip de usuário,
   viewas, access_guard, ícones…) e a auditoria de 04/07 mostrou que disputar
   esses nós é a origem do "aparece → some → reaparece".

   ESTA FOLHA CONSTRÓI SOBRE O `cdr_brand_theme.css`, que já desenhou a barra:
   fundo branco com o lockup CDR à esquerda e, à direita, a FAIXA MARROM-ESCURA
   (`.tb-modules`) onde vivem os módulos, o chip do usuário e a Visão. Nada
   disso é desfeito aqui — a faixa, o dourado do Agenda e o creme do ativo
   continuam sendo dele.

   O QUE FALTAVA (o diagnóstico desta rodada)
   · Fora o Agenda, os NOVE botões restantes são fantasmas idênticos: Calendário
     (usado todo dia) tem exatamente o mesmo peso de Mural da equipe. Não há
     primeiro e segundo plano — só uma fila.
   · O ícone entra como emoji e o `cedar_icons_addon` o troca por SVG ~300 ms
     depois, com largura diferente: o botão RESSALTA de tamanho depois de já
     estar na tela (o "resize após o reveal" da auditoria).
   · A `.tb-modules` não encolhe nem rola. No iPad (1194 px) a fila empurra
     Salvar / Assinar / PDF / Novo para fora da tela.
   · A Visão Médico/Master nasce com `background: var(--surface)` — um chip
     BRANCO dentro da faixa escura, gritando mais que o próprio Agenda, e sem
     diferença visual clara entre "estou no meu papel" e "estou com acesso
     total". Justamente o contrário do que o estado exige.

   ⚙️ QUAL É PRIMÁRIA — decisão de UMA LINHA (o seletor logo abaixo).
      Assumi as três casas de onde se trabalha o dia: Agenda (que o tema já
      pinta de dourado, e aqui fica intacta), Calendário e Central
      Organizacional. Se a rotina for outra — Histórico e Solicitações no lugar
      da Central, por exemplo —, é mover o ID de um bloco para o outro.

   Kill-switch (reverte 100 %, sem recarregar):
      document.documentElement.dataset.cedarTopbarOff = '1'
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── 1 · O QUE NÃO SE TOCA AQUI ─────────────────────────────────────────
   A `.tb-modules` transborda em telas estreitas e o tema resolve isso
   QUEBRANDO A BARRA EM DUAS LINHAS — decisão do Dr. registrada no próprio
   cdr_brand_theme.css (TBMODULES-01/02 · TOPBAR-OVERFLOW-04). Uma primeira
   versão desta folha punha `overflow-x:auto` na faixa: transformaria a quebra
   deliberada em rolagem escondida, tirando botões da vista. Removido. Nada
   aqui mexe em `flex-wrap`, `overflow` ou na ordem da fila.
   ───────────────────────────────────────────────────────────────────────── */

/* ─── 2 · SEGUNDO PLANO — o padrão de todo módulo na faixa escura ────────── */
/* O tema já os faz fantasmas; aqui eles recuam mais um passo, para que o
   primeiro plano tenha para onde subir. Continuam perfeitamente legíveis. */
html:not([data-cedar-topbar-off]) .topbar .tb-modules .tb-btn.tb-btn--module {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .14);
  color: #E8DCCC;
  font-weight: 500;
  height: 34px;
  padding: 0 9px;     /* 1 px a menos que hoje: paga a largura do slot de ícone */
  gap: 5px;
  border-radius: 8px;
}
html:not([data-cedar-topbar-off]) .topbar .tb-modules .tb-btn.tb-btn--module:hover {
  background: rgba(255, 255, 255, .18);
  border-color: rgba(255, 255, 255, .45);
  color: #fff;
}

/* ─── 3 · PRIMEIRO PLANO — as casas do dia ──────────────────────────────── */
/* Agenda continua dourada (é do tema — a "home", e aqui não se toca nela).
   Calendário e Central sobem um degrau: contorno cheio e texto branco. */
html:not([data-cedar-topbar-off]) .topbar .tb-modules #btn_goto_calendario.tb-btn--module,
html:not([data-cedar-topbar-off]) .topbar .tb-modules #btn_goto_central_org.tb-btn--module {
  background: rgba(255, 255, 255, .16);
  border-color: rgba(255, 255, 255, .55);
  color: #fff;
  font-weight: 700;
}
html:not([data-cedar-topbar-off]) .topbar .tb-modules #btn_goto_calendario.tb-btn--module:hover,
html:not([data-cedar-topbar-off]) .topbar .tb-modules #btn_goto_central_org.tb-btn--module:hover {
  background: rgba(255, 255, 255, .26);
  border-color: #fff;
}
/* fecho do primeiro plano: um fio separa as casas do resto da fila */
html:not([data-cedar-topbar-off]) .topbar .tb-modules #btn_goto_central_org.tb-btn--module {
  margin-right: 10px;
  box-shadow: 10px 0 0 -9px rgba(255, 255, 255, .28);
}

/* O ativo vence os dois planos — creme sólido, como o tema já define. Repetido
   aqui só para que o primeiro plano não o encubra por ordem de cascata. */
html:not([data-cedar-topbar-off]) .topbar .tb-modules .tb-btn.tb-btn--module.active,
html:not([data-cedar-topbar-off]) .topbar .tb-modules #btn_goto_calendario.tb-btn--module.active,
html:not([data-cedar-topbar-off]) .topbar .tb-modules #btn_goto_central_org.tb-btn--module.active {
  background: var(--brand-light, #F4EADF);
  border-color: var(--brand-light, #F4EADF);
  color: var(--brand, #785533);
  font-weight: 700;
}

/* ─── 4 · Ícones: escala única (14 px) em SLOT FIXO ─────────────────────── */
/* Hoje o SVG entra com `width:1.05em` — ou seja, o ícone muda de tamanho junto
   com a fonte do botão, e cada bloco de mídia da topbar (1200 px, 1050 px)
   encolhe a fonte. O slot fixo dá UMA escala a todos os ícones da barra.
   ⚠️ HONESTIDADE: isto NÃO elimina o "resize depois do reveal" da auditoria.
   O emoji é um glifo de texto e o SVG é uma caixa; igualar os dois exige
   embrulhar o emoji no HTML — markup/JS, fora do "apenas design". O que o slot
   resolve é o RESCAN (1,5 s) e a variação de escala por breakpoint.
   📏 POR QUE 14 px E NÃO OS 20 px QUE O REGISTRO PEDE PARA TOPBAR: medido no
   harness a 1440 px, com slot de 16 px a faixa PASSA A QUEBRAR em duas linhas
   (74 px em vez de 36) e a barra inteira vai de 126 px para 164 px — eu estaria
   comprando ícone maior com uma linha a mais de topbar, que é justamente o que
   o tema evita. Com 14 px (e 1 px a menos de padding) a faixa continua em UMA
   linha. Se o Dr. preferir o ícone grande, o custo é essa linha. */
html:not([data-cedar-topbar-off]) .topbar .tb-btn .cdr-ico,
html:not([data-cedar-topbar-off]) .topbar .cdr-viewas .cdr-ico {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
}
html:not([data-cedar-topbar-off]) .topbar .tb-btn .cdr-ico svg,
html:not([data-cedar-topbar-off]) .topbar .cdr-viewas .cdr-ico svg {
  width: 14px;
  height: 14px;
}
/* Na faixa escura o marrom institucional do ícone some: herda a cor do botão. */
html:not([data-cedar-topbar-off]) .topbar .tb-modules .cdr-ico svg [stroke]:not([stroke="none"]) { stroke: currentColor; }
html:not([data-cedar-topbar-off]) .topbar .tb-modules .cdr-ico svg [fill]:not([fill="none"]) { fill: currentColor; }

/* ─── 5 · Visão Médico / Master, chip da faixa ───────────────────────────── */
/* Nasce branca (`var(--surface)`) dentro do marrom escuro. Vira uma pílula
   fantasma igual à do chip do usuário — e só o estado MASTER acende. */
html:not([data-cedar-topbar-off]) .topbar .tb-modules .cdr-viewas {
  height: 34px;
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .22);
  color: #F4EADF;
  font-weight: 600;
}
html:not([data-cedar-topbar-off]) .topbar .tb-modules .cdr-viewas:hover {
  background: rgba(255, 255, 255, .18);
  border-color: rgba(255, 255, 255, .45);
  color: #fff;
}
/* MASTER ATIVO: âmbar. Quem está com acesso total precisa ver que está. */
html:not([data-cedar-topbar-off]) .topbar .tb-modules .cdr-viewas--master {
  background: #FEF3C7;
  border-color: #F59E0B;
  color: #92400E;
}
html:not([data-cedar-topbar-off]) .topbar .tb-modules .cdr-viewas--master:hover {
  background: #FDE68A;
  border-color: #D97706;
  color: #78350F;
}

/* ─── 6 · Altura consistente na faixa (chip do usuário incluso) ──────────── */
html:not([data-cedar-topbar-off]) .topbar .tb-modules .cedar-user-chip .cuc-btn { height: 34px; }

/* ─── 7 · iPad (toque): alvos de 40 px ───────────────────────────────────── */
@media (pointer: coarse), (max-width: 1280px) {
  html:not([data-cedar-topbar-off]) .topbar .tb-modules .tb-btn.tb-btn--module,
  html:not([data-cedar-topbar-off]) .topbar .tb-modules .cdr-viewas,
  html:not([data-cedar-topbar-off]) .topbar .tb-modules .cedar-user-chip .cuc-btn { height: 40px; }
  html:not([data-cedar-topbar-off]) .topbar .tb-modules .tb-btn.tb-btn--module { padding: 0 13px; }
}