/* Pacientes — o fichário e a ficha. Duas telas que quase não trazem forma
   nova: a tabela é a `.fila`, a margem é a mesma da Agenda, o vazio é o
   `.nada`, o chip do polegar é o chip de categoria e o estado é o `.sinal`. O
   que existe aqui é o que as duas acrescentam — a margem de letra e a faixa
   de identidade.

   Referência visual: docs/mockup-pacientes.html. */

/* ── índice ──────────────────────────────────────────────────────────────
   O fichário: a inicial mora na margem e atravessa as linhas dela, como o
   dia na Agenda e o pedido na Fila. Terceira margem da mesma tabela. */
.pacientes .cel-letra {
  width: 78px; padding-left: 2px; border-right: 1px solid var(--line);
}

.pacientes tbody .cel-letra {
  vertical-align: top; padding: 12px 12px 12px 2px; text-align: left;
  font-family: var(--sans); font-size: 27px; font-weight: 700;
  line-height: 1.15; letter-spacing: -.03em; color: var(--ink-faint);
  text-transform: none;
}

/* a divisa entre letras cruza a margem também — mesma regra da Agenda */
.pacientes tbody:not(:first-of-type) > tr:first-child > .cel-letra {
  border-top: 1px solid var(--line-strong);
}

.pacientes .cel-doc    { width: 164px; }
.pacientes .cel-nasc   { width: 104px; }
.pacientes .cel-aberto { width: 122px; }
.pacientes .cel-ultimo { width: 108px; }

/* A linha inteira é a porta da ficha. Há um <a> só, no nome, esticado sobre
   a linha pelo ::after: um alvo, um tab stop, nenhum JavaScript — e o realce
   já vem de graça do `tbody:hover td` que a .fila desenha. Um botão "Ficha" em
   toda linha seria a mesma viagem escrita duas vezes.

   Quem ancora o overlay é a <tr>. Posicionar linha de tabela é suportado nos
   três motores atuais, e é bem menos exótico que o `appearance: base-select`
   e o `field-sizing` que este app já usa. */
.pacientes tbody tr { position: relative; }

.pacientes .pnome a::after { content: ""; position: absolute; inset: 0; }

/* A margem da letra fica fora do alvo: com rowspan ela cobre várias linhas, e
   clicar no "A" não é escolher o primeiro nome dele. */
.pacientes .cel-letra { position: relative; z-index: 1; }

/* Documento e cartão do SUS: o que separa dois homônimos, e exatamente o que
   a busca casa (Patient.search_scope). Mono, porque é dado de registro. */
.pdoc { font-family: var(--mono); font-size: 12px; font-variant-numeric: tabular-nums; display: block; }

.pcns, .pnasc-sub {
  font-family: var(--mono); font-size: 12px; color: var(--ink-faint);
  font-variant-numeric: tabular-nums; display: block; margin-top: 3px;
}

.pnasc { font-family: var(--mono); font-size: 12px; font-variant-numeric: tabular-nums; display: block; }

/* Último registro: a data, e embaixo o que foi. Cinza — é referência, não
   pendência; quem tem pendência já se anuncia na coluna do lado. */
.pult { font-family: var(--mono); font-size: 12px; font-variant-numeric: tabular-nums; display: block; }

.pult-o {
  font-size: 12px; color: var(--ink-faint); display: block; margin-top: 3px;
  font-family: var(--mono); letter-spacing: .04em; text-transform: uppercase;
}

/* ── ficha ───────────────────────────────────────────────────────────────
   A ficha é leitura, não bancada. Nenhum botão de ação e nenhum atalho para
   o que a Fila e a Agenda já fazem: quem abre esta tela quer saber o que
   aconteceu com a pessoa, e resolver tem tela própria.

   Referência visual: docs/mockup-historico-paciente.html, alternativa A. */

/* A faixa da ficha: a saída e o cadastro, o nome e a identidade, num fundo
   surface-2 de borda a borda da folha. É o que separa "ficha de uma pessoa"
   de "lista de muitas" num relance, sem cor nova. As margens negativas são o
   padding da .folha (folha.css), desfeito para a faixa encostar nas bordas.

   O --btn-bg é herdado pelos botões de dentro: o .btn quieto é surface-2, e
   surface-2 sobre surface-2 sumia. */
.ficha-topo {
  --btn-bg: var(--surface);
  margin: -44px -52px 28px; padding: 28px 52px 22px;
  background: var(--surface-2);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  border-bottom: 1px solid var(--line-strong);
}

/* A volta à esquerda, o cadastro na outra ponta: as duas saídas da ficha,
   no mesmo tamanho. */
.trilha {
  display: flex; align-items: center; gap: 12px; margin: 0 0 22px;

  & .push-end { margin-left: auto; }
}

.ficha-cabeca {
  margin: 0 0 18px;

  & h1 { font-size: 24px; font-weight: 700; letter-spacing: -.02em; margin: 0; }
}

.ficha-tipo { font-size: 13px; color: var(--ink-muted); margin: 0 0 4px; }

/* Os campos da identidade em sans, caixa normal e peso de leitura, com o
   espaçamento de formulário impresso: rótulo em cima, valor embaixo. O mono
   caps espaçado do .t-label lia como saída de máquina. */
.ficha-dados {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 20px 32px;

  & > div { display: grid; gap: 2px; align-content: start; }
}

.fd-rot { font-size: 13px; font-weight: 500; color: var(--ink-muted); }

.fd-val { font-size: 15.5px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); }

/* o telefone é o único dado aceso: é o que se usa */
.fd-val:is(a) { color: var(--accent); }

.fd-sub { font-size: 13px; color: var(--ink-muted); }

@media (max-width: 52rem) {
  .ficha-dados { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 45rem) {
  .ficha-topo { margin: -28px -20px 28px; padding: 22px 20px 20px; }
}

/* ── a gaveta ────────────────────────────────────────────────────────────
   A travessia entre uma lista e a ficha, dentro da folha. A barra e o fundo
   não se mexem. Quem põe as classes é application.js, e ele não põe nenhuma
   para quem pediu menos movimento ao sistema.

   Ida: a lista esmaece (.sai). A ficha entra com o masthead e a busca da
   lista copiados por baixo (.gaveta-resto), e a faixa desce por cima deles.
   Volta: o histórico esmaece. A lista entra com a faixa da ficha copiada por
   cima (.gaveta-tampa), e a faixa sobe revelando a lista.

   Os tempos são estes três tokens e mais nada: o JS espera as animações
   acabarem e não conta milissegundos. A curva é a da travessia entre telas
   (controls.css), que faz quase todo o caminho no primeiro terço. */
:root {
  --gaveta-sai: .14s;
  --gaveta-mov: .32s;
  --gaveta-curva: cubic-bezier(.16, 1, .3, 1);
}

/* A folha recorta o que passa da borda dela, e a altura anda junto com a
   faixa em vez de saltar de uma página para a outra. */
.gaveta-ida, .gaveta-volta {
  position: relative; overflow: clip;
  transition: block-size var(--gaveta-mov) var(--gaveta-curva),
              min-block-size var(--gaveta-mov) var(--gaveta-curva);
}

/* Só opacidade: quem se move é a faixa, e nada anda contra ela. */
.sai { animation: gaveta-sai var(--gaveta-sai) ease-in both; }

/* O topo da lista por baixo da faixa que desce. O inset é o padding da folha. */
.gaveta-resto { position: absolute; inset: 44px 52px auto; pointer-events: none; }

/* A faixa da ficha por cima da lista que chega. Ela encosta nas bordas da
   folha sozinha, então a margem negativa da .ficha-topo sai aqui. */
.gaveta-tampa {
  position: absolute; inset: 0 0 auto; z-index: 1; pointer-events: none;
  animation: gaveta-sobe var(--gaveta-mov) var(--gaveta-curva) both;
}

:where(.gaveta-tampa) > .ficha-topo { margin: 0; }

/* O que anima é o filho da folha, e quem diz que é hora é a classe na
   folha: :where() para o seletor não pesar mais que uma classe.

   O histórico começa a aparecer com a faixa ainda no caminho, e a lista
   reaparece inteira menos o masthead e a busca, que a faixa cobria. */
:where(.gaveta-ida) > .ficha-topo {
  position: relative; z-index: 1;
  animation: gaveta-desce var(--gaveta-mov) var(--gaveta-curva) both;
}

:where(.gaveta-ida > .ficha-topo) ~ *,
:where(.gaveta-volta) > :not(.masthead, turbo-frame, .gaveta-tampa),
:where(.gaveta-volta > turbo-frame) > :not(.painel) {
  animation: gaveta-surge var(--gaveta-mov) var(--gaveta-curva) .1s both;
}

/* As calhas trocam de vizinha junto com a página: chegam esmaecidas. */
.gaveta-chega { animation: gaveta-sai var(--gaveta-mov) ease-out reverse both; }

/* O nome de quem estava com a ficha aberta, de volta na lista: acende e
   apaga, para o olho achar a linha de onde saiu. */
.gaveta-acende { animation: gaveta-acende 2.4s ease-out both; }

@keyframes gaveta-sai    { to { opacity: 0; } }
@keyframes gaveta-sobe   { to { translate: 0 -100%; } }
@keyframes gaveta-desce  { from { translate: 0 -100%; } }
@keyframes gaveta-surge  { from { opacity: 0; translate: 0 8px; } }
@keyframes gaveta-acende { 0%, 40% { color: var(--accent); } }

/* Histórico — o prontuário. Margem = o papel que chegou ao balcão: a data,
   com o ano no lugar do dia da semana da Agenda, o recado e a foto da guia. */
/* O texto mais comprido da coluna é o "ainda não marcado", não a data. O
   nowrap é que manda: em tabela de layout automático a largura é sugestão, e
   sem ele a frase quebrava em duas linhas ao lado de um exame de uma só. */
.prontuario .cel-quando { width: 140px; white-space: nowrap; }

.prontuario .cel-clinica { width: 146px; }

.prontuario .cel-desfecho { width: 200px; vertical-align: top; }

.prontuario .cel-dia .attach { margin-top: 8px; }

.prontuario .cel-dia .pnota { margin-left: 0; margin-top: 6px; display: inline-flex; }

/* A data do exame em coluna própria: o dia em mono, como todo dado de
   registro, e a hora na linha de baixo — quem corre a ficha procura o dia,
   e a hora só importa depois de achá-lo. */
.cdata { font-family: var(--mono); font-size: 13px; color: var(--ink); display: block; }

/* A segunda linha de uma célula do prontuário: a hora embaixo do dia, a
   forma de pagamento embaixo do nome da clínica. */
.csub {
  font-family: var(--mono); font-size: 12.5px; color: var(--ink-muted);
  font-variant-numeric: tabular-nums; display: block; margin-top: 3px;
}

/* O desfecho não tem forma própria: é o .sinal de dias.css, o mesmo da
   Agenda e do Relatório (UiHelper#outcome_cell). */

/* a justificativa da falta, em texto — a mesma linha italicizada da Agenda */
.prontuario .why { display: block; margin-top: 5px; max-inline-size: 32ch; }

.prontuario .attach { margin-top: 8px; }

/* o traço da célula que não tem o que dizer */
.nao-marcado { color: var(--ink-faint); }