/* Devolve o layout das telas de negociação ao tamanho da janela.
 *
 * A captura foi feita num viewport de 2291 px e o `vue-grid-layout` grava a
 * geometria em PIXEL, num atributo `style` de cada item:
 *
 *     transform: translate3d(1159px, 4px, 0); width: 285px; height: 1382px;
 *     position: absolute;
 *
 * Com o Vue rodando isso é recalculado a cada resize. Aqui não há Vue: os
 * números ficaram como estavam no dia. O resultado, medido numa janela de
 * 1800 px:
 *
 *   - o container `.spot-grid-left-side` tem 1808 px — 8 px a mais que a
 *     janela, começando em x = -4;
 *   - os itens somam 1444 px, então sobram 356 px de vazio à direita;
 *   - o gráfico é cortado, porque o pedaço dele que aparece foi dimensionado
 *     para uma tela mais larga.
 *
 * 🔑 Layout em pixel absoluto sobrevive à captura; layout responsivo não. É a
 * mesma classe de problema do preço congelado — o valor certo para AQUELE
 * momento, servido como se fosse geral.
 *
 * ## O conserto
 *
 * O grid absoluto vira CSS Grid: `position: static` nos itens, `transform`
 * anulado, largura automática, e as áreas nomeadas pela função de cada painel.
 * A ordem visual é a mesma da captura — gráfico à esquerda, livro ao lado,
 * painel de ordem à direita, histórico embaixo — mas agora acompanha a janela.
 *
 * `!important` é necessário: o que se sobrescreve é atributo `style` inline,
 * que ganha de qualquer seletor sem ele. Não é preguiça de especificidade.
 */

/* ── grade principal ─────────────────────────────────────────────────────── */

.spot-grid-content-wrap,
.spot-grid-left-side {
  width: 100% !important;
  max-width: 100% !important;
  overflow: visible !important;
}

.vue-grid-layout {
  position: static !important;
  height: auto !important;
  width: 100% !important;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px 300px;
  grid-template-areas:
    "topo  topo  painel"
    "graf  livro painel"
    "lista lista painel";
  gap: 6px;
  align-items: stretch;
}

.vue-grid-layout > .vue-grid-item {
  position: static !important;
  transform: none !important;
  width: auto !important;
  min-width: 0;      /* sem isto o item de grade não encolhe abaixo do conteúdo */
}

/* O placeholder do vue-grid-layout é o retângulo que ele desenha enquanto se
 * arrasta um painel. Sem Vue ele nunca some sozinho e vira uma célula vazia
 * ocupando lugar na grade. */
.vue-grid-layout > .vue-grid-placeholder {
  display: none !important;
}

/* As duas faixas do topo (par + estatísticas) vêm sem classe própria: são os
 * dois primeiros itens estáticos. Casar por posição é o que sobra quando o
 * autor não deu nome — e aqui a posição é estável, vem do mesmo HTML. */
.vue-grid-layout > .vue-grid-item.static:nth-child(1),
.vue-grid-layout > .vue-grid-item.static:nth-child(2) {
  grid-area: topo;
  height: auto !important;
}
.vue-grid-layout > .vue-grid-item.static:nth-child(2) {
  grid-row: 1;
}

.vue-grid-layout > .vue-grid-item.chart {
  grid-area: graf;
  /* `relative` e nao `static`: o desenho das velas e um <canvas> com
   * `position:absolute; inset:0`, e ele precisa deste elemento como bloco de
   * referencia. Com `static !important` na regra geral acima, o canvas se
   * ancorava no VIEWPORT e cobria a pagina inteira — 1800x954 em cima de tudo.
   *
   * `relative` sem deslocamento ocupa o mesmo lugar que `static` no fluxo,
   * entao a grade nao muda. */
  position: relative !important;
}
.vue-grid-layout > .vue-grid-item.order-book { grid-area: livro; }
.vue-grid-layout > .vue-grid-item.order-panel{ grid-area: painel; }
.vue-grid-layout > .vue-grid-item.order-list { grid-area: lista; }

/* Altura: o gráfico e o livro dividem a mesma faixa, e o painel de ordem
 * atravessa as três linhas. Alturas em pixel do arquivo dariam 1382 px de
 * painel numa janela de 900. */
.vue-grid-layout > .vue-grid-item.chart,
.vue-grid-layout > .vue-grid-item.order-book {
  height: clamp(420px, 58vh, 720px) !important;
}
.vue-grid-layout > .vue-grid-item.order-panel,
.vue-grid-layout > .vue-grid-item.order-list {
  height: auto !important;
}

/* Os filhos herdavam a largura em pixel do pai. */
.vue-grid-item > [class*="-wrapper"],
.vue-grid-item > [class*="-wrap"] {
  width: 100% !important;
  max-width: 100% !important;
}

/* ── telas estreitas ─────────────────────────────────────────────────────── */

/* Abaixo de 1200 px as três colunas não cabem: o livro tem largura mínima
 * própria e o painel de ordem também. Empilha, mantendo a ordem de leitura de
 * quem opera — preço e gráfico primeiro, depois o painel, depois o resto. */
@media (max-width: 1200px) {
  .vue-grid-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "topo"
      "graf"
      "painel"
      "livro"
      "lista";
  }
  .vue-grid-layout > .vue-grid-item.chart,
  .vue-grid-layout > .vue-grid-item.order-book {
    height: auto !important;
    min-height: 360px;
  }
}

/* ── flutuante de anúncio ────────────────────────────────────────────────── */

/* Caixa "Spot Listing" da origem, presa no canto inferior direito. O botão de
 * fechar dela é do Vue e não responde; sem Vue ela fica ali para sempre, em
 * cima do painel de ordem, anunciando uma listagem de 11/08. */
.announcement-float-wrapper,
.announcement-float {
  display: none !important;
}

/* Controle que a captura trouxe desenhado e sem nada atrás: o botão de
   ajustes (o menu dele era montado pelo Vue no clique e não sobreviveu) e o
   "×" que removeria o livro de um arranjo em pixel congelado, sem volta. */
[dir] .oc-livro-fora {
  opacity: .3;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Seletor de par do SPOT ─────────────────────────────────────────────
 * O dropdown da captura é morto (abria por classe que o Vue punha). Este é o
 * substituto: 13 pares, sem busca — com essa quantidade, um campo de busca é
 * um passo a mais para chegar no mesmo lugar.
 * ⚠️ Nada de `rem`: a raiz do espelho é 13.33vw e 1rem vale ~240px.
 */
.oc-spot-ancora { cursor: pointer; }
/* 🔑 `fixed` e ancorado no BODY, posicionado por JS.
 *
 * O painel morava dentro do cabecalho e ficava INVISIVEL: `.spot-container`,
 * varios niveis acima, tem `overflow: hidden` — um dropdown absoluto dentro
 * dele e cortado sem erro nenhum. Sair da arvore e a unica correcao que nao
 * depende de nenhum ancestral se comportar. */
.oc-spot-lista {
  position: fixed;
  z-index: 60;
  min-width: 236px;
  max-height: 380px;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid #2a2c33;
  border-radius: 10px;
  background: #0f1115;
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
  display: grid;
  gap: 2px;
}
/* 🔑 `display: grid` ANULA o atributo `hidden` — o padrao so aplica
 * `display:none` a `[hidden]` numa regra de origem do agente, que qualquer
 * `display` explicito vence. Sem esta linha o painel nasce ABERTO. */
.oc-spot-lista[hidden] { display: none; }
.oc-spot-item {
  display: flex;
  /* 🔴 Era `baseline`. Com o logo na linha, alinhar pela base do TEXTO empurra
   * a imagem para cima e ela flutua acima do nome — some com centro do item.
   * `center` é o que alinha coisas de alturas diferentes. */
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #d4d4d8;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.oc-spot-item:hover { background: #191c22; color: #f4f4f5; }
.oc-spot-item.oc-on { background: #151a26; color: #f4f4f5; }
/* 🔑 O nome CRESCE e o preço não. Sem isto, um preço longo (PEPE tem 10 casas)
 * espremia o par contra o logo — e o par é o que a pessoa está procurando. */
.oc-spot-item-par { font-weight: 500; flex: 1 1 auto; }
.oc-spot-item-preco {
  font-variant-numeric: tabular-nums;
  opacity: .75;
  flex: 0 0 auto;
  white-space: nowrap;
}

/* O logo. Tamanho fixo para a lista não sacudir enquanto as imagens chegam —
 * e é ele que reserva o espaço das iniciais quando não há imagem. */
:root .oc-spot-item-logo {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #23262e;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: .2px;
  color: #a1a1aa;
}
.oc-spot-item-logo img { width: 100%; height: 100%; object-fit: contain; }
.oc-spot-vazio { margin: 0; padding: 10px; font-size: 12px; color: #a1a1aa; }


/* ── abas mortas ao lado do GRAFICO ──────────────────────────────────────
 *
 * `Sobre a moeda` e `Noticias` (dono, 24/08/2026). Sao da captura: o conteudo
 * delas vinha do Vue da origem, que nao veio, e clicar troca para um painel
 * vazio.
 *
 * 🔑 Aba que abre nada e pior que aba ausente — a pessoa clica, ve o vazio e
 * passa a desconfiar das que funcionam.
 *
 * Ancora ESTRUTURAL, nunca o rotulo: esta folha vale nas sete linguas. Aqui a
 * barra do grafico tem nome proprio (`spot-chart-tab-bar`) — no perpetuo e
 * `.title-header .bx-tab-bar`, e por isso a regra e escrita em cada folha em
 * vez de uma so tentar cobrir as duas telas com um seletor largo demais.
 *
 * Escondido, nao cortado: a fileira se realinha sozinha com uma aba so.
 */
[dir] .spot-chart-tab-bar .bx-tab-item:nth-child(n+2) { display: none !important; }


/* ── Verde quando sobe, vermelho quando desce (24/08/2026) ───────────────
 *
 * 🔴 A cor dos preços vinha CONGELADA da captura e nunca mais mudava: o
 * número grande do perpétuo nasceu `green`, o do meio do livro nasceu
 * `price-red` e o do spot tem `color: var(--kline-down)` escrito na regra —
 * vermelho fixo, sem classe nenhuma para trocar. Na tela isso deu um preço
 * SUBINDO pintado de vermelho com a seta apontando para cima: três sinais,
 * dois deles mentindo.
 *
 * 🔑 A cor é dado, não decoração: quem lê um preço vermelho lê "caiu". Ela
 * tem de sair da mesma escrita que põe o número, senão fica presa no estado
 * em que o DOM foi gravado.
 *
 * Marca PRÓPRIA (`data-oc-cor`), não as classes da origem, por dois motivos:
 * cada tela embrulha o mesmo dado com um nome diferente (`green`/`red` no
 * perpétuo, `price-green`/`price-red` no livro dele, `.price-wrap.up/.down`
 * no spot) e a do spot nem existe — a cor está travada na regra do
 * `.price-close-text`. Uma marca só cobre as quatro.
 *
 * `!important` aqui não é atalho: o seletor da origem chega a (0,4,0)
 * (`[dir=ltr] .arrow.down[data-v-…]`) e a cor do spot vem de uma regra sem
 * classe alguma para desligar.
 */
/* 🔴 A primeira versão era `[data-oc-cor=…]` sozinho, (0,1,0), e PERDIA no
 * spot: a variação de 24h de lá casa `.text-rise[data-v-6f57e80f]`, que já
 * é `!important` e tem (0,2,0). Dois `!important` empatados: quem decide é
 * a especificidade, e a minha era menor — a porcentagem ficava verde caindo.
 *
 * 🔑 `!important` não vence `!important`; ele só muda de campeonato. Ancorar
 * também no `data-oc-campo` — que todo campo de preço já tem, porque é por
 * ele que o JS o encontra — leva a regra a (0,3,0) sem inventar classe. */
/* Troca de cor SUAVE, não instantânea (dono, 15/09: "não muda números
 * fluidos") — sem isto o verde/vermelho trocava de uma vez, sem nenhuma
 * transição. Só `color` anima (nunca `all`): nada de layout entra nisso. */
[dir] [data-oc-campo] { transition: color .15s ease; }
[dir] [data-oc-campo][data-oc-cor="sobe"]  { color: #00e08f !important; }
[dir] [data-oc-campo][data-oc-cor="desce"] { color: #ff4d4f !important; }
/* Antes do primeiro tique não há lado. `inherit` devolve a cor do bloco, que
 * é a do tema — funciona no claro e no escuro sem escolher um valor. */
[dir] [data-oc-campo][data-oc-cor="parado"] { color: inherit !important; }

/* Seta sem direção não aponta para lado nenhum: fica oculta, guardando o
 * espaço. Escondê-la com `display` faria o número saltar lateralmente no
 * primeiro movimento. */
svg.arrow[data-oc-seta="parado"] { visibility: hidden !important; }

/* A seta do meio do livro.
 *
 * 🔑 O desenho da origem aponta para BAIXO — a ponta em V fica em y≈14 e a
 * haste sobe até y≈0. É a folha dela que gira 180° na classe `down`, então
 * quem sobe é que precisa do giro. Herdar aquela convenção sem olhar o
 * traçado entregaria a seta ao contrário nos dois casos. */
svg.arrow[data-oc-seta="sobe"] {
  color: #00e08f !important;
  transform: rotate(180deg) !important;
}
svg.arrow[data-oc-seta="desce"] {
  color: #ff4d4f !important;
  transform: none !important;
}

/* O `<h1>` do produto quando a captura não tem nenhum (perpétuo, grade,
 * 1001x, tradfi, ipo). Fica na árvore de acessibilidade e fora da tela: o par
 * já aparece no cabeçalho com estilo próprio, e um título visível por cima
 * repetiria a mesma informação em dois tamanhos. Ver `meta-produto.js`. */
.oc-h1-produto {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── OC-11 · nada de preço de outro ativo antes do dado chegar ────────────
 *
 * Auditoria de 04/09/2026: em `/perpetual/ETH-USDT` com rede lenta a tela
 * exibia 68.564,9 — o preço do BTC, gravado no HTML no dia da captura — com a
 * cortina já levantada. Reproduzido: 4 s de atraso na API bastam.
 *
 * 🔑 O gancho é da PRÓPRIA origem: `dynamic-text` é como ela marca "este texto
 * é trocado em execução". Toda a numeração velha do cabeçalho e do livro tem
 * essa classe — não foi preciso inventar seletor nem listar os campos um a um,
 * que é a lista paralela que envelhece.
 *
 * Número de outro ativo é pior que campo vazio: vazio anuncia que falta dado;
 * número anuncia um mercado que não é o da tela. */
/* 🔴 05/09/2026: a máscara vazava. `color` é HERDADO, e valor herdado perde
 * para qualquer declaração do próprio filho — `!important` não muda isso,
 * porque a importância só decide entre declarações do MESMO elemento. O
 * `.funding-rate-value` da barra declara o próprio laranja e ficava legível,
 * com a taxa do dia da captura, enquanto tudo em volta virava travessão.
 * Vale para todo filho que pinta a si mesmo — a variação de 24 h, verde ou
 * vermelha, é a próxima da fila. */
body.oc-preco-frio .dynamic-text,
body.oc-preco-frio .dynamic-text * {
  color: transparent !important;
  border-radius: 3px;
  background-image: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.05) 0%,
    rgba(255, 255, 255, 0.11) 50%,
    rgba(255, 255, 255, 0.05) 100%
  );
  background-size: 200% 100%;
  animation: oc-esqueleto 1.2s ease-in-out infinite;
}
@keyframes oc-esqueleto {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  body.oc-preco-frio .dynamic-text { animation: none; }
}

/* Passou do tempo e nenhum preço chegou: o esqueleto pararia de significar
 * "carregando" e passaria a significar "quebrado". Vira um travessão — que é
 * o que a tela sabe. */
body.oc-preco-frio.oc-sem-preco .dynamic-text {
  background: none;
  animation: none;
}
body.oc-preco-frio.oc-sem-preco .dynamic-text::after {
  content: "—";
  color: #71717a;
}