/* ===================================================================
   O CSS DO MOLDE DO APLICATIVO.

   O QUE ESTÁ AQUI E DE ONDE VEIO. Tudo isto era injetado pelo
   api/pagina.js como `<style>` dentro de CADA resposta — 4,1 KB de CSS
   repetidos em toda página aberta, sem cache, sem arquivo, sem como
   alguém editar sem mexer num arquivo de servidor. Era injetado porque
   precisava alcançar as páginas antigas sem reconstruí-las, e está
   escrito lá: "mexer no molde só alcança as páginas reconstruídas
   depois".

   Esse argumento acabou. Agora o molde É o servidor: não existe página
   com cabeçalho próprio para alcançar. Então o CSS volta a ser um
   arquivo, com cache de um ano como os outros assets.

   O QUE NÃO ESTÁ AQUI, de propósito: as regras de `.topbar`,
   `.layout`, `.book-card`, `.toc-card` e `.sessionbar`. Elas já moram
   em /assets/css/pqm-base.css desde a extração dos estilos, e o molde
   usa exatamente as mesmas classes — é isso que mantém o layout
   idêntico ao de antes. Repeti-las aqui seria criar a segunda cópia
   que aquele trabalho acabou de eliminar.
   =================================================================== */

/* ===================================================================
   PULAR PARA O CONTEÚDO.

   Não existia. Sem ele, quem navega por teclado atravessa a seta de
   voltar, o botão Materiais e o sumário inteiro — que em alguns
   capítulos tem catorze links — antes da primeira palavra do material.

   ELE APARECE AO RECEBER O FOCO, e não fica escondido fora da tela com
   `left:-9999px`: um link que nunca se vê é um link que ninguém sabe
   que existe, e a diretriz pede que o atalho seja visível quando
   focado. Fora de foco ele é recolhido com `transform`, que não o tira
   da ordem de leitura.
   =================================================================== */
.pqm-pular{
  position:fixed; top:0; left:50%; z-index:100000;
  transform:translate(-50%, -140%);
  background:#3a2318; color:#fff; text-decoration:none;
  font:700 14px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  padding:13px 20px; border-radius:0 0 11px 11px;
  box-shadow:0 2px 10px rgba(0,0,0,.3);
}
.pqm-pular:focus{ transform:translate(-50%, 0); }
/* O destino do atalho recebe foco por programa; ele não deve ganhar
   anel só por isso, e por isso o seletor é :focus e não :focus-visible
   — quem chega pelo teclado vê o anel do próprio link que clicou. */
#conteudo-principal:focus{ outline:none; }

/* ===================================================================
   O RÓTULO DO SUMÁRIO.

   Era um `<h4>Sumário</h4>` dentro do cartão da coluna da esquerda, e
   ele vinha ANTES do `<h1>` do material no documento — um h4 antes do
   h1, que para um leitor de tela é uma seção de quarto nível sem as
   três acima.

   Ele nunca foi um título: é o rótulo de uma navegação. Agora é um
   `<p>` que dá nome ao `<nav>` por `aria-labelledby`, com a mesma
   aparência que `.toc-card h4` tinha.
   =================================================================== */
.toc-card .toc-rotulo{
  margin:0 0 10px; font-size:11px; text-transform:uppercase;
  letter-spacing:.05em; color:var(--brown-500);
}

/* ===================================================================
   A DECLARAÇÃO DE FINALIDADE.

   Os 84px de margem embaixo eram um curativo, e o ferimento fechou: o
   botão "Materiais" ficava preso a 70px do fundo da janela e cobria as
   duas primeiras linhas desta frase no telefone. Ele saiu do rodapé e
   mora no cabeçalho; nada flutua mais sobre o fim da página.
   =================================================================== */
.pqm-declaracao{
  max-width:640px; margin:22px auto 30px; padding:0 20px;
  font:400 12.2px/1.62 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  color:#6b4432; opacity:.85; text-align:center;
}
@media print{ .pqm-declaracao{ color:#000; opacity:1; } }

/* ===================================================================
   A SETA DE VOLTAR.

   44px de altura, e não 34. Era um alvo de 34x34 num cabeçalho usado
   com pressa, com o telefone numa mão só. 44 é o piso que a diretriz
   de acessibilidade recomenda para toque, e cabe desde que a segunda
   seta de voltar — a que cada material trazia dentro de si — deixou de
   existir.
   =================================================================== */
#pqm-voltar{
  flex:none; display:inline-flex; align-items:center; justify-content:center;
  gap:7px; min-width:44px; height:44px; padding:0 12px;
  border:1px solid rgba(255,255,255,.34); border-radius:11px;
  color:#f7efe2; text-decoration:none; font-size:19px; line-height:1;
  background:transparent; -webkit-tap-highlight-color:transparent;
}
#pqm-voltar:hover{ background:rgba(255,255,255,.13); }
@media print{ #pqm-voltar{ display:none; } }

/* O NOME DA GAVETA SÓ APARECE ONDE CABE NA MESMA LINHA.

   Com ele no telefone, o cabeçalho passava de 92px para 118px: a seta
   nomeada (152px) mais o botão Materiais (102px) não cabiam ao lado do
   título em 390px, e o Materiais caía para uma segunda fila. Trocar
   duas voltas por um cabeçalho MAIS ALTO seria perder a aposta. No
   telefone fica só a seta, de 44px; o título da página está ali do
   lado dizendo onde a pessoa está. */
.pqm-voltar-nome{ display:none; }
@media (min-width:560px){
  .pqm-voltar-nome{
    display:inline;
    font:700 13px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
    max-width:30vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
}

/* ===================================================================
   O BOTÃO "MATERIAIS", NO CABEÇALHO.

   Ele nasceu flutuando no canto inferior esquerdo, sobre a página, e
   isso já custou caro uma vez: cobria a declaração de finalidade no pé
   de cada material. Agora mora no cabeçalho — e nasce lá, em vez de
   ser movido por um `setInterval` de 120ms que tentava trinta vezes
   porque a aba lateral podia chegar depois.

   O `position:static` anula o `fixed` que ele tem no estilo da aba
   lateral; o `margin-left:auto` o empurra para a direita, do outro
   lado da volta.
   =================================================================== */
#pqm-abrir-aba.pqm-no-topo{
  position:static; left:auto; bottom:auto;
  margin-left:auto; flex:none; height:44px; padding:0 14px;
  border-width:1px; border-color:rgba(255,255,255,.34);
  background:transparent; box-shadow:none; font-size:13px;
  display:inline-flex; align-items:center; gap:6px; border-radius:11px;
}
#pqm-abrir-aba.pqm-no-topo:hover{ background:rgba(255,255,255,.13); }
.pqm-mat-nome{ display:none; }
@media (min-width:560px){ .pqm-mat-nome{ display:inline; } }

/* ===================================================================
   O QUALIFICADOR DA MARCA SÓ APARECE ONDE NÃO CUSTA UMA FILEIRA.

   Medido nas 111 páginas, abrindo cada uma com e sem o qualificador e
   esperando a barra parar de mudar:

       561px    6 de 111 barras ganhavam uma fileira inteira
       768px   35 de 111
       900px   46 de 111
      1024px    0 de 111
      1280px    0 de 111

   Uma fileira é 58px de cabeçalho a mais numa tela consultada entre
   dois pacientes. Então o qualificador entra de 1024px para cima.
   =================================================================== */
@media (max-width:1023px){ header.topbar .t2-mais{ display:none; } }

/* ===================================================================
   A BARRA DO TOPO NO TELEFONE: o título ao lado do símbolo.

   Média antes: 149px de altura num iPhone, em QUATRO fileiras — seta e
   logo; título; subtítulo; botões. Um quinto da tela gasto antes da
   primeira palavra do material, em todas as páginas.

   A QUEBRA É DECIDIDA POR LARGURA MÍNIMA, e não forçada. Um piso de
   largura no bloco dos títulos resolve sem depender de elemento
   nenhum: o flex não pode espremer o título abaixo do piso, então ou
   os botões cabem na fileira, ou descem sozinhos.

   O TÍTULO CONTINUA INTEIRO, e pode ocupar duas linhas. Uma versão
   anterior o cortava com reticências para ganhar altura, e o
   teste_titulo.py reprovou na hora: "Troca Cruzada de Antidepressivos"
   e "Escala de Catatonia de Bush-Francis" apareceram cortados. Quem
   sobe o título para o lado do símbolo não é o nowrap: é o
   `flex-basis:0` do bloco.
   =================================================================== */
@media (max-width:560px){
  header.topbar{ padding:8px 12px; gap:10px; row-gap:7px; }
  header.topbar .topbar-titles{ flex:1 1 0%; min-width:150px; margin-right:0; }
  header.topbar .topbar-titles .t1{ max-width:none; font-size:14.5px; line-height:1.2; }
  header.topbar .topbar-titles .t2{ font-size:9.5px; line-height:1.3; }
  header.topbar .t2-mais{ display:none; }
  header.topbar .icon-btn{ padding:6px 11px; font-size:12px; }
}

/* ===================================================================
   A FAIXA DE 561 A 760px — O CABEÇALHO DE QUATRO FILEIRAS.

   MEDIDO, com a estrela e o Modo consulta na tela: 214px de cabeçalho a
   640px de largura. Quatro fileiras, num tablet em pé.

   A CAUSA NÃO É A ESTRELA, e vale dizer: a folha compartilhada manda
   `.topbar-titles{flex:1 1 100%}` até 760px — o título ocupa a fileira
   inteira, sozinho, e tudo o mais desce. Este arquivo já desfazia isso,
   mas só até 560px. Entre 561 e 760 ninguém desfazia, e o cabeçalho
   já custava 170px ANTES desta mudança. Acrescentar um botão de 44px
   numa fileira que já estava sobrando virou a quarta.

   NENHUM TESTE COBRIA ESSA FAIXA: o teste_cabecalho_e_toque mede 360,
   390 e 430. Por isso o defeito morou aí sem incomodar ninguém.

   A correção é estender o que já existia, e só isso: o título volta a
   dividir a fileira. O `min-width` de 200px é o que garante que ele
   continue INTEIRO — a regra do projeto é que título não se corta com
   reticências, e ela continua valendo: o que não couber quebra em duas
   linhas, dentro do bloco.
   =================================================================== */
@media (min-width:561px) and (max-width:760px){
  header.topbar .topbar-titles{ flex:1 1 0%; min-width:200px; }
}

/* ===================================================================
   AS AÇÕES DA PÁGINA — a estrela e o Modo consulta.

   Os dois botões saem da mesma primitiva (`botaoDeAcao`, no
   lib/componentes.js) e por isso têm uma regra só. O que estava errado,
   e está medido: escritos em lugares diferentes, nenhum dos dois tinha
   piso de toque. O do Modo consulta ficava com ~30px de altura, herdado
   de `.icon-btn` (`padding:8px 12px; font-size:12.5px`), e a estrela da
   gaveta, com 33 × 41px.

   O PISO VEM DO TOKEN, e não de um número escrito aqui: `--pqm-toque`
   mora no /pqm-tokens.css, ao lado da paleta. Um terceiro botão de
   cabeçalho o herda sem ninguém lembrar — que é a diferença entre um
   sistema e uma coleção de correções.

   `min-width` TAMBÉM, e não só altura: a WCAG 2.5.8 mede os dois lados,
   e no telefone o nome some (regra mais abaixo) deixando só o símbolo.
   Sem a largura mínima, o alvo viraria a caixa do glifo.
   =================================================================== */
header.topbar .pqm-acao{
  min-height: var(--pqm-toque, 44px);
  min-width: var(--pqm-toque, 44px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 12px;
}

/* A ESTRELA CHEIA É DOURADA, e a vazia é da cor dos outros botões do
   cabeçalho. A COR NÃO INFORMA SOZINHA: o glifo muda de ☆ para ★, o
   nome ao lado muda de "Favoritar" para "Favorito", e o `aria-pressed`
   muda — três sinais, e nenhum deles é cor.

   O dourado é o mesmo `--gold-500` dos favoritos na tela inicial; aqui
   ele vai sobre o marrom do cabeçalho, e não sobre creme, por isso o
   tom claro da dupla. */
header.topbar .pqm-fav[aria-pressed="true"] .pqm-acao-simbolo{
  color: var(--gold-500, #c8952f);
}

/* ENQUANTO NÃO SE SABE, O BOTÃO NÃO CONVIDA. `aria-disabled` e não
   `disabled`: ele continua focável e continua sendo anunciado, porque
   quem navega por teclado perderia o lugar se ele sumisse da ordem de
   tabulação por 250 ms. O que muda é a aparência e o rótulo. */
header.topbar .pqm-acao[aria-disabled="true"]{
  opacity: .62;
  cursor: default;
}

/* O RECADO DO FAVORITO — a confirmação discreta, sem modal.

   Ele nasce vazio e com altura zero; quando recebe texto, a classe
   `aparece` o abre. Não usa `display:none` porque uma região viva que
   nasce escondida não é observada por parte dos leitores de tela — o
   mesmo motivo pelo qual a região do Modo consulta nasce no HTML.

   `position:sticky` logo abaixo do cabeçalho, para a confirmação ser
   vista por quem já rolou a página antes de marcar. */
.pqm-fav-recado{
  position: sticky;
  top: var(--pqm-encaixe-topo, 76px);
  z-index: 140;
  margin: 0;
  max-height: 0;
  overflow: hidden;
  padding: 0 16px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--brown-800, #4a2c1d);
  background: var(--cream-100, #fbf6ec);
  border-bottom: 1px solid transparent;
  transition: max-height .18s ease, padding .18s ease;
}
.pqm-fav-recado.aparece{
  max-height: 72px;
  padding: 9px 16px;
  border-bottom-color: var(--tan-400, #e7d2b0);
}
/* A FALHA TEM COR PRÓPRIA E PALAVRA PRÓPRIA. A palavra é a que importa
   ("Não consegui gravar agora"); a cor é reforço, nunca o sinal. */
.pqm-fav-recado.ruim{
  color: var(--red-600, #b03a3a);
  background: var(--red-100, #f8e7e7);
}
@media (prefers-reduced-motion: reduce){
  .pqm-fav-recado{ transition: none; }
}

/* NO TELEFONE SOBRA O SÍMBOLO, e o nome vai para o rótulo acessível.

   É o mesmo corte que o Modo consulta já fazia a 520px, agora aplicado
   aos dois pela mesma regra. O `aria-label` continua dizendo a frase
   inteira ("Adicionar aos favoritos"), então nada se perde para quem
   usa leitor de tela — só para quem vê, e para quem vê o símbolo basta.

   520px e não 560: a essa largura o cabeçalho ainda cabe em duas
   fileiras com os dois nomes. Abaixo dela, não. */
@media (max-width:520px){
  header.topbar .pqm-acao .pqm-acao-nome{
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    clip: rect(0 0 0 0); clip-path: inset(50%);
    overflow: hidden; white-space: nowrap;
  }
  header.topbar .pqm-acao{ padding: 6px 10px; }
}

/* ===================================================================
   OS DOIS BANCOS DE QUESTÕES — as duas páginas que seguem legadas.

   Eles usam outra barra (.brand + .user-area) e medem 141 e 134px num
   iPhone. A saudação cabia em cinco fileiras: "Olá, Tomaz Eugenio de
   Abreu Silva" quebrava palavra por palavra ao lado do contador. E
   havia um segundo defeito, mais antigo: a fileira dessa área é
   `flex-wrap:nowrap` e soma 552px num telefone de 390 — o botão "Meu
   desempenho" ficava cortado na borda e a página rolava de lado.
   Estreitar a saudação sem soltar a quebra teria trocado cinco
   fileiras por um botão inalcançável. Por isso as regras andam juntas.

   Esconder a saudação no telefone foi tentado e MEDIDO: 141 para
   122px, e o teste_barra_topo reprovou. Estes bancos não têm a tarja
   de sessão do rodapé, então a saudação é o único lugar da tela que
   diz quem está logado. O teste estava certo.
   =================================================================== */
@media (max-width:560px){
  header.topbar .user-area{ flex-wrap:wrap; row-gap:8px; min-width:0; }
  .user-area .greeting{
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    min-width:0; max-width:100%;
  }
  .user-area .score-pill{ min-width:0; }
  /* E, já que a página parou de rolar de lado pela barra: o seletor de
     temas media 393px numa tela de 390 e mantinha a rolagem horizontal
     sozinho. Consertar só a barra teria deixado o sintoma no lugar e a
     causa parecendo outra. */
  select{ max-width:100%; box-sizing:border-box; }
}

/* ===================================================================
   O QUE AINDA VALE SÓ PARA AS DUAS PÁGINAS LEGADAS.

   Elas continuam trazendo a própria tela de login e o próprio botão de
   sair, porque a autenticação delas está entrelaçada com o motor do
   quiz (ver o LEGADOS do lib/fragmento.js). O adaptador marca o
   documento com `data-pqm-app`, e estas regras esconderem o que não
   faz sentido dentro do aplicativo.

   Nos 133 materiais migrados nada disto tem efeito: não há `#back-btn`
   nem `#logout-btn` no HTML para esconder.
   =================================================================== */
html[data-pqm-app] #logout-btn,
html[data-pqm-app] #btn-logout,
html[data-pqm-app] .logout{ display:none !important; }
html[data-pqm-app] #back-btn,
html[data-pqm-app] .back-link{ display:none !important; }
html[data-pqm-entrando] #login-screen,
html[data-pqm-entrando] #screen-login{ display:none !important; }
html[data-pqm-entrando] body::after{
  content:"Abrindo..."; position:fixed; inset:0; display:flex;
  align-items:center; justify-content:center;
  background:#faf6ee; color:#8a6650;
  font:400 15px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  z-index:99999;
  animation:pqmSurge .01s linear .45s both;
}
@keyframes pqmSurge{ from{ opacity:0; } to{ opacity:1; } }

/* ===================================================================
   AS PÁGINAS DE AVISO — "não encontrada", "sessão encerrada".

   Elas eram escritas à mão no api/pagina.js, com estilo em atributo
   `style="..."` em cada elemento, e eram o último lugar do projeto que
   abria um `<!doctype html>` fora do molde. Agora têm um documento como
   os outros e o estilo mora aqui.

   O QUE ELAS NÃO DIZEM: o detalhe técnico do erro. Antes a página de
   falha imprimia a mensagem do erro na tela — útil para quem escreveu
   o código, e para o resto é um nome de módulo no meio de uma frase em
   inglês. O detalhe vai para o log, onde serve.
   =================================================================== */
body.pqm-aviso-tela{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  background:#faf6ee; color:#3a2318;
  display:flex; align-items:center; justify-content:center;
  min-height:100vh; margin:0; padding:24px;
}
.pqm-aviso-caixa{
  max-width:460px; text-align:center; background:#fff;
  border:1px solid #e7d2b0; border-radius:16px; padding:28px;
}
.pqm-aviso-caixa h1{ font-family:Georgia,serif; font-size:20px; margin:0 0 10px; }
.pqm-aviso-caixa p{ font-size:14px; line-height:1.6; margin:0 0 18px; }
.pqm-aviso-botao{
  display:inline-block; background:#583323; color:#fff; text-decoration:none;
  padding:11px 20px; border-radius:10px; font-weight:600; font-size:14px;
}
.pqm-aviso-botao:hover{ background:#3a2318; }

/* A caixa de erro que o public/molde-app.js monta quando a abertura do
   material falha. Era HTML com estilo em atributo, montado por string
   dentro de cada um dos 130 arquivos. */
.pqm-erro-fatal{
  max-width:520px; margin:0 auto 28px; padding:28px 26px;
  background:#fbf6ec; border:1px solid #e7d2b0; border-radius:16px;
  text-align:center;
}
.pqm-erro-fatal h2{ margin-top:0; }
.pqm-erro-fatal p{ font-size:14px; line-height:1.6; }
.pqm-erro-fatal button{
  margin-top:10px; padding:10px 18px; border:none; border-radius:10px;
  background:#583323; color:#fff; font-weight:600; cursor:pointer;
}

/* ===================================================================
   O AVISO DE CÓPIA OFFLINE EM CONTEÚDO CLÍNICO.

   Quando o service worker entrega um material clínico da cópia
   guardada por falta de rede, ele injeta este bloco ANTES de tudo —
   antes do cabeçalho e do conteúdo. O médico tem de ler que está vendo
   uma versão offline antes de ler a dose.

   NÃO DEPENDE DE COR, e isso é regra e não gosto: a cor âmbar é o
   terceiro sinal, não o primeiro. Antes dela vêm o símbolo ⚠ (com
   aria-hidden, porque o texto já diz), o rótulo "Sem conexão — versão
   offline" em negrito, e a barra de 6px na borda esquerda. Quem não
   distingue a cor lê o rótulo; quem usa leitor de tela ouve o
   role="status" na ordem em que ele aparece, que é primeiro.

   CONTRASTE: #4a2f00 sobre #fff8e6 dá 11,68:1 — mais que o dobro do piso de
   4,5:1 da diretriz. O botão repete o par que o /aviso.css já usa e que
   o testes/teste_acessibilidade.cjs já mede.

   ELE NÃO SOME SOZINHO. Sai quando o botão "Tentar atualizar" conseguir
   buscar a versão da rede, e aí a página recarrega inteira. Um aviso
   que desaparece por tempo seria um aviso que mente depois de alguns
   segundos.
   =================================================================== */
.pqm-offline-clinico{
  border-left:6px solid #8a621c;
  background:#fff8e6;
  color:#4a2f00;
  padding:14px 18px 16px;
  margin:0;
  font:400 14.5px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}
.pqm-offline-titulo{
  margin:0 0 6px; font-weight:700; font-size:15px;
  display:flex; align-items:center; gap:8px;
}
.pqm-offline-simbolo{ font-size:18px; line-height:1; }
.pqm-offline-texto{ margin:0 0 8px; max-width:62ch; }
.pqm-offline-versao{
  margin:0 0 12px; font-size:12.8px; color:#5c3f12;
}
.pqm-offline-versao code{
  font:600 12.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  background:#f3e4c4; border-radius:5px; padding:2px 6px;
}
.pqm-offline-clinico button{
  font:700 14px/1 inherit; cursor:pointer;
  min-height:44px; padding:0 18px; border-radius:10px;
  border:1px solid #583323; background:#583323; color:#fff;
}
.pqm-offline-clinico button:hover{ background:#3a2318; }
.pqm-offline-clinico button[disabled]{ opacity:.7; cursor:default; }
.pqm-offline-falhou{
  margin:12px 0 0; font-weight:600; font-size:13.5px; color:#7a2e12;
}
/* NO PAPEL ELE FICA. Uma folha impressa de uma versão offline é uma
   folha que vai para o prontuário ou para a mão do paciente — e ela
   tem de dizer de quando é. O botão, que no papel não serve, sai. */
@media print{
  .pqm-offline-clinico button{ display:none; }
  .pqm-offline-clinico{ border-left-width:3px; background:#fff; color:#000; }
}

/* ===================================================================
   O AVISO DISCRETO DE VERSÃO NOVA.

   A tarja de "esta página foi atualizada" é a mesma — o que muda é a
   força, e a força vem da classe de cache da página
   (lib/cache_politicas.js). Em conteúdo de estudo ela entra menor e
   mais clara: a pessoa está estudando, e a diferença entre a versão de
   hoje e a de ontem num banco de questões não muda conduta nenhuma.

   Em conteúdo clínico ela continua como era, escura e no topo.
   =================================================================== */
#pqm-atualizou.pqm-discreto{
  background:#f3e4c4; color:#3a2318;
  font-size:12.3px; padding:7px 12px;
}
#pqm-atualizou.pqm-discreto button{
  min-height:30px; padding:6px 10px; font-size:12px;
  border-color:#3a2318; background:#3a2318; color:#f7efe2;
}
#pqm-atualizou.pqm-discreto #pqm-atualizou-nao{
  background:transparent; color:#3a2318;
}

/* ===================================================================
   A TABELA NÃO QUEBRA MAIS PALAVRA POR LETRA NO CELULAR.

   O DEFEITO, FOTOGRAFADO NUM iPHONE: na CIWA-Ar, a coluna "Escore
   total" saía assim —

       Es        M
       co        en
       re        or
       to        q
       tal       ue
                 10

   Medido a 390px: a tabela tem 282px, a primeira coluna ficou com 50px
   e a segunda com 232px.

   A CAUSA NÃO É A LARGURA, É UMA REGRA. O pqm-conteudo.css (e 98 folhas
   de página que copiaram o mesmo bloco) diziam, para TODA célula:

       overflow-wrap: anywhere; word-break: break-word;

   `anywhere` não é só "pode quebrar a palavra se faltar espaço": ele
   entra no cálculo do MIN-CONTENT do elemento. Com ele, a largura
   mínima de uma célula passa a ser a de UMA LETRA — e o algoritmo
   automático da tabela, que distribui a largura pelos mínimos, conclui
   que 50px bastam para "Menor que 10".

   `break-word` sozinho não faz isso: ele quebra a palavra que não cabe
   e NÃO mexe no mínimo. É a diferença entre "quebre se precisar" e
   "pode ficar deste tamanho".

   POR QUE A CORREÇÃO É AQUI, e não nas 98 folhas: elas são geradas, têm
   o hash do conteúdo no nome e são conferidas por SHA-256 pelo
   testes/teste_peso_das_paginas.cjs. Renomear 98 arquivos para trocar
   duas palavras seria 98 oportunidades de errar. O molde-app.css é
   ligado DEPOIS da folha da página (ver lib/molde_app.js), com a mesma
   especificidade — então ele vence por ordem de cascata, que é o
   mecanismo que a própria cascata oferece para isto.

   A PROSA CONTINUA COMO ESTÁ. Em parágrafo e lista, `anywhere` não
   causa dano: o bloco já ocupa a largura disponível, e o que ele evita
   é um nome de fármaco longo furando a tela. O estrago é específico de
   célula de tabela, onde o mínimo vira largura de coluna.

   E A TABELA LARGA CONTINUA ROLANDO DE LADO dentro do cartão: 425 das
   435 tabelas do acervo já vivem dentro de um `.pqm-rolo`, que tem
   `overflow-x:auto`. Sem a regra de baixo elas apertavam a coluna até a
   letra em vez de rolar — o recurso existia e estava sendo anulado.
   =================================================================== */
.book-content td,
.book-content th{
  overflow-wrap:break-word;
  word-break:normal;
}
/* O QUE EU NÃO FIZ, E POR QUE NÃO.

   Eu tinha acrescentado aqui um `display:block; overflow-x:auto` para
   as dez tabelas do acervo que não vivem dentro de um `.pqm-rolo` —
   uma rede de proteção contra a tela rolar de lado. Medi antes de
   deixar: a 390px, com a regra das células acima, NENHUMA das quinze
   páginas de tabela rola de lado. A rede não estava pegando nada, e
   `display:block` numa tabela a tira do algoritmo de tabela do
   navegador (a largura deixa de esticar, as colunas deixam de se
   alinhar entre as linhas). Regra que não resolve problema medido e
   muda o desenho de dez tabelas clínicas sai.

   Se um dia uma tabela nova furar a tela, o testes/roda_prioridades
   acusa — ele mede as 138 páginas em três larguras. */

/* ===================================================================
   "ABRINDO…" — A RESPOSTA AO TOQUE, E A MARCA SENDO DESENHADA.

   Medido antes: numa primeira abertura em 4G ruim, o HTML chega em
   0,5 s e a página fica pronta em 2,0 s. Nesse intervalo a tela
   anterior fica parada e o dedo toca de novo. Esta faixa aparece em
   120 ms — depois do tempo em que uma abertura instantânea já
   aconteceu, para não piscar na segunda visita, que o cache resolve em
   150 ms.

   NÃO É CORTINA. Uma faixa no alto, por cima do cabeçalho, com a
   página anterior legível por baixo: quem tocou errado continua vendo
   onde estava e o botão de voltar continua ali. Nada de overlay que
   impeça cancelar.

   O MOVIMENTO É O DA MARCA. Os 19 raios do leque entram um a um,
   varrendo da esquerda para a direita, em 1,1 s, e recomeçam. Não é um
   disco girando de biblioteca de componente: é o desenho da casa sendo
   traçado, que foi o que o Tomaz pediu. Cada raio tem `--i` escrito no
   próprio elemento pelo lib/marca_svg.js, e é esse número que escalona
   o atraso — sem um seletor por raio.
   =================================================================== */
.pqm-abrindo{
  position:fixed; top:0; left:0; right:0; z-index:100001;
  display:flex; align-items:center; gap:10px;
  padding:10px 14px;
  background:var(--brown-800, #4a2c1d); color:var(--cream-100, #fbf6ec);
  font-size:14px; line-height:1.3;
  box-shadow:0 2px 10px rgba(0,0,0,.25);
}
.pqm-abrindo .pqm-marca{ flex:0 0 auto; color:var(--cream-100, #fbf6ec); }
.pqm-abrindo-texto{ flex:1 1 auto; min-width:0; }
.pqm-abrindo-tentar{
  flex:0 0 auto; min-height:44px; padding:6px 12px; font-size:14px;
  font-family:inherit; cursor:pointer;
  border:2px solid var(--cream-100, #fbf6ec); border-radius:8px;
  background:transparent; color:var(--cream-100, #fbf6ec); font-weight:700;
}
.pqm-abrindo-falhou{ background:var(--red-600, #b03a3a); }

/* O desenho dos raios. `stroke-dasharray` em 100 cobre o maior raio do
   leque (37 unidades do viewBox), então cada linha nasce inteira
   escondida e é revelada do miolo para a borda. */
.pqm-marca-abrindo .pqm-marca-leque line{
  stroke-dasharray:100; stroke-dashoffset:100;
  animation:pqm-raio 1.1s linear infinite;
  animation-delay:calc(var(--i) * 0.045s);
}
@keyframes pqm-raio{
  0%   { stroke-dashoffset:100; }
  35%  { stroke-dashoffset:0; }
  85%  { stroke-dashoffset:0; }
  100% { stroke-dashoffset:100; }
}

/* MENOS MOVIMENTO: a marca aparece inteira e parada. O aviso continua
   sendo o texto, que é quem carrega a informação. */
@media (prefers-reduced-motion: reduce){
  .pqm-marca-abrindo .pqm-marca-leque line{
    animation:none; stroke-dashoffset:0;
  }
}

/* No papel, nada disto existe. */
@media print{ .pqm-abrindo{ display:none !important; } }

/* O recorte para leitor de tela, quando o modo-consulta.css não está na
   página: a região que anuncia "Abrindo…" existe em TODAS as páginas. */
.pqm-sr{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}

/* ===================================================================
   O FUNDO DECORATIVO NÃO DESCE PARA O CELULAR.

   MEDIDO: numa primeira abertura em 4G ruim, `fundo.jpg` são 65 KB dos
   ~200 KB que a página baixa DEPOIS do HTML — o maior arquivo da lista,
   maior que a logo, maior que qualquer script. Ele termina de chegar aos
   2,3 s, que é depois de a página já estar pronta.

   E ele é invisível no telefone: o `body::before` do pqm-base.css põe
   por cima um véu de 92% a 96% de creme. O que sobra é uma textura que
   não dá para ver numa tela de 390px — e que custa um terço do peso da
   abertura.

   No computador ele fica: lá a textura aparece, a tela é grande e a rede
   costuma ser outra. A regra é por largura, e não por "é celular":
   quem abre numa janela estreita no computador também não vê a textura.

   O navegador não baixa imagem de fundo cuja regra não vale — então
   isto não é "esconder depois de baixar": é não pedir.
   =================================================================== */
@media (max-width:760px){
  body{ background-image:none; }
}