/* =====================================================================
   PROTOCOLOS DO HOSPITAL (POP) — 2026-09-03
   Carregado DEPOIS dos tokens: usa var(--nt-*).

   Uma regra visual manda em tudo aqui: o TRECHO DO PROTOCOLO tem de PARECER
   uma citacao, e nao um texto que o sistema escreveu. Na Seiva IA a resposta
   e prosa gerada e sai em corpo normal; aqui o texto e copiado palavra por
   palavra de um documento assinado pela EMTN. Se os dois tiverem a mesma
   cara, o medico perde de vista quem esta falando — e essa distincao e o
   ponto inteiro da tela.

   Por isso a barra verde a esquerda, o fundo de papel e a serifada
   (Spectral, a mesma da marca): o desenho diz "isto foi transcrito", antes
   de qualquer palavra explicar.
   ===================================================================== */
.pop-trecho {
  margin: .6rem 0;
  padding: .75rem 1rem;
  border-left: 3px solid var(--nt-brand);
  background: var(--nt-panel2);
  border-radius: 0 var(--nt-r) var(--nt-r) 0;
  font-family: Spectral, Georgia, "Times New Roman", serif;
  color: var(--nt-ink);
  /* Protocolo tem paragrafo, recuo e lista: preservar a quebra e o que
     mantem o trecho parecido com a pagina impressa ao lado. */
  white-space: pre-wrap;
  /* 66 caracteres: a mesma medida de leitura das outras telas de texto
     (achado S5 da auditoria de design). Trecho de norma se le devagar. */
  max-width: 66ch;
  overflow-wrap: break-word;
}

/* O texto INTEIRO da pagina (dentro do <details> da tela de detalhe) pode ser
   longo: ganha rolagem propria para nao empurrar a pagina toda. */
details > .pop-trecho {
  max-height: 24rem;
  overflow-y: auto;
}

/* Cada achado da busca e um item REPETIDO (um por pagina que respondeu). A
   classe tambem e o que diz ao guarda de hierarquia (teste P1-A1) que os
   botoes daqui sao acao de linha, nao o primario da tela. */
.pop-achado + .pop-achado,
.pop-pagina + .pop-pagina { margin-top: 1rem; }

/* A imagem da pagina e a PROVA do trecho — mas nao pode ser o que domina a
   tela. Medido em 2026-09-03: sem teto, uma pagina A4 rasterizada a 1600 px
   renderizava com 1.230 px de altura, e um POP de tres paginas empilhava
   3.700 px de rolagem antes de qualquer botao.

   Entao ela e MINIATURA (reconhecer a pagina, ver o formato do fluxograma) e
   abre em tamanho real num clique — o link em volta aponta para o proprio PNG.

   A excecao e `.conferindo`: quando a descricao escrita pela IA esta
   esperando aprovacao, o teto sai. Esse e justamente o momento em que a
   pessoa precisa LER o desenho para dizer se a descricao bate; miniatura ali
   seria pedir uma conferencia que nao da para fazer. */
.pop-pagina img {
  display: block;
  margin: .5rem 0;
  /* Altura FIXA + proporcao de A4 retrato: com as duas, o navegador ja sabe o
     tamanho da miniatura ANTES de o PNG chegar. Sem isso a imagem ocupava
     2 px enquanto nao carregava (medido em 2026-09-03) e a pagina pulava
     debaixo do dedo a cada rolagem — com `loading=lazy`, que e o certo num
     POP de dezenas de paginas, isso acontecia o tempo todo.
     `object-fit: contain` e o que protege a pagina em paisagem: ela encaixa
     na caixa retrato sem deformar (fica com margem, nao esticada). */
  height: 30rem;
  aspect-ratio: 1 / 1.414;
  object-fit: contain;
  object-position: top center;
  width: auto;
  max-width: 100%;
  border: 1px solid var(--nt-line);
  border-radius: 8px;
  background: var(--nt-panel);
  cursor: zoom-in;
}

/* Na hora de conferir o fluxograma, a miniatura nao serve: e preciso LER o
   desenho para dizer se a descricao da IA bate com ele. Aqui a imagem sai
   em tamanho real. */
.pop-pagina.conferindo img {
  height: auto;
  aspect-ratio: auto;
  cursor: default;
}

/* =====================================================================
   AS DUAS AUTORIDADES, LADO A LADO  (2026-09-04)

   Esquerda: a norma DESTA casa. Direita: o que a literatura recomenda.
   A Seiva nao diz qual esta certa — decisao do medico, e a tela inteira
   depende de a diferenca ser VISIVEL sem ninguem explicar.

   Por isso as duas colunas nao podem ter a mesma cara. A esquerda cita um
   documento assinado: serifada, barra verde, texto preservado como na
   pagina. A direita e literatura: texto corrente, com o selo da sociedade
   e o ano. Se as duas parecessem iguais, o medico perderia de vista quem
   esta falando — e essa distincao E o produto.
   ===================================================================== */
.duas-autoridades {
  display: grid;
  /* A norma vem PRIMEIRO e um pouco mais larga: e a coluna que responde
     "o que eu faco aqui", e a literatura e o contraponto. */
  grid-template-columns: 1.15fr 1fr;
  gap: 1.25rem;
  align-items: start;
  margin-bottom: 1.5rem;
}

/* O fio entre as colunas: separa as duas autoridades sem virar caixa. */
.duas-autoridades > .coluna-literatura {
  border-left: 1px solid var(--nt-line);
  padding-left: 1.25rem;
}

.duas-autoridades h2 { margin-top: 0; }

/* O trecho da FICHA: texto corrente, sem a serifada nem a barra do POP.
   O contraste com `.pop-trecho` e proposital e e o ponto da tela. */
.ficha-trecho {
  font-size: .95rem;
  color: var(--nt-body);
  max-width: 62ch;
}

.ficha-achado + .ficha-achado { margin-top: 1rem; }

/* Uma coluna em tela estreita — e a NORMA fica em cima, porque a pergunta
   do plantao e "o que o meu hospital manda?" antes de "o que a ESPEN diz?".
   Como a ordem no HTML ja e essa, basta desmontar a grade. */
@media (max-width: 900px) {
  .duas-autoridades { grid-template-columns: 1fr; gap: .5rem; }
  .duas-autoridades > .coluna-literatura {
    border-left: 0;
    border-top: 1px solid var(--nt-line);
    padding-left: 0;
    padding-top: 1rem;
  }
}

/* Trecho que E TABELA (protocolo em Word — 2026-09-04).

   Texto corrido quebra linha; tabela, nao. Uma linha de tabela que quebra
   desalinha o cabecalho do valor, e era justamente para manter os dois juntos
   que a tabela deixou de virar paragrafo. Entao ela ROLA de lado, dentro do
   proprio bloco, e nunca empurra a pagina (a rolagem e do bloco, nao do
   corpo). */
.pop-trecho.tabela {
  white-space: pre;
  overflow-x: auto;
  max-width: 100%;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: .8rem;
  line-height: 1.7;
}