/* ==========================================================================
   Seiva · Prontuário — CSS das 6 telas do redesenho
   --------------------------------------------------------------------------
   Censo · Cadastro/internação · Capa do prontuário · Internação (cockpit) ·
   Evolução diária · Gráfico clínico de tendência.

   COMO CARREGAR (base.html), sempre DEPOIS dos tokens:
     style.css → nutria-tokens.css → nutria-animacoes.css → seiva-ia.css
     → seiva-prontuario.css        <-- este arquivo, por último

   REGRAS DESTE ARQUIVO (não quebre nenhuma):
   1. Nenhuma cor nova. Toda cor é var(--nt-*) — a única exceção é `#fff`
      como TEXTO sobre --nt-brand / --nt-ok, que é exatamente o que
      nutria-tokens.css já faz nos botões. Se faltar um token, use o mais
      próximo — NÃO invente um hex, o tema escuro quebra.
   2. Classes em português, como no resto do projeto.
   3. Só ADICIONA classes novas. As poucas sobrescritas de classe existente
      estão na seção 10 e vêm comentadas com o motivo.
   4. Nada aqui depende de JavaScript. O seiva-prontuario.js é aprimoramento:
      sem ele a página continua inteira, legível e utilizável.
   5. Toque mínimo de 44 px em qualquer alvo no celular.
   ========================================================================== */


/* ==========================================================================
   0 · PEÇAS COMPARTILHADAS
   Usadas por mais de uma tela. Mantenha aqui para não duplicar.
   ========================================================================== */

/* --- cartão de métrica: rótulo em versalete + número grande + nota ------- */
.grade-metricas{
  display:grid; gap:11px;
  grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
  margin:0 0 16px;
}
.cartao-metrica{
  background:var(--nt-panel); border:1px solid var(--nt-line);
  border-radius:var(--nt-r); padding:13px 15px;
}
.cartao-metrica .rotulo-metrica{
  display:block; margin-bottom:7px;
  font-size:11px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--nt-muted);
}
.cartao-metrica .valor-metrica{
  display:flex; align-items:baseline; gap:7px;
  font-size:24px; font-weight:800; line-height:1;
  letter-spacing:-.02em; color:var(--nt-ink);
  font-variant-numeric:tabular-nums;
}
.cartao-metrica .valor-metrica .unidade{
  font-size:12px; font-weight:600; color:var(--nt-muted); letter-spacing:0;
}
.cartao-metrica .nota-metrica{
  margin:6px 0 0; font-size:12px; line-height:1.4;
  font-weight:500; color:var(--nt-muted);
}
/* estado da métrica: pinta só o NÚMERO, nunca o cartão inteiro */
.cartao-metrica.ok      .valor-metrica{ color:var(--nt-ok); }
.cartao-metrica.alerta  .valor-metrica{ color:var(--nt-alert); }
.cartao-metrica.risco   .valor-metrica{ color:var(--nt-risk); }
/* exceção: risco de SR é o único que pinta o cartão — é a informação que
   não pode ser perdida numa varredura rápida */
.cartao-metrica.destaque-risco{
  background:var(--nt-risk-soft); border-color:var(--nt-risk);
}
.cartao-metrica.destaque-risco .rotulo-metrica,
.cartao-metrica.destaque-risco .valor-metrica{ color:var(--nt-risk); }
.cartao-metrica.destaque-risco .nota-metrica{ color:var(--nt-body); }

/* --- barra de progresso fina (% da meta) -------------------------------- */
.barra-meta{
  display:block; height:5px; margin-top:4px; overflow:hidden;
  border-radius:3px; background:var(--nt-line2);
}
.barra-meta > span{ display:block; height:100%; background:var(--nt-brand); }
.barra-meta.ok     > span{ background:var(--nt-ok); }
.barra-meta.alerta > span{ background:var(--nt-gold); }
.barra-meta.risco  > span{ background:var(--nt-risk); }

/* --- selo de estado do dia (evoluído / pendente / só um bloco) ---------- */
.estado-dia{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12px; font-weight:700; line-height:1.4;
}
/* EXCECAO ao piso tipografico do S6 (2026-09-03): aqui o "texto" e um
   glifo so (o ✓ do dia evoluido) dentro de um circulo de tamanho fixo — e
   icone, nao palavra. Subir a fonte estouraria o circulo; quem carrega a
   informacao em palavras e o `.estado-dia` ao lado, que foi para 12 px. */
.estado-dia .marca-estado{
  flex:none; width:15px; height:15px; border-radius:50%;
  font-size:9.5px; font-weight:800; line-height:15px; text-align:center;
}
.estado-dia.completo{ color:var(--nt-ok); }
.estado-dia.completo .marca-estado{ background:var(--nt-ok-soft); color:var(--nt-ok); }
.estado-dia.parcial,
.estado-dia.pendente{ color:var(--nt-alert); }
.estado-dia.parcial  .marca-estado,
.estado-dia.pendente .marca-estado{ border:1.5px dashed var(--nt-gold); }

/* --- chip genérico de lista (listas clínicas, preferências, eventos) ----- */
.chips-lista{ display:flex; flex-wrap:wrap; gap:6px; margin:0; padding:0; list-style:none; }
.chips-lista .chip{
  display:inline-flex; align-items:center; gap:7px;
  padding:5px 12px; border-radius:20px;
  background:var(--nt-panel2); border:1px solid var(--nt-line);
  color:var(--nt-ink); font-size:12px; font-weight:600; line-height:1.4;
}
.chips-lista .chip .meta{ color:var(--nt-muted); font-weight:500; }
.chips-lista .chip .ponto-chip{ width:5px; height:5px; border-radius:50%; flex:none; }
.chips-lista .chip.gosta{ background:var(--nt-ok-soft); border-color:transparent; color:var(--nt-ok); }
.chips-lista .chip.gosta .ponto-chip{ background:var(--nt-ok); }
.chips-lista .chip.evita,
.chips-lista .chip.restricao{ background:var(--nt-risk-soft); border-color:transparent; color:var(--nt-risk); }
.chips-lista .chip.evita .ponto-chip,
.chips-lista .chip.restricao .ponto-chip{ background:var(--nt-risk); }
/* o × de remover só aparece no hover/foco — sem CRUD permanente na tela */
.chips-lista .chip .remover{
  opacity:0; border:0; background:none; padding:0 0 0 2px; cursor:pointer;
  color:var(--nt-muted); font-size:13px; line-height:1; box-shadow:none;
}
.chips-lista .chip:hover .remover,
.chips-lista .chip:focus-within .remover{ opacity:1; }
.chips-lista .chip .remover:hover{ color:var(--nt-risk); background:none; transform:none; }
/* "+ adicionar" tracejado: abre o campo, não fica um formulário aberto */
.chip-add{
  display:inline-flex; align-items:center; padding:5px 12px;
  border-radius:20px; border:1px dashed var(--nt-line); background:none;
  color:var(--nt-muted); font-size:12px; font-weight:700; line-height:1.4;
  text-decoration:none; box-shadow:none; cursor:pointer;
}
.chip-add:hover{
  border-color:var(--nt-brand); color:var(--nt-brand-text);
  background:none; filter:none; transform:none;
}

/* --- faixa de seção com bolinha (A/B/C/D da evolução) ------------------- */
.faixa-secao{
  display:flex; align-items:center; gap:11px; margin:0 0 12px;
}
.faixa-secao .letra{
  flex:none; width:22px; height:22px; border-radius:50%;
  background:var(--nt-brand-fundo); color:#fff;
  font-size:12px; font-weight:800; line-height:22px; text-align:center;
}
.faixa-secao.apoio .letra{ background:var(--nt-line); color:var(--nt-body); }
.faixa-secao h2{ margin:0; font-size:17px; letter-spacing:-.02em; }
.faixa-secao .nota-secao{ font-size:12.5px; font-weight:500; color:var(--nt-muted); }
.faixa-secao .regua{ flex:1; height:1px; background:var(--nt-line); }


/* ==========================================================================
   1 · CENSO  (pacientes/lista.html)
   Linha rica agrupada por setor. Não é cartão em grade: a comparação vertical
   ("quem está pior?") é o gesto do plantão e cartão a quebra.
   ========================================================================== */

/* --- números do plantão, no topo, separados por filete ------------------- */
.censo-numeros{
  display:flex; flex-wrap:wrap; align-items:stretch; gap:0; margin:0 0 14px;
}
.censo-numeros > div{
  display:flex; flex-direction:column; gap:3px;
  padding-right:22px; margin-right:22px; border-right:1px solid var(--nt-line2);
}
.censo-numeros > div:last-child{ padding-right:0; margin-right:0; border-right:0; }
.censo-numeros .n{
  font-size:24px; font-weight:800; line-height:1; letter-spacing:-.02em;
  color:var(--nt-ink); font-variant-numeric:tabular-nums;
}
.censo-numeros .n.alerta{ color:var(--nt-alert); }
.censo-numeros .n.risco{ color:var(--nt-risk); }
.censo-numeros .r{
  font-size:11px; font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; color:var(--nt-muted);
}

/* --- filtros como links (?filtro=…): funcionam sem JS e a URL é enviável -- */
.censo-filtros{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:0 0 14px; }
.censo-filtros .busca-censo{ flex:1 1 260px; min-height:40px; }
.filtro-pill{
  display:inline-flex; align-items:center; min-height:36px; padding:0 13px;
  border-radius:20px; border:1px solid var(--nt-line); background:var(--nt-panel);
  color:var(--nt-body); font-size:12px; font-weight:700;
  text-decoration:none; box-shadow:none;
}
.filtro-pill:hover{
  border-color:var(--nt-brand); color:var(--nt-brand-deep);
  background:var(--nt-panel); filter:none; transform:none;
}
/* SELECIONADO = fundo SUAVE, nunca verde cheio (achado S3, P1-A1,
   2026-09-03). O verde cheio e o degrau do PRIMARIO da tela; o chip so diz
   "e este o recorte que voce esta vendo". Com o fundo suave a contagem
   colorida (alerta/risco) volta a ser legivel: em cima do verde cheio ela
   tinha de virar branca e a informacao de cor se perdia. */
.filtro-pill.ativo{
  background:var(--nt-brand-soft); border-color:var(--nt-brand-soft-line);
  color:var(--nt-brand-deep); font-weight:800;
}
/* a contagem NAO usa opacity: o tom final vem do token, senao o contraste cai */
.filtro-pill .conta{ margin-left:5px; color:var(--nt-muted); }
.filtro-pill .conta.alerta{ color:var(--nt-alert); }
.filtro-pill .conta.risco{ color:var(--nt-risk); }
/* Sobre o fundo suave a COR da contagem sobrevive (era branca no verde
   cheio, e a informacao de alerta/risco se perdia) — medido no navegador,
   claro: alerta 4,77 e risco 4,80; escuro: alerta 7,72. Duas correcoes de
   contraste que a medicao pediu:
     · a contagem NEUTRA passa de --nt-muted (4,45 no claro, abaixo do AA)
       para --nt-body (6,67 no claro, 7,92 no escuro);
     · o risco NO ESCURO (--nt-risk #E4574B) dava 4,12 sobre o verde suave.
       So aqui ele clareia para #E86A5E (4,76). O token global nao foi
       tocado: ele e o vermelho de todo o app e foi escolhido no P0-1c. */
.filtro-pill.ativo .conta{ color:var(--nt-body); }
:root[data-theme="dark"] .filtro-pill.ativo .conta.risco{ color:#E86A5E; }

/* --- alternador de densidade (grava em localStorage, por usuário) --------
   A aparencia mora no componente `.seletor` (nutria-tokens.css) — este
   alternador foi o modelo dele. Aqui fica so o que e do censo: ele encosta
   na direita da faixa de filtros. */
.densidade{ margin-left:auto; }

/* --- cabeçalho de grupo (setor). Gruda no topo em listas longas. -------- */
.grupo-setor{ margin:0 0 22px; }
.grupo-setor > .cabeca-grupo{
  position:sticky; top:0; z-index:2;
  display:flex; align-items:baseline; gap:11px; margin:0 0 9px;
  padding:6px 0; background:var(--nt-bg);
}
.grupo-setor > .cabeca-grupo h2{ margin:0; font-size:15px; letter-spacing:-.01em; }
.grupo-setor > .cabeca-grupo .conta-grupo{ font-size:12px; font-weight:600; color:var(--nt-muted); }
.grupo-setor > .cabeca-grupo .regua{ flex:1; height:1px; background:var(--nt-line); }

/* --- a tabela do censo é um grid: colunas alinhadas entre os grupos ------
   Ordem das colunas: leito · paciente · dia · via/dieta · risco · meta · hoje · ação

   ARITMÉTICA — não mexa sem refazer a conta. A soma dos MÍNIMOS das oito
   trilhas (52+120+44+110+110+100+106+88 = 730) mais os sete vãos de 12 px
   (84) dá 814 px de largura mínima. O layout de grade só vale acima de
   1000 px (ver seção 9), então sobram ~186 px de folga para os `fr`
   crescerem. Se aumentar qualquer mínimo, some 814 de novo e confira que
   continua abaixo do breakpoint — senão a linha transborda e o `overflow`
   do container ESCONDE a última coluna (o botão Evoluir) em silêncio. */
.tabela-censo{
  background:var(--nt-panel); border:1px solid var(--nt-line);
  border-radius:var(--nt-r-lg); overflow:hidden;
}
.tabela-censo .cabecalho-censo,
.tabela-censo .linha-censo{
  display:grid; align-items:center; gap:12px;
  grid-template-columns:
    52px minmax(120px,1.5fr) 44px minmax(110px,1.3fr)
    minmax(110px,1.4fr) 100px 106px 168px;
}
/* Ultima coluna: os DOIS botoes da linha ("Prontuario" sempre, "Evoluir"
   enquanto o dia nao fecha — 2026-08-11). Ficam na mesma celula porque a
   linha e um grid de 8 colunas: um filho solto cairia para a linha de baixo.
   A coluna passou de 88 para 168 px para os dois caberem lado a lado. */
.linha-censo .acoes-censo{
  display:flex; align-items:center; justify-content:flex-end; gap:8px;
}
.tabela-censo .cabecalho-censo{
  padding:9px 16px; background:var(--nt-panel2);
  border-bottom:1px solid var(--nt-line);
  font-size:11px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--nt-muted);
}
.tabela-censo .linha-censo{
  padding:13px 16px; border-bottom:1px solid var(--nt-line2);
}
.tabela-censo .linha-censo:last-child{ border-bottom:0; }
.tabela-censo .linha-censo:hover{ background:var(--nt-hover); }

.linha-censo .leito{
  font-size:17px; font-weight:800; line-height:1;
  color:var(--nt-ink); font-variant-numeric:tabular-nums;
}
.linha-censo .paciente{ min-width:0; }
.linha-censo .paciente a{
  display:block; font-size:14px; font-weight:700; line-height:1.3;
  color:var(--nt-ink); text-decoration:none;
}
.linha-censo .paciente a:hover{ color:var(--nt-brand-text); }
.linha-censo .paciente .sub-linha{ font-size:12px; font-weight:500; color:var(--nt-muted); }
.linha-censo .dia{
  font-size:13px; font-weight:800; line-height:1;
  color:var(--nt-brand-deep); font-variant-numeric:tabular-nums;
}
.linha-censo .via .dieta{ display:block; font-size:12px; font-weight:500; color:var(--nt-body); }
.linha-censo .riscos{ display:flex; flex-wrap:wrap; gap:5px; }
.linha-censo .meta .pct{
  display:block; font-size:12.5px; font-weight:800; line-height:1.3;
  font-variant-numeric:tabular-nums;
}
.linha-censo .meta .pct.ok{ color:var(--nt-ok); }
.linha-censo .meta .pct.alerta{ color:var(--nt-alert); }
.linha-censo .meta .pct.risco{ color:var(--nt-risk); }
.linha-censo .meta .pct.sem{ color:var(--nt-muted); }
.linha-censo .acao-linha{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:36px; border-radius:10px; text-decoration:none;
  font-size:12px; font-weight:700;
}

/* etiqueta de via: NP/NE em destaque, VO neutra (a via invasiva é o que muda
   a conversa do plantão) */
.etiqueta-via{
  display:inline-flex; align-items:center; padding:2px 9px; margin-bottom:3px;
  border-radius:20px; font-size:12px; font-weight:800; line-height:1.7;
  background:var(--nt-panel2); border:1px solid var(--nt-line); color:var(--nt-body);
}
.etiqueta-via.np, .etiqueta-via.ne{
  background:var(--nt-brand-soft); border-color:transparent; color:var(--nt-brand-deep);
}

/* --- densidade compacta: 1 linha por paciente, ~38 px ------------------- */
.censo-compacto .tabela-censo .cabecalho-censo{ padding:7px 16px; }
.censo-compacto .tabela-censo .linha-censo{ padding:8px 16px; }
.censo-compacto .linha-censo .leito{ font-size:14px; }
.censo-compacto .linha-censo .paciente{ display:flex; align-items:baseline; gap:7px; }
.censo-compacto .linha-censo .paciente a{ display:inline; font-size:13px; }
.censo-compacto .linha-censo .paciente .sub-linha{ display:inline; font-size:12px; }
.censo-compacto .linha-censo .via{ display:flex; align-items:baseline; gap:7px; }
.censo-compacto .linha-censo .via .etiqueta-via{ margin-bottom:0; padding:1px 8px; font-size:12px; }
.censo-compacto .linha-censo .via .dieta{ display:inline; font-size:12px; }
.censo-compacto .linha-censo .meta{ display:flex; align-items:center; gap:7px; }
.censo-compacto .linha-censo .meta .pct{ display:inline; font-size:12px; }
.censo-compacto .linha-censo .meta .barra-meta{ flex:1; margin-top:0; height:4px; }
.censo-compacto .linha-censo .acao-linha{ min-height:30px; border-radius:9px; font-size:12px; }
.censo-compacto .estado-dia{ font-size:12px; }
.censo-compacto .estado-dia .marca-estado{ width:13px; height:13px; font-size:8.5px; line-height:13px; }


/* ==========================================================================
   2 · CADASTRO + INTERNAÇÃO  (pacientes/form.html, internacao_form.html)
   Três telas viram uma página com três blocos. Cada bloco é um <form> próprio
   com POST próprio — funciona sem JS; o servidor devolve o próximo aberto.
   ========================================================================== */

.passos{ display:flex; flex-wrap:wrap; align-items:center; gap:0; margin:0 0 14px; }
.passos .passo{ display:inline-flex; align-items:center; gap:9px; padding:0 16px; }
.passos .passo:first-child{ padding-left:0; }
.passos .passo:last-child{ padding-right:0; }
.passos .passo .bolha{
  width:22px; height:22px; border-radius:50%;
  background:var(--nt-line); color:var(--nt-muted);
  font-size:12px; font-weight:800; line-height:22px; text-align:center;
}
.passos .passo .nome-passo{ font-size:12.5px; font-weight:700; color:var(--nt-muted); }
.passos .passo.feito  .bolha{ background:var(--nt-ok); color:#fff; }
.passos .passo.feito  .nome-passo{ color:var(--nt-ok); }
.passos .passo.atual  .bolha{ background:var(--nt-brand-fundo); color:#fff; }
.passos .passo.atual  .nome-passo{ color:var(--nt-ink); }
.passos .risca{ width:26px; height:2px; border-radius:2px; background:var(--nt-line); }
.passos .risca.feita{ background:var(--nt-brand); }

/* --- os três blocos ----------------------------------------------------- */
.bloco-passo{
  background:var(--nt-panel); border:1px solid var(--nt-line);
  border-radius:var(--nt-r-lg); padding:20px 22px 22px; margin:0 0 14px;
}
.bloco-passo > .cabeca-bloco{ display:flex; align-items:center; gap:12px; margin-bottom:5px; }
.bloco-passo > .cabeca-bloco .bolha{
  flex:none; width:22px; height:22px; border-radius:50%;
  background:var(--nt-line); color:var(--nt-muted);
  font-size:12px; font-weight:800; line-height:22px; text-align:center;
}
.bloco-passo > .cabeca-bloco h2{ margin:0; font-size:17px; letter-spacing:-.02em; }
.bloco-passo > .explica{
  margin:0 0 17px; padding-left:34px; max-width:60ch;
  font-size:12.5px; line-height:1.55; color:var(--nt-muted); text-wrap:pretty;
}
.bloco-passo > .corpo-bloco{ padding-left:34px; }

/* concluído: colapsa em uma linha de resumo, com "Editar" */
.bloco-passo.concluido{
  padding:14px 18px; border-left:3px solid var(--nt-ok);
}
.bloco-passo.concluido .resumo-passo{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; flex-wrap:wrap;
}
.bloco-passo.concluido .resumo-passo .dados{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap; min-width:0;
}
.bloco-passo.concluido .resumo-passo .bolha{
  flex:none; width:22px; height:22px; border-radius:50%;
  background:var(--nt-ok); color:#fff;
  font-size:12px; font-weight:800; line-height:22px; text-align:center;
}
.bloco-passo.concluido .resumo-passo .nome{ font-size:15px; font-weight:800; color:var(--nt-ink); }
.bloco-passo.concluido .resumo-passo .detalhe{ font-size:13px; font-weight:500; color:var(--nt-body); }

/* ativo: filete e sombra */
.bloco-passo.ativo{
  border-color:var(--nt-brand); border-left:3px solid var(--nt-brand);
  box-shadow:var(--nt-shadow);
}
.bloco-passo.ativo > .cabeca-bloco .bolha{ background:var(--nt-brand-fundo); color:#fff; }

/* esperando: tracejado, apagado, sem campos */
.bloco-passo.espera{
  /* sem opacity: o tracejado e o titulo em --nt-muted ja dizem "espera" */
  background:var(--nt-panel2); border-style:dashed;
}
.bloco-passo.espera > .cabeca-bloco h2{ color:var(--nt-muted); }

/* --- grade de campos do bloco ------------------------------------------- */
.grade-campos-passo{
  display:grid; gap:12px;
  grid-template-columns:repeat(auto-fit, minmax(170px, 1fr));
}
.grade-campos-passo label{ display:block; }
.grade-campos-passo .rotulo-campo{
  display:flex; align-items:center; gap:9px; margin-bottom:6px;
  font-size:11px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--nt-muted);
}
.grade-campos-passo .rotulo-campo .opcional{
  font-size:12px; font-weight:500; letter-spacing:0;
  text-transform:none; color:var(--nt-muted);
}
.grade-campos-passo input,
.grade-campos-passo select{ width:100%; min-height:44px; }

/* --- "mais campos": o opcional não ocupa a tela de quem tem pressa ------ */
.mais-campos{
  border:1px solid var(--nt-line); border-radius:var(--nt-r);
  background:var(--nt-panel2);
}
.mais-campos > summary{
  padding:12px 15px; cursor:pointer; list-style:none;
  font-size:12.5px; font-weight:700; color:var(--nt-brand-text);
}
.mais-campos > summary::-webkit-details-marker{ display:none; }
.mais-campos > summary:hover{ background:var(--nt-hover); }
.mais-campos > .corpo{ padding:0 15px 15px; }

/* --- registro duplicado: diz QUEM é e oferece o caminho certo ----------- */
.erro-duplicado{
  background:var(--nt-risk-soft); border:1px solid var(--nt-risk);
  border-radius:var(--nt-r); padding:13px 15px; margin-top:12px;
}
.erro-duplicado .titulo-erro{
  margin-bottom:5px; font-size:12.5px; font-weight:800;
  line-height:1.4; color:var(--nt-risk);
}
.erro-duplicado p{ margin:0 0 11px; font-size:12.5px; line-height:1.55; color:var(--nt-body); }
input.campo-erro, select.campo-erro{
  border-color:var(--nt-risk); background:var(--nt-risk-soft);
}
input.campo-erro:focus{ box-shadow:0 0 0 3px var(--nt-risk-soft); }


/* ==========================================================================
   3 · CAPA DO PRONTUÁRIO  (pacientes/ficha.html)
   ========================================================================== */

/* --- a alergia saiu daqui (Redline Ficha, decisão D2 — 2026-09-04) ------
   Havia aqui o bloco vermelho de alertas permanentes (`.alertas-permanentes`,
   `.cartao-alerta`) e o quadro tracejado do "ninguém perguntou"
   (`.sem-alergia`): 198 px no computador e 243 no celular, com um formulário
   dentro, ANTES do nome do paciente. A alergia agora é uma pílula de 26 px na
   faixa do paciente — a mesma que a internação já usava —, e os três estados
   continuam existindo: registrada (pílula vermelha), "nega alergias" (sem
   pílula; o cartão "Alergias" diz que alguém perguntou) e "ninguém perguntou"
   (pílula âmbar). As regras da pílula estão na seção 4 (`.alertas-paciente`);
   as do cartão, na seção 14. */

/* --- lembrança afetiva: a única voz em Spectral do sistema -------------- */
.lembranca{
  background:var(--nt-brand-soft); border:1px solid var(--nt-brand-soft-line);
  border-left:4px solid var(--nt-brand); border-radius:var(--nt-r-lg);
  padding:18px 22px 19px; margin:0 0 16px;
}
.lembranca .texto{
  margin:0 0 10px; max-width:54ch;
  font-family:Spectral, Georgia, serif; font-style:italic;
  font-size:19px; line-height:1.55; color:var(--nt-brand-deep);
  text-wrap:pretty;
}
/* vazia: tracejada e apagada, com o convite */
.lembranca.vazia{
  background:var(--nt-panel); border:1px dashed var(--nt-brand-soft-line);
  border-left:4px solid var(--nt-brand-soft-line);
}
.lembranca.vazia .texto{ color:var(--nt-muted); font-size:15px; }

/* --- linha do tempo de internações -------------------------------------- */
.linha-internacoes{ display:flex; flex-direction:column; }
.linha-internacoes .item{ display:flex; gap:15px; }
.linha-internacoes .fio{
  flex:none; width:11px; display:flex; flex-direction:column;
  align-items:center; padding-top:5px;
}
.linha-internacoes .fio .marcador{
  flex:none; width:9px; height:9px; border-radius:50%;
  background:var(--nt-line); border:2px solid var(--nt-panel);
  box-shadow:0 0 0 1px var(--nt-line);
}
.linha-internacoes .item.ativa .fio .marcador{
  width:11px; height:11px; border:0;
  background:var(--nt-brand); box-shadow:0 0 0 4px var(--nt-brand-soft);
}
.linha-internacoes .fio .risca{ flex:1; width:2px; margin-top:5px; background:var(--nt-line); }
.linha-internacoes .item:last-child .fio .risca{ display:none; }
.linha-internacoes .conteudo-item{
  flex:1; min-width:0; display:block; margin-bottom:12px;
  padding:12px 16px; border:1px solid var(--nt-line);
  border-radius:var(--nt-r); text-decoration:none;
}
.linha-internacoes .conteudo-item:hover{ background:var(--nt-hover); }
.linha-internacoes .item.ativa .conteudo-item{
  background:var(--nt-brand-soft); border-color:var(--nt-brand-soft-line);
}
.linha-internacoes .item.ativa .conteudo-item:hover{ border-color:var(--nt-brand); }
.linha-internacoes .periodo{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:5px;
  font-size:13.5px; font-weight:700; line-height:1.2; color:var(--nt-ink);
}
.linha-internacoes .item.ativa .periodo{ font-size:14.5px; color:var(--nt-brand-deep); }
/* --nt-muted sobre --nt-brand-soft dava 4,45; o tom de corpo da 6,67. */
.linha-internacoes .onde{ font-size:12px; font-weight:500; color:var(--nt-body); }
.linha-internacoes .diagnostico{
  margin:0; font-size:12.5px; line-height:1.55; color:var(--nt-body); text-wrap:pretty;
}
.linha-internacoes .item.ativa .diagnostico{ font-size:13px; color:var(--nt-brand-deep); }

/* --- medicação: etiqueta diz o efeito sobre a TN, não sobre a doença ---- */
.linha-medicacao{
  display:flex; align-items:flex-start; gap:14px; flex-wrap:wrap;
  padding:12px 14px; margin-bottom:8px;
  border:1px solid var(--nt-line); border-radius:var(--nt-r);
  background:var(--nt-panel2);
}
.linha-medicacao .nome-med{ flex:1 1 190px; min-width:0; }
.linha-medicacao .nome-med strong{ display:block; font-size:14px; font-weight:700; line-height:1.3; color:var(--nt-ink); }
.linha-medicacao .nome-med .posologia{ display:block; font-size:12px; font-weight:500; line-height:1.4; color:var(--nt-muted); }
.linha-medicacao .tags-aporte{ display:flex; flex-wrap:wrap; gap:6px; flex:1 1 auto; }


/* ==========================================================================
   4 · INTERNAÇÃO — COCKPIT  (pacientes/internacao_detalhe.html)
   ========================================================================== */

/* --- cabeçalho do paciente: 3 linhas, grudado no topo ------------------- */
/* Acabamento pedido pelo médico (2026-09-04, noite): a faixa era um painel de
   cantos retos, só com a linha de baixo, e as letras encostavam na borda —
   "parece faltar refino". Vira o mesmo cartão dos outros blocos da casa
   (`.cartao`, `.bloco`): raio grande, filete nos quatro lados, respiro de
   22 px entre a linha e as letras e a sombra-padrão dos tokens, que dá a
   profundidade sem pesar. Grudada ao rolar, fica 10 px abaixo do topo, como
   um cartão que flutua sobre o conteúdo — e não como uma barra colada. O
   componente é compartilhado: internação e evolução ganham o mesmo
   acabamento (nada muda no HTML). */
.cabeca-paciente{
  position:sticky; top:10px; z-index:5;
  margin:0 0 22px; padding:8px 22px 0;
  background:var(--nt-panel);
  border:1px solid var(--nt-line); border-radius:var(--nt-r-lg);
  box-shadow:var(--nt-shadow);
}
/* encolhida (ao rolar), o respiro de cima sai: a linha única já tem o seu */
.cabeca-paciente.encolhida{ padding-top:0; }
/* Duas COLUNAS, sem quebrar (P1-A1, 2026-09-03): a identidade cresce e as
   ações ficam encostadas à direita, alinhadas ao topo. Com `flex-wrap:wrap`
   um nome longo empurrava a caixa de ações para a linha de baixo, e o
   "Editar internação" aparecia sozinho sob o nome, parecendo a ação
   principal da tela — o oposto do que ele é. */
.cabeca-paciente > .linha-identidade{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:20px; flex-wrap:nowrap; padding:14px 0 0;
}
.cabeca-paciente .identidade{
  display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  flex:1 1 auto; min-width:0;
}
/* a coluna da direita encosta na borda e alinha pelo TOPO; se faltar
   espaço ela empilha dentro de si mesma, sem devolver o botão para debaixo
   do nome (que era o defeito corrigido acima). */
.cabeca-paciente > .linha-identidade > .acoes{
  flex:0 1 auto; display:flex; align-items:flex-start; justify-content:flex-end;
  gap:9px; flex-wrap:wrap; margin:0;
}
/* cada acao inteira ou nada: quem quebra e a CAIXA (uma acao por linha),
   nunca o rotulo no meio ("Editar / internação" em duas linhas) */
.cabeca-paciente > .linha-identidade > .acoes > *{ flex:none; white-space:nowrap; }
.cabeca-paciente .identidade h1{
  margin:0; font-size:26px; line-height:1.1; letter-spacing:-.03em;
}
.cabeca-paciente .identidade .idade-sexo{ font-size:14px; font-weight:600; line-height:1.3; color:var(--nt-body); }
.cabeca-paciente .identidade .separador{ display:inline-block; width:1px; height:14px; background:var(--nt-line); }
.cabeca-paciente .identidade .leito{ font-size:14px; font-weight:700; line-height:1.3; color:var(--nt-ink); }
.cabeca-paciente .identidade .unidade{ font-size:13.5px; font-weight:500; line-height:1.3; color:var(--nt-muted); }

/* contador de dia da internação — o "D9" */
.selo-dia{
  display:inline-flex; align-items:center; gap:6px;
  padding:3px 11px; border-radius:20px;
  background:var(--nt-brand-soft); border:1px solid var(--nt-brand-soft-line);
  color:var(--nt-brand-deep); font-size:12px; font-weight:800; line-height:1.5;
}

/* linha 2: via em curso, peso, meta de ontem, estado da ficha de hoje */
.cabeca-paciente > .linha-contexto{
  display:flex; align-items:center; gap:0; flex-wrap:wrap; padding:12px 0 0;
}
.cabeca-paciente > .linha-contexto > div{
  display:flex; flex-direction:column; gap:2px;
  padding-right:20px; margin-right:20px; border-right:1px solid var(--nt-line2);
}
.cabeca-paciente > .linha-contexto > div:last-child{ padding-right:0; margin-right:0; border-right:0; }
.cabeca-paciente > .linha-contexto .r{
  font-size:11px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--nt-muted);
}
.cabeca-paciente > .linha-contexto .v{
  font-size:13.5px; font-weight:700; line-height:1.3;
  color:var(--nt-ink); font-variant-numeric:tabular-nums;
}
.cabeca-paciente > .linha-contexto .v .fraco{ font-weight:500; color:var(--nt-body); }
.cabeca-paciente > .linha-contexto .v.alerta{ color:var(--nt-alert); }

/* linha 3: alertas do paciente, em pílulas */
.alertas-paciente{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:11px 0 13px;
}
.alertas-paciente .pilula{
  display:inline-flex; align-items:center; gap:7px;
  padding:4px 12px; border-radius:20px;
  font-size:12px; font-weight:700; line-height:1.55;
}
.alertas-paciente .pilula .ponto{ width:6px; height:6px; border-radius:50%; }
.alertas-paciente .pilula.risco{ background:var(--nt-risk-soft); color:var(--nt-risk); }
.alertas-paciente .pilula.risco .ponto{ background:var(--nt-risk); }
.alertas-paciente .pilula.alerta{ background:var(--nt-gold-soft); color:var(--nt-alert); }
.alertas-paciente .pilula.alerta .ponto{ background:var(--nt-gold); }

/* encolhido (após ~120 px de rolagem; classe posta pelo JS) */
.cabeca-paciente.encolhida > .linha-contexto,
.cabeca-paciente.encolhida .alertas-paciente .pilula:nth-child(n+3){ display:none; }
.cabeca-paciente.encolhida > .linha-identidade{ padding-top:10px; }
.cabeca-paciente.encolhida .identidade h1{ font-size:18px; }
.cabeca-paciente.encolhida .alertas-paciente{ padding:0 0 8px; }
/* O botão que abre e fecha a faixa só existe no celular (bloco de 900 px,
   abaixo): no computador a faixa encolhe ao rolar e volta ao subir, e não há
   o que alternar. Nasce `hidden` no template; o JS o revela ao assumir. */
.cabeca-paciente .alternar-cabeca{ display:none; }

/* --- navegação por âncoras (NÃO abas: o conteúdo continua na página) ---- */
/* As âncoras atravessam o cartão de lado a lado (margem negativa contra o
   respiro de 22 px) e o primeiro rótulo alinha com o nome acima:
   −22 + 10 de padding + 12 do próprio rótulo = 0. Os cantos de baixo do
   cartão recortam a barra de rolagem horizontal que existe no celular. */
.nav-prontuario{
  display:flex; align-items:center; gap:2px; overflow-x:auto;
  margin:0 -22px; padding:0 10px; border-top:1px solid var(--nt-line2);
  border-radius:0 0 var(--nt-r-lg) var(--nt-r-lg);
}
.nav-prontuario a{
  padding:11px 12px 10px; white-space:nowrap; text-decoration:none;
  border-bottom:2px solid transparent;
  font-size:12.5px; font-weight:600; color:var(--nt-muted);
}
.nav-prontuario a:hover{ color:var(--nt-ink); }
.nav-prontuario a.atual{ border-bottom-color:var(--nt-brand); color:var(--nt-ink); font-weight:700; }

/* --- linha do tempo das evoluções (chips D1…Dn) ------------------------- */
.linha-tempo{
  background:var(--nt-panel); border:1px solid var(--nt-line);
  border-radius:var(--nt-r-lg); padding:16px 18px 14px;
  overflow-x:auto; margin:0 0 13px;
}
.linha-tempo .trilho{ display:flex; align-items:flex-end; gap:7px; min-width:min-content; }
.linha-tempo .dia-item{
  flex:none; width:62px; display:flex; flex-direction:column;
  align-items:center; gap:7px;
}
.linha-tempo .dia-item.hoje{ width:74px; }
.linha-tempo .marco{
  height:13px; font-size:11px; font-weight:700; letter-spacing:.1em;
  line-height:1; text-transform:uppercase; color:var(--nt-brand-text);
}
.linha-tempo .marco.alerta{ color:var(--nt-alert); }
.linha-tempo .marco.risco{ color:var(--nt-risk); }
.chip-dia{
  width:100%; padding:9px 0 8px; border-radius:10px; text-align:center;
  text-decoration:none; font-size:13px; font-weight:700; line-height:1;
  border:1px solid var(--nt-line); background:var(--nt-panel2); color:var(--nt-body);
}
.chip-dia:hover{ border-color:var(--nt-brand); }
/* O chip de dia com marco herdava o tamanho de `.linha-tempo .marco` (mesma
   especificidade, e aquela vem antes): ficava com a fonte do RÓTULO em vez da
   fonte do chip. Com 9,5 px passava despercebido; no piso do S6 (11 px) ficou
   evidente que o chip é um alvo de clique com data, não um rótulo em caixa
   alta — e por isso volta aos 13 px dos irmãos. */
.chip-dia.marco{
  font-size:13px;
  height:auto; letter-spacing:0; text-transform:none;
  border-color:var(--nt-brand-soft-line); background:var(--nt-brand-soft);
  color:var(--nt-brand-deep); font-weight:800;
}
.chip-dia.intercorrencia{
  border-color:var(--nt-gold); background:var(--nt-gold-soft);
  color:var(--nt-alert); font-weight:800;
}
.chip-dia.cancelada{
  border:1px dashed var(--nt-risk); background:none;
  color:var(--nt-risk); text-decoration:line-through;
}
.chip-dia.hoje{
  border-color:var(--nt-brand); background:var(--nt-brand-fundo); color:#fff;
  font-weight:800; box-shadow:0 8px 18px -10px var(--nt-brand);
}
.linha-tempo .data-dia{ font-size:12px; font-weight:500; line-height:1; color:var(--nt-muted); }
.linha-tempo .data-dia.alerta{ font-weight:700; color:var(--nt-alert); }

/* --- evolução como cartão de leitura (substitui a linha de tabela) ------ */
.cartao-evolucao{
  display:block; padding:14px 16px; margin-bottom:9px; text-decoration:none;
  background:var(--nt-panel); border:1px solid var(--nt-line);
  border-radius:var(--nt-r);
}
.cartao-evolucao:hover{ background:var(--nt-hover); }
.cartao-evolucao.hoje{ border-left:3px solid var(--nt-brand); }
/* Sem opacity (P2-F3): .9 rebaixava o cartao inteiro — data, autor e resumo
   caiam a 4,24 e a pilula "Cancelada" a 4,16. Quem diz que a ficha esta
   cancelada e a BORDA TRACEJADA, o risco na data e a propria pilula. */
.cartao-evolucao.cancelada{ border:1px dashed var(--nt-risk); }
.cartao-evolucao .cabeca-evo{
  display:flex; align-items:center; gap:11px; flex-wrap:wrap; margin-bottom:7px;
}
.cartao-evolucao .cabeca-evo .quando{ font-size:14px; font-weight:800; line-height:1.2; color:var(--nt-ink); }
.cartao-evolucao.cancelada .cabeca-evo .quando{ color:var(--nt-muted); text-decoration:line-through; }
.cartao-evolucao .cabeca-evo .quem{ font-size:12px; font-weight:500; color:var(--nt-muted); }
.cartao-evolucao .resumo-evo{
  margin:0; font-size:13px; line-height:1.6; color:var(--nt-body); text-wrap:pretty;
}
.cartao-evolucao.cancelada .resumo-evo{ color:var(--nt-muted); }

/* --- terapias em curso: cartões com contador de dias -------------------- */
.grade-terapias{
  display:grid; gap:11px; margin:0 0 13px;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
}
.cartao-terapia{
  background:var(--nt-panel); border:1px solid var(--nt-line);
  border-left:3px solid var(--nt-line); border-radius:var(--nt-r);
  padding:13px 15px;
}
/* filete verde quando há alerta de tempo ligado a esta terapia */
.cartao-terapia.com-alerta{ border-left-color:var(--nt-brand); }
.cartao-terapia .topo-terapia{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:10px; margin-bottom:5px;
}
.cartao-terapia .tipo-terapia{
  font-size:11px; font-weight:700; letter-spacing:.13em; line-height:1;
  text-transform:uppercase; color:var(--nt-muted);
}
.cartao-terapia.com-alerta .tipo-terapia{ color:var(--nt-brand-text); }
.cartao-terapia .dias-terapia{
  font-size:12px; font-weight:800; line-height:1;
  color:var(--nt-ink); font-variant-numeric:tabular-nums;
}
.cartao-terapia .descricao-terapia{
  margin-bottom:4px; font-size:14.5px; font-weight:700; line-height:1.35; color:var(--nt-ink);
}
.cartao-terapia .desde{ font-size:12px; font-weight:500; line-height:1.4; color:var(--nt-muted); }

/* o formulário de registrar some até ser chamado */
.form-recolhido{
  background:var(--nt-panel); border:1px solid var(--nt-line);
  border-radius:var(--nt-r); margin:0 0 13px;
}
.form-recolhido > summary{
  padding:12px 16px; cursor:pointer; list-style:none;
  font-size:13px; font-weight:700; color:var(--nt-brand-text);
}
.form-recolhido > summary::-webkit-details-marker{ display:none; }
.form-recolhido > summary:hover{ background:var(--nt-hover); }
.form-recolhido > .corpo{ padding:0 16px 16px; }

/* --- linha de exame: FECHADA já informa (valor, situação, Δ, ontem) ----- */
.linha-exame > summary{
  display:flex; align-items:center; gap:16px; padding:11px 15px;
  cursor:pointer; list-style:none;
}
.linha-exame > summary::-webkit-details-marker{ display:none; }
.linha-exame > summary:hover{ background:var(--nt-hover); }
.linha-exame .identificacao{ flex:1 1 auto; min-width:0; }
.linha-exame .nome-exame{ display:block; font-size:13.5px; font-weight:700; line-height:1.3; color:var(--nt-ink); }
.linha-exame .cat-ref{ display:block; font-size:12px; font-weight:500; line-height:1.4; color:var(--nt-muted); }
.linha-exame .mini-grafico{ flex:none; width:132px; height:34px; }
.linha-exame .resumo-exame{
  flex:none; display:flex; align-items:center; gap:10px;
  min-width:210px; justify-content:flex-end;
}
.linha-exame .valor-exame{
  font-size:15px; font-weight:800; line-height:1;
  color:var(--nt-ink); font-variant-numeric:tabular-nums;
}
.linha-exame .valor-exame .unidade{ font-size:12px; font-weight:600; color:var(--nt-muted); }
/* direção do laboratório: BAIXO frio (info), ALTO quente (warm) — regra do
   design system, já nos tokens. NÃO troque por vermelho. */
.linha-exame .valor-exame.baixo{ color:var(--nt-info); }
.linha-exame .valor-exame.alto{ color:var(--nt-warm); }
.linha-exame .delta{ font-size:12px; font-weight:700; line-height:1; font-variant-numeric:tabular-nums; }
.linha-exame .delta.sobe{ color:var(--nt-ok); }
.linha-exame .delta.desce{ color:var(--nt-risk); }
.linha-exame .ontem{ font-size:12px; font-weight:500; line-height:1; color:var(--nt-muted); }
.linha-exame .corpo-exame{ padding:4px 15px 15px; border-top:1px solid var(--nt-line2); }


/* ==========================================================================
   5 · EVOLUÇÃO DIÁRIA  (evolucao/detalhe.html)
   Três faixas na ordem do plantão: A como está · B o que mudou · C o que eu
   decido. Papel troca a ORDEM das faixas, nunca o conteúdo.
   ========================================================================== */

.selo-bloco{
  display:inline-flex; align-items:center; gap:7px;
  font-size:12px; font-weight:600; line-height:1.4; color:var(--nt-body);
}
/* EXCECAO ao piso do S6: o ✓ do bloco assinado, glifo unico em circulo
   fixo (ver `.estado-dia .marca-estado`). */
.selo-bloco .marca{
  flex:none; width:16px; height:16px; border-radius:50%;
  font-size:10px; font-weight:800; line-height:16px; text-align:center;
}
.selo-bloco .categoria{
  font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:var(--nt-muted);
}
.selo-bloco.assinado .marca{ background:var(--nt-ok-soft); color:var(--nt-ok); }
.selo-bloco.pendente{ color:var(--nt-alert); }
.selo-bloco.pendente .marca{ border:1.5px dashed var(--nt-gold); }
.selo-bloco.pendente .categoria{ color:inherit; }

/* --- bloco de nota (o texto de uma categoria) --------------------------- */
.bloco-nota{
  border-radius:var(--nt-r-lg); padding:16px 18px 17px; margin:0 0 13px;
}
.bloco-nota > .cabeca-nota{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; flex-wrap:wrap; margin-bottom:13px;
  padding-bottom:11px; border-bottom:1px solid var(--nt-line);
}
.bloco-nota .autoria{ display:flex; align-items:center; gap:10px; min-width:0; }
.bloco-nota .iniciais{
  flex:none; width:30px; height:30px; border-radius:50%;
  font-size:12px; font-weight:800; line-height:30px; text-align:center;
}
.bloco-nota .qual-bloco{
  display:block; margin-bottom:4px;
  font-size:11px; font-weight:800; letter-spacing:.16em; line-height:1;
  text-transform:uppercase; color:var(--nt-muted);
}
.bloco-nota .assinatura{ display:block; font-size:12.5px; font-weight:600; line-height:1.3; color:var(--nt-body); }
.bloco-nota .campo-nota{ margin-bottom:12px; }
.bloco-nota .campo-nota:last-child{ margin-bottom:0; }
.bloco-nota .rotulo-nota{
  display:flex; align-items:center; gap:9px; margin-bottom:5px;
  font-size:11px; font-weight:700; letter-spacing:.14em; line-height:1;
  text-transform:uppercase; color:var(--nt-muted);
}
.bloco-nota .texto-nota{
  margin:0; max-width:82ch; font-size:13.5px; line-height:1.65;
  color:var(--nt-body); text-wrap:pretty;
}
.bloco-nota textarea{ width:100%; padding:11px 13px; font-size:13.5px; line-height:1.6; resize:vertical; }

/* MEU bloco: painel, filete verde, sombra — é onde eu escrevo */
.bloco-nota.meu{
  background:var(--nt-panel); border:1px solid var(--nt-line);
  border-left:3px solid var(--nt-brand); box-shadow:var(--nt-shadow);
}
.bloco-nota.meu .iniciais{ background:var(--nt-brand-fundo); color:#fff; }
.bloco-nota.meu .qual-bloco{ color:var(--nt-brand-text); }
/* bloco do COLEGA: fundo rebaixado, sem filete, texto corrido — é leitura */
.bloco-nota.colega{ background:var(--nt-panel2); border:1px solid var(--nt-line); }
.bloco-nota.colega .iniciais{
  background:var(--nt-brand-soft); border:1px solid var(--nt-brand-soft-line);
  color:var(--nt-brand-deep); line-height:29px;
}

/* --- sugestão esperando resposta ---------------------------------------- */
.cartao-sugestao{
  background:var(--nt-panel); border:1px solid var(--nt-gold);
  border-left:3px solid var(--nt-gold); border-radius:var(--nt-r-lg);
  padding:15px 18px 16px; margin:0 0 13px;
}
.cartao-sugestao .cabeca-sugestao{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:8px;
}
.cartao-sugestao .titulo-sugestao{
  font-size:11px; font-weight:800; letter-spacing:.16em; line-height:1;
  text-transform:uppercase; color:var(--nt-alert);
}
.cartao-sugestao .autor-sugestao{ font-size:12px; font-weight:500; color:var(--nt-muted); }
.cartao-sugestao .texto-sugestao{
  margin:0 0 13px; max-width:82ch;
  font-size:14px; font-weight:500; line-height:1.6; color:var(--nt-ink); text-wrap:pretty;
}
/* sugestão já resolvida vira um selo, não um cartão */
.selo-sugestao{
  display:inline-flex; align-items:center; gap:7px;
  padding:5px 11px; border-radius:20px;
  background:var(--nt-ok-soft); color:var(--nt-ok);
  font-size:12px; font-weight:700; line-height:1.5;
}

/* --- valor herdado de ontem: confirme ou altere ------------------------- */
.valor-herdado input,
.valor-herdado select{ border:1px dashed var(--nt-gold); background:var(--nt-gold-soft); }
.valor-herdado .marca-herdado{
  padding:2px 7px; border-radius:20px;
  background:var(--nt-gold-soft); color:var(--nt-alert);
  font-size:12px; font-weight:700; letter-spacing:.05em; line-height:1.6;
}
.valor-herdado .de-quando{
  display:block; margin-top:5px; font-size:12px; font-weight:500;
  line-height:1.4; color:var(--nt-alert);
}
.valor-herdado.confirmado input,
.valor-herdado.confirmado select{ border:1px solid var(--nt-line); background:var(--nt-panel); }
.valor-herdado.confirmado .marca-herdado{ background:var(--nt-ok-soft); color:var(--nt-ok); }
.valor-herdado.confirmado .de-quando{ color:var(--nt-muted); }


/* ==========================================================================
   6 · GRÁFICO CLÍNICO DE TENDÊNCIA
   Três tamanhos, uma regra: o valor que importa está ESCRITO na tela.
   Sem hover, sem biblioteca, sem canvas. O SVG vem do servidor (graficos.py).
   ========================================================================== */

.grafico-clinico{
  background:var(--nt-panel); border:1px solid var(--nt-line);
  border-radius:var(--nt-r-lg);
}
.grafico-clinico > .cabeca-grafico{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:18px; flex-wrap:wrap;
}
.grafico-clinico .titulo-grafico{ font-size:13px; font-weight:700; line-height:1.3; color:var(--nt-ink); }
.grafico-clinico .ref-grafico{ font-size:12px; font-weight:600; line-height:1.3; color:var(--nt-muted); }
.grafico-clinico .valor-grande{
  display:flex; align-items:baseline; gap:8px;
  font-size:23px; font-weight:800; line-height:1; letter-spacing:-.02em;
  color:var(--nt-ink); font-variant-numeric:tabular-nums;
}
.grafico-clinico .valor-grande .unidade{ font-size:12px; font-weight:600; color:var(--nt-muted); letter-spacing:0; }
.grafico-clinico .datas-extremas{
  display:flex; justify-content:space-between; margin-top:2px;
  font-size:12px; font-weight:600; line-height:1.4; color:var(--nt-muted);
}
.grafico-clinico .legenda-grafico{
  margin:6px 0 0; font-size:12px; line-height:1.45; color:var(--nt-muted); text-wrap:pretty;
}
.grafico-clinico svg{ display:block; width:100%; height:auto; overflow:visible; }

.grafico-clinico.grande{ padding:18px 20px 16px; }
.grafico-clinico.grande .titulo-grafico{ font-size:17px; font-weight:800; }
.grafico-clinico.grande .valor-grande{ font-size:28px; letter-spacing:-.03em; }
.grafico-clinico.grande .valor-grande .unidade{ font-size:13px; }
.grafico-clinico.medio{ padding:15px 16px 13px; }
.grafico-clinico.mini{ padding:0; border:0; background:none; width:132px; height:34px; }

/* painel de tendências — DUAS colunas (P2-E2, 2026-09-04). Antes cabiam três
   nos 960 px do conteúdo, o quarto gráfico ficava sozinho na segunda linha e
   cada SVG renderizava a 0,77× — os 11 px do eixo chegavam ao olho como
   8,4 px (medido no Chrome a 1440 px). Agora: cartão de até 430 px, 376 px
   úteis, e o `_GEOMETRIA["duplo"]` de `app/graficos.py` (viewBox 326) põe a
   escala em 1,15× → 12,7 px na tela. Mexer aqui é mexer LÁ: a largura do
   cartão e o viewBox andam juntos, e é o par que mantém o eixo entre 11 e
   13 px em toda a faixa de 360 a 1440 px.

   O piso de 406 px em vez de `repeat(2, …)`: entre 1000 e 1090 px de janela as
   duas colunas ficariam com 356 px e o eixo cairia para 9,7 px. Abaixo disso a
   grade vira UMA coluna sozinha — e o teto de 430 px no cartão impede que essa
   coluna única estique o desenho até o eixo passar de 13 px. */
.grade-tendencias{
  display:grid; gap:14px; margin:6px 0 8px;
  grid-template-columns:repeat(auto-fit, minmax(min(406px, 100%), 1fr));
}
.grade-tendencias > .cartao.grafico{
  max-width:430px; padding:14px 26px 12px;
}


/* --------------------------------------------------------------------------
   6b · BARRAS HORIZONTAIS E TENDÊNCIA MÊS A MÊS (leitura gerencial)
   Custos e Indicadores eram só tabela. O SVG vem do servidor (graficos.py).
   -------------------------------------------------------------------------- */

/* O SVG das barras tem largura FIXA de 720 px (uma das três larguras com
   nome): assim a escala do viewBox é 1:1 e a fonte escrita no SVG é a fonte
   lida na tela. Em tela estreita ele NÃO encolhe — mora dentro de `.rolagem`,
   o mesmo scroller das tabelas largas desta tela, e quem rola de lado é o
   bloco, nunca a página. */
.grafico-barras{ margin:2px 0 10px; }
.grafico-barras svg{ display:block; }
.legenda-custo{
  display:flex; flex-wrap:wrap; gap:4px 16px; margin:0 0 8px;
  font-size:12px; font-weight:600; line-height:1.4; color:var(--nt-muted);
}
.legenda-custo .quadro{
  display:inline-block; width:9px; height:9px; border-radius:2px;
  margin-right:6px;
}
.legenda-custo .quadro.custo{ background:var(--nt-brand); }
.legenda-custo .quadro.faturado{ background:var(--nt-muted); }
.legenda-custo .quadro.prejuizo{ background:var(--nt-risk); }

/* Tendência mês a mês: quatro minigráficos numa linha na tela larga
   (1152 px de conteúdo → colunas de 277,5 px), dois a dois no notebook, um a
   um no celular. O teto de 300 px é o que segura a letra: sem ele, no celular
   o cartão iria a 358 px, a escala do viewBox 240 subiria para 1,38 e o eixo
   sairia em 15 px — grande demais ao lado de um texto de 12. E o piso de
   274 px é o outro lado da mesma conta: numa janela de 1366 px as quatro
   colunas caem exatamente no piso, e um piso de 260 px poria o eixo em
   10,6 px. Entre o piso e o teto a escala fica entre 1,02 e 1,13 (eixo de
   11,3 a 12,5 px).
   Ver `_MENSAL_GEO` em app/graficos.py: cartão e viewBox andam juntos. */
.grade-mensal{
  display:grid; gap:14px; margin:4px 0 10px; justify-items:center;
  grid-template-columns:repeat(auto-fit, minmax(min(274px, 100%), 1fr));
}
.cartao.mensal{
  width:100%; max-width:300px; margin-bottom:0; padding:13px 13px 11px;
}
.cartao.mensal .titulo-mensal{
  display:block; font-size:13px; font-weight:800; line-height:1.3;
  color:var(--nt-ink);
}
/* Duas linhas reservadas: sem isso a legenda de um cartão quebra e a do
   vizinho não, e os quatro desenhos começam em alturas diferentes — quatro
   linhas de base desalinhadas fazem o olho comparar errado. */
.cartao.mensal .meta-mensal{
  display:block; margin:1px 0 6px; min-height:2.9em;
  font-size:12px; font-weight:600; line-height:1.4; color:var(--nt-muted);
}
.cartao.mensal .vazio-mensal{
  margin:10px 0; font-size:12.5px; color:var(--nt-muted);
}

/* No CELULAR o gráfico usa o cartão inteiro. Não é enfeite: com 358 px de
   cartão, os 26 px de padding de cada lado levariam o eixo de 12,0 px para
   10,3 px — abaixo do piso. O desenho já traz a própria margem (PL 40 / PR 15
   do viewBox), então encostar nas bordas não aperta nada; o título e a legenda
   continuam recuados. Corte em 414 px e não em 1000: acima disso o cartão bate
   no teto de 430 px e o padding volta a caber sem derrubar o eixo (a 415 px o
   eixo fica em 11,1 px; a 414 px, com o padding fora, em 12,8 px). */
@media (max-width: 414px){
  .grade-tendencias > .cartao.grafico{ padding-left:0; padding-right:0; }
  .grade-tendencias > .cartao.grafico > .grafico-topo,
  .grade-tendencias > .cartao.grafico > .grafico-legenda{
    padding-left:15px; padding-right:15px;
  }
}


/* ==========================================================================
   8 · ESTADOS VAZIOS COM SAÍDA
   Um vazio sempre diz o que fazer em seguida — nunca só "nenhum registro".
   ========================================================================== */
.vazio-com-saida{
  display:flex; flex-direction:column; align-items:flex-start; gap:14px;
  padding:34px 30px 36px;
  background:var(--nt-panel); border:1px solid var(--nt-line);
  border-radius:var(--nt-r-lg);
}
.vazio-com-saida .icone{
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:12px; background:var(--nt-brand-soft);
}
.vazio-com-saida .titulo-vazio{
  margin-bottom:6px; font-size:17px; font-weight:800; line-height:1.25; color:var(--nt-ink);
}
.vazio-com-saida p{
  margin:0; max-width:46ch; font-size:13.5px; line-height:1.6;
  color:var(--nt-body); text-wrap:pretty;
}


/* ==========================================================================
   9 · CELULAR E TELA ESTREITA (≤ 1000 px)
   As grades viram pilha; alvos de toque nunca abaixo de 44 px.

   1000 px e não 860: o censo em grade precisa de 814 px SÓ para os mínimos
   das colunas, e no app real o conteúdo divide a tela com a barra lateral de
   212 px — num notebook de 1152 px sobram ~940 px. Abaixo de 1000 px a linha
   vira cartão ANTES de a grade estourar. Ver a aritmética na seção 1.
   ========================================================================== */
@media (max-width: 1000px){

  /* As ações da cabeça do paciente são `nowrap` de propósito no computador
     (envolver colidiria com a linha de baixo). No celular isso estourava a
     largura da tela — os três botões somados passam de 375 px. Aqui elas
     viram a mesma grade de duas colunas que o `style.css` dá ao resto do app
     (2026-08-11); a regra precisa morar nesta folha porque ela é a que vence
     por especificidade. */
  .cabeca-paciente > .linha-identidade > .acoes{
    display:grid; grid-template-columns:repeat(auto-fit, minmax(148px, 1fr));
    flex-wrap:wrap; width:100%;
  }

  /* censo: a linha em grid vira cartão; some o cabeçalho de colunas */
  .tabela-censo{ background:none; border:0; border-radius:0; }
  .tabela-censo .cabecalho-censo{ display:none; }
  .tabela-censo .linha-censo{
    display:flex; flex-wrap:wrap; gap:8px 10px; align-items:baseline;
    padding:12px 14px; margin-bottom:9px;
    background:var(--nt-panel); border:1px solid var(--nt-line);
    border-radius:var(--nt-r);
  }
  .tabela-censo .linha-censo.pendente{ border-left:3px solid var(--nt-gold); }
  .linha-censo .paciente{ flex:1 1 auto; }
  .linha-censo .dia{ margin-left:auto; }
  .linha-censo .via, .linha-censo .riscos, .linha-censo .meta{ flex:1 1 100%; }
  .linha-censo .acao-linha{ flex:0 0 auto; min-height:44px; padding:0 16px; }
  .censo-filtros{ gap:7px; }
  .censo-filtros .busca-censo{ flex:1 1 100%; min-height:44px; }
  .filtro-pill{ min-height:44px; }
  .densidade{ display:none; }         /* no celular a densidade é sempre cartão */

  /* ...e por isso a densidade COMPACTA para aqui. Ela é uma escolha de mesa
     (a régua da seção 1) e fica gravada por usuário no localStorage: quem
     escolheu "compacto" no computador chegava ao celular com alvo de toque de
     30 px. No estreito a linha já é cartão — o toque volta aos 44 px. */
  .censo-compacto .tabela-censo .linha-censo{ padding:12px 14px; }
  .censo-compacto .linha-censo .acao-linha{
    min-height:44px; border-radius:10px; font-size:12px;
  }
  .censo-compacto .linha-censo .paciente a{ display:block; font-size:14px; }
  .censo-compacto .linha-censo .paciente .sub-linha{ font-size:12px; }

  /* cockpit: cabeçalho encolhe, âncoras rolam na horizontal */
  .cabeca-paciente > .linha-contexto{ gap:10px 0; }
  .cabeca-paciente > .linha-contexto > div{
    padding-right:14px; margin-right:14px;
  }
  .cabeca-paciente .identidade h1{ font-size:21px; }
  /* no estreito as duas colunas nao cabem lado a lado: aqui a quebra volta
     (o `nowrap` do computador existe para o nome longo nao empurrar as
     acoes para baixo — no celular nao ha "ao lado") */
  .cabeca-paciente > .linha-identidade{ flex-wrap:wrap; }
  .cabeca-paciente > .linha-identidade > .acoes{ justify-content:flex-start; }
  /* o respiro do cartão cai para 16 px na tela estreita; as âncoras
     continuam de lado a lado (−16) e o primeiro rótulo alinha com o nome
     (−16 + 4 + 12 = 0) */
  .cabeca-paciente{ padding-left:16px; padding-right:16px; }
  .nav-prontuario{ margin:0 -16px; padding:0 4px; }
  .nav-prontuario a{ padding:13px 12px 12px; }

  /* evolução: o bloco de nota aperta no estreito */
  .bloco-nota{ padding:14px 15px 15px; }
  .bloco-nota .texto-nota{ font-size:13px; }

  /* exame: o resumo desce para a segunda linha, o mini-gráfico some */
  .linha-exame > summary{ flex-wrap:wrap; gap:9px 12px; padding:12px 14px; }
  .linha-exame .mini-grafico{ display:none; }
  .linha-exame .resumo-exame{ min-width:0; width:100%; justify-content:flex-start; }

  /* gráficos: um por linha; o grande vira médio */
  .grade-tendencias{ grid-template-columns:1fr; }
  .grafico-clinico.grande{ padding:15px 16px 13px; }
  .grafico-clinico.grande .titulo-grafico{ font-size:15px; }
  .grafico-clinico.grande .valor-grande{ font-size:23px; }

  /* cadastro: o recuo dos blocos some (a bolha já indica a hierarquia) */
  .bloco-passo > .explica,
  .bloco-passo > .corpo-bloco{ padding-left:0; }
  .passos{ gap:6px; }
  .passos .passo{ padding:0; }
  .passos .risca{ width:14px; }

  /* toque: nada abaixo de 44 px — inclui os chips D1…Dn da linha do tempo,
     que no dedo são o atalho para a ficha de cada dia. */
  .chip-add, .chips-lista .chip, .filtro-pill,
  .cartao-sugestao .acoes .botao{ min-height:44px; }
  .chip-dia{
    display:flex; align-items:center; justify-content:center; min-height:44px;
  }
  /* "Recusar com justificativa" abre um <details>: o summary tambem e um
     alvo de dedo (media 21 px na primeira medicao — abaixo do minimo). */
  .cartao-sugestao > details > summary{
    display:flex; align-items:center; min-height:44px;
  }
}


/* ==========================================================================
   9b · CELULAR: DEVOLVER A TELA AO PACIENTE  (≤ 900 px)
   Item P2-F1 da auditoria de design "Redline Seiva" (2026-09-04).

   O que foi medido antes, a 390×844 px (Chrome, dois temas):
     · barra do topo ................................ 119 px (duas linhas)
     · faixa do paciente da internação, rolando ..... 245,7 px
     · somadas ...................................... 364,7 px de 844 (43 %)
   Ou seja: quase metade do celular era cabeçalho antes de qualquer dado do
   paciente. E os primeiros 119 px da faixa ficavam ATRÁS da barra do topo
   (as duas grudam em `top:0`, e a barra tem z-index maior) — o nome do
   paciente, que é o que a faixa existe para dizer, era justamente o que não
   se via ao rolar.

   Este bloco não existe acima de 900 px: o computador fica como está.
   ========================================================================== */
@media (max-width: 900px){

  /* --- a faixa gruda ABAIXO da barra, e não atrás dela -------------------
     57 px = os 56 px da linha do topo + o filete de 1 px que a fecha. */
  .cabeca-paciente{ top:57px; }

  /* O cabeçalho de ala do censo ("UTI · 6 leitos") tinha o MESMO defeito e
     escapou da primeira passada (item P2-F2, 2026-09-04): ele gruda em
     `top:0`, a barra do topo também, e a barra tem z-index maior — então ao
     rolar a lista o nome da ala passava POR BAIXO dela e sumia. Quem rola um
     censo de três alas perde justamente a legenda que diz onde está. Mesmo
     57 px da faixa do paciente, pela mesma conta. */
  .grupo-setor > .cabeca-grupo{ top:57px; }

  /* --- e as ações dela param de esticar a PÁGINA ------------------------
     `white-space:nowrap` (regra do computador, para "Editar / internação"
     não quebrar no meio) fazia "Perguntar à Seiva sobre este caso" pedir
     244 px numa coluna de 175. A página inteira saía em 444 px de largura
     numa tela de 390: o Chrome do celular reduz o zoom para caber, e TODA a
     letra do prontuário encolhe junto. Aqui o rótulo pode quebrar em duas
     linhas — no estreito cada ação já tem a coluna inteira para si. */
  .cabeca-paciente > .linha-identidade > .acoes > *{
    white-space:normal; min-width:0;
  }

  /* --- encolhida = UMA linha (nome + leito + chip do dia) + as abas ------
     A classe `encolhida` já existia (seiva-prontuario.js item 1, a partir de
     120 px de rolagem) e no computador ela só tira a linha de contexto. No
     celular ela precisa fazer bem mais: saem as ações, os alertas e tudo que
     no nome não é o nome. O que fica é o que responde "quem é este, em que
     leito, em que dia" — e as abas, que são a navegação da tela.
     Medido depois: 41 px de faixa + 40 px de abas = 81 px, e 56 + 81 = 137 px
     de espaço fixo (eram 364,7). */
  .cabeca-paciente.encolhida > .linha-identidade > .acoes,
  .cabeca-paciente.encolhida .alertas-paciente,
  .cabeca-paciente.encolhida .identidade .idade-sexo,
  .cabeca-paciente.encolhida .identidade .separador,
  .cabeca-paciente.encolhida .identidade .unidade{ display:none; }
  /* 3 px, e não 7: a linha carrega o botão de 44 px de abrir/fechar (abaixo)
     e ficaria 8 px mais alta do que precisa. Medido: 44 + 3 + 3 = 50 px. */
  .cabeca-paciente.encolhida > .linha-identidade{ padding:3px 0; }
  .cabeca-paciente.encolhida .identidade{
    flex-wrap:nowrap; align-items:center; gap:9px;
  }
  /* "nome curto" sem servidor nenhum: a caixa corta e põe reticências. O
     nome inteiro volta assim que se rola de volta ao topo. */
  .cabeca-paciente.encolhida .identidade h1{
    font-size:16px; min-width:0;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .cabeca-paciente.encolhida .identidade .leito,
  .cabeca-paciente.encolhida .identidade .selo-dia{ flex:0 0 auto; }
  /* as abas encolhem, mas não abaixo dos 44 px de dedo (12 + 12 de padding
     + 18,8 de texto + 2 da borda de baixo = 44,8) */
  .cabeca-paciente.encolhida .nav-prontuario a{ padding:12px 12px; }

  /* --- a faixa NASCE encolhida no celular (decisão do médico, 2026-09-04) --
     Antes de rolar, a faixa inteira mais as abas tomavam metade da tela de
     390 px. Agora ela já nasce na linha única, e o botão da ponta abre os
     dados completos (idade, via em curso, peso, meta, alertas e "Editar
     internação"); rolar fecha de novo. Quem decide "nascer encolhida" é o
     JS (seiva-prontuario.js, item 1): sem JS a faixa fica inteira e o botão
     nem aparece (`hidden`). Alvo de dedo: 44 × 44. */
  .cabeca-paciente .alternar-cabeca{
    display:inline-flex; flex:0 0 auto; align-self:center; margin-left:auto;
    width:44px; height:44px;
  }
  .cabeca-paciente .alternar-cabeca svg{ transition:transform .15s ease; }
  .cabeca-paciente .alternar-cabeca[aria-expanded="true"] svg{
    transform:rotate(180deg);
  }

  /* --- o seletor de recorte também é alvo de dedo ------------------------
     "Ativos / Sem internação / Ver altas" media 38 px (nutria-tokens.css põe
     esse piso abaixo de 640). Esta folha é carregada depois: com a mesma
     especificidade, é ela que manda. */
  .seletor > a, .seletor > button{ min-height:44px; }

  /* --- censo: os quatro números em 2×2 de larguras IGUAIS ----------------
     Em `flex` com filete eles quebravam onde o texto do rótulo mandasse:
     "internados" curtinho ao lado de "sem evolução hoje" longo, e a segunda
     linha começando noutro lugar. Quatro números que se comparam têm de
     ficar numa grade. O filete fica só na coluna da esquerda. */
  .censo-numeros{
    display:grid; grid-template-columns:1fr 1fr; gap:13px 0;
  }
  /* sem `margin`: margem sai do lado de FORA da caixa e faria a coluna da
     esquerda medir 163 px contra 179 da direita — de novo larguras
     desiguais, que é o defeito que este bloco veio corrigir. O respiro e o
     filete cabem dentro da metade de cada um. */
  .censo-numeros > div{ padding-right:0; margin-right:0; border-right:0; }
  .censo-numeros > div:nth-child(odd){
    padding-right:16px; border-right:1px solid var(--nt-line2);
  }
  .censo-numeros > div:nth-child(even){ padding-left:16px; }

  /* --- as pílulas de filtro numa linha só, que rola ----------------------
     Quatro pílulas quebravam em duas ou três linhas e empurravam o censo
     para baixo. Agora é uma faixa horizontal: sem barra de rolagem à vista
     (ela roubaria altura), com encaixe (`scroll-snap`) para o dedo parar
     numa pílula inteira. A rolagem é DESTA caixa — a página não mexe. */
  .censo-filtros{
    flex-wrap:nowrap; overflow-x:auto; overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;
    scrollbar-width:none; -ms-overflow-style:none;
    padding-bottom:2px;
  }
  .censo-filtros::-webkit-scrollbar{ display:none; }
  .filtro-pill{ flex:0 0 auto; scroll-snap-align:start; }

  /* --- o nome do paciente é o alvo do cartão do censo --------------------
     Media 18,2 px de altura: o menor alvo de toque de toda a tela, e é por
     ele que se abre o prontuário.
     `flex` e não `inline-flex`: em linha o nome e a sub-linha ("68 anos ·
     Feminino · reg. 1003") passavam a caber lado a lado, o cartão inteiro
     se reorganizava e o leito descia sozinho para a linha de cima. Em bloco
     o link ocupa a largura toda — que é, de quebra, o alvo que se quer. */
  .linha-censo .paciente a{
    display:flex; align-items:center; min-height:44px;
  }

  /* --- terapias em curso: nada de botão pendurado na borda ---------------
     A linha "data + Encerrar + Excluir" não cabe em 390 px: o "Excluir"
     escorregava para o canto e ficava na altura do meio do cartão, longe
     dos dois com que ele se parece. Aqui vira uma grade: a data ocupa a
     linha inteira e, embaixo, "Encerrar" (contorno) e o "Excluir" reduzido
     ao × — o mesmo formulário, o mesmo POST e a mesma confirmação; só o
     rótulo cabe no `aria-label`.
     `display:contents` nos dois <form> para que a data e os botões sejam
     células DESTA grade: eles moram em formulários diferentes, e sem isso
     não haveria como pô-los lado a lado. O envio não muda — quem posta é o
     formulário, não a caixa que o desenha. */
  .grade-terapias .acoes-terapia{
    display:grid; grid-template-columns:minmax(0, 1fr) 44px;
    gap:9px 10px; align-items:center;
  }
  .grade-terapias .acoes-terapia > form{ display:contents; }
  .grade-terapias .acoes-terapia input[type="date"]{
    grid-column:1 / -1; width:100%; max-width:none; margin:0; min-height:44px;
  }
  .grade-terapias .acoes-terapia button[type="submit"]{
    min-height:44px; width:100%;
  }
  /* o degrau `.botao.icone` dos tokens, na cor de perigo: 44×44, sem rótulo
     na tela e com o nome inteiro no `aria-label` do botão. */
  .grade-terapias .acoes-terapia .link-perigo{
    display:inline-flex; align-items:center; justify-content:center;
    width:44px; height:44px; padding:0;
    border:1px solid var(--nt-risk-soft); border-radius:11px;
    background:none; font-size:0;
  }
  .grade-terapias .acoes-terapia .link-perigo::before{
    content:"\00d7"; font-size:21px; font-weight:700; line-height:1;
  }
}


/* ==========================================================================
   10 · SOBRESCRITAS DE CLASSE EXISTENTE
   Só o necessário, com o motivo. Se remover alguma, releia o motivo antes.
   ========================================================================== */

/* O <h2> colapsável do _colapso.html precisa parecer clicável. A regra já
   existe no style.css; aqui só garantimos que a seta não suma no tema escuro. */
h2.secao-clicavel{ cursor:pointer; }
h2.secao-clicavel::after{
  content:"▸"; display:inline-block; margin-left:9px;
  font-size:.7em; color:var(--nt-muted); transform:translateY(-1px);
}
h2.secao-clicavel.secao-aberta::after{ content:"▾"; }

/* A ficha cancelada já esconde botões (nutria-tokens.css). Aqui só o que é
   novo: o cartão de evolução cancelada continua clicável para LEITURA. */
.ficha-cancelada .cartao-evolucao{ pointer-events:auto; }

/* Nas telas com cabeçalho grudado, o <main> não pode ter overflow — senão o
   position:sticky para de funcionar sem aviso nenhum. */
main.conteudo{ overflow:visible; }

/* COLISÃO DE NOME, achada no app real (2026-08-09): `.bolha` já existia —
   é a bolha de FALA do chat da Seiva IA (`seiva-ia.css`, carregado antes),
   com `padding:12px 16px 13px`, borda e `max-width`. Na entrada do paciente
   a bolha é outra coisa: o numerozinho do passo, 22 px, redondo. Como a
   folha do prontuário não zerava o padding herdado, o círculo virava uma
   elipse e o número escorregava para o canto. Aqui o box é reposto e a
   centralização passa a ser por flex (não depende mais de line-height). */
.passos .passo .bolha,
.bloco-passo .cabeca-bloco .bolha,
.bloco-passo .resumo-passo .bolha{
  display:inline-flex; align-items:center; justify-content:center;
  flex:none; box-sizing:border-box;
  padding:0; border:0; max-width:none;
}

/* A `.lista-exames` do style.css era uma pilha de cartões soltos (cada
   `details` com sua borda). Com a `.linha-exame` do redesenho, a moldura
   passa para o INVÓLUCRO e as linhas se separam por um filete — que é o que
   deixa a leitura vertical ("qual está fora?") acontecer de relance. */
.lista-exames{
  display:block; background:var(--nt-panel); border:1px solid var(--nt-line);
  border-radius:var(--nt-r-lg); overflow:hidden;
}
.lista-exames > .linha-exame + .linha-exame{ border-top:1px solid var(--nt-line2); }
/* O gráfico aberto é o tamanho GRANDE: não pode ser espremido pelo antigo
   `max-width:460px` que valia para o desenho médio. */
.linha-exame .corpo-exame > svg{ max-width:none; }


/* ==========================================================================
   11 · IMPRESSÃO
   O prontuário é impresso de verdade (visita, auditoria, transferência). O
   papel não tem menu, não tem âncora e não tem cabeçalho que gruda. Os
   gráficos já são feitos para o papel: sem gradiente, sem sombra, sem filter
   — saem legíveis até em preto e branco.
   O que estiver recolhido (`<details>` fechado) NÃO é impresso, e isso é de
   propósito: quem imprime abre antes o que quer levar.
   ========================================================================== */
@media print{
  .lateral, .topo-mobile, .nav-prontuario{ display:none !important; }
  .app-shell{ display:block; }
  .cabeca-paciente, .grupo-setor > .cabeca-grupo{
    position:static; box-shadow:none;
  }
  .linha-tempo{ overflow:visible; }
  .cartao-evolucao, .cartao-metrica, .bloco-nota, .linha-exame,
  .grupo-setor{ break-inside:avoid; }
}

/* ==========================================================================
   ANEXO DE EXAME (2026-08-15). Três peças: o bloco de envio dentro da ficha
   do dia, a lista dos laudos já anexados e a prova visual do que sai da
   máquina — as páginas tarjadas, lado a lado, antes de autorizar a leitura.
   ========================================================================== */
.bloco-anexo{
  border:1px solid var(--nt-line); border-radius:12px;
  background:var(--nt-panel); padding:12px 16px; margin:12px 0 18px;
}
.bloco-anexo > summary{
  cursor:pointer; font-weight:700; color:var(--nt-brand-deep);
  min-height:32px; display:flex; align-items:center;
}
.bloco-anexo .formulario{ margin-top:12px; }
.bloco-anexo input[type=file]{ padding:8px 0; }

.lista-anexos{ list-style:none; padding:0; margin:10px 0 0; }
.lista-anexos li{
  padding:8px 0; border-top:1px solid var(--nt-line);
  display:flex; flex-wrap:wrap; gap:8px; align-items:baseline;
}

/* As páginas tarjadas. Rolagem horizontal própria: um laudo de 3 páginas não
   pode empurrar a largura da tela. */
.paginas-tarjadas{ display:flex; gap:14px; padding:6px 2px 12px; }
.paginas-tarjadas figure{ margin:0; flex:0 0 auto; text-align:center; }
.paginas-tarjadas img{
  max-height:520px; width:auto; border:1px solid var(--nt-line);
  border-radius:8px; background:#fff; box-shadow:var(--nt-shadow);
}
.paginas-tarjadas figcaption{ font-size:12px; color:var(--nt-muted); margin-top:6px; }

/* Linha da conferência cuja unidade não bateu com a do catálogo. */
.linha-alerta > td{ background:var(--nt-gold-soft); }


/* --- Cabeçalho da ficha do dia (2026-08-29) -----------------------------
   Quatro caixas empilhadas do mesmo peso viraram UM cabeçalho grudado de
   três linhas — título+ações, estado da ficha, régua de âncoras. Mesmo
   desenho do cockpit da internação, para as duas telas se lerem igual.
   A hierarquia mora no peso: o h1 pesa, a autoria é fina, a régua é discreta.
   Não é `position:sticky` como o cockpit: aqui a régua ficaria colada por
   cima das próprias seções que ela aponta. */
.cabeca-evolucao{
  margin:0 0 20px; padding:16px 18px 0;
  background:var(--nt-panel); border:1px solid var(--nt-line);
  border-radius:var(--nt-r-lg);
}
.cabeca-evolucao > .linha-titulo{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:20px; flex-wrap:wrap;
}
.cabeca-evolucao .identidade{
  display:flex; align-items:baseline; gap:11px; flex-wrap:wrap; min-width:0;
}
.cabeca-evolucao .identidade h1{
  margin:0; font-size:25px; line-height:1.1; letter-spacing:-.03em;
}
.cabeca-evolucao .identidade .leito{
  font-size:14px; font-weight:700; color:var(--nt-ink);
}
/* as ações numa linha só; cada <form> é um botão, não um bloco */
.cabeca-evolucao > .linha-titulo > .acoes{
  flex:none; display:flex; align-items:center; gap:9px; flex-wrap:wrap;
}
.cabeca-evolucao > .linha-titulo > .acoes form{ margin:0; display:inline-flex; }
.cabeca-evolucao .linha-autoria{
  margin:7px 0 0; font-size:12.5px; line-height:1.5; color:var(--nt-muted);
}
.cabeca-evolucao .linha-autoria strong{ color:var(--nt-body); font-weight:700; }

/* linha 2 — o estado da ficha a 4 mãos, separada por um fio */
.cabeca-evolucao > .linha-ficha{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap; margin-top:13px; padding:11px 0;
  border-top:1px solid var(--nt-line2);
}
.cabeca-evolucao > .linha-ficha .selos{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap; min-width:0;
}
.cabeca-evolucao > .linha-ficha .acoes{ flex:none; }

/* Link fino ao lado dos botões: leva à tela dos pontos a discutir. É a única
   coisa da passagem que o PDF não adivinha — mas quem só quer o papel não
   precisa passar por lá, então é link, não botão. */
.link-papel{
  align-self:center; white-space:nowrap; text-decoration:none;
  font-size:12.5px; font-weight:600; color:var(--nt-brand-text);
}
.link-papel:hover{ text-decoration:underline; }

/* O "Cancelar esta evolução" no rodapé: discreto, longe do trabalho do dia. */
.rodape-perigo{ margin-top:34px; }

/* A tela "Fechar o dia" é um resumo de plantão para LER, não um formulário de
   campos — e por isso teve largura própria desde o começo: 860 px escolhidos a
   olho. O achado S5 da auditoria (2026-09-02) contou DOZE larguras assim pelo
   app; o P1-B2 as reduziu a três COM NOME. Esta é a de LEITURA: os mesmos
   720 px do `.formulario` e do `.conteudo.tela-leitura` (ver o bloco
   "Conteudo" do style.css). As réguas dos três passos seguem respirando acima
   do cartão que abrem. */
.tela-fechar{ max-width:720px; }
.tela-fechar .faixa-secao{ margin-top:26px; }
.tela-fechar .faixa-secao:first-of-type{ margin-top:6px; }

/* O rascunho/aprovado da IA: `.bloco` é flex em linha (serve à lista de
   passos com bolinha à esquerda). Aqui o conteúdo é um texto corrido com
   selo em cima e botões embaixo — empilhado. Vale para o resumo do dia
   (evolução) e para o resumo de alta: desde o P0-3 (2026-09-03) os dois
   mostram o texto da IA renderizado, dentro de `.resposta`. */
.bloco.resumo-ia{ display:block; }
.bloco.resumo-ia .resposta{ margin:8px 0 0; }
.bloco.resumo-ia .acoes{ margin-top:12px; }


@media (max-width: 1000px){

  /* Cabeca da EVOLUCAO no celular: tres botoes mais um
     link nao cabem numa linha de 375 px — eles vazavam para fora do cartao.
     Vira a mesma grade de duas colunas do resto do app. O <form> do resumo
     e um item da grade como os outros, entao ele (e o botao dentro dele)
     tem de ocupar a celula inteira; o link fino ganha a linha so dele. */
  .cabeca-evolucao > .linha-titulo{ display:block; }
  .cabeca-evolucao > .linha-titulo > .acoes{
    display:grid; grid-template-columns:repeat(auto-fit, minmax(148px, 1fr));
    align-items:stretch; width:100%; margin-top:12px;
  }
  .cabeca-evolucao > .linha-titulo > .acoes form{ display:grid; width:100%; }
  .cabeca-evolucao > .linha-titulo > .acoes .botao{ text-align:center; }
  .cabeca-evolucao > .linha-titulo > .acoes .link-papel{
    grid-column:1 / -1; justify-self:start;
    display:inline-flex; align-items:center; min-height:40px;
  }
}


/* ==========================================================================
   MANIPULADOS — o painel da composição calculada (item P1-C2, 2026-09-03)
   --------------------------------------------------------------------------
   A tela de Manipulados mostrava os oito números da bolsa numa lista de
   marcadores. Eles agora usam o `.cartao-metrica` da seção 0 — o MESMO cartão
   da evolução ("Como o paciente está"), sem nenhuma peça nova: rótulo em
   versalete de 11 px, número em 800 com `tabular-nums`, contexto em 12 px e
   a cor no NÚMERO, nunca no cartão inteiro.

   A grade é a `.grade-kpi` do style.css (auto-fit, coluna mínima de 200 px).
   Este arquivo carrega depois, então as regras abaixo vencem por ordem — não
   é preciso subir a especificidade.
   ========================================================================== */
.grade-composicao{ margin:0 0 18px; }
/* NOVE cartões desde 2026-09-04 (cálcio e fosfato separados, decisão do
   médico): em `auto-fit` de 200 px eles saíam 4 + 4 + 1, com um cartão órfão
   na última linha. Três colunas fixas dão um 3 × 3 limpo, e cada cartão
   ganha largura para o contexto ("dextrose 680 + aminoácidos 320 + …"). */
.grade-composicao{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
/* Item de grade com conteúdo comprido ("dextrose 680 + aminoácidos 320 +
   lipídio 275") empurra a coluna para além da fração: `min-width:0` devolve o
   controle à grade e o texto quebra dentro do cartão. */
.grade-composicao > *{ min-width:0; }
/* O `.valor-metrica` é flex sem quebra (na evolução o valor é curto). Aqui
   "5 / 10" + "mEq/L · mmol/L" não cabe em coluna estreita — a unidade desce
   para a linha de baixo em vez de vazar. */
.grade-composicao .valor-metrica{ flex-wrap:wrap; }
/* `neutro` é o número sem julgamento: o motor não tem comparação para ele
   (energia, proteína) ou a comparação não disparou. Fica escrito para quem
   ler o HTML entender que a ausência de cor é uma decisão, não um esquecimento. */
.cartao-metrica.neutro .valor-metrica{ color:var(--nt-ink); }

@media (max-width: 620px){
  /* Abaixo de ~474 px a coluna mínima de 200 px não cabe duas vezes e a grade
     desabava para UMA coluna: oito cartões viravam oito telas de rolagem. No
     celular a leitura é de dois em dois. */
  .grade-composicao{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
}


/* ==========================================================================
   CATÁLOGOS — filtrar ao vivo, recolher grupos e virar cartão no celular
   (item P1-D1 da auditoria "Redline Seiva", 2026-09-04)
   --------------------------------------------------------------------------
   O achado: Medicamentos mostrava 111 itens em 11.317 px — treze dobras — sem
   nenhuma busca; Fórmulas (54), Eventos (55) e Exames (45) idem. E no celular
   a tabela rolava de lado dentro da `.rolagem`, com as ações escondidas do
   outro lado da borda.

   Três respostas, todas nesta seção:
     1. uma barra de filtro junto da tabela (não no topo: lá mora a busca de
        PACIENTE, que é outro objeto e leva a outra tela);
     2. cada grupo é um <details> nativo com a contagem ao lado do nome —
        reaproveita o `details.secao-form` do style.css, que já é o jeito da
        casa de recolher uma seção;
     3. abaixo de 700 px a linha vira CARTÃO: as células passam a bloco e cada
        uma diz o próprio rótulo (`td::before { content: attr(data-rotulo) }`).
        O HTML continua sendo uma tabela de verdade — leitor de tela e
        `td.acoes-linha` continuam valendo.
   ========================================================================== */

/* --- 1 · a barra de filtro ---------------------------------------------- */
/* Nasce `hidden` no template e só aparece quando o JS liga (seiva-catalogos.js):
   campo que não filtra é pior que campo nenhum. */
.filtro-catalogo{
  display:flex; align-items:center; flex-wrap:wrap; gap:10px;
  margin:0 0 14px;
}
.filtro-catalogo .campo-filtro{
  flex:1 1 240px; max-width:360px; min-width:0;
  height:38px; margin:0; padding:0 12px;
  border:1px solid var(--nt-line); border-radius:10px;
  background:var(--nt-panel); color:var(--nt-ink);
  font-size:14px;
}
.filtro-catalogo .campo-filtro::placeholder{ color:var(--nt-muted); }
.filtro-catalogo .campo-filtro:focus-visible{
  outline:2px solid var(--nt-brand); outline-offset:-1px;
  border-color:var(--nt-brand);
}
/* O contador é a resposta a "sobrou alguma coisa?" — fica colado no campo,
   com número tabular para não dançar a cada tecla. */
.conta-catalogo{
  color:var(--nt-muted); font-size:12.5px; font-weight:600;
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
/* "Recolher tudo" é ação de arrumação, não de conteúdo: vai para a ponta
   direita da barra, longe do campo em que se digita. */
.filtro-catalogo .alternar-grupos{ margin-left:auto; }

/* --- 2 · o grupo recolhível --------------------------------------------- */
/* A mecânica (▸/▾, sem marcador nativo, <h2> em linha) vem do
   `details.secao-form` do style.css; aqui só o espaçamento da lista e a
   etiqueta de contagem. */
details.grupo-catalogo{ margin:22px 0 0; }
details.grupo-catalogo:first-of-type{ margin-top:6px; }
.grupo-catalogo > summary{ padding:2px 0; }
.grupo-catalogo > summary:focus-visible{
  outline:2px solid var(--nt-brand); outline-offset:3px; border-radius:6px;
}
.grupo-catalogo .titulo-grupo{ font-size:17px; }
/* A contagem responde "quantos tem aí dentro?" antes de abrir. */
.grupo-catalogo .conta-grupo{
  margin-left:8px; font-variant-numeric:tabular-nums;
}
.grupo-catalogo > .rolagem{ margin-top:8px; }
.grupo-catalogo .nota-fonte{ margin-top:8px; }

/* --- 3 · excluir vira ícone --------------------------------------------- */
/* Era "Excluir" em vermelho, escrito por extenso, em cada uma das 111 linhas.
   O ícone nasce discreto (a mesma cor das outras ações de linha) e só vira
   vermelho no ponteiro e no foco — o nome inteiro continua no `aria-label`. */
.botao.icone.perigo, button.icone.perigo{ color:var(--nt-muted); }
.botao.icone.perigo:hover, button.icone.perigo:hover,
.botao.icone.perigo:focus-visible, button.icone.perigo:focus-visible{
  background:var(--nt-risk-soft); border-color:var(--nt-risk-soft);
  color:var(--nt-risk);
}
/* Em <td> a caixa não é flex (ver `td.acoes-linha` no style.css): o ícone
   desce meio pixel para ficar na linha de base do "Editar" ao lado. */
td.acoes-linha .botao.icone{ vertical-align:middle; }
/* `.link-acao` e `.link-perigo` são <button> com cara de LINK — e herdavam do
   `button` genérico dos tokens a sombra verde do botão cheio. No computador
   ela quase não se via; no cartão do celular, com o alvo de 44 px, virava uma
   caixa clara flutuando atrás da palavra ("Remover", em Fórmulas). Ação em
   forma de texto não tem sombra. */
td.acoes-linha .link-acao, td.acoes-linha .link-perigo,
.lista-catalogo .link-acao, .lista-catalogo .link-perigo{ box-shadow:none; }

/* --- 4 · celular: a linha vira cartão ----------------------------------- */
@media (max-width: 700px){
  /* Desmonta a tabela. O seletor tem três classes de propósito: precisa
     vencer o `.conteudo .tabela{ display:block; overflow-x:auto }` do
     style.css, que é a rede de segurança que faz QUALQUER tabela rolar de
     lado — e rolar de lado é justamente o que esta seção veio desfazer. */
  .conteudo .lista-catalogo .tabela,
  .conteudo .lista-catalogo .tabela tbody,
  .conteudo .lista-catalogo .tabela tr{
    display:block; width:auto;
  }
  .conteudo .lista-catalogo .tabela{
    overflow:visible; background:none; border-radius:0;
  }
  /* O cabeçalho sai: cada célula passa a dizer o próprio nome. */
  .conteudo .lista-catalogo .tabela thead{ display:none; }
  .conteudo .lista-catalogo .rolagem{ overflow-x:visible; }

  .lista-catalogo .tabela tbody > tr{
    margin:0 0 10px; padding:11px 13px 9px;
    border:1px solid var(--nt-line); border-radius:var(--nt-r);
    background:var(--nt-panel);
  }
  /* Flex (e não grade de duas colunas): há células com mais de um filho — a
     etiqueta "Na unidade" mais o botão de alternar, por exemplo — e numa
     grade cada filho viraria uma célula nova, quebrando o alinhamento. */
  /* As três classes do seletor não são enfeite: a célula tem de vencer o
     `.tabela.compacta td` (padding e fonte) E o `td.acoes-linha
     { display:table-cell }` do style.css. */
  .conteudo .lista-catalogo .tabela td{
    display:flex; flex-wrap:wrap; align-items:baseline; gap:3px 10px;
    width:auto; padding:4px 0; border-bottom:0; font-size:13.5px;
  }
  .conteudo .lista-catalogo .tabela td::before{
    content:attr(data-rotulo);
    flex:0 0 auto; min-width:82px;
    color:var(--nt-muted); font-size:11px; font-weight:700;
    text-transform:uppercase; letter-spacing:.04em;
  }
  /* O nome é o TÍTULO do cartão: sem rótulo (ninguém precisa que lhe digam
     que aquilo é o nome) e na largura inteira. */
  .conteudo .lista-catalogo .tabela td.celula-titulo{
    display:block; padding:0 0 7px; font-size:15px;
  }
  .conteudo .lista-catalogo .tabela td.celula-titulo::before{ content:none; }
  /* E as ações vão para o RODAPÉ do cartão, separadas por um fio — no
     computador elas são a última coluna; aqui, a última linha. */
  .conteudo .lista-catalogo .tabela td.acoes-linha{
    display:flex; gap:16px; margin-top:8px; padding-top:9px;
    border-top:1px solid var(--nt-line2);
  }
  .conteudo .lista-catalogo .tabela td.acoes-linha::before{ content:none; }
  /* O espaço entre as ações agora vem do `gap`; a margem do style.css
     (18 px no celular) somaria em cima dele. */
  .conteudo .lista-catalogo td.acoes-linha > *:not(:last-child){ margin-right:0; }
  /* `nowrap` era para a coluna estreita da tabela; no cartão o valor tem a
     largura toda e pode quebrar como texto normal. */
  .conteudo .lista-catalogo .tabela td.nowrap{ white-space:normal; }
  /* --- o cartão só diz o que tem a dizer (decisão do médico, 2026-09-04) --
     No computador a coluna vazia ("—") e o status padrão ("Ativo") dão
     alinhamento à tabela; no cartão só dão altura. As duas classes vêm do
     template, que sabe o que está vazio; a coluna inteira continua na tabela
     do computador. "Inativo" NÃO some — é ele que precisa ser visto. */
  .conteudo .lista-catalogo .tabela td.vazia,
  .conteudo .lista-catalogo .tabela td.padrao{ display:none; }

  .filtro-catalogo .campo-filtro{ flex:1 1 100%; max-width:none; height:44px; }
  .filtro-catalogo .alternar-grupos{ margin-left:0; }
  .grupo-catalogo .titulo-grupo{ font-size:16px; }
}


/* ==========================================================================
   13 · O FOCO DO TECLADO APARECE  (item P2-F2, 2026-09-04)

   Quem trabalha de teclado — e no plantão isso é a regra quando a mão está
   ocupada — só sabe onde está pelo anel de foco. Aqui ele estava furado em
   dois lugares:

   · `input/select/textarea:focus` (nutria-tokens.css) trocava o contorno por
     um `box-shadow` de 3 px em `--nt-brand-soft`: #E7F0E7 no claro sobre um
     painel branco, #1C2A1E no escuro sobre fundo escuro. Nos dois temas é
     quase a cor do fundo — ou seja, sem anel;
   · quatro campos de busca (exames, lote de exames, valor do lote, entrar)
     zeravam o contorno na mão, no `style.css`.

   A regra abaixo devolve o anel só ao foco DE TECLADO (`:focus-visible`): o
   clique de mouse continua sem contorno, como o desenho pede. Mora nesta
   folha porque ela carrega DEPOIS do `nutria-tokens.css` — e, com a mesma
   especificidade, quem chega por último vence. O tom é o verde profundo da
   marca, que tem contraste nos dois temas.
   ========================================================================== */
a:focus-visible, button:focus-visible, .botao:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
summary:focus-visible, [tabindex]:focus-visible, [role="button"]:focus-visible{
  outline:2px solid var(--nt-brand-deep);
  outline-offset:2px;
}
/* Campo de texto: o anel encosta na borda arredondada, então o afastamento
   é menor e o `box-shadow` suave do tokens continua por baixo. */
input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline-offset:1px;
}


/* ==========================================================================
   14 · FICHA — CAPA DO PRONTUÁRIO  (Redline Ficha, 2026-09-04)

   A ficha do paciente deixou de ser um cadastro e virou a CAPA: a mesma
   faixa de identidade da internação, a resposta dos cinco segundos logo
   abaixo e um botão cheio ("Evoluir hoje"). Quase tudo aqui já vem pronto
   das seções 0, 3 e 4 desta folha — este bloco só acrescenta o que é
   próprio da capa.

   TODAS as regras são escopadas em `main.tela-ficha` (o `classe_main` do
   gabarito): nenhuma outra tela do app enxerga o que está aqui dentro. Se
   uma regra desta seção precisar valer noutra tela, ela muda de seção — não
   de escopo.
   ========================================================================== */

/* --- respiro entre as seções -------------------------------------------
   A capa tem cinco faixas (Agora, Internações, Medicações, Listas clínicas,
   Cadastro) e elas pedem mais ar entre si do que dentro da evolução, onde a
   faixa abre um formulário logo abaixo. A primeira não recua: ela encosta na
   faixa do paciente, que já traz a própria margem. */
main.tela-ficha .faixa-secao{ margin:30px 0 13px; }
main.tela-ficha .faixa-secao:first-of-type{ margin-top:4px; }
main.tela-ficha .grade-kpi{ margin-bottom:4px; }

/* --- as ações do cabeçalho não encolhem (computador) --------------------
   A capa tem duas ou três ações no cabeçalho; a internação tem uma. Com o
   `flex-shrink` padrão da faixa, quem cedia espaço era a CAIXA DAS AÇÕES:
   "Evoluir hoje" e "Abrir a internação" empilhavam uma sobre a outra
   enquanto ainda sobrava linha para a identidade. Aqui é a identidade que
   quebra — ela já é uma caixa que envolve, e o selo "D11 de internação"
   desce sozinho para a segunda linha, como no desenho aprovado. Só no
   computador: abaixo de 1000 px as ações já viram a grade de duas colunas
   da seção 9, e mexer no `flex` ali desfaria aquilo. */
@media (min-width: 1001px){
  main.tela-ficha .cabeca-paciente > .linha-identidade > .acoes{ flex:0 0 auto; }
}

/* --- listas clínicas em grade ------------------------------------------
   Eram quatro cartões de largura inteira empilhados: 700 px de altura para
   dez chips. Em três colunas (uma no celular) a mesma informação cabe numa
   dobra. `auto-fit` com mínimo de 280 px: nos 960 px do conteúdo dá as três
   colunas do desenho e, no estreito, cai sozinho para uma. */
main.tela-ficha .grade-listas{
  display:grid; gap:14px;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
}
main.tela-ficha .grade-listas > .cartao{ margin:0; }
main.tela-ficha .grade-listas h3{ margin:0 0 9px; font-size:14px; }
main.tela-ficha .grade-listas h3 .etiqueta{ margin-left:7px; vertical-align:middle; }
main.tela-ficha .grade-listas .sub-linha{ display:block; margin:0 0 10px; }
main.tela-ficha .grade-listas form.em-linha{ margin:0 0 10px; }

/* --- medicações: as que não mexem na terapia ficam a um clique ----------
   O `details.secao-form` do style.css já dá o triângulo e tira o marcador
   nativo; aqui só o tom de "isto é uma dobra, não um título", e o respiro
   das linhas que ela guarda. */
main.tela-ficha .recolhe-medicacoes{ margin:2px 0 6px; }
main.tela-ficha .recolhe-medicacoes > summary{
  padding:9px 0; font-size:12.5px; font-weight:700; color:var(--nt-muted);
}
main.tela-ficha .recolhe-medicacoes > summary:hover{ color:var(--nt-ink); }
main.tela-ficha .recolhe-medicacoes > .corpo{ padding-top:3px; }

/* --- a ação em forma de TEXTO não tem sombra ----------------------------
   `.link-acao` e `.link-perigo` são <button> com cara de link e herdavam do
   `button` genérico dos tokens a sombra do botão cheio. No computador quase
   não se via; no celular, com o alvo de 44 px, virava uma caixa clara
   flutuando atrás da palavra — o mesmo defeito que o P1-D1 corrigiu nos
   catálogos e que aqui tinha escapado ("Remover", na alergia). */
main.tela-ficha .link-acao, main.tela-ficha .link-perigo,
main.tela-ficha .chips-lista .remover{ box-shadow:none; }

/* --- celular ------------------------------------------------------------ */
@media (max-width: 900px){
  /* A faixa de seção é um flex de uma linha só: no estreito, "Como o
     paciente está" e a nota ("números de 3 de setembro…") disputavam a mesma
     linha e o TÍTULO quebrava em três, com a nota inteira ao lado. Aqui a
     nota desce para baixo do título — que é onde ela é lida — e a régua some
     (fio que sobra em 12 px de largura não desenha nada). */
  main.tela-ficha .faixa-secao{ flex-wrap:wrap; gap:2px 11px; }
  main.tela-ficha .faixa-secao h2{ flex:1 1 100%; }
  main.tela-ficha .faixa-secao .nota-secao{ flex:1 1 100%; order:3; }
  main.tela-ficha .faixa-secao .regua{ display:none; }
  main.tela-ficha .faixa-secao .botao{ margin-top:6px; }

  /* uma coluna: 280 px de mínimo já cairia sozinho, mas a regra explícita
     evita a coluna de 300 px com 16 px de margem numa tela de 390 */
  main.tela-ficha .grade-listas{ grid-template-columns:1fr; }

  /* alvo de dedo nas duas dobras da capa */
  main.tela-ficha .recolhe-medicacoes > summary,
  main.tela-ficha details.secao-form > summary{
    display:flex; align-items:center; min-height:44px;
  }
}