/* Barra — o teto do app. Proposta aprovada em docs/mockup-navbar.html.

   É a única peça deste sistema que atravessa a janela inteira. Tudo o mais é
   coluna de 1040px: a folha, o masthead, a régua. A barra não — teto vai de
   parede a parede.

   Isso não é enfeite, é o que resolve a geografia: a calha é fixed e ocupa a
   margem de topo a rodapé, então uma barra presa à coluna ficaria como uma ilha
   com duas portas abertas em cima dela. Indo de ponta a ponta, a barra fecha o
   topo e a calha começa abaixo dela — as duas param de disputar o mesmo canto.

   A barra nasceu sem navegar e passou a navegar em 13/10/2026 (proposta em
   docs/mockup-barra-atalhos.html). A calha continua sendo a travessia para a
   VIZINHA — a margem inteira clicável, com a folha estacionada dentro. O
   atalho é para a tela que não é vizinha: do Relatório a Pacientes eram três
   cliques na margem, e agora é um.

   Nas pontas ficam as duas coisas que não pertencem a tela nenhuma: a saída,
   que estava em seis mastheads disputando a fila de ações com "Novo cadastro"
   e com o navegador de semana, e a escolha de tema, que só existia como
   ferramenta de QA no /styleguide. Mais a marca, no canto de fora. */

:root { --barra-h: 52px; }

/* ── a barra ─────────────────────────────────────────────────────────────
   Superfície de folha sobre o gelo, fechada por régua forte embaixo: a mesma
   gramática do masthead, que também fecha com --line-strong o que está acima
   dele. Sem sombra — profundidade neste sistema é régua, e a única camada de
   verdade é o <dialog>.

   `sticky` e não `fixed`: no fluxo ela empurra a folha para baixo sozinha, sem
   ninguém ter de reservar 52px de padding no <body> e manter esse número em
   dois lugares. Fica no topo enquanto a fila rola, que é o dia inteiro.

   Três colunas, e as duas de fora iguais (1fr): é o que põe os atalhos no
   centro da JANELA, no prumo da folha, e não no centro do que sobra entre a
   marca e a saída, que têm larguras diferentes. */
.barra {
  position: sticky; top: 0; z-index: 3;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px;
  block-size: var(--barra-h);
  padding-inline: 22px;
  background: var(--surface);
  border-bottom: 1px solid var(--line-strong);
}

/* ── a marca ─────────────────────────────────────────────────────────────
   A mesma peça da porta (shared/_marca), deitada e pequena: quem já entrou não
   precisa do timbre em tamanho de papel oficial. O selo guarda o tique que sai
   da caixa — é o que faz a marca ser reconhecida — e o nome perde corpo para
   não competir com o <h1> da tela, que é o texto mais forte da coluna.

   É link para a raiz: o logo que volta para casa é convenção de trinta anos
   de web. */
.barra .marca {
  justify-self: start;
  grid-auto-flow: column; align-items: center; gap: 9px;
  text-decoration: none;

  & .marca-selo { inline-size: 22px; block-size: 22px; }
  & .marca-caixa { stroke-width: 2.5; }
  & .marca-tique { stroke-width: 5; }
  & .marca-nome { font-size: 15px; letter-spacing: -.02em; }
}

/* ── os atalhos ──────────────────────────────────────────────────────────
   As quatro telas do eixo, na ordem do eixo. O mesmo botão da saída
   (.btn--barra), e a tela em que se está no degrau secundário — o estado
   aceso mora em buttons.css, junto da variante. */
.barra-atalhos { display: flex; align-items: center; gap: 6px; }

/* ── a ponta de fora ─────────────────────────────────────────────────────
   Duas peças pequenas, lado a lado: o tema e a saída. Sem o nome de quem está
   logado — numa secretaria de duas pessoas, com o mesmo computador no balcão o
   dia inteiro, ele era um dado que ninguém lê e que ocupava a única faixa do
   app que precisa ficar calma. */
/* A coluna é dita, não deixada ao fluxo: no estreito os atalhos saem, e sem
   isto a ponta de fora escorregava para a coluna do meio. */
.barra-fim { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 12px; }

/* A saída fica na ponta pela mesma regra da fila de ações que a mandou para a
   ponta do masthead: quem sai sem decidir nunca disputa com quem avança. Ela
   tem fundo, como todo botão do app; o corpo menor é a variante .btn--barra,
   em buttons.css. */

/* ── o tema ──────────────────────────────────────────────────────────────
   Um botão só, com os dois ícones dentro; quem esconde um deles é o CSS. Ele
   mostra a AÇÃO e não o estado — no claro aparece a lua, no escuro o sol —, e é
   isso que deixa a peça nascer certa sem o servidor conhecer o tema do sistema
   operacional de quem abriu. Um par de botões com o estado aceso precisaria
   dessa informação no HTML, e ela só existe no cliente.

   O mesmo botão do "Sair" (.btn--barra), quadrado: sem rótulo, o padding de
   texto deixaria o ícone nadando. */
.barra .barra-tema {
  padding-inline: 9px;
  color: var(--ink-faint);

  &:hover { color: var(--ink); }

  & svg {
    inline-size: 16px; block-size: 16px;
    fill: none; stroke: currentColor; stroke-width: 1.7;
    stroke-linecap: round; stroke-linejoin: round;
  }
}

/* Qual ícone aparece segue a MESMA lógica dos tokens em colors.css: o
   prefers-color-scheme decide sozinho, e o data-theme no <html> — que o layout
   escreve a partir do cookie — tem a última palavra nos dois sentidos. Por isso
   o padrão é a lua (tema claro) e as duas regras abaixo a substituem pelo sol. */
.tema-sol { display: none; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    & .tema-sol { display: block; }
    & .tema-lua { display: none; }
  }
}

:root[data-theme="dark"] {
  & .tema-sol { display: block; }
  & .tema-lua { display: none; }
}

/* ── estreito ────────────────────────────────────────────────────────────
   Uma linha só em qualquer largura. Saem os atalhos — quatro rótulos não
   cabem ao lado da marca e da saída, e quem faz a travessia aqui é o
   .btn--travessia do masthead — e o nome da marca: o selo basta, o app é um
   só. O padding acompanha o da folha estreita. */
@media (max-width: 45rem) {
  .barra { padding-inline: 16px; gap: 14px; }

  .barra-atalhos { display: none; }

  .barra .marca-nome { display: none; }
}