/* O PAINEL do capítulo de mercados: spot × perpétuo.
 *
 * A moldura do capítulo (coluna de texto, título, grade de 1180px, entrada em
 * vista) mora em `_local/home-secoes.css`, no molde `.oc-cap`, compartilhado
 * com REDE, POPULARES e PRIVACIDADE. Aqui fica só o que é DESTE painel.
 *
 * ## Sem `rem`
 *
 * A raiz deste site é `13.33vw` (~240px numa janela de 1800): `rem` escrito à
 * mão explode o layout sem erro nenhum. Tudo aqui é px.
 *
 * ## Metade das regras mora em `[dir]`
 *
 * A origem reseta margin/padding/border num bloco `[dir] div…` de
 * especificidade (0,1,1), que vence classe sozinha (0,1,0).
 */

/* ── o painel ───────────────────────────────────────────────────────────── */

.oc-mkt-painel {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  box-sizing: border-box;
  border-radius: 16px;
}

[dir] .oc-mkt-painel {
  padding: clamp(18px, 2.2vw, 28px);
  border: 1px solid var(--line-mango, #2a2a2a);
  background: var(--container-four, rgba(255, 255, 255, .04));
}

@media (max-width: 560px) {
  .oc-mkt-painel { grid-template-columns: 1fr; gap: 22px; }
}

.oc-mkt-col { min-width: 0; }

/* 🔴 As duas colunas nasciam DESALINHADAS: só a da direita tem o selo
 * `Up to 40×`, o selo é mais alto que o texto do rótulo, e o cabeçalho dela
 * empurrava as três linhas ~20px para baixo. O sintoma não foi o cabeçalho —
 * foram as SETAS entre as colunas saindo tortas, ligando a linha do BTC à
 * altura errada.
 *
 * 🔑 Altura mínima igual nos dois, medida pelo mais alto (o selo). */
.oc-mkt-cabeca {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  min-height: 22px;
}

[dir] .oc-mkt-cabeca {
  padding: 0 0 12px;
  border-bottom: 1px solid var(--line-mango, #2a2a2a);
}

.oc-mkt-nome {
  color: var(--foreground-two, rgba(255, 255, 255, .72));
  font-size: 12px;
  font-weight: 500;
  line-height: 120%;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.oc-mkt-teto {
  color: var(--offcode-brand, #f7931a);
  font-size: 10px;
  line-height: 1;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  border-radius: 4px;
}

[dir] .oc-mkt-teto {
  padding: 4px 7px;
  border: 1px solid var(--offcode-brand, #f7931a);
}

.oc-mkt-linhas {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

[dir] .oc-mkt-linhas { margin-top: 14px; }

.oc-mkt-linha {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  border-radius: 10px;
  box-sizing: border-box;
}

[dir] .oc-mkt-linha {
  padding: 11px 12px;
  border: 1px solid var(--line-mango, #2a2a2a);
  background: rgba(255, 255, 255, .03);
}

.oc-mkt-moeda {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.oc-mkt-icone {
  display: block;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border-radius: 50%;
}

.oc-mkt-ticker {
  color: var(--foreground-one, #fff);
  font-size: 13px;
  font-weight: 500;
  line-height: 120%;
}

.oc-mkt-fim {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

/* `tabular-nums` porque três preços empilhados precisam alinhar coluna com
 * coluna: sem isso o `1` estreito desalinha a vírgula de uma linha para a
 * outra e a pilha perde o prumo. */
.oc-mkt-preco {
  color: var(--foreground-one, #fff);
  font-size: 13px;
  font-weight: 500;
  line-height: 120%;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.oc-mkt-extra {
  display: flex;
  align-items: center;
  font-size: 12px;
  line-height: 120%;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Variação 24h: verde e vermelho da própria origem. O SINAL vai junto — cor
 * sozinha não diz nada para quem não distingue as duas. */
.oc-mkt-var--sobe { color: var(--rise-color, #2ebd85); }
.oc-mkt-var--cai { color: var(--fall-color, #f6465d); }

/* Selo de alavancagem, só na coluna do perpétuo. */
.oc-mkt-lev {
  color: var(--foreground-two, rgba(255, 255, 255, .72));
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  border-radius: 4px;
}

[dir] .oc-mkt-lev {
  padding: 4px 6px;
  background: var(--container-two, rgba(255, 255, 255, .08));
}

/* ── o gráfico de 24h ────────────────────────────────────────────────────
 *
 * SVG desenhado a partir das velas de 1h que a rota devolve — 24 pontos, a
 * forma real do dia. Nasce com `hidden`: linha sem dado é enfeite com cara de
 * informação, e este painel inteiro existe para não fazer isso.
 */
.oc-mkt-graf {
  display: block;
  width: 56px;
  height: 18px;
  flex-shrink: 0;
  overflow: visible;
}

.oc-mkt-graf[hidden] { display: none; }

.oc-mkt-graf-linha {
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

/* ── a seta entre as colunas ─────────────────────────────────────────────
 *
 * O mesmo ativo, do outro lado. Some quando as colunas empilham: seta apontando
 * para a coluna de cima não liga nada.
 */
@media (min-width: 561px) {
  .oc-mkt-col--perp .oc-mkt-linha::before {
    content: '';
    position: absolute;
    top: 50%;
    inset-inline-start: calc(-1 * clamp(28px, 4vw, 56px));
    width: clamp(28px, 4vw, 56px);
    height: 1px;
    background: linear-gradient(to right,
                                rgba(247, 147, 26, 0),
                                rgba(247, 147, 26, .55));
    pointer-events: none;
  }

  .oc-mkt-col--perp .oc-mkt-linha::after {
    content: '';
    position: absolute;
    top: 50%;
    inset-inline-start: -7px;
    width: 5px;
    height: 5px;
    transform: translateY(-50%) rotate(45deg);
    border-top: 1px solid rgba(247, 147, 26, .75);
    border-right: 1px solid rgba(247, 147, 26, .75);
    pointer-events: none;
  }
}

.oc-mkt ::selection {
  background: rgba(247, 147, 26, .28);
  color: var(--foreground-one, #fff);
}

/* ── OC-12 · o travessão não pode parecer resposta final ──────────────────
 *
 * Auditoria de 04/09/2026: "cotações da home permanecem vazias". Medido: o
 * feed funciona; o PEDIDO é que esperava a rolagem. Corrigido no JS — aqui
 * ficam os dois estados que faltavam à tela.
 *
 * Enquanto o dado não chega, o travessão pulsa de leve: diz "vem vindo" em
 * vez de "é isto". */
.oc-mkt-preco.oc-preco-esperando,
.oc-pop-preco.oc-preco-esperando {
  opacity: 0.45;
  animation: oc-preco-pulso 1.1s ease-in-out infinite;
}
@keyframes oc-preco-pulso {
  0%, 100% { opacity: 0.28; }
  50% { opacity: 0.6; }
}
@media (prefers-reduced-motion: reduce) {
  .oc-mkt-preco.oc-preco-esperando,
  .oc-pop-preco.oc-preco-esperando { animation: none; }
}

/* Falhou as três tentativas: a seção diz, em TEXTO. O `title` de antes só
 * existia para quem tem mouse — no telefone e no leitor de tela a falha era um
 * travessão mudo. */
[dir] .oc-mkt-sem-cotacao {
  margin: 0 0 10px;
  padding: 8px 12px;
  border: 1px solid rgba(247, 147, 26, 0.35);
  border-radius: 8px;
  background: rgba(247, 147, 26, 0.08);
  color: #d8b98a;
  font-size: 12.5px;
  line-height: 1.4;
}