/* Painel — Trading Auto
 *
 * Sem framework CSS, sem build, sem fonte externa (a CSP do servidor é
 * `default-src 'self'` — uma fonte do Google nem carregaria). Desenhado
 * para ECRÃ GRANDE: mesa de operações com barra lateral de mercados. Abaixo
 * de 1100px a barra lateral vira uma faixa rolável e tudo empilha numa
 * coluna — o celular continua a funcionar, em versão resumida.
 */

:root {
  --cor-fundo: #07080d;
  --cor-superficie: #0e1018;
  --cor-superficie-alta: #161926;
  --cor-borda: #232739;
  --cor-texto: #eceef6;
  --cor-texto-fraco: #8b91a8;
  --cor-verde: #3ddc97;
  --cor-vermelho: #ff5c6c;
  --cor-amarelo: #f2c14e;
  --cor-azul: #6c8cff;
  --cor-plasma: #7de3ff;
  --raio: 14px;
  --fonte-numero: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --sombra-painel: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 20px 40px -24px rgba(0, 0, 0, 0.8);
}

* { box-sizing: border-box; }

/* `[hidden]` tem que ganhar de qualquer `display` declarado por classe
   neste arquivo (ex.: `.tela-login { display: flex }`, `.casca { display:
   grid }`) — sem isto, dois seletores de mesma especificidade (atributo
   vs. classe) empatam, e o último declarado no arquivo vence, deixando a
   seção "escondida" ainda visível. Este é o bug real que apareceu ao abrir
   a página pela primeira vez: `hidden` no elemento não escondia nada. */
[hidden] { display: none !important; }

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background:
    radial-gradient(1100px 600px at 70% -10%, rgba(108, 140, 255, 0.10), transparent 60%),
    radial-gradient(800px 500px at 0% 100%, rgba(125, 227, 255, 0.06), transparent 60%),
    var(--cor-fundo);
  background-attachment: fixed;
  color: var(--cor-texto);
  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

h1, h2 { margin: 0 0 0.5em; }
h2 {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--cor-texto-fraco);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
h2 span { letter-spacing: 0.02em; text-transform: none; }

button { font-family: inherit; cursor: pointer; }

:focus-visible { outline: 2px solid var(--cor-plasma); outline-offset: 2px; }

/* ---------------------------------------------------------------- login */

.tela-login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.cartao-login {
  width: 100%;
  max-width: 380px;
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: 20px;
  box-shadow: var(--sombra-painel), 0 0 120px -40px rgba(125, 227, 255, 0.35);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.marca-login { margin: 0; font-size: 2rem; line-height: 1; color: var(--cor-plasma); }
.cartao-login h1 { font-size: 1.15rem; letter-spacing: -0.01em; }
.cartao-login label { font-size: 0.8rem; color: var(--cor-texto-fraco); }

.cartao-login input {
  padding: 12px;
  border-radius: 10px;
  border: 1px solid var(--cor-borda);
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-size: 1rem;
}

.cartao-login button {
  margin-top: 8px;
  padding: 12px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--cor-azul), var(--cor-plasma));
  color: #05060a;
  font-weight: 700;
  font-size: 1rem;
}

.mensagem-erro { color: var(--cor-vermelho); font-size: 0.9rem; margin: 0; }

/* ------------------------------------------------------------------ casca */

/* `minmax(0, 1fr)`, não `1fr`: um `1fr` simples cresce até ao filho mais largo
   (a tabela de sinais, a fila do calendário) e, no celular, empurrava a página
   inteira para fora do ecrã. */
.casca { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 100vh; }
.palco { min-width: 0; display: flex; flex-direction: column; }

.lateral {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 16px 0;
  border-bottom: 1px solid var(--cor-borda);
}

.marca { display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: -0.01em; }
.marca-simbolo { color: var(--cor-plasma); font-size: 1.4rem; line-height: 1; }

/* -------------------------------------------------------------------- abas */

.abas { display: flex; gap: 4px; overflow-x: auto; }
.abas-grupo { display: none; }

.aba-botao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--cor-texto-fraco);
  padding: 10px 12px;
  font-size: 0.9rem;
  white-space: nowrap;
  text-align: left;
  transition: color 0.15s ease, background 0.15s ease;
}

.aba-botao small {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 2px 6px;
  border-radius: 999px;
  border: 1px solid var(--cor-borda);
  color: var(--cor-texto-fraco);
}

.aba-botao:hover { color: var(--cor-texto); }
.aba-ativa { color: var(--cor-texto); border-bottom-color: var(--cor-plasma); font-weight: 600; }

/* ------------------------------------------------------------- cabeçalho */

.cabecalho {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--cor-borda);
  flex-wrap: wrap;
}

.relogios { display: flex; gap: 6px; flex-wrap: wrap; flex: 1 1 auto; }

.relogio {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 10px;
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  font-size: 0.75rem;
}

.relogio-luz { width: 7px; height: 7px; border-radius: 50%; background: var(--cor-texto-fraco); opacity: 0.5; }
.relogio-nome { font-weight: 600; }
.relogio-estado { color: var(--cor-texto-fraco); font-family: var(--fonte-numero); font-size: 0.7rem; }
.relogio-aberto .relogio-luz { background: var(--cor-verde); opacity: 1; box-shadow: 0 0 10px var(--cor-verde); }
.relogio-aberto .relogio-estado { color: var(--cor-verde); }

.indicadores { display: flex; gap: 6px; flex-wrap: wrap; }

/* Mesmo desenho dos relógios de mercado ao lado: caixa, luz e texto em
   fonte de terminal. A luz diz o estado antes de se ler a palavra. */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 10px;
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  font-family: var(--fonte-numero);
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--cor-texto-fraco);
}

.pill::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.5;
}

.pill-ok { color: var(--cor-verde); }
.pill-ok::before { opacity: 1; box-shadow: 0 0 10px var(--cor-verde); }
.pill-ruim { color: var(--cor-vermelho); border-color: var(--cor-vermelho); background: rgba(255, 92, 108, 0.10); }
.pill-ruim::before { opacity: 1; }
.pill-desconhecido { color: var(--cor-texto-fraco); }

.botao-sair {
  padding: 6px 12px;
  border-radius: 10px;
  background: none;
  border: 1px solid var(--cor-borda);
  color: var(--cor-texto-fraco);
  font-size: 0.75rem;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.botao-sair:hover { color: var(--cor-texto); border-color: var(--cor-texto-fraco); }

.botao-link {
  background: none;
  border: none;
  color: var(--cor-texto-fraco);
  text-decoration: underline;
  font-size: 0.85rem;
  padding: 4px;
}

/* Um botão desativado precisa PARECER desativado antes do clique — sem
   sublinhado (que convida ao clique), apagado e com cursor de recusa. O
   texto que explica o porquê fica ao lado, em `.nota-indisponivel`, nunca
   escondido atrás de um `title` que só aparece no hover. */
.botao-link:disabled {
  color: var(--cor-texto-fraco);
  opacity: 0.45;
  text-decoration: none;
  cursor: not-allowed;
}

.nota-indisponivel { color: var(--cor-texto-fraco); font-size: 0.75rem; font-style: italic; }

/* --------------------------------------------------------- banner de alerta */

.banner-alerta {
  background: rgba(242, 193, 78, 0.10);
  border: 1px solid rgba(242, 193, 78, 0.55);
  color: var(--cor-amarelo);
  padding: 10px 14px;
  font-size: 0.88rem;
  margin: 8px 16px;
  border-radius: 10px;
}

main .banner-alerta { margin: 0; }

main { padding: 16px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.aba-conteudo { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* ---------------------------------------------------------------- painéis */

.resumo, .posicoes, .historico-hoje, .campo-painel, .performance, .curva-capital,
.cartao-config, .filtros-historico, .lista-historico-completo, .mercado-topo, .fantasma {
  background: linear-gradient(180deg, var(--cor-superficie-alta), var(--cor-superficie) 140px);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra-painel);
  padding: 18px;
  min-width: 0;
}

.mesa, .mesa-dupla { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.mesa-lado { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* ------------------------------------------------------------------ campo */

.campo-painel { display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
.campo-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.campo-topo h2 { margin: 0; color: var(--cor-plasma); }

.campo-topo h2 { margin-right: auto; }

.seletor-moeda { display: flex; padding: 2px; border-radius: 10px; background: var(--cor-fundo); border: 1px solid var(--cor-borda); }
.seletor-moeda button {
  min-width: 42px;
  padding: 5px 10px;
  border: none;
  border-radius: 8px;
  background: none;
  color: var(--cor-texto-fraco);
  font-family: var(--fonte-numero);
  font-size: 0.75rem;
  font-weight: 600;
}
.seletor-moeda button:hover { color: var(--cor-texto); }
.seletor-moeda button[aria-pressed="true"] { background: var(--cor-superficie-alta); color: var(--cor-plasma); box-shadow: 0 0 0 1px var(--cor-borda); }

.campo-variacao {
  font-family: var(--fonte-numero);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--cor-texto-fraco);
  margin: 2px 0 4px;
}
.campo-variacao.positivo, .parede-var.positivo { color: var(--cor-verde); }
.campo-variacao.negativo, .parede-var.negativo { color: var(--cor-vermelho); }

/* ---- ecrã de parede: o Campo sozinho, em tela cheia ---- */

.so-parede { display: none; }

.campo-painel:fullscreen {
  padding: 3vh 3vw;
  border: none;
  border-radius: 0;
  background:
    radial-gradient(1200px 700px at 50% 45%, rgba(125, 227, 255, 0.08), transparent 65%),
    var(--cor-fundo);
}
.campo-painel:fullscreen .so-parede { display: flex; }
.campo-painel:fullscreen .campo-total { font-size: clamp(3rem, 6vw, 7.5rem); max-width: none; line-height: 1.05; }
.campo-painel:fullscreen .campo-variacao { font-size: clamp(1.1rem, 2vw, 2.2rem); margin: 0.6vh 0 1vh; }
.campo-painel:fullscreen .campo-nucleo .resumo-rotulo { font-size: clamp(0.75rem, 1vw, 1.1rem); }
.campo-painel:fullscreen .campo-nucleo .nota { font-size: clamp(0.8rem, 1vw, 1.1rem); }
.campo-painel:fullscreen .campo-hoje-detalhe { font-family: var(--fonte-numero); font-size: 0.68rem; }
.campo-cambio { font-size: clamp(0.7rem, 0.85vw, 1rem); }
.campo-painel:fullscreen .campo-legenda { font-size: 0.8rem; justify-content: center; border-top: none; }
.campo-painel:fullscreen #campo-tela-cheia { opacity: 0.35; }
.campo-painel:fullscreen #campo-tela-cheia:hover { opacity: 1; }

.parede-relogio { position: absolute; top: 0; left: 0; flex-direction: column; gap: 2px; pointer-events: none; }
.parede-hora { font-family: var(--fonte-numero); font-size: clamp(1.6rem, 3vw, 3.4rem); font-weight: 700; letter-spacing: -0.03em; }
.parede-relogio .nota { font-size: clamp(0.8rem, 1vw, 1.1rem); text-transform: capitalize; }

.parede-cartoes { position: absolute; left: 0; right: 0; bottom: 0; justify-content: space-between; gap: 16px; pointer-events: none; }
.parede-cartao { display: flex; flex-direction: column; gap: 4px; padding: 14px 18px; border-radius: 14px; background: rgba(14, 16, 24, 0.75); border: 1px solid var(--cor-borda); }
.parede-cartao:last-child { text-align: right; }
.parede-valor { font-family: var(--fonte-numero); font-size: clamp(1.4rem, 2.4vw, 2.8rem); font-weight: 700; letter-spacing: -0.03em; }
.parede-var { font-family: var(--fonte-numero); font-size: clamp(0.8rem, 1vw, 1.15rem); color: var(--cor-texto-fraco); }

.campo-cambio { font-family: var(--fonte-numero); font-size: 0.66rem; opacity: 0.75; }

.campo-palco { position: relative; flex: 1 1 auto; min-height: 340px; }

#campo-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* Modo 3D: a tela WebGL ocupa o lugar da 2D. A 2D fica `hidden` por
   visibilidade (não por `display`) porque a dica mede-se pela largura dela. */
#campo-canvas-3d { position: absolute; inset: 0; width: 100%; height: 100%; display: none; cursor: grab; }
#campo-canvas-3d:active { cursor: grabbing; }
.campo-em-3d #campo-canvas-3d { display: block; }
.campo-em-3d #campo-canvas { visibility: hidden; }
/* Em 3D os planetas passam por trás do centro: fica só o total e a valorização. */
.campo-em-3d .campo-nucleo .nota { display: none; }
#campo-3d[aria-pressed="true"] { color: var(--cor-plasma); border-color: var(--cor-plasma); background: rgba(125, 227, 255, 0.10); }

.campo-nucleo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
  pointer-events: none;
  text-shadow: 0 0 18px var(--cor-fundo), 0 0 6px var(--cor-fundo);
}

.campo-total {
  font-family: var(--fonte-numero);
  font-size: clamp(1.2rem, 2.2vw, 1.9rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  max-width: 260px;
}

.campo-dica {
  position: absolute;
  z-index: 2;
  width: 180px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(7, 8, 13, 0.92);
  border: 1px solid var(--cor-plasma);
  font-size: 0.75rem;
  color: var(--cor-texto-fraco);
  pointer-events: none;
}

.campo-dica strong { color: var(--cor-texto); font-size: 0.85rem; }

.campo-mensagem {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4px;
  margin: 0;
  text-align: center;
  font-size: 0.8rem;
  color: var(--cor-texto-fraco);
}

.campo-mensagem-alerta { color: var(--cor-amarelo); }

.campo-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 0;
  padding: 10px 0 0;
  list-style: none;
  border-top: 1px solid var(--cor-borda);
  font-size: 0.72rem;
  color: var(--cor-texto-fraco);
}

.campo-legenda li { display: flex; align-items: center; gap: 6px; }
.legenda-bola { width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--cor-texto-fraco); }
.legenda-cheia { background: none; }
.legenda-oca { border-style: dashed; }
.legenda-ganho { background: var(--cor-verde); border-color: var(--cor-verde); }
.legenda-perda { background: var(--cor-vermelho); border-color: var(--cor-vermelho); }

/* ------------------------------------------------------------------ resumo */

.resumo { display: grid; grid-template-columns: 1fr; gap: 16px; }

.resumo-item { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

.resumo-rotulo {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--cor-texto-fraco);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

/* `overflow-wrap: anywhere` — não só `word-break: break-all` — porque
   alguns valores aqui são strings decimais bem longas vindas direto do
   servidor sem arredondamento nenhum (ex.: `profit_factor` de
   `/api/performance`, uma fração exata que pode ter dezenas de casas).
   Sem isto, um valor assim empurra a página inteira para rolagem
   horizontal — a mesma classe é usada tanto pelo resumo da Mesa quanto
   pelas métricas de Histórico. */
.resumo-valor {
  font-family: var(--fonte-numero);
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.resumo-valor.positivo { color: var(--cor-verde); }
.resumo-valor.negativo { color: var(--cor-vermelho); }

.nota { font-size: 0.78rem; color: var(--cor-texto-fraco); }
p.nota { margin: 0 0 10px; max-width: 110ch; }

.barra-progresso {
  width: 100%;
  height: 6px;
  background: var(--cor-fundo);
  border-radius: 999px;
  overflow: hidden;
}

.barra-progresso-preenchimento {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--cor-azul), var(--cor-verde));
  border-radius: 999px;
  transition: width 0.3s ease;
}

.barra-progresso-preenchimento.negativo { background: var(--cor-vermelho); }

/* ------------------------------------------------------------ controle motor */

.controle-motor {
  background: linear-gradient(180deg, rgba(255, 92, 108, 0.10), var(--cor-superficie) 120px);
  border: 1px solid rgba(255, 92, 108, 0.6);
  border-radius: var(--raio);
  box-shadow: var(--sombra-painel);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* Sempre visível sem rolar é responsabilidade de posição no DOM (na
     coluna ao lado do Campo, acima de qualquer lista longa) — não faz
     sentido `position: sticky` aqui; o que a spec pede é proeminência, não
     flutuação por cima de tudo. */
}

.botao-parar {
  width: 100%;
  padding: 18px;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: white;
  background: var(--cor-vermelho);
  border: none;
  border-radius: 10px;
  box-shadow: 0 8px 28px -8px rgba(255, 92, 108, 0.7);
  transition: transform 0.1s ease, filter 0.15s ease;
}

.botao-parar:hover { filter: brightness(1.08); }
.botao-parar:active { transform: scale(0.985); filter: brightness(0.9); }

.aviso-parar { margin: 0; font-size: 0.8rem; color: var(--cor-texto-fraco); }

.botao-iniciar {
  align-self: flex-start;
  padding: 8px 14px;
  font-size: 0.85rem;
  color: var(--cor-texto);
  background: var(--cor-superficie-alta);
  border: 1px solid var(--cor-borda);
  border-radius: 8px;
}

.mensagem-ok { color: var(--cor-verde); }

.mensagem-comando {
  margin: 0;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--cor-superficie-alta);
  font-size: 0.85rem;
}

/* --------------------------------------------------------------- posições */

.lista-posicoes, .lista-historico { display: flex; flex-direction: column; gap: 8px; }

.cartao-posicao, .cartao-trade {
  background: var(--cor-fundo);
  border: 1px solid var(--cor-borda);
  border-radius: 10px;
  padding: 12px 14px;
}

.cartao-posicao-topo, .cartao-trade-topo {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  font-weight: 700;
  font-family: var(--fonte-numero);
}

.lado-long, .positivo { color: var(--cor-verde); }
.lado-short, .negativo { color: var(--cor-vermelho); }

.cartao-posicao-detalhe, .cartao-trade-detalhe {
  margin-top: 6px;
  font-size: 0.8rem;
  color: var(--cor-texto-fraco);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
}

#mom-posicoes p {
  margin: 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--cor-fundo);
  border: 1px solid var(--cor-borda);
  font-family: var(--fonte-numero);
  font-size: 0.82rem;
}

.mensagem-vazia { color: var(--cor-texto-fraco); font-size: 0.88rem; margin: 0; }

.pnl-desconhecido { font-style: italic; color: var(--cor-texto-fraco); }

/* --------------------------------------------------------- configurações */

.cartao-config { display: flex; flex-direction: column; gap: 12px; }

.cartao-config p.resumo-valor { margin: 0; }

.teto-rigido { border-color: rgba(242, 193, 78, 0.6); }

.campo-config { display: flex; flex-direction: column; gap: 4px; }

.campo-config label { font-size: 0.8rem; color: var(--cor-texto-fraco); }

.campo-config input {
  padding: 10px;
  border-radius: 8px;
  border: 1px solid var(--cor-borda);
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: var(--fonte-numero);
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  width: 100%;
}

#form-config button[type="submit"],
#form-senha button[type="submit"] {
  padding: 12px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--cor-azul), var(--cor-plasma));
  color: #05060a;
  font-weight: 700;
  font-size: 1rem;
}

/* ------------------------------------------------------------- histórico */

.filtros-historico { display: flex; flex-direction: column; gap: 10px; }

.campo-filtro { display: flex; flex-direction: column; gap: 4px; }

.campo-filtro label { font-size: 0.75rem; color: var(--cor-texto-fraco); }

.campo-filtro input,
.filtros-historico button {
  padding: 10px;
  border-radius: 8px;
  border: 1px solid var(--cor-borda);
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-size: 0.9rem;
  color-scheme: dark;
}

.filtros-historico button { background: var(--cor-superficie-alta); font-weight: 600; }

.grade-metricas { display: grid; grid-template-columns: 1fr; gap: 16px; }

.metrica { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

/* A métrica que a spec do brief pede destacada: taxas e funding pagos —
   nunca no mesmo peso visual das demais, para não desaparecer na grade
   quando o valor é bom ou quando é `null` com um motivo ao lado. */
.metrica-destaque {
  grid-column: 1 / -1;
  border: 1px solid rgba(242, 193, 78, 0.6);
  border-radius: 10px;
  padding: 12px;
  background: rgba(242, 193, 78, 0.07);
}

/* Qualquer valor que a API devolveu `null` com motivo — nunca um `0`
   disfarçado. Itálico + cor fraca, mesmo tratamento de `.pnl-desconhecido`
   já usado na Mesa, para o operador reconhecer o padrão. */
.valor-desconhecido {
  font-family: inherit;
  font-style: italic;
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--cor-texto-fraco);
}

.svg-curva {
  width: 100%;
  height: 200px;
  display: block;
  background:
    linear-gradient(var(--cor-borda) 1px, transparent 1px) 0 0 / 100% 25%,
    var(--cor-fundo);
  border-radius: 10px;
}

.linha-curva {
  fill: none;
  stroke: var(--cor-verde);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 6px rgba(61, 220, 151, 0.6));
}

.linha-curva-negativa { stroke: var(--cor-vermelho); filter: drop-shadow(0 0 6px rgba(255, 92, 108, 0.6)); }

/* ------------------------------------------------------- sinais de futuros */

.tabela-rolavel { overflow-x: auto; }
.tabela-sinais { width: 100%; border-collapse: collapse; font-family: var(--fonte-numero); font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.tabela-sinais th, .tabela-sinais td { padding: 10px; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--cor-borda); }
.tabela-sinais th {
  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", sans-serif;
  font-size: 0.66rem;
  font-weight: 600;
  color: var(--cor-texto-fraco);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.tabela-sinais tbody tr:hover { background: rgba(125, 227, 255, 0.04); }
.tabela-sinais th:first-child, .tabela-sinais td:first-child,
.tabela-sinais th:nth-child(2), .tabela-sinais td:nth-child(2) { text-align: left; }
.tabela-sinais td:first-child { font-weight: 700; }
.sinal-comprado { color: var(--cor-verde); font-weight: 700; }
.sinal-vendido { color: var(--cor-vermelho); font-weight: 700; }
.sinal-perto { background: rgba(242, 193, 78, 0.12); box-shadow: inset 3px 0 0 var(--cor-amarelo); }

/* ------------------------------------------------------- cone e regime */

.selo-cone { padding: 5px 12px; border-radius: 999px; border: 1px solid var(--cor-borda); font-family: var(--fonte-numero); font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--cor-texto-fraco); }
.selo-bom { color: var(--cor-verde); border-color: rgba(61, 220, 151, 0.5); }
.selo-neutro { color: var(--cor-amarelo); border-color: rgba(242, 193, 78, 0.5); }
.selo-mau { color: var(--cor-vermelho); border-color: var(--cor-vermelho); background: rgba(255, 92, 108, 0.10); }

.cone-fora { fill: rgba(125, 227, 255, 0.10); }
.cone-dentro { fill: rgba(125, 227, 255, 0.20); }
.cone-mediana { fill: none; stroke: var(--cor-texto-fraco); stroke-width: 1.5; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.cone-real { fill: none; stroke: var(--cor-texto); stroke-width: 2.5; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 5px rgba(236, 238, 246, 0.7)); }
.cone-hoje { stroke: var(--cor-texto); stroke-width: 1; stroke-dasharray: 2 4; vector-effect: non-scaling-stroke; opacity: 0.5; }
.legenda-caixa { width: 14px; height: 10px; border-radius: 2px; }
.cone-cor-fora { background: rgba(125, 227, 255, 0.18); }
.cone-cor-dentro { background: rgba(125, 227, 255, 0.40); }
#cone-poder, #diag-aviso { margin: 12px 0 0; }

.regime-regua {
  position: relative;
  height: 10px;
  margin: 16px 0 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--cor-vermelho) 0 33.3%, var(--cor-amarelo) 33.3% 66.6%, var(--cor-verde) 66.6%);
  opacity: 0.85;
}
.regime-ponteiro { position: absolute; top: -5px; width: 4px; height: 20px; margin-left: -2px; border-radius: 2px; background: var(--cor-texto); box-shadow: 0 0 8px var(--cor-texto); transition: left 0.4s ease; }
.regime-faixa { display: flex; gap: 1px; height: 22px; margin-top: 6px; border-radius: 6px; overflow: hidden; }
.regime-faixa span { flex: 1 1 0; background: var(--cor-borda); }
.regime-faixa .regime-0 { background: var(--cor-vermelho); }
.regime-faixa .regime-1 { background: var(--cor-amarelo); }
.regime-faixa .regime-2 { background: var(--cor-verde); }
.regime-linha-atual th { color: var(--cor-plasma) !important; }

/* ---------------------------------------------------------- simulador */

.simulador-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; margin: 12px 0; }
.simulador-form label { display: flex; justify-content: space-between; font-size: 0.85rem; color: var(--cor-texto); }
.simulador-form output { font-family: var(--fonte-numero); color: var(--cor-plasma); }
.simulador-form input[type="range"] { padding: 0; border: none; background: none; accent-color: var(--cor-plasma); }
.simulador-form button {
  justify-self: start;
  padding: 12px 28px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--cor-azul), var(--cor-plasma));
  color: #05060a;
  font-weight: 700;
  font-size: 0.95rem;
}
.simulador-form button:disabled { opacity: 0.5; cursor: progress; }

#simulador-resultado { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
.tabela-simulador th:first-child { text-align: left; text-transform: none; letter-spacing: 0; font-size: 0.8rem; color: var(--cor-texto); }
.tabela-simulador td:nth-child(2) { text-align: right; }
.tabela-simulador td:nth-child(3) { color: var(--cor-plasma); font-weight: 700; }
.tabela-simulador td.sinal-comprado { color: var(--cor-verde); }
.tabela-simulador td.sinal-vendido { color: var(--cor-vermelho); }

.svg-curva-alta { height: 280px; }
.sim-linha { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; }
.sim-linha-atual { stroke: var(--cor-texto); }
.sim-linha-ese { stroke: var(--cor-plasma); filter: drop-shadow(0 0 6px rgba(125, 227, 255, 0.6)); }
.sim-linha-segurar { stroke: var(--cor-texto-fraco); stroke-dasharray: 4 4; stroke-width: 1.5; }
.sim-base { stroke: var(--cor-amarelo); stroke-width: 1; stroke-dasharray: 2 6; vector-effect: non-scaling-stroke; opacity: 0.6; }

.legenda-traco { width: 18px; height: 0; border-top: 2px solid; }
.sim-cor-atual { border-color: var(--cor-texto); }
.sim-cor-ese { border-color: var(--cor-plasma); }
.sim-cor-segurar { border-color: var(--cor-texto-fraco); border-top-style: dashed; }
.simulador-aviso { margin: 0 !important; }

/* ------------------------------------------------ evolução do património */

.patrimonio-eixo { display: flex; justify-content: space-between; margin-top: 6px; font-family: var(--fonte-numero); font-size: 0.68rem; color: var(--cor-texto-fraco); }
.patrimonio-linha { fill: none; stroke: var(--cor-plasma); stroke-width: 2; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 6px rgba(125, 227, 255, 0.55)); }
.patrimonio-area { fill: rgba(125, 227, 255, 0.08); }
.patrimonio-parcial { fill: var(--cor-amarelo); }

/* ---------------------------------------------------- calendário de risco */

.calendario-lista { list-style: none; margin: 0; padding: 0 0 6px; display: flex; gap: 10px; overflow-x: auto; }

.calendario-item {
  flex: 0 0 230px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  border-radius: 10px;
  background: var(--cor-fundo);
  border: 1px solid var(--cor-borda);
  border-top: 2px solid var(--cor-borda);
}

.calendario-alto { border-top-color: var(--cor-vermelho); }
.calendario-medio { border-top-color: var(--cor-amarelo); }
/* Hoje ou amanhã: é agora que importa. */
.calendario-iminente { background: rgba(255, 92, 108, 0.07); border-color: rgba(255, 92, 108, 0.6); }

.calendario-quando { display: flex; justify-content: space-between; gap: 8px; font-family: var(--fonte-numero); font-size: 0.7rem; color: var(--cor-texto-fraco); }
.calendario-quando strong { color: var(--cor-texto); font-size: 0.78rem; white-space: nowrap; }
.calendario-quando span { text-align: right; }
.calendario-titulo { font-size: 0.85rem; font-weight: 600; line-height: 1.3; }
.calendario-pe { margin-top: auto; display: flex; justify-content: space-between; align-items: center; font-size: 0.68rem; color: var(--cor-texto-fraco); text-transform: uppercase; letter-spacing: 0.08em; }
.calendario-pe a { color: var(--cor-plasma); text-transform: none; letter-spacing: 0; }
.calendario-rodape { margin: 10px 0 0 !important; }

/* ------------------------------------------------------ diário do motor */

.diario-filtro { display: flex; align-items: center; gap: 6px; font-size: 0.78rem; color: var(--cor-texto-fraco); cursor: pointer; }
.diario-filtro input { accent-color: var(--cor-plasma); }

.diario-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }

.diario-item {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 12px;
  padding: 10px 12px;
  border-left: 2px solid var(--cor-borda);
  border-bottom: 1px solid var(--cor-borda);
  font-size: 0.85rem;
}

.diario-item time { font-family: var(--fonte-numero); font-size: 0.72rem; color: var(--cor-texto-fraco); padding-top: 2px; }
.diario-item div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.diario-item strong { font-weight: 600; white-space: pre-wrap; }
.diario-item span { font-family: var(--fonte-numero); font-size: 0.75rem; color: var(--cor-texto-fraco); overflow-wrap: anywhere; }

.diario-aviso { border-left-color: var(--cor-amarelo); }
.diario-aviso strong { color: var(--cor-amarelo); }
.diario-erro, .diario-critico { border-left-color: var(--cor-vermelho); background: rgba(255, 92, 108, 0.05); }
.diario-erro strong, .diario-critico strong { color: var(--cor-vermelho); }

/* ------------------------------------------------ ações lançadas à mão */

.acoes-totais { display: flex; flex-wrap: wrap; gap: 10px; }
.acoes-total { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: 10px; background: var(--cor-fundo); border: 1px solid var(--cor-borda); text-align: right; }
.acoes-total strong { font-family: var(--fonte-numero); font-size: 1.15rem; letter-spacing: -0.02em; }
.acoes-total span { font-family: var(--fonte-numero); font-size: 0.75rem; color: var(--cor-texto-fraco); }
.acoes-total .positivo, .tabela-acoes .positivo { color: var(--cor-verde); }
.acoes-total .negativo, .tabela-acoes .negativo { color: var(--cor-vermelho); }

.acoes-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: end; margin-top: 8px; }
.acoes-form button {
  padding: 11px 22px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--cor-azul), var(--cor-plasma));
  color: #05060a;
  font-weight: 700;
  font-size: 0.95rem;
}
.acoes-form button:disabled { opacity: 0.5; cursor: not-allowed; }

.acoes-editor-form { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; padding: 6px 0; }
.acoes-editor-form strong { align-self: center; font-family: var(--fonte-numero); min-width: 90px; }
.acoes-editor-form label { display: flex; flex-direction: column; gap: 4px; font-family: -apple-system, BlinkMacSystemFont, "Inter", sans-serif; font-size: 0.72rem; color: var(--cor-texto-fraco); }
.acoes-editor-form input { padding: 8px 10px; border-radius: 8px; border: 1px solid var(--cor-borda); background: var(--cor-fundo); color: var(--cor-texto); font-family: var(--fonte-numero); font-size: 0.9rem; color-scheme: dark; width: 150px; }
.acoes-editor-form button[type="submit"] { padding: 9px 16px; border: none; border-radius: 8px; background: var(--cor-plasma); color: #05060a; font-weight: 700; }
.acao-editor td { background: rgba(125, 227, 255, 0.05); }
.acoes-form input[type="date"] { color-scheme: dark; }
.reais-totais { margin: 8px 0 12px; justify-content: flex-start; }
.reais-totais .acoes-total { text-align: left; }

.acoes-busca { position: relative; }
.acoes-resultados {
  position: absolute;
  z-index: 4;
  top: 100%;
  left: 0;
  right: 0;
  margin: 4px 0 0;
  padding: 4px;
  list-style: none;
  max-height: 300px;
  overflow-y: auto;
  border-radius: 10px;
  background: var(--cor-superficie-alta);
  border: 1px solid var(--cor-plasma);
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.9);
}
.acoes-resultados button {
  width: 100%;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: baseline;
  padding: 9px 10px;
  border: none;
  border-radius: 8px;
  background: none;
  color: var(--cor-texto);
  font-size: 0.85rem;
  font-weight: 400;
  text-align: left;
}
.acoes-resultados button:hover, .acoes-resultados button:focus-visible { background: rgba(125, 227, 255, 0.10); }
.acoes-resultados code { font-family: var(--fonte-numero); font-weight: 700; color: var(--cor-plasma); }
.acoes-resultados small { color: var(--cor-texto-fraco); white-space: nowrap; }
.acoes-resultados span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.tabela-acoes td:first-child { white-space: normal; min-width: 170px; }
.acao-nome { display: flex; align-items: center; gap: 10px; }
.acao-logo { width: 28px; height: 28px; flex: 0 0 auto; border-radius: 7px; }
.tabela-acoes td:first-child small { display: block; font-family: -apple-system, BlinkMacSystemFont, "Inter", sans-serif; font-weight: 400; font-size: 0.72rem; color: var(--cor-texto-fraco); }
.tabela-acoes .acao-antiga { color: var(--cor-amarelo); }
.acoes-rodape { margin: 12px 0 0 !important; }

/* ------------------------------------------------------------ analista IA */

.veredito { display: inline-block; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--cor-borda); font-family: var(--fonte-numero); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; }
.veredito-comprar_mais { color: var(--cor-verde); border-color: rgba(61, 220, 151, 0.55); background: rgba(61, 220, 151, 0.08); }
.veredito-manter { color: var(--cor-plasma); border-color: rgba(125, 227, 255, 0.45); }
.veredito-reduzir { color: var(--cor-amarelo); border-color: rgba(242, 193, 78, 0.6); background: rgba(242, 193, 78, 0.08); }
.veredito-vender { color: var(--cor-vermelho); border-color: var(--cor-vermelho); background: rgba(255, 92, 108, 0.10); }
.veredito-sem_base { color: var(--cor-texto-fraco); border-style: dashed; }

.analista-placar-titulo { font-size: 1.1rem; margin: 0 0 10px; }
.tabela-parcial { margin-top: 6px; }
.tabela-parcial th { text-align: left; padding-left: 0; }
.tabela-parcial td:last-child { font-family: -apple-system, BlinkMacSystemFont, "Inter", sans-serif; color: var(--cor-texto-fraco); }
#analista-placar-nota { margin: 10px 0 0; }
#analista-parcial-nota { margin: 8px 0 0; }

.descobrir-perfis { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 8px; }
.descobrir-perfil { display: flex; flex-direction: column; gap: 6px; padding: 14px; border-radius: 12px; border: 1px solid var(--cor-borda); background: var(--cor-fundo); color: var(--cor-texto); text-align: left; }
.descobrir-perfil strong { font-size: 0.95rem; }
.descobrir-perfil span { font-size: 0.78rem; color: var(--cor-texto-fraco); }
.descobrir-perfil[aria-pressed="true"] { border-color: var(--cor-plasma); background: rgba(125, 227, 255, 0.08); box-shadow: inset 0 0 0 1px var(--cor-plasma); }
.descobrir-acao { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 14px; }
.descobrir-botao { padding: 12px 26px; border: none; border-radius: 10px; background: linear-gradient(135deg, var(--cor-azul), var(--cor-plasma)); color: #05060a; font-weight: 700; font-size: 0.95rem; }
.descobrir-botao:disabled { opacity: 0.5; cursor: progress; }
.descobrir-selos { display: flex; flex-wrap: wrap; gap: 6px; }
.descobrir-selos span { padding: 4px 9px; border-radius: 8px; background: var(--cor-superficie-alta); font-family: var(--fonte-numero); font-size: 0.7rem; color: var(--cor-texto-fraco); white-space: nowrap; }
.descobrir-selos b { color: var(--cor-texto); font-weight: 600; }
.descobrir-encaixe { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 0.85rem; }
.descobrir-encaixe li::before { content: "●"; margin-right: 8px; font-size: 0.6rem; vertical-align: middle; color: var(--cor-texto-fraco); }
.descobrir-encaixe .encaixe-bom::before { color: var(--cor-verde); }
.descobrir-encaixe .encaixe-mau::before { color: var(--cor-vermelho); }
.descobrir-dividendos { display: flex; align-items: flex-end; gap: 4px; height: 56px; margin-top: 6px; }
.descobrir-dividendos i { flex: 1 1 0; min-width: 8px; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, var(--cor-plasma), var(--cor-azul)); position: relative; }
.descobrir-dividendos-anos { display: flex; gap: 4px; font-family: var(--fonte-numero); font-size: 0.6rem; color: var(--cor-texto-fraco); }
.descobrir-dividendos-anos span { flex: 1 1 0; min-width: 8px; text-align: center; }
.descobrir-reprovadas { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; }
.descobrir-reprovadas li { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--cor-borda); font-size: 0.83rem; }
.descobrir-reprovadas strong { font-family: var(--fonte-numero); }
.descobrir-reprovadas small { display: block; color: var(--cor-texto-fraco); }
.descobrir-reprovadas span { color: var(--cor-amarelo); }

.perguntar-form { display: flex; gap: 10px; margin-top: 4px; }
.perguntar-form input { flex: 1 1 auto; min-width: 0; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--cor-borda); background: var(--cor-fundo); color: var(--cor-texto); font-size: 0.95rem; }
.perguntar-form input:focus { border-color: var(--cor-plasma); outline: none; }
.perguntar-form button { padding: 0 22px; border: none; border-radius: 10px; background: linear-gradient(135deg, var(--cor-azul), var(--cor-plasma)); color: #05060a; font-weight: 700; }
.perguntar-form button:disabled { opacity: 0.5; cursor: progress; }
.perguntar-sugestoes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.perguntar-sugestoes button { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--cor-borda); background: none; color: var(--cor-texto-fraco); font-size: 0.78rem; }
.perguntar-sugestoes button:hover { color: var(--cor-plasma); border-color: var(--cor-plasma); }
.perguntar-conversa { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.perguntar-conversa:empty { margin: 0; }
.perguntar-eu, .perguntar-ia { max-width: 86%; padding: 10px 14px; border-radius: 14px; font-size: 0.9rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.perguntar-eu { align-self: flex-end; background: rgba(125, 227, 255, 0.12); border: 1px solid rgba(125, 227, 255, 0.35); }
.perguntar-ia { align-self: flex-start; background: var(--cor-fundo); border: 1px solid var(--cor-borda); }
.perguntar-erro { color: var(--cor-amarelo); }
.perguntar-nota { margin: 12px 0 0 !important; }

.radar-lista { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; }
.radar-item { display: grid; grid-template-columns: 54px 74px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 4px; border-bottom: 1px solid var(--cor-borda); font-size: 0.85rem; }
.radar-prob { font-family: var(--fonte-numero); font-weight: 700; text-align: right; }
.radar-item code { font-family: var(--fonte-numero); font-weight: 700; color: var(--cor-plasma); }
.radar-item a { color: var(--cor-texto); text-decoration: none; }
.radar-item a:hover { text-decoration: underline; }
.radar-item small { display: block; font-size: 0.72rem; color: var(--cor-texto-fraco); }
.radar-positivo .radar-prob { color: var(--cor-verde); }
.radar-negativo .radar-prob { color: var(--cor-vermelho); }
.radar-descartada { opacity: 0.45; }

.mudou-lista { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.mudou-item { display: grid; grid-template-columns: 110px auto minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px; border-radius: 10px; background: var(--cor-fundo); border: 1px solid var(--cor-borda); border-left-width: 3px; font-size: 0.85rem; }
.mudou-piorou { border-left-color: var(--cor-vermelho); }
.mudou-melhorou { border-left-color: var(--cor-verde); }
.mudou-item strong { font-family: var(--fonte-numero); }
.mudou-item small { display: block; font-size: 0.72rem; color: var(--cor-texto-fraco); }
.mudou-seta { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.mudou-porque { color: var(--cor-texto); }
.mudou-porque em { display: block; margin-top: 4px; font-style: normal; font-size: 0.78rem; color: var(--cor-texto-fraco); }
.analista-tempo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-family: var(--fonte-numero); font-size: 0.72rem; color: var(--cor-texto-fraco); }

.analista-lista { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.analista-acao { border: 1px solid var(--cor-borda); border-radius: 12px; background: var(--cor-fundo); }
.analista-acao[open] { border-color: rgba(125, 227, 255, 0.35); }
.analista-acao summary {
  display: grid;
  grid-template-columns: 28px minmax(120px, 1.1fr) auto minmax(0, 3fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
}
.analista-acao summary::-webkit-details-marker { display: none; }
.analista-acao summary strong { font-family: var(--fonte-numero); }
.analista-acao summary small { display: block; font-size: 0.72rem; color: var(--cor-texto-fraco); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.analista-resumo { font-size: 0.82rem; color: var(--cor-texto-fraco); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.analista-peso { font-family: var(--fonte-numero); font-size: 0.72rem; color: var(--cor-texto-fraco); text-align: right; white-space: nowrap; }
.analista-peso .positivo { color: var(--cor-verde); }
.analista-peso .negativo { color: var(--cor-vermelho); }

.analista-corpo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 4px 14px 16px; border-top: 1px solid var(--cor-borda); }
.analista-corpo h3 { margin: 12px 0 6px; font-size: 0.68rem; font-weight: 600; color: var(--cor-texto-fraco); text-transform: uppercase; letter-spacing: 0.12em; }
.analista-corpo ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 0.85rem; }
.analista-corpo p { margin: 0; font-size: 0.85rem; }
.analista-corpo a { color: var(--cor-plasma); font-size: 0.75rem; white-space: nowrap; }
.analista-riscos li::marker { color: var(--cor-vermelho); }
.analista-tese li::marker { color: var(--cor-verde); }
.analista-metricas { display: flex; flex-wrap: wrap; gap: 8px; }
.analista-metricas span { padding: 6px 10px; border-radius: 8px; background: var(--cor-superficie-alta); font-family: var(--fonte-numero); font-size: 0.72rem; color: var(--cor-texto-fraco); }
.analista-metricas b { color: var(--cor-texto); font-weight: 600; }

.analista-barras { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.analista-barra { display: grid; grid-template-columns: 150px minmax(0, 1fr) 48px; gap: 10px; align-items: center; font-size: 0.8rem; }
.analista-barra div { height: 8px; border-radius: 999px; background: var(--cor-fundo); overflow: hidden; }
.analista-barra i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--cor-azul), var(--cor-plasma)); }
.analista-barra.pesada i { background: var(--cor-amarelo); }
.analista-barra span:last-child { font-family: var(--fonte-numero); text-align: right; color: var(--cor-texto-fraco); }

/* ---------------------------------------------- mercados ainda por ligar */

.mercado-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.mercado-titulo { margin: 0; font-size: 1.5rem; letter-spacing: -0.02em; }
.mercado-estado { margin: 4px 0 0; font-family: var(--fonte-numero); font-size: 0.8rem; color: var(--cor-texto-fraco); }

.selo-em-breve {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px dashed var(--cor-plasma);
  color: var(--cor-plasma);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.grade-fantasma { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }

/* Tracejado = ainda não existe. Nenhum número dentro, de propósito. */
.fantasma { border-style: dashed; box-shadow: none; background: none; }
.fantasma .nota { margin: 4px 0 12px; }
.fantasma-corpo {
  height: 150px;
  border-radius: 10px;
  opacity: 0.5;
  background: repeating-linear-gradient(180deg, var(--cor-superficie-alta) 0 14px, transparent 14px 30px);
}
.fantasma-grafico {
  height: 240px;
  background: repeating-linear-gradient(90deg, var(--cor-superficie-alta) 0 6px, transparent 6px 18px);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 40%, #000 70%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 40%, #000 70%, transparent);
}
.fantasma-boleta {
  background: linear-gradient(90deg, rgba(61, 220, 151, 0.25) 0 49%, transparent 49% 51%, rgba(255, 92, 108, 0.25) 51%) bottom / 100% 44px no-repeat,
    repeating-linear-gradient(180deg, var(--cor-superficie-alta) 0 14px, transparent 14px 30px) top / 100% 90px no-repeat;
}

/* ------------------------------------------------------------- responsivo */

/* Celular e tablet: uma coluna, menu no topo a acompanhar a rolagem, e o que
   importa numa emergência (saldo + botão de parar) ANTES do Campo. */
@media (max-width: 1099px) {
  body { padding-bottom: env(safe-area-inset-bottom); }

  /* Página mais curta do que o ecrã: sem isto a grelha repartia a altura que
     sobra também pela linha do menu, abrindo um buraco vazio debaixo dele. */
  .casca { grid-template-rows: auto minmax(0, 1fr); }

  .lateral {
    position: sticky;
    top: 0;
    z-index: 6;
    padding-top: calc(10px + env(safe-area-inset-top));
    background: rgba(7, 8, 13, 0.92);
    backdrop-filter: blur(14px);
  }

  .abas { scrollbar-width: none; scroll-snap-type: x proximity; margin: 0 -16px; padding: 0 16px; }
  .abas::-webkit-scrollbar { display: none; }
  .aba-botao { scroll-snap-align: start; padding: 12px; }

  /* Relógios numa fila só, a deslizar com o dedo — não em três linhas. */
  .relogios { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; flex: 1 1 100%; margin: 0 -16px; padding: 0 16px; }
  .relogios::-webkit-scrollbar { display: none; }
  .relogio { flex: 0 0 auto; }
  .indicadores { flex: 1 1 auto; }

  .mesa-lado { order: -1; }

  .campo-topo { flex-wrap: wrap; row-gap: 8px; }
  .campo-palco { min-height: 400px; }
  .campo-legenda { gap: 6px 12px; }

  /* Abaixo de 16px o iPhone amplia a página ao tocar num campo. */
  input, select, textarea { font-size: 16px !important; }

  /* Tabelas largas deslizam, mas o nome do par fica sempre à vista. */
  .tabela-sinais th:first-child, .tabela-sinais td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--cor-superficie);
    box-shadow: 1px 0 0 var(--cor-borda);
  }

  .diario-item { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .svg-curva-alta { height: 220px; }
  .parede-cartoes { flex-direction: column; }
}

@media (max-width: 719px) {
  main { padding: 12px; gap: 12px; }
  .aba-conteudo, .mesa, .mesa-dupla, .mesa-lado { gap: 12px; }
  .resumo, .posicoes, .historico-hoje, .campo-painel, .performance, .curva-capital,
  .cartao-config, .filtros-historico, .lista-historico-completo, .mercado-topo, .fantasma { padding: 14px; }
  .campo-topo .nota { display: none; }
  .campo-total { font-size: 1.35rem; }
  .campo-cambio, .campo-nucleo .nota, .campo-nucleo .resumo-rotulo { display: none; }
  .campo-variacao { font-size: 0.72rem; white-space: nowrap; }
  .cabecalho { padding: 8px 12px; gap: 8px; }
  /* Base de 200px: obriga as etiquetas a descer para a linha de baixo, ao lado
     do "sair", em vez de se espremerem no fim da fila dos relógios. */
  .indicadores { flex: 1 1 200px; min-width: 0; flex-wrap: nowrap; }
  .pill { min-width: 0; font-size: 0.64rem; padding: 5px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .botao-sair { flex: 0 0 auto; }
  .resumo-valor { font-size: 1.35rem; }
  .botao-parar { padding: 16px; font-size: 0.95rem; }
  .calendario-item { flex-basis: 78%; }
  .mudou-item { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .descobrir-reprovadas li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .radar-item { grid-template-columns: 44px minmax(0, 1fr); }
  .radar-item code, .radar-item .veredito { grid-column: 2; justify-self: start; }
  .analista-acao summary { grid-template-columns: 28px minmax(0, 1fr) auto; }
  .analista-acao summary .analista-resumo, .analista-acao summary .analista-peso { grid-column: 1 / -1; text-align: left; }
  .analista-barra { grid-template-columns: 110px minmax(0, 1fr) 44px; }
  .mercado-titulo { font-size: 1.2rem; }
}


@media (min-width: 720px) {
  .resumo { grid-template-columns: repeat(3, 1fr); }
  .grade-metricas { grid-template-columns: repeat(3, 1fr); }
  .filtros-historico { flex-direction: row; align-items: flex-end; flex-wrap: wrap; }
  .campo-filtro { flex: 1 1 160px; }
  .grade-fantasma { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Ecrã grande: a mesa de operações de verdade. */
@media (min-width: 1100px) {
  .casca { grid-template-columns: 232px minmax(0, 1fr); }

  .lateral {
    position: sticky;
    top: 0;
    height: 100vh;
    padding: 20px 12px;
    gap: 24px;
    border-bottom: none;
    border-right: 1px solid var(--cor-borda);
    background: rgba(14, 16, 24, 0.6);
  }

  .marca { padding: 0 10px; }

  .abas { flex-direction: column; gap: 2px; overflow: visible; }

  .abas-grupo {
    display: block;
    padding: 16px 12px 6px;
    font-size: 0.62rem;
    font-weight: 600;
    color: var(--cor-texto-fraco);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    opacity: 0.7;
  }
  .abas-grupo:first-child { padding-top: 0; }

  .aba-botao { border-bottom: none; border-radius: 10px; padding: 10px 12px; }
  .aba-botao:hover { background: var(--cor-superficie-alta); }
  .aba-ativa {
    background: linear-gradient(90deg, rgba(125, 227, 255, 0.14), rgba(125, 227, 255, 0.02));
    box-shadow: inset 2px 0 0 var(--cor-plasma);
  }

  .cabecalho { padding: 12px 24px; position: sticky; top: 0; z-index: 5; background: rgba(7, 8, 13, 0.8); backdrop-filter: blur(14px); }
  .banner-alerta { margin: 8px 24px; }

  main { padding: 24px; max-width: 1680px; width: 100%; }

  .mesa { grid-template-columns: minmax(0, 1fr) 360px; align-items: stretch; }
  .mesa-lado .resumo { grid-template-columns: 1fr; }
  .mesa-dupla { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .campo-palco { min-height: 480px; }

  .grade-metricas { grid-template-columns: repeat(4, 1fr); }
  .simulador-form { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .descobrir-perfis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .analista-corpo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .analista-corpo .largo { grid-column: 1 / -1; }
  .acoes-form { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) auto; }
  .simulador-form button { grid-column: 1 / -1; }
  .grade-fantasma { grid-template-columns: 2fr 1fr; }

  /* Operação à esquerda; teto e senha à direita. */
  #aba-configuracoes { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; max-width: 1280px; }
  #aviso-config-desatualizado { grid-column: 1 / -1; grid-row: 1; }
  #form-config { grid-column: 1; grid-row: 2 / span 2; }
  #aba-configuracoes .teto-rigido { grid-column: 2; grid-row: 2; }
  #form-senha { grid-column: 2; grid-row: 3; }
  #form-config { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #form-config h2, #form-config button[type="submit"], #form-config > .nota, #form-config > .mensagem-comando { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ---- Gráfico de velas de uma ação (acoes.js + vendor/lightweight-charts) ---- */
.acoes-grafico-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-bottom: 10px; }
.acoes-grafico-titulo { display: flex; flex-direction: column; min-width: 0; }
.acoes-grafico-titulo strong { font-family: var(--fonte-numero); font-size: 1.05rem; letter-spacing: -0.01em; }
.acoes-grafico-titulo small { color: var(--cor-texto-fraco); font-size: 0.72rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
.acoes-grafico-numeros { display: flex; align-items: baseline; gap: 10px; font-family: var(--fonte-numero); }
.acoes-grafico-preco { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.acoes-grafico-vs { font-size: 0.8rem; color: var(--cor-texto-fraco); font-variant-numeric: tabular-nums; }
.acoes-grafico-vs.positivo { color: var(--cor-verde); }
.acoes-grafico-vs.negativo { color: var(--cor-vermelho); }
.acoes-grafico-periodos { display: flex; margin-left: auto; }
.acoes-grafico-periodos button {
  padding: 5px 10px; border: 1px solid var(--cor-borda); border-right: 0; background: var(--cor-fundo);
  color: var(--cor-texto-fraco); font-family: var(--fonte-numero); font-size: 0.72rem; font-weight: 700; cursor: pointer;
}
.acoes-grafico-periodos button:first-child { border-radius: 8px 0 0 8px; }
.acoes-grafico-periodos button:last-child { border-right: 1px solid var(--cor-borda); border-radius: 0 8px 8px 0; }
.acoes-grafico-periodos button.ativo { background: var(--cor-plasma); border-color: var(--cor-plasma); color: #05060a; }
.acoes-grafico-tela { position: relative; height: 340px; border-radius: 10px; overflow: hidden; background: var(--cor-fundo); border: 1px solid var(--cor-borda); }
.acoes-grafico-tela.carregando { opacity: 0.5; }
.acoes-grafico-legenda { display: flex; gap: 14px; margin-top: 8px !important; font-family: var(--fonte-numero); font-size: 0.68rem; }
.acoes-grafico-legenda span::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 5px; vertical-align: -1px; border-radius: 2px; }
.leg-alta::before { background: var(--cor-verde); }
.leg-baixa::before { background: var(--cor-vermelho); }
.leg-medio::before { background: var(--cor-azul); height: 2px !important; vertical-align: 2px !important; width: 12px !important; }
.leg-compra::before { background: var(--cor-plasma); border-radius: 50% !important; }
.tabela-acoes tbody tr:not(.acao-editor) { cursor: pointer; }
.tabela-acoes tbody tr.acao-escolhida td { background: rgba(108, 140, 255, 0.08); }
.tabela-acoes tbody tr:not(.acao-editor):hover td { background: rgba(125, 227, 255, 0.05); }
@media (max-width: 640px) {
  .acoes-grafico-tela { height: 240px; }
  .acoes-grafico-periodos { margin-left: 0; width: 100%; }
  .acoes-grafico-periodos button { flex: 1; }
}
.leg-fonte { margin-left: auto; opacity: 0.7; }
.leg-fonte::before { display: none !important; }
.acoes-grafico-setor { margin: -4px 0 8px !important; font-family: var(--fonte-numero); font-size: 0.78rem; color: var(--cor-texto-fraco); font-variant-numeric: tabular-nums; min-height: 1.2em; }
.acoes-grafico-setor .positivo { color: var(--cor-verde); }
.acoes-grafico-setor .negativo { color: var(--cor-vermelho); }
.leg-setor::before { background: var(--cor-amarelo); height: 2px !important; vertical-align: 2px !important; width: 12px !important; }

/* Benchmark na curva do patrimônio + destaque de balanço no calendário. */
.bench-linha { fill: none; stroke-width: 1.5; vector-effect: non-scaling-stroke; opacity: 0.85; }
.bench-sp { stroke: var(--cor-texto); stroke-dasharray: 5 4; }
.bench-stoxx { stroke: var(--cor-texto-fraco); stroke-dasharray: 2 4; }
.calendario-balanco { border-left: 3px solid var(--cor-plasma); padding-left: 10px; }
#importar-texto { width: 100%; background: rgba(0,0,0,0.25); color: var(--cor-texto);
  border: 1px solid var(--cor-texto-fraco); border-radius: 8px; padding: 10px; font-family: inherit; }
.login-subtitulo { max-width: 300px; margin: -6px auto 14px; text-align: center; }

/* Visão geral: barras horizontais (concentração e dividendos). */
.vbars { display: flex; flex-direction: column; gap: 8px; }
.vbar { display: grid; grid-template-columns: minmax(74px, auto) 1fr auto; gap: 10px; align-items: center; }
.vbar-nome { font-family: var(--fonte-numero); font-size: 0.78rem; color: var(--cor-texto); white-space: nowrap; }
.vbar-trilho { height: 12px; background: rgba(125, 227, 255, 0.08); border-radius: 6px; overflow: hidden; }
.vbar-fill { height: 100%; border-radius: 6px; background: linear-gradient(90deg, rgba(125,227,255,.35), var(--cor-plasma)); min-width: 2px; transition: width .6s ease; }
.vbar-fill.vbar-alerta { background: linear-gradient(90deg, rgba(255,92,108,.35), var(--cor-vermelho)); }
.vbar-fill.vbar-verde { background: linear-gradient(90deg, rgba(61,220,151,.3), var(--cor-verde)); }
.vbar-valor { font-family: var(--fonte-numero); font-size: 0.78rem; color: var(--cor-texto-fraco); white-space: nowrap; }
.conc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 28px; margin-top: 8px; }
.conc-titulo { font-size: 0.72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--cor-texto-fraco); margin: 10px 0 8px; font-weight: 600; }
.prov-grid { display: grid; grid-template-columns: 220px 1fr; gap: 10px 28px; align-items: start; margin-top: 8px; }
.prov-destaque { display: flex; flex-direction: column; gap: 4px; padding: 14px; border: 1px solid var(--cor-borda); border-radius: 12px; background: rgba(61, 220, 151, 0.05); }
.prov-total { font-family: var(--fonte-numero); font-size: 1.5rem; font-weight: 700; color: var(--cor-verde); }
.resumo-valor.negativo { color: var(--cor-vermelho); }
@media (max-width: 760px) { .conc-grid, .prov-grid { grid-template-columns: 1fr; } }