* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: #000000;
  color: #d1d4dc;
  font-family: "Segoe UI", Arial, sans-serif;
}

.topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 28px;
  border-bottom: 1px solid #262626;
  background: #000000;
}

.topo h1 {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
  letter-spacing: 0.3px;
}

.topo .destaque {
  display: block;
  color: #8a8a8a;
  font-weight: 400;
  font-size: 13px;
}

.botao-som {
  background: #0a0a0a;
  border: 1px solid #262626;
  color: #8a8a8a;
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
}

.botao-som:hover {
  color: #d1d4dc;
  border-color: #333333;
}

.botao-som.ativo {
  color: #15803d;
  border-color: #15803d;
}

.status {
  font-size: 12.5px;
  color: #888;
}

.status.ok::before {
  content: "● ";
  color: #15803d;
}

.status.erro::before {
  content: "● ";
  color: #ef5350;
}

main {
  padding: 24px 28px 40px;
  max-width: 880px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* ---- hero (preço atual) ---- */

.hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.hero-preco {
  background: #0a0a0a;
  border: 1px solid #262626;
  border-radius: 10px;
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hero-rotulo {
  font-size: 12px;
  color: #8a8a8a;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.hero-valor {
  font-size: 38px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.hero-horario {
  font-size: 12px;
  color: #666;
}

/* ---- cartões genéricos ---- */

.cartao {
  background: #0a0a0a;
  border: 1px solid #262626;
  border-radius: 10px;
  padding: 18px 20px;
}

.cartao h2 {
  font-size: 13px;
  font-weight: 600;
  color: #8a8a8a;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 14px;
}

.cartao h2.titulo-compra { color: #15803d; }
.cartao h2.titulo-venda { color: #ef5350; }

.subtitulo-leve {
  text-transform: none;
  font-weight: 400;
  letter-spacing: normal;
  color: #555;
}

/* ---- gráfico de performance (estilo relatório "Patrimônio" do NinjaTrader) ---- */

.positivo { color: #15803d; }
.negativo { color: #ef5350; }

.cartao-performance {
  padding: 0;
  overflow: hidden;
}

.performance-tira {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-bottom: 1px solid #262626;
}

.tira-item {
  flex: 1 1 140px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 18px;
  border-right: 1px solid #262626;
}

.tira-item:last-child {
  border-right: none;
}

.tira-rotulo {
  font-size: 11px;
  color: #8a8a8a;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.tira-valor {
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #d1d4dc;
}

/* Especificidade maior que ".tira-valor" sozinho -- sem isso, a cor cinza padrão de
   ".tira-valor" (que vem depois de ".positivo"/".negativo" no arquivo) sempre vencia, mesmo com
   a classe extra aplicada via JS (bug encontrado em 2026-08-05: Lucro/Prejuízo Bruto e
   Operações Positivas/Negativas não coloriam). */
.tira-valor.positivo { color: #15803d; }
.tira-valor.negativo { color: #ef5350; }

/* Pedido de 2026-08-10: Resultado total / Lucro bruto / Prejuízo bruto / Custos ficam borrados
   por padrão (valores em dinheiro) -- passa o mouse (ou toca, no celular) pra revelar. */
.valor-borrado {
  filter: blur(6px);
  transition: filter 0.15s ease;
  cursor: pointer;
}
.valor-borrado:hover,
.valor-borrado:focus,
.valor-borrado.revelado {
  filter: none;
}

.performance-abas {
  display: flex;
  gap: 4px;
  padding: 10px 18px;
  border-bottom: 1px solid #262626;
}

.aba-periodo {
  background: transparent;
  border: 1px solid #262626;
  color: #8a8a8a;
  font-size: 12px;
  padding: 6px 14px;
  border-radius: 6px;
  cursor: pointer;
}

.aba-periodo:hover {
  color: #d1d4dc;
  border-color: #333333;
}

.aba-periodo-ativa,
.aba-periodo-ativa:hover {
  background: #15803d;
  border-color: #15803d;
  color: #ffffff;
}

/* Filtro de horário (2026-08-20) -- independente das abas de período acima, aplicado em
   conjunto: as abas cortam por data, isso corta por hora do dia dentro do que sobrou. */
.performance-filtro-horario {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-bottom: 1px solid #262626;
  flex-wrap: wrap;
}

.filtro-horario-rotulo {
  font-size: 12px;
  color: #8a8a8a;
}

.filtro-horario-input {
  background: transparent;
  border: 1px solid #262626;
  color: #d1d4dc;
  font-size: 12px;
  padding: 5px 8px;
  border-radius: 6px;
  color-scheme: dark;
}

.filtro-horario-input:hover,
.filtro-horario-input:focus {
  border-color: #333333;
}

.filtro-horario-limpar {
  background: transparent;
  border: 1px solid #262626;
  color: #8a8a8a;
  font-size: 12px;
  padding: 5px 12px;
  border-radius: 6px;
  cursor: pointer;
}

.filtro-horario-limpar:hover {
  color: #d1d4dc;
  border-color: #333333;
}

/* Toggle Real vs Simulado com filtro 3min (2026-08-05) -- mesma base do aba-periodo, mas cor de
   destaque diferente (azul) pra não confundir com as abas de período (verde), já que são dois
   filtros independentes agindo ao mesmo tempo. Fica dentro da área restrita (Operações), no fim
   da página -- ver .protegido[data-bloqueado] mais abaixo. */
.performance-abas-filtro {
  border-bottom: none;
  padding-top: 0;
  margin-top: 14px;
}

.aba-filtro {
  background: transparent;
  border: 1px solid #262626;
  color: #8a8a8a;
  font-size: 12px;
  padding: 6px 14px;
  border-radius: 6px;
  cursor: pointer;
}

.aba-filtro:hover {
  color: #d1d4dc;
  border-color: #333333;
}

.aba-filtro-ativa,
.aba-filtro-ativa:hover {
  background: #1d4ed8;
  border-color: #1d4ed8;
  color: #ffffff;
}

.performance-titulo-grafico {
  margin: 14px 0 4px;
  padding: 0 18px;
  font-size: 12px;
  font-weight: 600;
  color: #8a8a8a;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  text-align: center;
}

.grafico-patrimonio {
  width: 100%;
  height: 340px;
  display: block;
  padding: 0 8px 8px;
}

/* ---- tabelas ---- */

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

.tabela-rolavel {
  max-height: 480px;
  overflow-y: auto;
  overflow-x: auto;
}

.tabela-rolavel thead th {
  position: sticky;
  top: 0;
  background: #0a0a0a;
  z-index: 1;
}

thead th {
  text-align: left;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #666;
  font-weight: 600;
  padding: 0 10px 8px;
  border-bottom: 1px solid #262626;
}

tbody td {
  padding: 10px;
  border-bottom: 1px solid #1a1a1a;
  font-variant-numeric: tabular-nums;
}

tbody tr:last-child td {
  border-bottom: none;
}

tbody tr:hover td {
  background: #181818;
}

.linha-vazia {
  color: #555;
  text-align: center;
  font-style: italic;
}

.tag-operacao {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11.5px;
  font-weight: 600;
}

.tag-operacao.compra { background: rgba(21, 128, 61, 0.18); color: #15803d; }
.tag-operacao.venda { background: rgba(239, 83, 80, 0.18); color: #ef5350; }

.detalhe-leve {
  color: #666;
  font-size: 12px;
}

.tag-resultado {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}

.tag-resultado.aberta { background: rgba(209, 154, 61, 0.18); color: #d19a3d; }
.tag-resultado.lucro { background: rgba(21, 128, 61, 0.18); color: #15803d; }
.tag-resultado.prejuizo { background: rgba(239, 83, 80, 0.18); color: #ef5350; }

/* ---- área restrita (tabela de operações) ---- */

/* Pedido de 2026-08-07: um único bloqueio cobre a página inteira (preço, performance e
   tabelas) -- antes só as tabelas embaixo eram protegidas. .conteudo-protegido embrulha TUDO
   dentro de <main> e o formulário fica fixo em tela cheia (não mais preso a uma seção). */
.protegido-total {
  position: relative;
}

.protegido-total[data-bloqueado="true"] .conteudo-protegido {
  filter: blur(8px);
  pointer-events: none;
  user-select: none;
}

.bloqueio-login-total {
  display: none;
}

.protegido-total[data-bloqueado="true"] .bloqueio-login-total {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 50;
}

.form-login {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #0a0a0a;
  border: 1px solid #262626;
  border-radius: 10px;
  padding: 22px 26px;
  min-width: 220px;
}

.bloqueio-titulo {
  font-size: 12px;
  color: #8a8a8a;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-align: center;
  margin-bottom: 4px;
}

.form-login input {
  background: #131313;
  border: 1px solid #333333;
  border-radius: 6px;
  padding: 8px 10px;
  color: #d1d4dc;
  font-size: 13px;
}

.form-login input:focus {
  outline: none;
  border-color: #555555;
}

.form-login button {
  background: #15803d;
  border: none;
  border-radius: 6px;
  padding: 9px;
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.form-login button:hover {
  background: #1a9749;
}

.bloqueio-erro {
  color: #ef5350;
  font-size: 12px;
  text-align: center;
  min-height: 14px;
}