/* ==========================================================================
   TodaRota · gráficos
   Cinco primitivas. Todas PLANAS — relevo é dos controles, dado não se
   levanta (ver a assinatura 3 no CLAUDE.md). O que os gráficos ganharam de
   personalidade veio da FORMA (cápsula, meio anel, bloco), não de sombra.
   ========================================================================== */

/* ---- 1 · Área de tendência --------------------------------------------- */

.ct-area {
  display: block;
  width: 100%;
  height: auto;
  margin-top: var(--s3);
}

/* Legenda da linha tracejada. Sem isso a referência é um risco misterioso. */
.ct-area__ref {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin-top: var(--s2);
  font-size: var(--t-sm);
  color: var(--text-6);
}
.ct-area__refline {
  width: 18px;
  height: 0;
  border-top: 1px dashed var(--text-6);
}

/* ---- 2 · Barras cápsula ------------------------------------------------- */

.ct-bars {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 3px;
  padding-top: var(--s2);
}

.ct-bar {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  border-radius: 8px;
  outline: none;
}

/* Dia de pico: FAIXA de fundo atrás da coluna inteira, não borda colorida.
   A faixa é a leitura de telemetria — marca a janela, não decora a barra. */
.ct-bar.is-anomalia::before {
  content: "";
  position: absolute;
  inset: -6px -1px 14px;
  border-radius: 6px;
  background: var(--anomalia);
}

.ct-bar__track {
  position: relative;
  width: 100%;
  max-width: 13px;
  height: var(--ct-h);
  display: flex;
  align-items: flex-end;
  /* Trilho quase invisível de propósito: com trinta colunas, um trilho
     escuro vira ele mesmo o gráfico e o dado some no meio das caixas. */
  background: rgba(255, 255, 255, .035);
  border-radius: var(--r-pill);
  overflow: hidden;
  transition: background .12s ease;
}

.ct-bar__fill {
  width: 100%;
  display: flex;
  /* column-reverse: o primeiro tipo (velocidade) assenta no chão e forma a
     linha de base laranja que atravessa o mês. */
  flex-direction: column-reverse;
  border-radius: var(--r-pill);
  overflow: hidden;
}
.ct-bar__seg { display: block; width: 100%; min-height: 1px; }

/* Sem leitura: fantasma tracejado. Nunca barra no chão — zero afirma que
   não houve evento, e não é isso que aconteceu. */
.ct-bar--vazio .ct-bar__ghost {
  width: 100%;
  height: 34%;
  border: 1px dashed var(--line-node);
  border-radius: var(--r-pill);
  background: repeating-linear-gradient(
    -45deg, transparent 0 3px, rgba(255, 255, 255, .04) 3px 6px);
}

.ct-bar__dia {
  font-size: 10px;
  color: var(--text-7);
  font-variant-numeric: tabular-nums;
}
/* Trinta rótulos não cabem: mostra um a cada cinco dias. */
.ct-bar .ct-bar__dia { visibility: hidden; }
.ct-bar:nth-child(5n + 1) .ct-bar__dia { visibility: visible; }

.ct-bar:hover  .ct-bar__track,
.ct-bar:focus-visible .ct-bar__track { background: var(--bg-badge); }
.ct-bar:focus-visible { box-shadow: 0 0 0 2px var(--accent); }

.ct-bars__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  flex-wrap: wrap;
  margin-top: var(--s4);
}
.ct-bars__nota {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-size: var(--t-sm);
  color: var(--text-6);
}
.ct-bars__mark {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: var(--anomalia);
  border: 1px solid var(--alert-line);
}

/* Tooltip: cartão escuro, igual ao das referências. Não intercepta ponteiro,
   senão pisca ao passar por cima dele. */
.ct-tip {
  position: absolute;
  bottom: calc(100% + 6px);
  z-index: 5;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 132px;
  padding: 9px 11px;
  background: var(--bg-app);
  border: 1px solid var(--hairline);
  border-radius: var(--r-control);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .45);
  font-size: var(--t-sm);
  line-height: 1.45;
}
/* OBRIGATÓRIO junto de qualquer `display` num elemento controlado por
   `hidden`: a regra de autor ganha do [hidden] do navegador, e sem esta
   linha o elemento nunca some. Mesmo par existe em .dropdown__menu. */
.ct-tip[hidden] { display: none; }

.ct-tip strong { font-size: var(--t-sm); font-weight: 600; }
.ct-tip__total { color: var(--accent); font-weight: 500; }
.ct-tip__det   { color: var(--text-5); }

/* ---- 3 · Barra segmentada ---------------------------------------------- */

.ct-split {
  display: flex;
  gap: 3px;
  height: 10px;
  margin-bottom: var(--s4);
}
.ct-split__seg {
  min-width: 3px;
  border-radius: var(--r-pill);
  transition: opacity .12s ease;
}
.ct-split:hover .ct-split__seg { opacity: .55; }
.ct-split__seg:hover { opacity: 1; }

/* Escala ordinal (crítico → excelente): degraus, não fatias soltas. */
.ct-split--escala { gap: 2px; }

/* ---- 4 · Gauge ---------------------------------------------------------- */

.ct-gauge {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ct-gauge svg { display: block; }
.ct-gauge__mid {
  position: absolute;
  top: 30px;
  text-align: center;
}
.ct-gauge__mid strong {
  display: block;
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -.02em;
}
.ct-gauge__mid small { display: block; font-size: var(--t-sm); color: var(--text-6); }
.ct-gauge__eixo {
  display: flex;
  justify-content: space-between;
  width: 150px;
  margin-top: -4px;
  font-size: var(--t-sm);
  color: var(--text-7);
}

/* ---- 5 · Blocos discretos ----------------------------------------------- */

.ct-blocos { display: flex; gap: 3px; }
.ct-bloco {
  flex: 1;
  height: 20px;
  border-radius: 3px;
  /* Vazio é AUSÊNCIA: tracejado, não massa cinza. */
  border: 1px dashed var(--line-node);
}
.ct-bloco.is-on {
  border: 1px solid transparent;
  background: var(--neutral-2);
}

/* ---- Legenda compartilhada ---------------------------------------------- */

.legend--inline {
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--s4);
}
.legend__row--inline {
  gap: 7px;
  color: var(--text-4);
  font-size: var(--t-sm);
}