/* ============================================================================
   Cartão de ação (ticker) nos artigos: preço, variação e gráfico com período.
   O cartão inteiro leva para a página do ativo no Pense Mercado.

   Cor do gráfico = direção no período (sobe: neon da marca; cai: vermelho).
   É cor de ESTADO, então nunca anda sozinha: a variação vem sempre com seta
   e sinal. Os dois tons passaram no validador de paleta (skill dataviz) sobre
   #121212: separação para daltonismo 20,3 e contraste acima de 3:1.
   Linha de 2px, área a 10%, grade e referência em linha fina e SÓLIDA.
   ========================================================================= */
.tk-grade { display: grid; gap: 14px; margin: 6px 0 26px; }
.tk-grade--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 720px) { .tk-grade--2 { grid-template-columns: 1fr; } }

.tk {
  --tk-sobe: #a3ff47;
  --tk-cai: #ff6b6b;
  --tk-sup: #121212;
  --tk-linha: rgba(255,255,255,.1);
  --tk-mudo: rgba(255,255,255,.55);
  position: relative;
  background: var(--tk-sup);
  border: 1px solid var(--tk-linha);
  border-radius: 16px;
  padding: 16px 18px 14px;
  color: #f5f5f5;
  font-family: 'Inter', system-ui, sans-serif;
  transition: border-color .2s, box-shadow .2s;
}
.tk:hover, .tk:focus-within { border-color: rgba(163,255,71,.45); box-shadow: 0 0 0 1px rgba(163,255,71,.12); }

/* O link cobre o cartão inteiro (clique em qualquer lugar vai ao Pense Mercado).
   Os botões de período ficam por cima dele e não navegam. */
.tk-ir { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.tk-ir:focus-visible { outline: 2px solid var(--tk-sobe); outline-offset: 2px; }
.tk-ir span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.tk-topo { display: flex; align-items: center; gap: 12px; }
.tk-logo {
  width: 40px; height: 40px; border-radius: 50%; flex: none; object-fit: contain;
  background: #fff; border: 1px solid var(--tk-linha);
}
.tk-logo--sigla {
  display: grid; place-items: center; background: #1b1b1b; color: var(--tk-sobe);
  font: 700 .72rem/1 'Space Grotesk', 'Inter', sans-serif; letter-spacing: .02em;
}
.tk-id { min-width: 0; flex: 1; }
.tk-nome { display: block; font: 700 1rem/1.25 'Space Grotesk', 'Inter', sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-meta { display: block; font-size: .76rem; color: var(--tk-mudo); margin-top: 2px; }
.tk-marca { flex: none; font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tk-mudo); }

.tk-preco { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.tk-valor { font: 700 1.75rem/1.1 'Space Grotesk', 'Inter', sans-serif; letter-spacing: -.01em; }
.tk-var { font-size: .9rem; font-weight: 600; }
.tk-var[data-dir="sobe"] { color: var(--tk-sobe); }
.tk-var[data-dir="cai"] { color: var(--tk-cai); }
.tk-var[data-dir="zero"] { color: var(--tk-mudo); }
.tk-pos { width: 100%; font-size: .76rem; color: var(--tk-mudo); }

/* Período: uma linha, ACIMA do gráfico que ela controla. */
.tk-periodos { position: relative; z-index: 2; display: flex; gap: 4px; margin: 12px 0 6px; }
.tk-periodos button {
  font: 600 .74rem/1 'Inter', system-ui, sans-serif; color: var(--tk-mudo);
  background: transparent; border: 1px solid transparent; border-radius: 100px;
  padding: 6px 10px; cursor: pointer; transition: color .15s, background .15s;
}
.tk-periodos button:hover { color: #fff; background: rgba(255,255,255,.06); }
.tk-periodos button[aria-pressed="true"] { color: #0a0a0a; background: var(--tk-sobe); }
.tk-periodos button:focus-visible { outline: 2px solid var(--tk-sobe); outline-offset: 2px; }
.tk-periodos button[disabled] { opacity: .35; cursor: default; background: transparent; color: var(--tk-mudo); }

/* A cor segue a direção NO PERÍODO escolhido, que pode ser o contrário da do dia. */
.tk-grafico { --tk-cor: var(--tk-sobe); position: relative; z-index: 2; height: 150px; cursor: pointer; touch-action: pan-y; }
.tk-grafico[data-dir="cai"] { --tk-cor: var(--tk-cai); }
.tk-grafico svg { display: block; width: 100%; height: 100%; overflow: visible; }
.tk-grafico:focus-visible { outline: 2px solid var(--tk-sobe); outline-offset: 4px; border-radius: 6px; }
.tk-grafico.e-carregando { opacity: .45; transition: opacity .2s; }
.tk-sem-grafico { display: grid; place-items: center; height: 100%; font-size: .8rem; color: var(--tk-mudo); }

.tk-l-grade { stroke: var(--tk-linha); stroke-width: 1; }
.tk-l-ref { stroke: rgba(255,255,255,.28); stroke-width: 1; }
.tk-t-ref, .tk-t-eixo { fill: var(--tk-mudo); font: 500 10px/1 'Inter', system-ui, sans-serif; }
.tk-linha { fill: none; stroke: var(--tk-cor); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.tk-area { fill: var(--tk-cor); opacity: .1; }
.tk-ponto { fill: var(--tk-cor); stroke: var(--tk-sup); stroke-width: 2; }
.tk-mira { stroke: rgba(255,255,255,.5); stroke-width: 1; }

.tk-dica {
  position: absolute; top: -6px; transform: translate(-50%, -100%); pointer-events: none;
  background: #1d1d1d; border: 1px solid rgba(255,255,255,.14); border-radius: 8px;
  padding: 6px 9px; white-space: nowrap; box-shadow: 0 8px 20px rgba(0,0,0,.4);
}
.tk-dica b { display: block; font: 700 .86rem/1.2 'Space Grotesk', 'Inter', sans-serif; color: #fff; }
.tk-dica span { display: block; font-size: .7rem; color: var(--tk-mudo); margin-top: 2px; }
.tk-dica[hidden] { display: none; }

.tk-pe { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; margin-top: 8px; font-size: .72rem; color: var(--tk-mudo); }
.tk-pe .tk-periodo-var[data-dir="sobe"] { color: var(--tk-sobe); }
.tk-pe .tk-periodo-var[data-dir="cai"] { color: var(--tk-cai); }

/* Menção no meio do texto: $META vira atalho com a variação do dia. */
.ar-corpo a.tk-chip {
  display: inline-flex; align-items: baseline; gap: 5px; padding: 0 7px; border-radius: 6px;
  background: rgba(163,255,71,.08); border: 1px solid rgba(163,255,71,.22);
  color: var(--pg-neon, #a3ff47); font-weight: 600; font-size: .94em; text-decoration: none; white-space: nowrap;
}
.ar-corpo a.tk-chip:hover { background: rgba(163,255,71,.16); }
.tk-chip small { font-size: .82em; font-weight: 600; }
.tk-chip small[data-dir="cai"] { color: #ff6b6b; }
.tk-chip small[data-dir="zero"] { color: rgba(255,255,255,.55); }

@media (prefers-reduced-motion: reduce) {
  .tk, .tk-periodos button, .tk-grafico.e-carregando { transition: none; }
}