/* 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 e
   colunas alinhadas entre todos os grupos (é uma tabela só). O grupo é o
   <tbody> de cada paciente; as linhas dele têm todas a mesma altura.

   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(--sans); font-size: 13px; letter-spacing: .01em;
  padding: 5px 12px; color: var(--ink-muted);
  &::first-letter { text-transform: uppercase; }

  &[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: 12px; 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: quem aponta uma linha está
     trabalhando o que o grupo nomeia — a pessoa 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)); }
}

/* A célula da pessoa não é margem: ela só tem conteúdo na primeira linha do
   grupo, e por isso não leva régua à direita. */
.cel-pessoa { width: 212px; }

/* 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. */
/* Nome não quebra: "Francisca de / Paula Santos" em duas linhas lê como duas
   pessoas, e empurra o telefone para longe do dono. */
.pnome { font-weight: 600; font-size: 14.5px; display: block; white-space: nowrap; }

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

.pfone { font-family: var(--mono); font-size: 12.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); }
}

/* Só na fila de Exames o nome abre a marcação, e só lá ele é <a>: azul e
   sublinhado no ponteiro. Na ficha, na Agenda e no Relatório é <span> e fica
   na tinta do texto, para o azul continuar querendo dizer "clique aqui". */
.enome {
  font-weight: 600;
  &:where(a) { color: var(--accent); }
  &:where(a):hover { text-decoration: underline; }
}

/* A dica da fila: faixa no azul claro da ação, e o alvo do clique em azul,
   na cor do link que ela aponta. */
.dica {
  margin: -4px 0 14px; padding: 9px 12px; border-radius: var(--r);
  background: var(--accent-soft); font-size: 14px; color: var(--ink);

  & b { font-weight: 600; color: var(--accent); }
}

.ecat {
  font-size: 12.5px; color: var(--ink-faint); display: block; margin-top: 2px;
  &::first-letter { text-transform: uppercase; }
}

.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: os dias numa tarja, e a faixa (UiHelper::WAIT_STEPS) dá a tinta.
   Cinza até o limite de encalhe; depois, vermelho cada vez mais cheio, para
   o mais atrasado saltar da lista de cima a baixo. Vermelho continua sendo só
   prazo: toda faixa vermelha já passou dele. */
.cel-espera { width: 172px; white-space: nowrap; }

.espera {
  display: inline-block; min-width: 76px; box-sizing: border-box; text-align: center;
  font-family: var(--mono); font-size: 12.5px; font-weight: 700;
  padding: 3px 8px; border-radius: var(--r);
  background: var(--esp-bg); color: var(--esp-c);
}

.espera--1 { --esp-bg: var(--surface-2); --esp-c: var(--ink-muted); }
.espera--2 { --esp-bg: color-mix(in oklab, var(--urgent) 12%, var(--surface)); --esp-c: var(--urgent); }
.espera--3 { --esp-bg: color-mix(in oklab, var(--urgent) 28%, var(--surface)); --esp-c: var(--urgent); }
.espera--4 { --esp-bg: color-mix(in oklab, var(--urgent) 60%, var(--surface)); --esp-c: var(--surface); }
.espera--5 { --esp-bg: var(--urgent); --esp-c: var(--surface); }

.entrada {
  font-family: var(--mono); font-size: 12px; 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-size: 13px; color: var(--ink-faint);
    &::first-letter { text-transform: uppercase; }
  }

  & .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; }
}