/* Agenda — a lista por dia. Não é a <table> da fila: o dia mora na margem,
   cobrindo as linhas dele, e cada marcação é uma linha de grid com cinco faixas
   fixas — hora, quem e o quê, onde, o que chegou de fora, a ação — para os
   dias alinharem entre si de cima a baixo. A aba das faltas continua na
   tabela (agenda.css).

   A lei da linha: chip só para o que vem de fora (a resposta do paciente pelo
   WhatsApp) e para o desfecho terminal; o que a secretaria faz é botão, e só
   aparece quando há o que fazer; o que não aconteceu é célula vazia. */

/* O que precisa da secretaria, contado no topo. Cada contador é um filtro:
   clicar mostra só aquelas linhas, de qualquer data. É o que sobrou das
   bancadas. Cada um tem a cor do que filtra na linha: âmbar o "Cancelou",
   azul o botão de registrar, contorno o "Sem WhatsApp". */
.pend {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 0;
}

.pend-rot { font-size: 13px; font-weight: 600; color: var(--ink); margin-right: 4px; }

.pend-nada { font-size: 13px; color: var(--ink-faint); }

.filtro {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 500; color: var(--ink);
  background: var(--filtro-bg, var(--surface-2)); border-radius: var(--r); padding: 8px 12px;
  box-shadow: inset 0 0 0 1px var(--filtro-borda, transparent);

  & b {
    font-family: var(--mono); font-size: 14px; font-weight: 700;
    font-variant-numeric: tabular-nums; color: var(--filtro-c, var(--accent));
  }

  &:hover { box-shadow: inset 0 0 0 1px var(--filtro-c, var(--accent)); }

  &[aria-pressed="true"] { box-shadow: inset 0 0 0 1.5px var(--filtro-c, var(--accent)); }
}

.filtro--alerta { --filtro-bg: var(--warn-soft);   --filtro-c: var(--warn); }
.filtro--acao   { --filtro-bg: var(--accent-soft); --filtro-c: var(--accent); }
.filtro--fora   { --filtro-bg: transparent; --filtro-borda: var(--line); --filtro-c: var(--ink-faint); }

/* O dia mora na margem, como a letra em Pacientes: a seção é uma grade de
   duas colunas, a margem com a altura inteira do dia e as linhas ao lado. A
   régua forte é a divisa entre dias e atravessa a margem.

   A margem só diz o dia. Contagem e resumo saíram: o que chegou de fora já
   está no sinal de cada linha, e o que a secretaria precisa fazer está no
   bloco Passou e no botão azul. Hoje se distingue só pela tinta cheia, no
   mesmo tamanho dos outros dias. */
.dia { display: grid; grid-template-columns: 132px minmax(0, 1fr); }

:where(.dia, .atraso) + .dia, .periodo + .dia { border-top: 1px solid var(--line-strong); }

.dia-cab { padding: 14px 12px 14px 2px; border-right: 1px solid var(--line); }

.dia-nome {
  margin: 0; font-family: var(--mono); font-size: 12px; font-weight: 400;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); line-height: 1.4;
}

.dia-data {
  display: block; margin-top: 2px;
  font-size: 20px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1;
  color: var(--ink-muted);
}

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

.dia--hoje .dia-data { color: var(--ink); }

/* A régua forte sobre o primeiro dia, sem rótulo: a margem e as linhas falam
   por si. */
.dias-cab { margin-top: 16px; border-bottom: 1px solid var(--line-strong); }

/* O separador de período entre os dias: "Semana que vem". Atravessa as duas
   colunas e fica por cima da régua do dia que ele abre. */
.periodo {
  margin: 36px 0 10px; font-size: 12px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint);
}

/* Passou — o que passou antes de hoje sem desfecho. Dia passado não é dia da
   agenda: o que sobra dele é pendência, e as pendências se empilham numa
   faixa só, fechada por padrão (_passou).

   Vermelho pela lei de cor: hora que passou sem registro é prazo vencido. A
   cor é o fundo da faixa, com o texto na tinta normal, como no .sinal; o
   gesto de abrir continua azul, porque é ação. Aberto, o bloco inteiro ganha
   o invólucro: o filete vermelho em volta e as linhas num vermelho mais claro
   que o da faixa, para ler como um assunto só e não como mais dias. */
.atraso { border-bottom: 1px solid var(--line-strong); }

.atraso > summary {
  display: grid; grid-template-columns: 132px minmax(0, 1fr);
  list-style: none; cursor: pointer; background: var(--urgent-soft);

  &::-webkit-details-marker { display: none; }
}

.atraso-m {
  display: flex; align-items: center; padding: 12px 12px 12px 14px;
  border-right: 1px solid var(--line);
  font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-muted);
}

.atraso-t {
  display: flex; align-items: baseline; gap: 10px; padding: 12px 14px;
  font-size: 13.5px;

  & b { font-family: var(--mono); font-size: 15px; font-weight: 700; }

  & .de { font-family: var(--mono); font-size: 12px; color: var(--ink-faint); }

  /* o gesto, na ponta: o texto acompanha o estado do <details> */
  & .abre { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--accent); }
}

.atraso > summary:hover .abre { text-decoration: underline; }

.atraso:not([open]) .abre::after { content: "ver os exames"; }

.atraso[open] .abre::after { content: "ocultar"; }

.atraso[open] {
  /* outline e não borda nem sombra: ele é pintado por cima dos fundos da
     faixa e das linhas, e não mexe na medida de nada */
  margin-bottom: -1px; border-bottom: 0; border-radius: var(--r);
  outline: 1px solid var(--urgent); outline-offset: -1px;

  & > summary { border-radius: var(--r) var(--r) 0 0; border-bottom: 1px solid var(--line); }

  & > .dia { background: color-mix(in oklab, var(--urgent-soft) 35%, var(--surface)); }

  /* dentro do contorno, a ação não encosta na borda: o mesmo recuo da esquerda */
  & .marc { padding-right: 14px; }
}

/* a data no lugar da hora, e a hora embaixo, menor */
.m-data { display: block; font-family: var(--mono); font-size: 13px; font-weight: 600; }

.m-hsub { display: block; font-family: var(--mono); margin-top: 2px; font-size: 12px; font-weight: 400; color: var(--ink-faint); }

.marcs { list-style: none; margin: 0; padding: 0; }

.marc {
  display: grid; align-items: center; gap: 12px;
  grid-template-columns: 56px minmax(0, 1fr) 176px 132px 116px;
  padding: 14px 8px 14px 14px; position: relative;
  border-bottom: 1px solid color-mix(in oklab, var(--line-strong) 55%, transparent);

  /* o dia seguinte começa pela régua dele */
  &:last-child { border-bottom: 0; }
}

/* Exames do mesmo paciente, clínica e horário: a régua entre eles é a leve e
   começa na coluna do nome, deixando a coluna da hora corrida (a hora sai só
   na primeira linha). A régua forte, a de toda linha, fecha o grupo. */
.marc--segue {
  border-bottom-color: transparent;

  &::after {
    content: ""; position: absolute; left: 82px; right: 0; bottom: -1px; height: 1px;
    background: color-mix(in oklab, var(--line) 55%, transparent);
  }
}

/* O que já aconteceu e já se resolveu fica em segundo plano. */
.marc--feito { opacity: .55; }

.m-hora { font-family: var(--mono); font-size: 15px; font-weight: 600; }

.m-quem { min-width: 0; }

/* O nome é a porta da ficha, como nas outras telas. Não quebra: duas linhas
   leem como duas pessoas. */
.m-nome {
  display: block; font-size: 15px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;

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

.m-exame { display: block; font-size: 13.5px; color: var(--ink-muted); margin-top: 2px; }

.m-onde { font-size: 13.5px; }

/* A ação: botões-ícone do mesmo tamanho, no mesmo lugar, encostados à
   direita. A ação principal vem antes do lápis. */
.m-acao { display: flex; justify-content: flex-end; align-items: center; gap: 6px; }

/* Agora: a hora atual, em azul e na coluna da hora, entre a última linha que
   passou e a primeira que vem. Só no dia de hoje e só entre duas linhas (ver
   now_line_at). */
.m-agora {
  display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 12px;
  align-items: center; padding: 6px 8px 6px 14px;
  font-family: var(--mono); font-size: 15px; font-weight: 600; color: var(--accent);

  /* os dois pontos piscam, como num relógio digital */
  & i { font-style: normal; animation: m-pisca 1s steps(1) infinite; }
}

@keyframes m-pisca { 50% { opacity: .15; } }

@media (prefers-reduced-motion: reduce) { .m-agora i { animation: none; } }

/* O sinal: ícone + texto em fundo neutro, largura fixa para a coluna alinhar.
   O ícone diz a origem (o balão do WhatsApp) e a cor dele diz o sentido:
   verde é o paciente confirmou ou compareceu, âmbar é o paciente cancelou e a
   vaga ficou pendurada, azul é o aviso que foi e de onde nada voltou (relógio,
   não balão), cinza é o que não foi enviado. O texto fica na tinta normal,
   para ler igual em qualquer estado.

   Fundo tingido só em dois: o "Confirmou", a resposta que fecha a pendência,
   e o "Sem registro" do bloco Passou, que é prazo vencido. */
.sinal {
  display: flex; align-items: center; gap: 6px;
  box-sizing: border-box; width: 132px;
  font-size: 12.5px; font-weight: 500; color: var(--ink);
  padding: 4px 8px 4px 6px; border-radius: var(--r);
  background: var(--sinal-bg, var(--surface-2));
  white-space: nowrap; text-decoration: none;

  & svg { width: 14px; height: 14px; flex: none; color: var(--sinal-ic, var(--ink-faint)); }

  /* "Sem WhatsApp" abre o cadastro, "Não enviado" manda o aviso de novo, e
     na ficha "Na fila" e "Marcado" levam para onde o gesto acontece */
  &:is(a):hover { --sinal-bg: var(--accent-soft); }
}

.sinal--ok      { --sinal-bg: var(--ok-soft); --sinal-ic: var(--ok); }
.sinal--feito   { --sinal-ic: var(--ok); }
/* "Não compareceu", só no Relatório e na ficha (na Agenda a falta sai da
   lista). */
.sinal--faltou  { --sinal-ic: var(--urgent); }
.sinal--alerta  { --sinal-ic: var(--warn); }
.sinal--espera  { --sinal-ic: var(--accent); }
.sinal--fora    { /* defaults do .sinal */ }
.sinal--urgente { --sinal-bg: var(--urgent-soft); --sinal-ic: var(--urgent); }

/* Botão-ícone. O nome da ação vai no title e no aria-label; o azul é da ação
   que avança (registrar), o âmbar é o devolver, na cor do "Cancelou" que o
   pede, o vermelho é o remarcar do bloco Passou, na cor da faixa. O editar,
   presente em toda linha, fica só com o contorno até o ponteiro chegar. */
.bico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border: 0; border-radius: var(--r); cursor: pointer;
  background: transparent; color: var(--ink-muted); box-shadow: inset 0 0 0 1px var(--line);

  & svg { width: 14px; height: 14px; }

  &:hover { background: var(--line); color: var(--ink); }
}

/* Os coloridos já se destacam pelo fundo, e não levam o contorno do editar. */
.bico--acao, .bico--alerta, .bico--remarcar { box-shadow: none; }

.bico--acao {
  background: var(--accent-soft); color: var(--accent);

  &:hover { background: var(--accent); color: var(--accent-ink); }
}
.bico--alerta {
  background: var(--warn-soft); color: var(--warn);

  &:hover { background: var(--warn); color: var(--surface); }
}

.bico--remarcar {
  background: var(--urgent-soft); color: var(--urgent);

  &:hover { background: var(--urgent); color: var(--surface); }
}

/* "Ir para data": o botão é o alvo, e o campo de data se esconde atrás dele
   só para ancorar o calendário do navegador e levar o valor — o mesmo truque
   do antigo navegador de semana (picker_controller.js). */
.ir-data { position: relative; display: inline-flex; }

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

.mais { margin: 24px 0 0; }

/* Controle não vai para o papel. */
@media print { .ir-data, .mais, .pend, .atraso { display: none; } }

/* O dia escolhido no calendário quando não tem marcação: a lista abre nele
   mesmo assim, com a frase no lugar das linhas. */
.dia-vazio { margin: 0; padding: 14px; font-size: 13.5px; color: var(--ink-faint); }