/* O relatório — HTML e CSS, sem biblioteca: indicadores, o calendário-mapa
   e a lista do recorte.

   As cores vêm dos tokens validados em colors.css: --chart-marcados para as
   marcações, --heat-* para o calendário, e os tons do sinal da Agenda para
   o aviso pelo WhatsApp. Todo recorte clicável tem a sua tabela embaixo, e
   nenhum número se identifica só pela cor: o rótulo vem escrito embaixo dele. */

/* ── filtro do período ────────────────────────────────── */
.rep-filter {
  display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin-bottom: 22px;

  & :where(.field) { margin: 0; }

  & :where(.field) input, & :where(.field) select { width: auto; }

  /* São dois formulários — o atalho do quadrimestre e as duas datas —, e quem
     alinha os campos é esta faixa, não cada um deles. Sem isto, cada <form>
     vira um item de flex e as datas descem para baixo do seletor. */
  & > form { display: contents; }
}

/* ── indicadores ──────────────────────────────────────
   Duas faixas na mesma grade de seis colunas, para as de cima caírem no
   prumo das de baixo. Valor em cima, rótulo e nota embaixo, régua fina entre
   colunas. Cada indicador é um link de recorte. */
.stats {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line);
}

.stat {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  padding: 16px 10px 14px; border: 0; border-left: 1px solid var(--line);
  border-bottom: 2px solid transparent; background: none;
  font: inherit; text-align: left; color: inherit; text-decoration: none;

  &:first-child { border-left: 0; padding-left: 2px; }

  &:is(a):hover { background: var(--surface-2); }

  /* O recorte escolhido: régua E fundo, o mesmo par do chip ligado da fila
     (.chip[aria-current]) e do dia escolhido no calendário. */
  &[aria-current="true"] { background: var(--accent-soft); border-bottom-color: var(--accent); }

  & .v {
    font-size: 30px; font-weight: 400; line-height: 1;
    font-variant-numeric: tabular-nums; color: var(--stat-color, var(--ink));
  }

  /* Seis colunas na folha dão ~150px a cada uma: o rótulo não quebra, e o
     tracking é o menor que ainda lê como caixa alta de legenda. */
  & .l {
    font-family: var(--mono); font-size: 12px; letter-spacing: .06em;
    text-transform: uppercase; color: var(--ink-faint); white-space: nowrap;
  }

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

.stat--marcados { --stat-color: var(--chart-marcados); }
.stat--fora     { --stat-color: var(--ink-muted); }
.stat--zap-ok   { --stat-color: var(--ok); }
.stat--zap-canc { --stat-color: var(--warn); }
.stat--zap-esp  { --stat-color: var(--accent); }
.stat--zap-fora { --stat-color: var(--ink-muted); }

/* A legenda da segunda faixa. Réguas não se duplicam: a faixa de cima já
   fecha com a sua, e a de baixo não abre outra. */
.stats-cap {
  margin: 0; padding: 14px 2px 0;
  font-family: var(--mono); font-size: 12px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-muted);
}

:where(.stats-cap) + .stats { border-top: 0; }

/* O calendário vem logo depois dos indicadores, sem régua de seção. */
:where(.stats) + :where(.cal) { margin-top: 30px; }

/* ── calendário-mapa ──────────────────────────────────
   A pergunta é sobre o calendário, então a resposta é um calendário: um
   quadrimestre inteiro cabe em quatro mini-meses. Quatro faixas fixas
   (1, 2, 3, 4 ou mais) — a mesma cor significa a mesma coisa em todo período. */
.cal { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 22px; }

.cal-month .cm-name {
  font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-muted); border-bottom: 1px solid var(--line);
  padding-bottom: 5px; margin-bottom: 6px;
}

.cm-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }

.cm-dow {
  font-family: var(--mono); font-size: 12px; color: var(--ink-faint);
  text-align: center; padding-bottom: 2px;
}

.cm-day, .cm-pad {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 12px; font-variant-numeric: tabular-nums;
  border-radius: var(--r); border: 1px solid transparent; padding: 0;
}

/* dia sem exame: fundo quieto, número apagado, nada clicável */
.cm-day { background: var(--surface-2); color: var(--ink-faint); }

.cm-day.has {
  font-weight: 600; cursor: pointer; border: 0;

  &:hover { outline: 2px solid var(--accent); outline-offset: -2px; }
}

.cm-day.h1 { background: var(--heat-1); color: var(--heat-1-ink); }
.cm-day.h2 { background: var(--heat-2); color: var(--heat-2-ink); }
.cm-day.h3 { background: var(--heat-3); color: var(--heat-3-ink); }
.cm-day.h4 { background: var(--heat-4); color: var(--heat-4-ink); }

/* O dia já tem fundo próprio, que é o degrau da rampa e quer dizer quantos
   exames houve: pintá-lo de azul apagaria o dado. Aqui a marca é anel por
   fora, que se vê sobre qualquer degrau e não rouba a casa de ninguém — o
   gap da grade é de 3px e o anel cabe nele. */
.cm-day.is-sel {
  border: 0;
  outline: 2px solid var(--accent); outline-offset: 1px;
}

.cal-legend {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 12px; letter-spacing: .06em; color: var(--ink-faint);

  & i { width: 14px; height: 14px; border-radius: var(--r); display: block; }
}

/* ── o formulário que embrulha a tela ──────────────────
   Mês, dia e faixa são <button name=… value=…> de um GET só: o recorte vai
   para a URL sem uma linha de JavaScript e sem helper — quem monta a query é o
   navegador. O form não desenha nada, então sai do layout.

   `display: contents` tira a CAIXA do form, não o NÓ. É o que importa aqui,
   porque folha.css combina irmãos: `:where(.stats) + .section-rule` dá o
   respiro da primeira régua de seção, e `.section-rule:first-of-type` zera a
   margem só dela. Por isso o form abre ANTES dos totais e fecha DEPOIS da
   última linha — dentro dele todo mundo continua irmão de todo mundo. Form
   começando no meio da folha quebra as duas regras de uma vez. */
.rep-form { display: contents; }

/* ── detalhe do recorte ───────────────────────────────── */
.detail-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px; margin-bottom: 8px;

  /* O recorte rola até aqui; a margem desconta a barra fixa do topo. */
  scroll-margin-top: 62px;

  & .dh { font-size: 14.5px; font-weight: 600; }

  & .n { font-family: var(--mono); font-size: 13px; font-weight: 400; color: var(--ink-muted); margin-left: 6px; }
}

.rep-empty { font-size: 13px; color: var(--ink-faint); padding: 14px 2px; }

/* A lista do recorte é a tabela da ficha do paciente com outra margem: lá a
   margem é o papel que chegou ao balcão, aqui é a pessoa.

   Lista curta não segura a rolagem: o fim da página chegaria antes e a
   tabela pararia no meio da tela. O bloco tem a altura da janela menos a
   barra e o cabeçalho, e o início da tabela sempre chega ao topo. */
.rep-detalhe {
  min-height: calc(100vh - 102px);

  & .cel-quem { width: 200px; }

  & .cel-situacao { width: 150px; }

  & .cel-situacao .why { display: block; margin-top: 4px; }

  /* O cabeçalho fica sob a barra ao rolar (52px é a altura dela). Réguas não
     se duplicam: a .detail-head já é o cabeçalho deste bloco. */
  & .fila thead th {
    position: sticky; top: 52px; z-index: 1;
    background: var(--surface); border-bottom-color: var(--line);
  }
}

.rep-mais {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 2px 0; margin: 0;
  font-family: var(--mono); font-size: 12px; color: var(--ink-faint);
}