/* 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 `.situ`. 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: 10.5px; 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: 10.5px; 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.

   Cabeçalho de laudo: o nome, e logo abaixo a identidade em campos
   rotulados, em primeiro plano. Os papéis de texto são os do sistema
   (.t-label e .t-data) — o que é novo aqui é só a grade. */
.ficha-dados {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 20px 36px; margin: 24px 0 30px;

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

  & .t-data { color: var(--ink); font-size: 14px; }

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

  & .sub {
    font-family: var(--mono); font-size: 10.5px; color: var(--ink-faint);
    font-variant-numeric: tabular-nums;
  }
}

/* O respiro até o "histórico" mora aqui e não lá: a .section-rule zera a
   margem de cima quando é o primeiro <p> da folha, e a régua dela subia em
   cima do "68 anos". */

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

/* 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; }

/* O mês em abreviação, não em número. Na Agenda a margem é do dia da semana
   que está chegando e "/09" basta; aqui ela é de um papel de anos atrás, e
   "04 nov" se lê sem contar casas. Sem tabular-nums: não é mais número. */
.prontuario .cel-dia .dm { margin-left: 4px; }

.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: 11.5px; color: var(--ink-muted);
  font-variant-numeric: tabular-nums; display: block; margin-top: 3px;
}

/* O desfecho não tem forma própria: é o .situ de badges.css, o mesmo estado
   em texto da Agenda e do fichário. O que era .desfecho--* aqui virou
   variante de lá — e a falta em vermelho, que esta tela pinta e a Agenda
   não, mora no ui_helper, que é quem escolhe o tom. */

/* 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); }