/* Fila — uma <table> de verdade. A tabela dá de graça o que o grid não dava:
   cabeçalho com aria-sort, associação coluna↔célula para leitor de tela,
   colunas alinhadas entre todos os grupos (é uma tabela só) e agrupamento sem
   repetição, por rowspan.

   A régua de cima vem do .bench-head — a fila não traz régua própria. */

/* Painel — a busca e o alternador na mesma linha. Os dois componentes já
   trazem margem de quando vivem sozinhos; aqui quem espaça é o painel. */
.painel {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 16px;

  & :where(.search-field) { flex: 1 1 280px; margin-bottom: 0; }

  /* as abas acompanham a altura da busca: duas peças na mesma faixa lendo
     como uma só barra, sem número de altura escrito à mão em lugar nenhum */
  & :where(.view-toggle) { margin-bottom: 0; align-self: stretch; }
}

/* Categorias — o corte de quem vai ligar para o laboratório de uma vez só. */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 20px; }

.chip {
  display: inline-block;
  border: 1px solid var(--line); cursor: pointer; border-radius: 999px; background: transparent;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  padding: 5px 12px; color: var(--ink-muted);

  &[aria-current], &[aria-pressed="true"] {
    background: var(--accent); border-color: var(--accent); color: var(--accent-ink);
  }
}

/* A tabela rola dentro do próprio quadro quando não couber — a folha nunca
   rola de lado. Só aparece quando falta largura de verdade. */
/* O filete que separa os controles da lista: fica no topo da tabela, então
   não importa quem vem por último acima — busca ou categorias. */
.fila-rolagem { border-top: 1px solid var(--line-strong); }

/* Quando a lista vem logo abaixo de um título de seção, a régua dela sobra: o
   título já é uma régua, e as duas ficavam a catorze pixels uma da outra. A
   de cima fica, que é a que carrega o rótulo. */
.section-rule + .fila-rolagem { border-top: 0; }

/* A rolagem é escopada, e a media query não é economia: `overflow-x: auto` não
   existe sozinho — pela regra do CSS o eixo que sobrou deixa de ser `visible`
   junto, e aí o quadro recorta também em cima, comendo o balão do recado da
   primeira linha. Acima de 66rem a folha está no seu teto de 1040px e a tabela
   cabe inteira (854px de mínimo), então o contêiner nem precisa existir.

   ponytail: abaixo de 66rem a rolagem é necessária e um recado comprido pode
   sair cortado na primeira linha. Se incomodar, o caminho é popover no top
   layer com posição por JS, como o combobox já faz. */
@media (max-width: 66rem) {
  .fila-rolagem { overflow-x: auto; }
}

.fila {
  width: 100%; border-collapse: collapse; font-size: 14px;

  & th {
    font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
    color: var(--ink-faint); font-weight: 400; text-align: left;
    padding: 9px 10px; border-bottom: 1px solid var(--line);

    /* a coluna ordenada se anuncia em texto e em seta — nunca só na seta */
    &[aria-sort] { color: var(--ink); }

    &[aria-sort="descending"] a::after { content: "▼"; font-size: 7px; margin-left: 5px; }

    &[aria-sort="ascending"] a::after { content: "▲"; font-size: 7px; margin-left: 5px; }
  }

  & td { padding: 11px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }

  /* um <tbody> por paciente; a régua mais forte é a divisa entre pessoas */
  & tbody:not(:first-of-type) > tr:first-child > td { border-top: 1px solid var(--line-strong); }

  /* Um nível de tinta só, e é o do grupo: a célula da margem tem rowspan, e
     quem aponta uma linha está trabalhando o que a margem nomeia — o pedido
     na fila, o dia na agenda, a letra no fichário. Realçar a linha por dentro
     do grupo realçado era tinta em cima de tinta, e a de baixo é que diz o
     assunto. O tom é meio passo até o hover do sistema: nenhum cinza novo
     entra, e o sentido é o mesmo nos dois temas.

     A agenda fica de fora: lá o grupo é o dia, e apontar uma linha não é
     trabalhar o dia inteiro — o realce dela é por linha (agenda.css). */
  &:not(.agenda) tbody:hover td { background: color-mix(in oklab, var(--surface-2) 50%, var(--surface)); }
}

.cel-pessoa { border-right: 1px solid var(--line); width: 238px; }

/* O nome é a porta da ficha do paciente, nas três telas que o mostram. O <a>
   vai por dentro e não no lugar do .pnome: na fila o balão do recado mora
   aqui, e botão dentro de link é markup inválido.

   Sem sublinhado, como todo link do app — quem anuncia é o azul quando o
   ponteiro chega, o mesmo idioma do .pfone da Agenda logo abaixo. */
.pnome { font-weight: 700; font-size: 14.5px; display: block; }

.pnome a:hover { color: var(--accent); }

.pfone { font-family: var(--mono); font-size: 11.5px; color: var(--ink-muted); display: block; margin-top: 2px; }

/* O recado deixou de ocupar uma linha da célula e virou ícone: numa fila de
   dezenas de linhas, uma frase que só interessa na hora de ligar não precisa
   engordar toda célula. O balão é o [data-tip] de tip.css — aqui só se
   sobrescrevem os tokens dele.

   Matiz continua fora da conversa no repouso, que é a regra da tabela (cor
   significa espera): o ícone é tinta apagada e só acende em azul quando o
   ponteiro ou o foco chega. O fundo do botão também só aparece aí — com fundo
   permanente, o `tr:hover` pinta a célula do mesmo --surface-2 e o botão
   desapareceria dentro dela. */
.pnota {
  display: inline-flex; vertical-align: -2px; margin-left: 5px;
  padding: 2px; border: 0; border-radius: var(--r); cursor: pointer;
  color: var(--ink-faint); background: transparent;

  /* Recado é prosa de comprimento variável: quebra linha em vez de virar uma
     faixa atravessando a tela. Ancorado na esquerda do ícone e não centrado —
     com nome curto, o balão centrado sairia pela borda esquerda da tabela. */
  --tip-w: 240px;
  --tip-wrap: normal;
  --tip-inset: auto auto calc(100% + 6px) 0;
  --tip-shift: 0;

  &:is(:hover, :focus-visible) { color: var(--accent); background: var(--accent-soft); }
}

.plote { display: inline-block; margin-top: 8px; font-size: 12.5px; color: var(--accent); font-weight: 600; }

.enome { font-weight: 600; }

.ecat {
  font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-faint); display: block; margin-top: 2px;
}

.cel-prep { width: 180px; }

/* O preparo é uma frase de instrução, não um valor de um conjunto pequeno —
   e é por isso que ele não usa chip. Prosa dentro de chip vira caixa de
   tamanho irregular, com a borda direita brigando justamente com o
   alinhamento de coluna que a tabela existe para criar; e o cinza do chip é o
   mesmo do trilho da barra e do botão, três significados num preenchimento só.
   Nota é texto. */
.prep { display: block; font-size: 12.5px; line-height: 1.4; color: var(--ink-muted); }

/* Espera — barra-alvo: o trilho inteiro vale o limite de encalhe, e o
   preenchimento é o quanto já se esperou. Assim o comprimento responde "quão
   perto do prazo?", que é a pergunta de quem atende, e a escala é fixa — a
   mesma largura significa a mesma coisa hoje e daqui a três meses. O traço no
   fim do trilho é o prazo; passar dele é estado, e fica vermelho. */
.cel-espera { width: 172px; white-space: nowrap; }

.bullet {
  position: relative; display: inline-block; vertical-align: middle;
  width: 74px; height: 8px; border-radius: 2px; background: var(--surface-2);

  /* ponta ancorada quadrada, ponta de dado arredondada */
  & > i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 0 2px 2px 0; display: block; }

  &::after {
    content: ""; position: absolute; right: -1px; top: -3px; bottom: -3px;
    width: 2px; background: var(--line-strong); border-radius: 1px;
  }

  &.is-urgent::after { background: var(--urgent); }
}

.days { font-family: var(--mono); font-size: 12px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }

.cel-espera .days { margin-left: 9px; }

.days.is-urgent { color: var(--urgent); font-weight: 700; }

.entrada {
  font-family: var(--mono); font-size: 10.5px; color: var(--ink-faint);
  display: block; margin-top: 4px;
}

/* Quarenta linhas são quarenta botões: em azul sólido eles competiriam com a
   única coisa que a cor deve dizer aqui. Fundo neutro — a regra "todo botão
   tem fundo" continua valendo —, azul só quando o ponteiro chega. */
.cel-acao { width: 104px; text-align: right; }

.bmarcar {
  display: inline-block;
  font-family: var(--sans); font-size: 13px; font-weight: 600; cursor: pointer;
  border-radius: var(--r); padding: 7px 14px; color: var(--ink-muted); background: var(--surface-2);

  /* Contorno sempre: na linha sob o ponteiro a célula fica do mesmo
     --surface-2 do botão e ele sumiria dentro dela; fora dela a borda ainda
     é o que faz o bloco cinza ler como botão. Inset, para não empurrar nada. */
  box-shadow: inset 0 0 0 1px var(--line-strong);

  &:hover { background: var(--accent); color: var(--accent-ink); box-shadow: none; }
}

/* A ação secundária da linha — Editar, ao lado da ação do dia. Menos da
   metade da tinta no repouso é o que separa "está aqui se precisar" de "é
   isto que se faz agora"; sob o ponteiro volta inteiro, porque botão apagado
   no hover lê como desabilitado. */
.bmarcar--fraco {
  opacity: .45;

  /* Sob o ponteiro volta inteiro e em vermelho, não no azul do .bmarcar: o
     azul é da ação que avança (marcar, registrar), e corrigir é o gesto que
     mexe no que já está escrito. */
  &:hover {
    opacity: 1;
    color: var(--urgent); background: var(--urgent-soft);
  }
}

.vazio { padding: 34px 4px; color: var(--ink-faint); font-size: 14px; }

.vazio a { color: var(--accent); font-weight: 600; }

/* Nada na fila — o estado vazio não é uma linha dentro da tabela: a tabela
   inteira sai (ver exams/index) e no lugar dela fica o recado com o gesto que
   o resolve. Painel em --surface-2 e sem moldura: a folha já é a borda, e uma
   caixa tracejada dentro dela só desenharia um buraco. */
.nada {
  position: relative; overflow: hidden;
  background: var(--surface-2); border-radius: var(--r);
  padding: 60px 24px; text-align: center;

  /* A pauta: a folha em branco antes da primeira linha. É o que a tela seria
     com alguém na fila, desenhado em --line e apagando nas bordas — textura,
     não moldura. Sem ela o bloco é um retângulo cinza, que é o jeito de uma
     tela dizer que quebrou em vez de dizer que está em dia. */
  &::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: repeating-linear-gradient(to bottom, transparent 0 39px, var(--line) 39px 40px);
    mask-image: radial-gradient(115% 92% at 50% 50%, #000 22%, transparent 76%);
  }

  & > * { position: relative; }

  & p { margin: 0; }

  & .nada-tag {
    font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em;
    text-transform: uppercase; color: var(--ink-faint);
  }

  & .nada-diz { margin-top: 10px; font-size: 17px; font-weight: 600; }

  & .nada-sub {
    margin: 6px auto 0; max-inline-size: 46ch;
    font-size: 13.5px; color: var(--ink-muted); text-wrap: pretty;
  }

  & .btn { margin-top: 22px; }
}

/* Aqui havia uma entrada com @starting-style, para a régua e os chips que
   nascem do nada quando o primeiro papel entra numa fila vazia. Ela não sabia
   distinguir esse momento do resto: @starting-style dispara em toda inserção,
   e a visita do Turbo Drive insere duas vezes — primeiro a prévia do cache,
   depois a resposta da rede. Duas piscadas a cada abertura da tela, pelo
   ganho de uma animação rara. O princípio é o mesmo do .stamp em stamps.css:
   entrada pertence ao momento, não ao elemento; sem um momento para pendurar,
   não há entrada. */

@media (max-width: 52rem) {

  /* o preparo é o primeiro a sair: ele reaparece inteiro dentro do modal */
  .cel-prep { display: none; }

  /* larguras fixas viram mínimas: o que sobra vai para os nomes. Abaixo do
     que cabe, a rolagem do quadro assume. */
  .cel-pessoa, .cel-espera, .cel-acao { width: auto; }

  .fila td, .fila th { padding-inline: 6px; }
}