/* A /markets: seis vitrines sobre o mesmo dado.
 *
 * ## Toda regra mora em `[dir]`
 *
 * A origem reseta `margin`, `padding` e `border` num bloco
 * `[dir] p, [dir] div, [dir] button, [dir] label, …` — especificidade (0,1,1).
 * Classe única é (0,1,0) e PERDE, então todo espaçamento escrito aqui seria
 * descartado em silêncio. Já aconteceu na tela de login: a caixa de aviso saía
 * com padding, margem e borda zerados, virando uma faixa de 18 px colada no
 * link de senha esquecida, e o print de quem reclamou mostrava exatamente
 * isso.
 *
 * `[dir] .classe` empata em elementos e ganha em classes — (0,2,0) —, é o que
 * as outras doze folhas do espelho já fazem, e não gasta `!important`.
 *
 * 🔑 Regra de classe única não é neutra aqui: ela nasce perdendo, e perder em
 * CSS é silencioso.
 *
 * ## Os números são tabulares
 *
 * Preço, variação, máxima, mínima e volume usam `tabular-nums`. Sem isso as
 * colunas dançam a cada tique — os dígitos da fonte têm larguras diferentes, e
 * uma tabela que se mexe sozinha a cada dois segundos é onde a pessoa perde a
 * linha que estava lendo.
 */

/* ── o bloco herdado nasce escondido ──────────────────────────────────────
 *
 * 🔴 Dono, 30/08/2026: "quando entro na aba aparece um site antigo e depois
 * entra nosso front novo". É a tela da CAPTURA — a barra `Spot | Futures` da
 * origem e a faixa de categorias dela (`Explore`, `0 Fees NEW`, `Stocks HOT`,
 * `Tokenized Commodities`, …) — visível até o `mercados.js` rodar e escondê-la
 * em `inicia()`. Entre o HTML pronto e o `DOMContentLoaded` há mais de um
 * segundo num telefone: tempo de sobra para ler a marca de outra empresa.
 *
 * 🔑 O que o JS faz no fim, o CSS faz no começo. A folha chega antes de
 * qualquer script e não depende de nenhum: o bloco nunca é pintado, em vez de
 * ser pintado e retirado. O `hidden` do JS continua onde está — é ele que
 * garante o estado quando o DOM é remontado.
 *
 * 🔑 A regra mora AQUI e não numa folha comum de propósito: `mercados.css` e
 * `mercados.js` entram sempre juntos (conferido nas 28 páginas que os
 * carregam). Numa página com o CSS e sem o JS, esta regra esconderia a
 * listagem herdada sem pôr nada no lugar — e a tela ficaria vazia.
 *
 * ⚠️ Esconder, nunca cortar: o `#market-tabs-outlet` é a âncora que o
 * `mercados.js` usa para inserir a nossa `<section>` (`insertBefore` no irmão
 * seguinte). Sem ele no DOM, não há onde montar. */
.market-tabs-host > .bx-tab-bar,
.market-tabs-host > #market-tabs-outlet { display: none; }

/* 🔴 A barra de abas de baixo SUMIA no /markets — só nele. A origem escreve
 * `.market-tabs-host[data-v-c2a03d3a] { position: sticky; top: var(
 * --navigation-height); z-index: 998 }` para grudar a barrinha `Spot|Futures`
 * dela sob o cabeçalho. O `mercados.js` monta a NOSSA seção inteira — abas,
 * cartões, tabela de 98 linhas — dentro desse container. Resultado: 4.800px
 * de conteúdo num contexto de empilhamento com z-index 998, acima da barra
 * fixa (900). A barra existia, era visível e estava no lugar; a tabela
 * passava por cima dela. Medido em 30/08/2026 no iPhone do dono (beacon:
 * `elementFromPoint(220, 936)` = `span.oc-mk-preco`) e reproduzido em
 * produção nos dois motores — com DADO real. Meus testes anteriores usavam a
 * tabela vazia: nada sobrepunha a barra, e a barra "aparecia".
 *
 * 🔑 O sticky da origem não faz nada aqui: o host tem a altura do conteúdo
 * inteiro e não tem para onde grudar. Sobrou só o z-index, que é o defeito.
 * Estático e sem z-index, o conteúdo volta ao fluxo normal e a barra fixa
 * volta a ser a camada de cima. Mesma especificidade (0,2,0) da regra da
 * origem; esta folha vem depois e ganha pela ordem. */
[dir] .market-tabs-host { position: static; z-index: auto; top: auto; }

/* ── a tela nova (handoff `design_handoff_markets`, 09/09/2026) ───────────
 *
 * Preto puro, sem cartão, sem painel, sem gráfico no topo. O que organiza a
 * informação é ESPAÇO e fio de um pixel, não caixa: 46px abaixo do título,
 * 64px abaixo da busca, 30px entre as categorias e a tabela. O respiro é
 * parte do desenho — comprimir aqui é desmontá-lo.
 *
 * Duas leituras da MESMA tabela:
 *   desktop  7 colunas, linha de 78px
 *   telefone 4 colunas, linha de 70px, e a página inteira cabe na largura
 *
 * 🔴 A tabela do telefone NÃO rola de lado. Nada de `min-width`, nada de
 * `width: max-content`, nada de coluna grudada. As três colunas que saem
 * MUDAM DE LUGAR: máxima e mínima viram a faixa `78.021,4 – 79.735,8` sob o
 * par, e a alavancagem vira um `200×` ao lado do símbolo. Coluna que some sem
 * reaparecer é dado que a tela deixou de dizer.
 */

/* ── tokens da tela ───────────────────────────────────────────────────────
 *
 * Preto puro é do desenho, não do tema: esta tela é a vitrine da corretora e
 * o handoff fixa `#000000`. O verde e o vermelho, esses, seguem os tokens do
 * gráfico — duas telas discordando sobre a cor de "subiu" é como se descobre
 * que uma delas está errada. */
[dir] .oc-mk {
  --mk-fundo: #000000;
  --mk-campo: #161616;        /* pílula da busca */
  --mk-fio: #1C1C1C;          /* fio forte: cabeçalho e abas */
  --mk-fio-fraco: #131313;    /* fio entre linhas */
  --mk-hover: #0A0A0A;

  --mk-tinta: #FFFFFF;
  --mk-tinta-2: #C8CCD2;      /* máxima e mínima */
  --mk-tinta-3: #8A9098;      /* rótulo, cabeçalho, alavancagem */
  --mk-tinta-4: #6E7480;      /* nome da moeda, marca d'água do campo */

  --mk-sobe: var(--kline-up, #0ECB81);
  --mk-desce: var(--kline-down, #F6465D);
  --mk-acento: #FFA51F;
  --mk-acento-fundo: #2A1D08; /* fundo do selo HOT */

  display: block;
  max-width: 1400px;
  margin: 0 auto;
  padding: 66px 44px 90px;
  background: var(--mk-fundo);
  color: var(--mk-tinta);
  font-family: 'Space Grotesk', 'Geist', 'OFFCODE Sans', system-ui, sans-serif;
}

[dir] .oc-mk *,
[dir] .oc-mk *::before,
[dir] .oc-mk *::after { box-sizing: border-box; }

[dir] .oc-mk .oc-sobe { color: var(--mk-sobe); }
[dir] .oc-mk .oc-desce { color: var(--mk-desce); }

/* ── título ───────────────────────────────────────────────────────────────
 *
 * É o `<h1>` HERDADO da captura, movido para dentro desta seção pelo
 * `mercados.js`. Ele continua sendo o título que o buscador lê — o texto já
 * está reescrito nas sete árvores pelo `liga_mercados`.
 *
 * 🔴 A origem escreve `.market-title{display:none}` em ≤768px (o título dela
 * vivia no cabeçalho da versão móvel) e `padding: 98px 0 40px` no desktop.
 * Sem `display: block` e `padding: 0` escritos aqui, o título sumiria no
 * telefone e nasceria com 98px de respiro no desktop.
 *
 * Seletor com três classes (0,3,0) de propósito: as regras da origem são
 * (0,2,0) e algumas moram dentro de `@media`, que não soma especificidade mas
 * é fácil de ler como se somasse. */
[dir] .oc-mk .oc-mk-h1 {
  display: block;
  margin: 0 0 46px;
  padding: 0;
  font-size: 44px;
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1;
  color: var(--mk-tinta);
}

/* ── os contêineres herdados param de estreitar a tela ────────────────────
 *
 * A origem prende a página em 1200px (`.market-layout-content`) e repete o
 * mesmo em `.market-tabs-host`, com 16px de padding no telefone. A tela nova
 * tem a própria medida — 1400px e 44px de respiro — e somar as duas daria
 * 1112px de conteúdo no desktop e 36px de margem no telefone.
 *
 * 🔑 A regra só vale ONDE a seção nova está montada (`:has`). Numa página que
 * carregue esta folha sem o JS, os contêineres seguem como estavam — o mesmo
 * cuidado da regra que esconde o bloco da captura. */
/* 🔴 `max-width: none` aqui derrubou o teto da origem e a caixa passou a se
 * dimensionar pelo CONTEÚDO: num flex-container de 360px o `.market-tabs-host`
 * mediu 487px — a largura `max-content` do trilho de abas — e o `#__nuxt`
 * ficou com 127px de rolagem lateral. O trilho é feito para rolar POR DENTRO;
 * quem tem de segurar a largura é a caixa. Teto explícito, não ausência de
 * teto. */
[dir] .market-layout-content:has(.oc-mk),
[dir] .market-tabs-host:has(.oc-mk) {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
  /* O preto vai até a borda. Sem isto o bloco de 1400px fica como uma FAIXA
   * preta no cinza do tema, e a costura entre os dois aparece justo na altura
   * dos olhos. */
  background: #000000;
}

/* ── busca ────────────────────────────────────────────────────────────────
 *
 * Pílula de 56px. O campo herdado da captura fica escondido (`liga_mercados`
 * o marca): dois campos de busca na mesma tela é a mesma dúvida do controle
 * repetido no painel de ordem, e um deles estaria sempre morto. */
[dir] .oc-mk-busca {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 470px;
  height: 56px;
  margin: 0 0 64px;
  padding: 0 24px 0 58px;
  background: var(--mk-campo);
  border: 0;
  border-radius: 28px;
}

[dir] .oc-mk-busca svg {
  position: absolute;
  left: 24px;
  width: 19px;
  height: 19px;
}

[dir] .oc-mk-busca input {
  width: 100%;
  height: 100%;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--mk-tinta);
  font: inherit;
  font-size: 16px;
  letter-spacing: -.005em;
}

[dir] .oc-mk-busca input::placeholder { color: var(--mk-tinta-4); }
[dir] .oc-mk-busca input:focus { outline: none; }

/* ── rolagem lateral sem barra visível ────────────────────────────────────
 *
 * SÓ as abas e as categorias rolam de lado. A tabela nunca.
 *
 * 🔴 `overflow-x: auto` faz do elemento um scroller nos DOIS eixos — o
 * `overflow-y` computa `auto` junto, mesmo escrito só o `x`. Num telefone o
 * dedo que começava sobre as abas ficava preso nelas e a página não andava.
 * Medido em 29/08/2026 (440×956): gesto vertical em y=110 → zero, em qualquer
 * x. `overflow-y: hidden` ESCRITO é o que devolve o gesto à página. */
[dir] .oc-mk-rola {
  overflow-x: auto;
  overflow-y: hidden;
  touch-action: pan-x pan-y;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

[dir] .oc-mk-rola::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* ── abas de escopo ───────────────────────────────────────────────────────
 *
 * Seis vitrines, não seis filtros do mesmo: Favoritos, Spot, Futuros, TradFi,
 * Pré-IPO e 1001x são PRODUTOS diferentes, com motor, custódia e teto de
 * alavancagem próprios. O sublinhado branco é o estado — a cor sozinha não
 * bastaria para quem não distingue cinza de branco. */
[dir] .oc-mk-abas {
  display: flex;
  align-items: flex-end;
  gap: 34px;
  width: max-content;
  min-width: 100%;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--mk-fio);
}

[dir] .oc-mk-aba {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 0 0 auto;
  margin: 0;
  padding: 0 0 16px;
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 20px;
  font-weight: 400;
  letter-spacing: -.014em;
  line-height: 1;
  white-space: nowrap;
  color: var(--mk-tinta-3);
  transition: color .12s ease;
}

[dir] .oc-mk-aba::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: transparent;
}

[dir] .oc-mk-aba[aria-selected="true"] {
  font-weight: 600;
  color: var(--mk-tinta);
}

[dir] .oc-mk-aba[aria-selected="true"]::after { background: var(--mk-tinta); }
[dir] .oc-mk-aba:hover { color: var(--mk-tinta); }

[dir] .oc-mk-aba-estrela {
  display: block;
  width: 17px;
  height: 17px;
  fill: var(--mk-acento);
  stroke: none;
}

/* ── categorias ───────────────────────────────────────────────────────────
 *
 * Texto puro numa linha rolável, com selo laranja onde houver. As categorias
 * vêm do DADO — `underlyingSubType` da corretora no perpétuo e no TradFi,
 * `symbolType` na venue do 1001x —, nunca de uma tabela escrita aqui: tabela
 * mantida à mão envelhece na primeira listagem nova, e o sintoma é uma moeda
 * que não aparece em filtro nenhum. */
[dir] .oc-mk-cats {
  display: flex;
  align-items: center;
  gap: 30px;
  width: max-content;
  min-width: 100%;
  margin: 0;
  padding: 30px 0;
}

[dir] .oc-mk-cat {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: -.008em;
  line-height: 1;
  white-space: nowrap;
  color: var(--mk-tinta-3);
  transition: color .12s ease;
}

[dir] .oc-mk-cat[aria-selected="true"] {
  font-weight: 600;
  color: var(--mk-tinta);
}

[dir] .oc-mk-cat:hover { color: var(--mk-tinta); }

[dir] .oc-mk-selo {
  padding: 3px 7px;
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .03em;
  color: var(--mk-acento);
  background: var(--mk-acento-fundo);
}

/* ══ TABELA — desktop ═════════════════════════════════════════════════════
 *
 * Todos os números à direita e com `tabular-nums`. Sem isso os dígitos têm
 * larguras diferentes e as colunas dançam a cada tique de preço — uma tabela
 * que se mexe sozinha a cada dois segundos é onde a pessoa perde a linha que
 * estava lendo. */

[dir] .oc-mk-tabela { min-width: 900px; }

[dir] .oc-mk-cab,
[dir] .oc-mk-linha {
  display: grid;
  grid-template-columns:
    minmax(230px, 1.5fr)   /* par */
    minmax(120px, 1fr)     /* último preço */
    minmax(110px, .9fr)    /* variação 24h */
    minmax(110px, 1fr)     /* máxima */
    minmax(110px, 1fr)     /* mínima */
    80px                   /* alavancagem */
    150px;                 /* ação */
  align-items: center;
}

[dir] .oc-mk-cab {
  height: 52px;
  border-bottom: 1px solid var(--mk-fio);
  font-size: 14px;
  color: var(--mk-tinta-3);
}

[dir] .oc-mk-col {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
  color: inherit;
  transition: color .12s ease;
}

[dir] .oc-mk-col--txt {
  justify-content: flex-start;
  cursor: pointer;
}

/* O rótulo da coluna vai ao DOM nas DUAS versões e o CSS escolhe (ver
 * `rotuloDaColuna` no mercados.js). No desktop, a longa. */
[dir] .oc-mk-col-curto { display: none; }

[dir] .oc-mk-col--acao {
  justify-content: flex-end;
  cursor: default;
}

[dir] .oc-mk-col[aria-sort]:not([aria-sort="none"]) { color: var(--mk-tinta); }
[dir] .oc-mk-col:hover { color: var(--mk-tinta); }

/* A linha é um `<div>`, não um `<a>`.
 *
 * 🔑 Dentro dela vivem DOIS controles — a estrela e o botão Trade. Um `<a>`
 * com botão dentro é marcação inválida e o teclado não sabe o que fazer com
 * ela: o foco entra no link, o Enter navega, e o botão de favoritar nunca é
 * alcançado. Quem é link aqui é o PAR (o bloco do símbolo), que é o alvo
 * óbvio; o clique em qualquer outro ponto da linha é uma conveniência de
 * mouse, e o teclado tem os dois controles reais. */
[dir] .oc-mk-linha {
  height: 78px;
  background: var(--mk-fundo);
  border-bottom: 1px solid var(--mk-fio-fraco);
  color: inherit;
  text-decoration: none;
  transition: background .12s ease;
}

[dir] .oc-mk-linha:hover { background: var(--mk-hover); }

[dir] .oc-mk-par {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

[dir] .oc-mk-estrela {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

[dir] .oc-mk-estrela svg {
  display: block;
  width: 19px;
  height: 19px;
  fill: none;
  stroke: #5A6069;
  stroke-width: 1.5;
}

[dir] .oc-mk-estrela[aria-pressed="true"] svg {
  fill: var(--mk-acento);
  stroke: var(--mk-acento);
}

/* Logo da moeda, e o disco de iniciais quando não há arquivo. O matiz sai do
 * PRÓPRIO símbolo: a mesma moeda tem sempre a mesma cor, em toda tela e em
 * toda visita, sem tabela para manter. */
[dir] .oc-mk-logo,
[dir] .oc-mk-marca {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
}

[dir] .oc-mk-marca {
  display: grid;
  place-items: center;
  background: oklch(.78 .15 calc(var(--mk-h, 0) * 1deg));
  color: #000000;
  font-size: 13px;
  font-weight: 700;
  font-style: normal;
  line-height: 1;
}

[dir] .oc-mk-marca[data-n="3"] { font-size: 11px; }
[dir] .oc-mk-marca[data-n="4"] { font-size: 9px; }

/* O par é o link da linha: bloco inteiro (logo + símbolo + nome), um alvo só. */
[dir] a.oc-mk-par-link {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

[dir] .oc-mk-nomes {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

[dir] .oc-mk-simbolo-linha {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}

[dir] .oc-mk-simbolo {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--mk-tinta);
}

[dir] .oc-mk-nome {
  font-size: 13px;
  font-weight: 400;
  color: var(--mk-tinta-4);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Fora do telefone estes dois não existem: a faixa de 24h e o selo de
 * alavancagem são o lugar PARA ONDE as colunas que saem se mudam. */
[dir] .oc-mk-faixa,
[dir] .oc-mk-alav-inline { display: none; }

[dir] .oc-mk-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.012em;
}

[dir] .oc-mk-preco {
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -.014em;
  color: var(--mk-tinta);
}

[dir] .oc-mk-var { font-size: 16px; font-weight: 500; }
[dir] .oc-mk-suave { font-size: 16px; font-weight: 400; color: var(--mk-tinta-2); }
[dir] .oc-mk-alav { font-size: 14px; color: var(--mk-tinta-3); }

[dir] .oc-mk-acao {
  display: flex;
  justify-content: flex-end;
}

/* ── o botão Trade ────────────────────────────────────────────────────────
 *
 * É o botão do sistema OFFCODE (`botao.css`, modelo `.ocb`). Aqui só entra a
 * VARIANTE de tamanho desta tela — 38px no desktop, 32px e sem a célula de
 * seta no telefone. Trinta setas empilhadas numa coluna de 430px viram ruído.
 *
 * 🔑 Variante nova em vez de mexer no `.ocb`: o mesmo botão é o Long/Short,
 * o Depositar e o Sacar, e mudar a altura lá mudaria todos eles. */
[dir] .oc-mk .ocb--trade { --ocb-h: 38px; --ocb-label-ratio: .34; }

/* 🔑 A cor SAIU daqui em 10/09/2026 e mora no token (`botao.css`,
 * `--ocb-fill-primary`). Ela era repetida aqui e no futuros.css, e o token
 * seguia em degradê: a mesma ação com duas aparências, dependendo da
 * tela. */

/* 🔴 A palavra entrava POR BAIXO da célula da seta. O modelo reserva
 * `célula + respiro` à direita, mas mede a célula por `--ocb-arrow` (0,846 × h
 * = 32px) enquanto o elemento `.ocb__arrow` desenha `arrow + slant` (49px) —
 * são 17px de diferença, e o rótulo ocupava todos eles. Medido num botão de
 * 128px: corpo laranja até 79, rótulo terminando em 84.
 *
 * A borda da célula é DIAGONAL, então o estrago é maior embaixo que em cima:
 * o canto inferior direito da palavra cruzava a emenda enquanto o superior
 * ainda estava dentro. É o tipo de desalinho que se vê e não se sabe nomear.
 *
 * 🔑 O respiro à direita passa a contar a célula INTEIRA. E o da esquerda
 * encolhe na mesma medida, para a palavra ficar no meio do LARANJA — não no
 * meio do botão, que inclui a célula escura. */
[dir] .oc-mk .ocb--trade {
  padding-right: calc(var(--ocb-arrow) + var(--ocb-slant) + var(--ocb-h) * .11);
  padding-left: calc(var(--ocb-slant) + var(--ocb-h) * .11);
}

/* ══ TABELA — telefone (≤ 560px) ══════════════════════════════════════════
 *
 * 4 colunas e SEM rolagem lateral: a página inteira cabe na largura da tela,
 * em 360, 390 e 430. */
@media (max-width: 560px) {
  [dir] .oc-mk { padding: 34px 20px 60px; }

  [dir] .oc-mk .oc-mk-h1 { font-size: 29px; line-height: 1.1; margin-bottom: 28px; }

  [dir] .oc-mk-busca {
    height: 52px;
    margin-bottom: 34px;
    padding: 0 22px 0 54px;
    border-radius: 26px;
  }
  [dir] .oc-mk-busca svg { left: 22px; width: 18px; height: 18px; }
  [dir] .oc-mk-busca input { font-size: 15px; }

  [dir] .oc-mk-abas { gap: 24px; }
  [dir] .oc-mk-aba { font-size: 16px; padding-bottom: 13px; gap: 7px; }
  [dir] .oc-mk-aba-estrela { width: 15px; height: 15px; }

  [dir] .oc-mk-cats { gap: 24px; padding: 22px 0 24px; }
  [dir] .oc-mk-cat { font-size: 14px; gap: 7px; }
  [dir] .oc-mk-selo { padding: 3px 6px; font-size: 10px; }

  /* 🔴 O `min-width` do desktop é exatamente o que faria a página rolar de
   * lado. Zerar aqui é a exigência dura do handoff. */
  [dir] .oc-mk-tabela { min-width: 0; }

  /* 🔴 A coluna do par tinha 106px e a linha do símbolo pede 84 — `BTCUSDT`
   * (54) mais o selo `200×` (24) mais o respiro. Com a estrela, o logo e dois
   * vãos de 9 na frente, sobravam 10px para o símbolo: a tabela saía com
   * `B.`, `E.`, `S.` no lugar de BTCUSDT, ETHUSDT, SOLUSDT. Medido em 390px.
   *
   * 🔑 O defeito foi ao ar comigo e não apareceu na prova: ela lia
   * `textContent`, que devolve o texto INTEIRO mesmo quando o CSS corta. Quem
   * pega corte é `scrollWidth > clientWidth`, ou o olho.
   *
   * A largura sai das outras três, que tinham folga: o preço pede 52 e tinha
   * 86; a variação pede 40 e tinha 62. A de ação cresce porque o botão do
   * russo (`Торговать`) pede 74. */
  [dir] .oc-mk-cab,
  [dir] .oc-mk-linha {
    grid-template-columns: minmax(0, 1fr) 54px 46px 74px;
    gap: 6px;
  }

  /* 🔴 Os rótulos do cabeçalho SE SOBREPUNHAM: `Último preço` pede 62px numa
   * coluna de 58 e `Variação 24h` pede 64 numa de 42, e o `nowrap` do
   * `.oc-mk-col` os fazia invadir o vizinho — a tela escrevia
   * `Último preçoVariação 24h` por cima. Medido em 390px.
   *
   * 🔑 A saída é QUEBRAR, não reticenciar: `Variação` numa linha e `24h` na
   * outra continua legível, e um cabeçalho com reticências deixa de dizer o
   * que a coluna é. A altura de 40px comporta duas linhas de 9,5px. */
  /* No telefone é a versão CURTA: `Preço` no lugar de `Último preço`, `24h`
   * no lugar de `Variação 24h`. Com ela o cabeçalho volta a caber numa linha
   * só, e a 10px continua legível. */
  [dir] .oc-mk-cab { height: 40px; font-size: 10px; }
  [dir] .oc-mk-col-longo { display: none; }
  [dir] .oc-mk-col-curto { display: inline; }
  [dir] .oc-mk-linha { height: 70px; }

  /* As três que saem da grade. Saem do CABEÇALHO junto, senão sobram rótulos
   * sobre colunas que não existem mais. */
  [dir] .oc-mk-c-max,
  [dir] .oc-mk-c-min,
  [dir] .oc-mk-c-alav { display: none; }

  [dir] .oc-mk-par,
  [dir] a.oc-mk-par-link { gap: 9px; }
  [dir] .oc-mk-estrela { width: 22px; height: 22px; }
  [dir] .oc-mk-estrela svg { width: 15px; height: 15px; stroke-width: 1.6; }

  [dir] .oc-mk-logo,
  [dir] .oc-mk-marca { width: 22px; height: 22px; font-size: 9.5px; }
  [dir] .oc-mk-marca[data-n="3"] { font-size: 9px; }
  [dir] .oc-mk-marca[data-n="4"] { font-size: 7.5px; }

  /* 12px e não 12,5: a meio ponto o `ASTERUSDT` pede 68 e cabe em 66. O
   * handoff PREVÊ reticências aqui (`text-overflow: ellipsis` é dele), mas
   * reticência é para o símbolo LONGO — os de sete e oito letras, que são a
   * maioria da tabela, têm de sair inteiros. */
  [dir] .oc-mk-simbolo {
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* A segunda linha do par troca o nome pela faixa de 24h. */
  [dir] .oc-mk-nome { display: none; }

  [dir] .oc-mk-faixa {
    display: block;
    font-size: 10px;
    font-variant-numeric: tabular-nums;
    color: var(--mk-tinta-4);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  [dir] .oc-mk-alav-inline {
    display: block;
    flex: none;
    font-size: 9.5px;
    font-variant-numeric: tabular-nums;
    color: var(--mk-tinta-3);
  }

  [dir] .oc-mk-preco { font-size: 12px; overflow: hidden; text-overflow: ellipsis; }
  [dir] .oc-mk-var { font-size: 11.5px; }

  /* O modelo compacto: mesmo corpo e mesmo acabamento, sem a célula de seta.
   *
   * 🔴 A 32px ele NÃO CABIA na coluna. Medido em 390px: a célula de Ação tem
   * 72px e o botão media 87 — ele vazava 15px para a ESQUERDA, por cima da
   * coluna da variação. Um `flex-end` não conserta: o botão simplesmente é
   * mais largo que o lugar onde mora.
   *
   * 🔑 26px é o que cabe: recuo da diagonal 11,3 + respiro 2,9 de cada lado
   * deixa 45px para o rótulo, e `Negociar` a 10px pede 43. A altura é a mesma
   * conta do desktop, com a coluna que existe no telefone. */
  [dir] .oc-mk .ocb--trade { --ocb-h: 26px; --ocb-label-ratio: .385; }
  [dir] .oc-mk .ocb--trade .ocb__arrow { display: none; }
  [dir] .oc-mk .ocb--trade {
    /* 🔴 O respiro à direita era `.11 × h` (2,9px) e a DIAGONAL comia a última
     * letra: na altura do texto o laranja acaba `slant/2` antes da caixa, e
     * `Negociar` saía `Negocia`. A caixa cabia — quem cortava era a forma.
     *
     * 🔑 Num paralelogramo o respiro óptico é `slant/2` de cada lado: é aí que
     * as duas diagonais cruzam a linha do texto. Simétrico, a palavra fica no
     * meio do laranja. */
    padding: 0 calc(var(--ocb-slant) / 2 + var(--ocb-h) * .13) 0
               calc(var(--ocb-slant) / 2 + var(--ocb-h) * .13);
  }
}

/* ── 360px: o selo de alavancagem sai ─────────────────────────────────────
 *
 * 🔴 Na tela mais estreita em uso a coluna do par tem 128px. Tirando a
 * estrela, o logo e os dois vãos sobram 76 para a linha do símbolo, e o selo
 * `200×` come 30 deles — restam 46, que é `BTCUS…`. Medido em 360px.
 *
 * 🔑 O que sai é o selo, não o símbolo. A alavancagem é um dado de APOIO e
 * aparece inteira na tela do par, a um toque; o símbolo é a identidade da
 * linha — cortado, a pessoa não sabe o que está lendo. Entre mostrar mal as
 * duas coisas e bem a que importa, mostra-se bem a que importa. */
@media (max-width: 374px) {
  [dir] .oc-mk-alav-inline { display: none; }
}

/* ══ PAGINAÇÃO — 30 por página ════════════════════════════════════════════
 *
 * O número de páginas segue o FILTRO ativo, e qualquer mudança de aba,
 * categoria, busca ou ordenação volta para a página 1: a página 3 de um
 * resultado que já não existe é uma tela vazia sem explicação. */
[dir] .oc-mk-paginas {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  row-gap: 16px;
  padding-top: 30px;
  font-size: 14px;
  color: var(--mk-tinta-3);
}

[dir] .oc-mk-paginas b {
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  color: var(--mk-tinta);
}

/* 🔴 Sete números de 44px mais as duas setas dão 414px, e a tela mais estreita
 * em uso tem 360: medido, a paginação sozinha punha 54px de rolagem lateral na
 * página — o defeito exato que o handoff proíbe. Ela não entra num trilho
 * rolável (uma paginação que rola de lado é uma navegação escondida dentro de
 * outra): ela QUEBRA em duas fileiras. */
[dir] .oc-mk-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}

[dir] .oc-mk-pag {
  min-width: 38px;
  height: 38px;
  margin: 0;
  padding: 0 13px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--mk-tinta-3);
  transition: background .12s ease, color .12s ease;
}

[dir] .oc-mk-pag:hover { color: var(--mk-tinta); }

[dir] .oc-mk-pag[aria-current="page"] {
  font-weight: 600;
  color: #1A1000;
  background: var(--mk-acento);
}

[dir] .oc-mk-seta {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
}

[dir] .oc-mk-seta svg {
  display: block;
  width: 17px;
  height: 17px;
  fill: none;
  stroke: var(--mk-tinta-2);
}

[dir] .oc-mk-seta:disabled { cursor: default; }
[dir] .oc-mk-seta:disabled svg { stroke: #3A3F47; }

@media (max-width: 560px) {
  [dir] .oc-mk-paginas {
    flex-direction: column;
    justify-content: center;
    gap: 14px;
    padding-top: 26px;
    font-size: 13px;
  }
  /* 44px de alvo de toque. */
  [dir] .oc-mk-pag { min-width: 44px; height: 42px; padding: 0 14px; border-radius: 9px; }
  [dir] .oc-mk-seta { width: 44px; height: 44px; border-radius: 9px; }
  [dir] .oc-mk-seta svg { width: 18px; height: 18px; }
}

/* ══ ESTADO VAZIO ═════════════════════════════════════════════════════════
 *
 * A mensagem cita o TERMO quando há busca e a linha do filtro quando não há.
 * "Nenhum mercado encontrado" sozinho não diz onde procurar de novo. */
[dir] .oc-mk-vazio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 90px 0;
  font-size: 16px;
  text-align: center;
  color: var(--mk-tinta-3);
}

[dir] .oc-mk-vazio button {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  color: var(--mk-acento);
}

[dir] .oc-mk-vazio a {
  font-size: 14px;
  color: var(--mk-acento);
  text-decoration: none;
}

@media (max-width: 560px) {
  [dir] .oc-mk-vazio { padding: 66px 20px; font-size: 15px; }
}

[dir] .oc-mk *:focus-visible {
  outline: 2px solid var(--mk-acento);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  [dir] .oc-mk * { transition: none !important; }
}

/* ── a busca e o título herdados da captura ───────────────────────────────
 *
 * O `<h1>` da origem CONTINUA sendo o título da página — é ele que o buscador
 * lê, e o `liga_mercados` já reescreveu o texto nas sete árvores. O que muda
 * é a aparência: 44px, peso 700.
 *
 * A caixa de busca herdada, essa, sai: a pílula do desenho novo é outra, e
 * dois campos de busca na mesma tela deixariam um deles morto. Escondida,
 * nunca cortada — cortar nó do DOM neste espelho já levou seção vizinha
 * junto. */
[dir] .market-layout-content > .search-box-wrapper[data-oc-mk-busca-velha] { display: none; }
/* ── a dobra fica reservada até a tabela montar ──────────────────────────
 * 🔴 CLS medido EM PRODUÇÃO em 09/09/2026, `/m/pt-br/markets/`: **1,011**, num
 * único deslocamento de 0,748 aos 653 ms. Causa: `.market-layout-content` (o
 * bloco "Tendência de mercado") é o irmão SEGUINTE do `.market-tabs-host` e
 * nasce na dobra, em y=65. Quando o `mercados.js` monta a `section.oc-mk`
 * dentro do host, o host vai de ~0 para **8.040 px** e joga o irmão para
 * y=8.105 — oito mil pixels de empurrão começando dentro da tela.
 *
 * 🔴 Medir com a API mockada MENTIA: com listas vazias o host fica em 244 px e
 * o CLS dá 0,267. O número que vale é o de produção, com dados.
 *
 * 🔑 Isto só apareceu quando a cortina deixou de segurar a página até o fim da
 * fila de JS. O conserto não é devolver a cortina: é o irmão não nascer na
 * dobra. Elemento que APARECE não conta como deslocamento — só o que SE MOVE.
 *
 * 🔑 `:has()` é como perguntar "o JS já montou?" sem o JS precisar avisar.
 *
 * No desktop `.market-tabs-host` não existe (layout outro): a regra é inerte
 * lá, e o CLS de lá já era 0,067. */
/* 🔴 A primeira versão soltava a reserva quando a `section.oc-mk` aparecia, e
 * medida ao vivo isso só levou o CLS de 1,011 para 0,748: o `.oc-mk` monta
 * como ESQUELETO de 244 px, a reserva caía, o irmão voltava para y=309 —
 * dentro da tela — e só então a tabela enchia até 7.225 px e o empurrava.
 * Montar não é estar pronto.
 *
 * 🔴 A segunda versão aceitava `p.oc-mk-nada` como "chegou": medido ao vivo, o
 * CLS não saiu de 0,748. Aquele parágrafo é o estado INICIAL da lista, e está
 * na tela aos 719 ms — as linhas só chegam aos 1.064 ms. A condição soltava a
 * reserva justamente antes do empurrão que ela existia para evitar.
 *
 * 🔑 A reserva dura até haver LINHA (`.oc-mk-linha`). Com linhas, o host está
 * em 8.134 px e o irmão nasce em y=8.199, fora da tela — aparecer não é
 * deslocar. Se linha nenhuma vier (API fora), quem solta é a animação de 4 s:
 * a mensagem de lista vazia fica visível o tempo todo, porque quem está
 * escondido é o IRMÃO, não o host. */
.market-tabs-host:not(:has(.oc-mk-linha)) {
  min-height: 100vh;
  animation: oc-solta-host 0s linear 4s forwards;
}
@keyframes oc-solta-host { to { min-height: 0; } }

.market-tabs-host:not(:has(.oc-mk-linha)) + .market-layout-content {
  display: none;
  animation: oc-devolve-captura 0s linear 4s forwards;
}

/* 🔑 A saída de emergência é a mesma do `barra.css`: se o JS nunca montar, a
 * animação devolve o conteúdo em 4 s. Página velha é melhor que página vazia.
 * `display` em `@keyframes` é passo discreto (Chrome 116+/Safari 17.4+); o
 * navegador que não souber também não sabe `:has()` e nem casa a regra. */
@keyframes oc-devolve-captura { to { display: revert; } }