/* Code For Trading — base do design system "Pulso" (DESIGN.md): cores, tipo,
 * fundo, cabeçalho, botões e rodapé. Comum às páginas públicas (+ portal.v4.css)
 * e às dos módulos (+ /dashboards/_compartilhado/estilo.css). Nada de fora (CSP
 * 'self'): fontes do sistema, números em mono tabular.
 *
 * Tema: ESCURO por padrão (o padrão do Pulso); o botão do cabeçalho (tema.v2.js)
 * troca para o claro em <html data-tema="claro">. Os nomes das variáveis são os
 * mesmos do sistema anterior: os componentes herdam o visual pelos valores. */

:root {
  color-scheme: dark;
  --fundo: #020617;
  --fundo-2: #070d1c;
  --cartao: #0b1222;
  --cartao-alto: #0f172a;
  --borda: rgba(51, 65, 85, .7);
  --borda-forte: #334155;
  --grade: rgba(148, 163, 184, .06);
  --texto: #f8fafc;
  --suave: #a3b1c6;
  --fraco: #64748b;          /* só decoração */
  --destaque: #4ade80;       /* texto e ícone em destaque (alta) */
  --destaque-forte: #86efac;
  --botao: #22c55e;          /* fundo do botão primário */
  --botao-forte: #4ade80;
  --destaque-texto: #04130a;
  --destaque-fundo: rgba(34, 197, 94, .1);
  --ciano: #38bdf8;
  --violeta: #a78bfa;
  --alta: #4ade80;
  --baixa: #f87171;
  --baixa-fundo: rgba(248, 113, 113, .1);
  --aviso: #fbbf24;
  --aviso-fundo: rgba(251, 191, 36, .1);
  --sombra: 0 30px 60px -32px rgba(0, 0, 0, .8);
  --luz: rgba(56, 189, 248, .45);
  --aurora-1: rgba(56, 189, 248, .12);
  --aurora-2: rgba(167, 139, 250, .12);
  --aurora-3: rgba(34, 197, 94, .07);
  --vidro: rgba(2, 6, 23, .72);
  --sans: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: "Cascadia Code", "SF Mono", "JetBrains Mono", Consolas, ui-monospace, monospace;
  --raio: 12px;
  --raio-grande: 20px;
  --largura: 1240px;
  --lado: clamp(16px, 4vw, 48px);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --icone-lua: none;         /* o ícone mostra o tema para onde o botão leva */
  --icone-sol: block;
}

:root[data-tema="claro"] {
  color-scheme: light;
  --fundo: #f1f5f9;
  --fundo-2: #e2e8f0;
  --cartao: #ffffff;
  --cartao-alto: #f8fafc;
  --borda: rgba(15, 23, 42, .12);
  --borda-forte: #cbd5e1;
  --grade: rgba(15, 23, 42, .05);
  --texto: #0b1222;
  --suave: #475569;
  --fraco: #94a3b8;
  --destaque: #15803d;
  --destaque-forte: #166534;
  --botao: #15803d;
  --botao-forte: #166534;
  --destaque-texto: #ffffff;
  --destaque-fundo: rgba(21, 128, 61, .09);
  --ciano: #0369a1;
  --violeta: #6d28d9;
  --alta: #15803d;
  --baixa: #b91c1c;
  --baixa-fundo: rgba(185, 28, 28, .08);
  --aviso: #8a5a0f;
  --aviso-fundo: rgba(180, 120, 30, .1);
  --sombra: 0 24px 48px -28px rgba(15, 23, 42, .35);
  --luz: rgba(3, 105, 161, .35);
  --aurora-1: rgba(56, 189, 248, .18);
  --aurora-2: rgba(167, 139, 250, .16);
  --aurora-3: rgba(34, 197, 94, .1);
  --vidro: rgba(241, 245, 249, .8);
  --icone-lua: block;
  --icone-sol: none;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--borda-forte) transparent; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--fundo);
  color: var(--texto);
  font: 16px/1.6 var(--sans);
  font-variant-numeric: tabular-nums;
  overflow-x: hidden;
}

/* Aurora fixa no topo: só gradiente, sem custo de animação. */
body::before {
  content: "";
  position: fixed;
  inset: -20% -10% auto;
  height: 80vh;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(40rem 22rem at 18% 30%, var(--aurora-1), transparent 70%),
    radial-gradient(36rem 22rem at 82% 10%, var(--aurora-2), transparent 70%),
    radial-gradient(30rem 18rem at 60% 60%, var(--aurora-3), transparent 70%);
}

::selection { background: var(--botao); color: var(--destaque-texto); }
input, textarea { caret-color: var(--destaque); }

a { color: var(--destaque); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { color: var(--destaque-forte); }
:focus-visible { outline: 2px solid var(--ciano); outline-offset: 3px; border-radius: 4px; }

h1, h2, h3 { text-wrap: balance; letter-spacing: -.025em; }
code, .mono { font-family: var(--mono); }

/* ── Cabeçalho: vidro fixo no topo ──────────────────────────────────────── */
.topo {
  position: sticky;
  top: 0;
  z-index: 30;
  width: 100%;
  margin: 0 auto;
  padding: .8rem max(var(--lado), calc((100% - var(--largura)) / 2 + var(--lado)));
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  background: var(--vidro);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--borda);
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  color: var(--texto);
  text-decoration: none;
  font-weight: 700;
  font-size: 1.02rem;
}
.marca:hover { color: var(--texto); }
.marca svg { display: block; width: 30px; height: 30px; }
.marca .chave { fill: none; stroke: var(--texto); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.marca .vela { fill: var(--botao); }
.marca .pavio { stroke: var(--botao); stroke-width: 1.4; stroke-linecap: round; }

/* Botão de tema: só o ícone, desenhado (lua = ir para o escuro, sol = ir para o claro). */
.tema { width: 2.5rem; padding: 0; }
.tema svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tema .lua { display: var(--icone-lua); }
.tema .sol { display: var(--icone-sol); }

.menu { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }

/* ── Botões: pílula; o primário é o verde que brilha ───────────────────── */
.botao, button {
  font: inherit;
  font-size: .93rem;
  font-weight: 600;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 2.5rem;
  padding: .55rem 1.05rem;
  border-radius: 999px;
  border: 1px solid var(--borda-forte);
  background: transparent;
  color: var(--texto);
  cursor: pointer;
  text-decoration: none;
  transition: border-color .25s var(--ease), background-color .25s var(--ease), color .25s, transform .25s var(--ease), box-shadow .25s var(--ease);
}
.botao:hover, button:hover { border-color: var(--ciano); color: var(--ciano); }
.botao-primario, button.botao-primario {
  background: var(--botao);
  border-color: var(--botao);
  color: var(--destaque-texto);
  box-shadow: 0 10px 30px -12px rgba(34, 197, 94, .55);
}
.botao-primario:hover, button.botao-primario:hover {
  background: var(--botao-forte);
  border-color: var(--botao-forte);
  color: var(--destaque-texto);
  transform: translateY(-2px);
  box-shadow: 0 0 0 5px var(--destaque-fundo), 0 16px 36px -14px rgba(34, 197, 94, .6);
}
.botao-primario:active, button.botao-primario:active { transform: translateY(0); }
button:disabled { opacity: .55; cursor: wait; transform: none; }

/* Ponto de status: pulsa devagar (o "ao vivo"). */
.ponto {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--botao);
  box-shadow: 0 0 10px var(--botao);
  flex-shrink: 0;
}

/* Painel em destaque: vidro escuro com filete de luz no topo e brilho ciano. */
.painel {
  position: relative;
  padding: 1.8rem;
  border-radius: var(--raio-grande);
  border: 1px solid var(--borda-forte);
  background: linear-gradient(160deg, var(--cartao-alto), var(--cartao) 70%);
  box-shadow: var(--sombra), 0 0 50px -24px var(--luz);
}
.painel::before {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  top: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ciano), transparent);
  opacity: .8;
}
.painel.cartao, .painel.secao { border-radius: var(--raio-grande); }

/* ── Rodapé ─────────────────────────────────────────────────────────────── */
.rodape {
  width: 100%;
  max-width: var(--largura);
  margin: auto auto 0;
  padding: 1.6rem var(--lado) 2.2rem;
  border-top: 1px solid var(--borda);
  color: var(--suave);
  font-size: .86rem;
  display: flex;
  gap: .6rem 1.5rem;
  flex-wrap: wrap;
  justify-content: space-between;
}
.rodape a { color: var(--suave); }
.rodape a:hover { color: var(--destaque); }

@media (max-width: 520px) {
  .topo .menu .botao, .topo .menu button { min-height: 2.3rem; padding: .4rem .8rem; font-size: .86rem; }
  .topo .menu .tema { width: 2.3rem; padding: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}