/* ══════════════════════════════════════════════════════════════════════════════
   A MARCA MÃE NA EVOLUÇÃO (22/08/2026)

   Dr. André, com o iPhone na mão: *"no evolução não tem nada do nosso logo da marca mãe"*.
   E era literal: o produto não tinha anel, não tinha a palavra SOLONEXA, não tinha favicon,
   não tinha manifest e não tinha apple-touch-icon. O `marcaLockup()` do util.js escrevia
   "**Evolução** Inteligente da Saúde" em texto puro e só.

   ⚠️ Arquivo NOVO de propósito. O `plataforma.css` é o contrato visual compartilhado
   (COM-004: importar, nunca alterar local; mudança só por DEC) e o `panel.css` não é
   carregado pelo `index.html` — o questionário do paciente só puxa o plataforma. Regra de
   marca escrita em qualquer um dos dois deixaria uma das telas de fora.

   ⛔ A palavra SOLONEXA é MÁSCARA, não imagem: `mask` lê o canal ALFA do arquivo e quem dá
   cor é o `background-color`. Um arquivo sem alfa pinta um retângulo sólido, carrega 200 e
   não gera erro nenhum no console — só aparece na tela. Aqui a cor é `var(--texto)` porque
   o lockup fica sobre o fundo da página (no Conecta é `--superficie` porque lá ele fica
   sobre a barra verde). A proporção 75.40/628.61 é a caixa real do SVG.
   ══════════════════════════════════════════════════════════════════════════ */

.nx-lockup { display: inline-flex; align-items: center; gap: 8px; line-height: 1; }
.nx-lockup .nx-anel { width: 24px; height: 25px; flex: none; display: block; }
.nx-lockup .nx-palavra {
  width: 72px; height: calc(72px * 75.40 / 628.61); flex: none;
  background-color: var(--texto);
  -webkit-mask: url(../solonexa-palavra.svg) no-repeat center/contain;
          mask: url(../solonexa-palavra.svg) no-repeat center/contain;
}
.nx-lockup .nx-risco { width: 1px; height: 20px; flex: none; background: var(--borda); }
.nx-lockup .nx-produto { font-weight: 700; letter-spacing: -.2px; }
.nx-lockup .nx-desc { font-weight: 400; color: var(--texto-2); }

/* A barra do painel — a tela que ele fotografou. Aqui entra só a assinatura da marca mãe:
   o nome do produto já está no <title> e na tela toda, e a barra tem de caber os botões. */
.marca-barra { flex: none; }
.marca-barra .nx-produto, .marca-barra .nx-risco { display: none; }
.topbar-left { display: flex; align-items: center; gap: 12px; min-width: 0; }

/* ⛔ NO CELULAR O ANEL FICA. Foi exatamente este o erro cometido no Conecta em 22/08: a regra
   de celular escondia a assinatura INTEIRA, e o telefone abria o app sem sinal nenhum da marca
   mãe — que é o defeito que a mudança veio curar, nascendo de novo na tela onde ele mais
   trabalha. O anel É a marca. */

/* ══════════════════════════════════════════════════════════════════════════════
   24/08/2026 — A PALAVRA TAMBÉM FICA NO CELULAR (decisão do Dr. André)

   Até hoje esta barra escondia a palavra no telefone, e "em todo lugar no nosso sistema"
   não admite essa exceção justamente na tela que ele mais abre. O que segurava era largura:
   a `.topbar` do #paciente tem `overflow: visible` e **não rola de lado** — a receita do
   Conecta (`overflow-x:auto`, onde a palavra só empurra os controles) aqui não serve, porque
   o que sobra do lado de fora não volta: um botão simplesmente entra por baixo do outro.

   Conta medida a 390px (padding do celular = 14px de cada lado, `panel.css` no fim do arquivo):
     cabem 362px · anel 22 + gap 12 + "← Pacientes" 113 + gap 10 = 157 fixos.
   Com "☀ Claro" (82) e "⇄ Mesclar" (108) escritos sobram 15px — e a palavra pede 68 (62 + gap).
   ⚠️ Esconder só o "Claro" NÃO resolve: libera 38px (o botão vai de 82 para 44), não os ~48
   que a conta de cabeça sugere, e o "← Pacientes" acaba invadindo o ☀ em 15px a 390 e 30px a
   375. Medido, não estimado. Por isso **os dois rótulos** saem: com a palavra nos mesmos 62px
   que o questionário do paciente já mostra, sobram 43px de folga a 390px e 28px a 375px, e a
   barra continua com 63px de altura (conferido nas duas larguras, tema claro e escuro).

   ⛔ Os rótulos são ESCONDIDOS DA VISTA, não removidos: `clip-path` em vez de `display:none`
   mantém "Claro" e "Mesclar" no nome acessível dos botões (leitor de tela continua dizendo o
   que o ícone faz) e tira a largura do fluxo, porque `position:absolute` sai do flex — que é
   o que faz o `gap` de 6px do botão desaparecer junto. `display:none` daria a mesma largura
   e deixaria dois botões mudos.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .nx-lockup { gap: 6px; }
  .marca-barra .nx-anel { width: 22px; height: 23px; }
  .nx-lockup .nx-palavra { width: 62px; height: calc(62px * 75.40 / 628.61); }

  /* ⚠️ sem isto o "← Pacientes" quebra em duas linhas quando o espaço aperta, e a barra
     sobe de 63px para ~72px — a altura foi conferida depois: continua 63px. */
  #paciente .topbar .btn,
  #paciente .topbar .theme-toggle { white-space: nowrap; }

  #paciente .topbar #theme-label,
  #paciente .topbar .btn-rotulo {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
}