/* Agenda — registro do que foi marcado fora. A mesma <table> da fila, porque
   é a mesma gramática: cabeçalho de verdade, colunas alinhadas e agrupamento
   por <tbody>. Lá o grupo é o pedido e a margem é a pessoa; aqui o grupo é o
   dia e a margem é a data.

   As larguras são fixas de propósito: a tela empilha duas tabelas (precisa
   registrar e a semana) e troca de semana sem recarregar a folha. Largura fixa
   é o que faz as colunas continuarem alinhadas de uma lista para a outra, e de
   uma semana para a seguinte. */

/* A data mora na margem, não em cima da lista — é o que faz a tela ler como
   livro de agenda, e é um nível de hierarquia a menos: o cabeçalho de dia que
   morava aqui tinha 21px e pesava mais que o <h1> da página. Quase encosta na
   borda da folha, e o rótulo da coluna vai com ela — os 12px são o que impede
   a data de nascer colada na aresta do bloco aceso de hoje. */
.agenda .cel-dia { width: 78px; padding-left: 12px; border-right: 1px solid var(--line); }

/* A tipografia é só da célula da lista: no cabeçalho, "Dia" continua sendo
   rótulo de coluna como todos os outros. */
.agenda tbody .cel-dia {
  vertical-align: top; padding: 12px; text-align: left;
  font-family: var(--mono); font-weight: 400; letter-spacing: 0; text-transform: none;

  & .dw {
    display: block; font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
    color: var(--ink-faint);
  }

  & .dn {
    font-family: var(--sans); font-size: 27px; font-weight: 700;
    line-height: 1.15; letter-spacing: -.03em; color: var(--ink);
  }

  & .dm { font-size: 11px; color: var(--ink-faint); }
}

/* Hoje é a única casa acesa da tela — e a casa é o dia inteiro, da margem à
   última coluna, não só a tarja do número. E as divisas de dentro do dia viram
   papel: sobre o azul, a linha cinza é sujeira — o branco da folha separa as
   marcações sem furar o bloco aceso. */
.agenda tbody.hoje > tr > :is(th, td) {
  background: var(--accent-soft);
  border-bottom-color: var(--surface);
}

.agenda tbody .cel-dia.hoje {
  & .dw, & .dn, & .dm { color: var(--accent); }
}

/* O realce do ponteiro é da linha, não do dia: o grupo aqui é um dia inteiro
   de marcações, e quem aponta uma delas está trabalhando aquele exame daquela
   pessoa — não as oito horas em volta. Na fila, onde o grupo é o pedido de uma
   pessoa só, continua sendo o grupo (queue.css).

   E acende pela ação, não pela passagem: o ponteiro atravessa a lista o tempo
   todo para ler, e linha que pisca a cada varredura é ruído. Quando ele chega
   no botão é que há decisão, e o realce diz sobre qual linha ela cai — o par
   de botões da direita fica longe do nome da esquerda, e essa é a distância
   que o fundo cobre. Quem responde é o :has nativo. */
.agenda tbody tr:has(.cel-acao a:hover) td {
  background: color-mix(in oklab, var(--surface-2) 50%, var(--surface));
}

/* Dentro de hoje o mesmo realce é um azul um passo mais fundo, e não o cinza:
   sobre a casa acesa, cinza vira buraco na linha em vez de foco nela. */
.agenda tbody.hoje > tr:has(.cel-acao a:hover) > td {
  background: color-mix(in oklab, var(--accent-soft) 90%, var(--accent));
}

/* a divisa entre dias cruza a margem também */
.agenda tbody:not(:first-of-type) > tr:first-child > .cel-dia {
  border-top: 1px solid var(--line-strong);
}

/* A hora ganhou coluna própria quando a data saiu de cima da lista. */
.agenda .cel-hora { width: 54px; }

.agenda tbody .cel-hora { font-size: 13px; color: var(--ink); }

/* Agora — o filete que separa o que já passou do que ainda vem. Só existe no
   dia de hoje e só entre duas linhas: no topo ou no fim não separaria nada. */
.agenda .agora > td { padding: 3px 10px; border-bottom: 0; }

.ah {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent);

  &::after { content: ""; flex: 1; height: 1px; background: var(--accent); }
}

.agenda .cel-nome { width: 188px; }

.agenda .cel-clinica { width: 158px; }

.cnome { font-size: 13.5px; display: block; }

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

/* o telefone é link porque o trabalho desta tela é ligar */
.pfone:is(a):hover { color: var(--accent); }

/* O trilho da direita: como está, e o que fazer. A ação é uma só por linha
   (registrar ou confirmar), então é a caixa neutra da fila; duas caixas na
   mesma célula competiriam, e nunca há duas.

   A situação alinha à esquerda: são rótulos de comprimento desigual, e
   alinhados à direita cada palavra começava numa coluna diferente — a leitura
   vertical, que é como se varre a agenda, perdia o ponto de partida.

   As duas centram na linha em vez de encostar no topo: a tarja é mais baixa
   que o botão, e alinhadas pelo topo cada uma fechava num centro diferente —
   o par é que tem de ler como par. */
.agenda .cel-situacao { width: 112px; text-align: left; vertical-align: middle; }

/* Duas ações na linha marcada: corrigir o que foi marcado e registrar o que
   aconteceu. Coladas à direita e sem quebra — a coluna abre o quanto as duas
   pedem, e na aba das faltas volta a ser uma só. */
.agenda .cel-acao {
  width: 200px; text-align: right; vertical-align: middle;
  white-space: nowrap;

  & .bmarcar + .bmarcar { margin-left: 6px; }
}

/* Faltas: saiu a coluna de situação, que repetia o título da aba em toda
   linha. A justificativa é prosa e fica com a largura que sobra; a ação é a
   saída de volta para a fila. */
.agenda--faltas .cel-why { width: auto; text-align: left; }

.agenda--faltas .cel-acao { width: 235px; }

.why { font-size: 12.5px; color: var(--ink-muted); font-style: italic; }

/* O mesmo texto, agora escrevível: sem moldura no repouso, moldura leve
   quando o ponteiro chega e azul quando o foco entra — de resto é a linha
   italicizada de sempre, para a tabela não virar um formulário. */
.why:is(textarea) {
  width: 100%; font-family: inherit; border: 0; background: transparent;
  border-radius: var(--r); padding: 3px 6px; margin: -3px -6px;
  resize: none; overflow: hidden;

  /* quebra linha como o texto que era, e cresce com o que se escreve — onde
     o field-sizing ainda não chegou, fica a linha única do rows="1". */
  field-sizing: content;

  &:hover { box-shadow: inset 0 0 0 1px var(--line-strong); }

  &:focus {
    outline: 0; font-style: normal; color: var(--ink);
    background: var(--surface); box-shadow: inset 0 0 0 1px var(--accent);
  }
}

/* Navegador da semana — o controle da tela, no masthead, onde a semana já era
   nomeada. Só o controle: quem conta continua sendo a bancada, em cima da
   lista que ela conta. */
.sem-nav { display: flex; align-items: center; gap: 4px; }

/* Setas são botões de verdade — todo botão tem fundo. Quadradas e pequenas:
   são repetição, não decisão. */
.sem-seta {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: var(--r);
  background: var(--surface-2); color: var(--ink-muted);
  font-size: 16px; line-height: 1;

  &:hover { background: var(--accent-soft); color: var(--accent); }
}

/* O rótulo é o que se lê, e as setas é que são acessório: por isso ele vem no
   mono de dado do app — 13px, semibold, entrelinhamento curto — e não no mono
   caps rarefeito dos rótulos de bancada, que numa data de onze dígitos virava
   filigrana. A largura mínima é a do intervalo que vira o mês (28/09–04/10):
   justa, para as setas não ficarem boiando longe do que elas trocam. */
.sem-rot {
  font-family: var(--mono); font-size: 13px; font-weight: 600; letter-spacing: .02em;
  color: var(--ink); text-align: center; padding: 6px 8px; min-width: 6.75rem; white-space: nowrap;
  border: 0; border-radius: var(--r); background: transparent; cursor: pointer;
}

/* O rótulo é o alvo do calendário, e o campo de data se esconde atrás dele.
   Nenhum widget escrito à mão — quem desenha o mês é o navegador, como nos
   dois campos da tela de marcar. O campo fica sem eventos e fora da ordem de
   tabulação: existe para ancorar o seletor embaixo do rótulo e para carregar
   o valor no submit, não para ser clicado. Quem clica é o botão, que chama o
   showPicker() (ver picker_controller.js). */
.sem-pick { position: relative; display: flex; }

.sem-dia {
  position: absolute; inset: 0; width: 100%; min-width: 0;
  padding: 0; border: 0; background: transparent;
  opacity: 0; pointer-events: none;
}

/* Sem fundo no repouso, como as abas: quem carrega o vocabulário de botão são
   as setas dos dois lados, e o rótulo no meio é o valor que elas trocam. O
   fundo entra no ponteiro, para dizer que ali também se clica. */
.sem-pick:hover .sem-rot { background: var(--surface-2); color: var(--accent); }

.sem-rot:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* "hoje" só existe quando há de onde voltar — quem o esconde é a view. Fica
   antes das setas: elas é que se repetem, e repetição quer alvo parado. Se
   entrasse depois, aparecer e sumir empurraria o ">" de lugar a cada clique. */
.sem-hoje {
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  background: var(--surface-2); color: var(--ink-muted);
  border-radius: var(--r); padding: 8px 10px; margin-right: 8px;

  &:hover { background: var(--accent-soft); color: var(--accent); }
}

/* O navegador é controle, não conteúdo: no papel sai a semana que está na
   tela, e as setas não levam a lugar nenhum. */
@media print { .sem-nav { display: none; } }

/* contagem de resultados da busca da agenda */
.agenda-hits {
  font-family: var(--mono); font-size: 11px; letter-spacing: .05em;
  color: var(--ink-faint); margin: 0 0 18px;
}

/* Comparecimento — a justificativa e a remarcação só existem depois de "não
   compareceu". A conta é do :has nativo: esta tela não tem JavaScript. */
.attendance .quando-falta { display: none; }

.attendance:has(.cards input[value="no"]:checked) .quando-falta { display: block; }