/* Tema claro do site todo (a escolha fica em localStorage "bancada.aparencia"; veja tema.js). As variáveis valem para qualquer página. */
html[data-aparencia="claro"] {
  color-scheme: light;
  --ov: 15 23 42;
  --fundo: #e3e8f1;
  --painel: #f4f6fb;
  --realce: #dae1ee;
  --linha: #c4cddc;
  --linha-forte: #a9b6ca;
  --texto: #0f1b2d;
  --suave: #526079;
  --destaque: #2563eb;
  --destaque-escuro: #ffffff;
  --alta: #0a9c78;
  --baixa: #e0314d;
  --venda: #7357d6;
  --g-grade: rgb(15 23 42 / 0.07);
  --g-eixo: #66748b;
  --g-vela-alta: #7db8ff;
  --g-linha-lucro: #2a6fdc;
  --g-vela-baixa: #1d4ed8;
  --g-vela-baixa-borda: #1d4ed8;
  --g-etiqueta: #dae1ee;
  --g-marca: #f4f6fb;
  --g-halo: rgb(230 232 235 / 0.35);
  --g-vela-alta-borda: #3a7bd0;
  --g-vela-baixa-contorno: #0f2a80;
  --card-fundo: #ffffff;
  --card-a: #ffffff;
  --card-b: #eef2f8;
  --brilho: 37 99 235;
  --moldura: #ffffff;
  --moldura-linha: #c2ccdc;
  --borda-suave: rgb(15 23 42 / 0.14);
  --sim-grafico: #fafbfd;
  --ma-1: #0d9488;
  --ma-2: #7357d6;
  --ma-3: #2563eb;
  --ma-4: #db2777;
  --ma-5: #16a34a;
  --ma-6: #ca8a04;
  --ma-7: #ea580c;
  --ma-8: #dc2626;
}
html[data-aparencia="claro"] body { background: var(--fundo); color: var(--texto); }
/* barra lateral e menus */
html[data-aparencia="claro"] .quadro-caixa, html[data-aparencia="claro"] .quadro-frame { background: var(--fundo); }
html[data-aparencia="claro"] .conta-bloco { background: var(--card-fundo); border-color: var(--moldura-linha); }

/* tema claro: aba selecionada legível e texto do item do menu no modelo de pílula escura */
html[data-aparencia="claro"] .est-aba[aria-selected="true"], html[data-aparencia="claro"] .est-aba[aria-selected="true"] span { color: #0f1b2d; }
html[data-aparencia="claro"] .est-aba[aria-selected="true"] svg { color: #2563eb; }
html[data-aparencia="claro"] .est-aba[aria-selected="true"]::after { background: #2563eb; }

/* sem manchas coloridas de fundo no tema claro: os cabeçalhos viram um cartão cinza liso */
html[data-aparencia="claro"] .sim-lista-cab, html[data-aparencia="claro"] .est-banner { background: transparent; border-color: transparent; }
html[data-aparencia="claro"] .sim-lista-cab::after, html[data-aparencia="claro"] .est-banner::after { display: none; }

/* tema claro: etiquetas de situação em tom cheio (a transparência sobre o cinza ficava suja) */
html[data-aparencia="claro"] .mt-papel-tag.p-c, html[data-aparencia="claro"] .mt-estado.em-uso { background: #bfe6d6; color: #0a6148; }
html[data-aparencia="claro"] .mt-papel-tag.p-v { background: #f4c4cb; color: #a81d34; }
html[data-aparencia="claro"] .mt-estado.em-uso { padding: 1px 8px; border-radius: 6px; }
/* estado do backtest (Concluído/Em andamento) no claro: só o texto colorido, sem preenchimento chapado — pedido do usuário, 29/10/2026 */
html[data-aparencia="claro"] .bk-estado.ok { color: #0a7a56; }
html[data-aparencia="claro"] .bk-estado.and { color: #1c47b0; }
/* cartões do Simulador: o quadro do gráfico fica mais claro que o cartão */
html[data-aparencia="claro"] .bk-hero { background: #eef2f8; border-color: #d3dae6; }

/* tema claro: nada de brilho azul no fundo nem nos cabeçalhos e cartões (ficava como uma mancha); só cinza liso */
html[data-aparencia="claro"] body, html[data-aparencia="claro"] body.com-lateral, html[data-aparencia="claro"] body.sim { background: var(--fundo) !important; }
html[data-aparencia="claro"] .quadro-caixa::before, html[data-aparencia="claro"] .quadro-caixa::after { display: none; }
html[data-aparencia="claro"] .est-banner::before, html[data-aparencia="claro"] .sim-lista-cab::before { display: none; }

/* tema claro: todos os cartões brancos, com sombra suave; o que fica dentro deles (caixinhas, gráficos pequenos) num cinza bem leve */
html[data-aparencia="claro"] :is(.sim-cartao.bk, .bk-linha, .sim-an-card, .ct-cartao, .ct-kpi, .ct-pasta, .lab-cartao, .lab-kpis, .lx2, .lc, .cp-cartao, .cp-slot, .conta-bloco, .plano-cartao, .est-card, .cfgl-cartao, .opt-melhor-cartao) { background: #ffffff !important; border-color: #d3dae6 !important; box-shadow: 0 6px 18px -10px rgb(15 23 42 / 0.25); }
html[data-aparencia="claro"] :is(.sim-cartao.bk .bk-stats > div, .sim-cartao.bk .bk-hero, .bk-hero, .est-card .est-nums > *, .lx2-ativos) { background: #eef2f8 !important; border-color: #dce3ee !important; }

html[data-aparencia="claro"] :is(.sim-cartao.bk .bk-mais, .est-card .bk-mais) { background: #eef2f8; }

/* tema claro: o rodapé do cartão "Estratégia × Ativos" acompanha o canto arredondado */
html[data-aparencia="claro"] .lx2 { border-radius: 22px; overflow: hidden !important; }
html[data-aparencia="claro"] .lx2:has(.lx-dd.aberto) { overflow: visible !important; }
html[data-aparencia="claro"] .lx2-ativos { border-radius: 0 0 22px 22px; }
/* tema claro: o contorno da seleção da IA em tons fortes de roxo/magenta (os tons claros sumiam no fundo claro) */
html[data-aparencia="claro"] .an-ia-anel { filter: drop-shadow(0 0 3px rgb(124 58 237 / 0.35)); }
html[data-aparencia="claro"] .an-ia-anel path { stroke-width: 1.75; }
html[data-aparencia="claro"] .an-ia-anel stop:nth-child(1) { stop-color: #4f46e5; }
html[data-aparencia="claro"] .an-ia-anel stop:nth-child(2) { stop-color: #8b3fe0; }
html[data-aparencia="claro"] .an-ia-anel stop:nth-child(3) { stop-color: #c026d3; }
html[data-aparencia="claro"] .an-ia-bt { color: #3b2aa8 !important; background: linear-gradient(100deg, #cdd6fb, #dcc9f7) !important; box-shadow: inset 0 0 0 1px #9a8de0; }
html[data-aparencia="claro"] .an-ia-bt .cria-ia { background: #7c5cf0 !important; color: #fff !important; }
html[data-aparencia="claro"] .an-ia-bt.aberto { box-shadow: 0 0 0 2px #7c3aed, 0 0 12px rgb(124 58 237 / 0.35) !important; }

/* o cartão de backtest continua branco com o mouse em cima (antes a regra do hover o deixava cinza) */
html[data-aparencia="claro"] .bk-linha:hover, html[data-aparencia="claro"] .cp-slot:hover { background: #ffffff !important; box-shadow: 0 10px 24px -10px rgb(15 23 42 / 0.32), inset 0 0 0 1.5px color-mix(in srgb, var(--bk-cor, var(--destaque)) 55%, transparent); }

/* tema claro: sublinhado do par Backtests/Análise em azul e texto escuro nas opções selecionadas (período, saldo e semelhantes) */
html[data-aparencia="claro"] .est-grupo-par::after { background: #2563eb; }
html[data-aparencia="claro"] :is(.cfg2-seg, .lab-segs, .lab-per, .lx-per, .lx2) button[aria-pressed="true"], html[data-aparencia="claro"] :is(.cfg2-seg, .lab-segs, .lab-per) button[aria-pressed="true"] * { color: #0f2f7a !important; font-weight: 800; }
html[data-aparencia="claro"] :is(.cfg2-seg, .lab-segs, .lab-per) button[aria-pressed="true"] { background: #c4d4f7 !important; box-shadow: inset 0 0 0 1px #8fa9e8; }
html[data-aparencia="claro"] button[aria-pressed="true"], html[data-aparencia="claro"] [role="tab"][aria-selected="true"] { text-shadow: none; }

/* tema claro: os cartões das Métricas, ferramentas do Laboratório, filtros da Análise e blocos vazios também em branco */
html[data-aparencia="claro"] :is(.mt-item, .lm-item, .lab-ft, .lab-kpi, .lab-camp, .lab-ferr-col, .lab-home-sec > section, .lab-rank, .an-filtros, .lab-cartao, .est-aba-conteudo .sim-cartao) { background: #ffffff !important; border-color: #d3dae6; box-shadow: 0 6px 18px -10px rgb(15 23 42 / 0.22); }
html[data-aparencia="claro"] .lm-item + .lm-item { box-shadow: none; }
html[data-aparencia="claro"] .lm-lista .lm-item { box-shadow: none; }
html[data-aparencia="claro"] :is(.mt-item, .lm-item):hover { background: #ffffff !important; box-shadow: 0 10px 24px -10px rgb(15 23 42 / 0.3); }

/* Métricas em caixas: o contêiner fica transparente e cada métrica é um cartão branco separado */
html[data-aparencia="claro"] .lm-lista { background: transparent !important; border-color: transparent !important; box-shadow: none !important; }
html[data-aparencia="claro"] .mt-corpo .lm-item { border-radius: 16px; border: 1px solid #d3dae6; }

/* tema claro: a barra lateral e os menus dela continuam ESCUROS (a identidade do produto): reaplica as cores do tema escuro só nessa área */
html[data-aparencia="claro"] :is(.lateral, .lateral-menu, .lateral-idiomas-menu) {
  color-scheme: dark; --ov: 255 255 255; --texto: #e9edf0; --suave: #8a949e; --destaque: #5b9bff; --destaque-escuro: #06101f;
  --linha: #1f252b; --linha-forte: #2c343c; --moldura-linha: #1f252b; --card-fundo: #0f1215; --alta: #2fd6a5; --baixa: #ff6a86; color: var(--texto);
}
/* a marca dentro da barra escura mantém o degradê claro do tema escuro */
html[data-aparencia="claro"] .lateral .marca-nome { background: linear-gradient(100deg, #ffffff 15%, #8fb8ff 90%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
html[data-aparencia="claro"] .lateral-perfil { background: #121820; border-color: #1f252b; }
html[data-aparencia="claro"] .lateral .lateral-item:hover { background: rgb(255 255 255 / 0.06); color: #e9edf0; }

/* Conta (Dispositivos e Backtests apagados): sem o contorno redondo grande; só uma lista de linhas brancas simples */
html[data-aparencia="claro"] .conta-tela .lx2 { background: transparent !important; box-shadow: none !important; border: 0 !important; border-radius: 0; overflow: visible !important; }
html[data-aparencia="claro"] .conta-tela .lx2-cab { padding-left: 0; padding-right: 0; }
html[data-aparencia="claro"] .conta-tela .lx2-item { background: #ffffff !important; border: 1px solid #d3dae6 !important; border-radius: 14px; box-shadow: none !important; }
html[data-aparencia="claro"] .conta-tela .lx2-item.atual { background: #eaf1ff !important; border-color: #b9cffa !important; }
html[data-aparencia="claro"] .conta-tela .lx2-lista { padding-left: 0; padding-right: 0; gap: 10px; }
/* o logo dentro da barra escura é igual ao do tema escuro (azul claro com brilho) */
html[data-aparencia="claro"] .lateral .marca-icone { color: #5b9bff; filter: drop-shadow(0 0 8px rgb(91 155 255 / 0.55)); }

/* tema claro, tela do gráfico (backtest): o entorno fica ESCURO como no tema escuro (barras de cima e de baixo, ferramentas, painel da direita e
   janelinhas) e só o gráfico no meio fica claro, num cinza gelo. Mesma lógica da barra lateral: reaplica as cores do tema escuro nessas áreas. */
/* A aparência do GRÁFICO é separada da do site: o fundo do gráfico (Escuro ou Gelo, escolhido nas configurações do gráfico) vale numa "ilha" de cores
   (o painel #s-paineis recebe data-grafico="escuro" ou "claro"). O entorno do gráfico (barras, ferramentas, painel da direita) fica sempre escuro. */
html[data-aparencia="claro"] { --sim-grafico: #eef1f6; }
html[data-aparencia="claro"] :is(.sim-barra, .sim-ferramentas, .sim-replay, .sim-baixo, .sim-trilho, .sim-pop-ind, .sim-pop-layout, .sim-area .flutuante),
.sim-paineis[data-grafico="escuro"] {
  color-scheme: dark;
  --ov: 255 255 255;
  --fundo: #12171f;
  --painel: #171d27;
  --realce: #1f2632;
  --linha: #283140;
  --linha-forte: #36425a;
  --texto: #e9edf0;
  --suave: #8a949e;
  --destaque: #4ea8ff;
  --destaque-escuro: #04111f;
  --alta: #5eead4;
  --baixa: #ff7b8f;
  --venda: #b9a2ff;
  --g-grade: rgb(255 255 255 / 0.07);
  --g-eixo: #7f8b97;
  --g-vela-alta: #a9deff;
  --g-vela-baixa: #3a78dc;
  --g-vela-baixa-borda: #3a78dc;
  --g-etiqueta: #2b3547;
  --g-marca: #0b1220;
  --g-halo: rgb(4 8 16 / 0.8);
  --card-fundo: #181f2b;
  --card-a: #0c1730;
  --card-b: #060a16;
  --brilho: 78 168 255;
  --moldura: #151b26;
  --moldura-linha: #2a3547;
  --borda-suave: rgb(255 255 255 / 0.06);
  --sim-grafico: #131722;
  --ma-1: #5eead4;
  --ma-2: #b9a2ff;
  --ma-3: #4ea8ff;
  --ma-4: #ff8fb0;
  --ma-5: #7ee0b5;
  --ma-6: #facc15;
  --ma-7: #fb923c;
  --ma-8: #f87171;
  --g-linha-lucro: initial;
  --g-vela-alta-borda: initial;
  --g-vela-baixa-contorno: initial;
  --sim-linha: var(--moldura-linha);
  color: var(--texto);
}
.sim-paineis[data-grafico="claro"] {
  color-scheme: light;
  --ov: 15 23 42;
  --fundo: #e3e8f1;
  --painel: #f4f6fb;
  --realce: #dae1ee;
  --linha: #c4cddc;
  --linha-forte: #a9b6ca;
  --texto: #0f1b2d;
  --suave: #526079;
  --destaque: #2563eb;
  --destaque-escuro: #ffffff;
  --alta: #0a9c78;
  --baixa: #e0314d;
  --venda: #7357d6;
  --g-grade: rgb(15 23 42 / 0.07);
  --g-eixo: #66748b;
  --g-vela-alta: #7db8ff;
  --g-linha-lucro: #2a6fdc;
  --g-vela-baixa: #1d4ed8;
  --g-vela-baixa-borda: #1d4ed8;
  --g-vela-alta-borda: #3a7bd0;
  --g-vela-baixa-contorno: #0f2a80;
  --g-etiqueta: #dae1ee;
  --g-marca: #f4f6fb;
  --g-halo: rgb(230 232 235 / 0.35);
  --card-fundo: #ffffff;
  --card-a: #ffffff;
  --card-b: #eef2f8;
  --brilho: 37 99 235;
  --moldura: #ffffff;
  --moldura-linha: #c2ccdc;
  --borda-suave: rgb(15 23 42 / 0.14);
  --sim-grafico: #eef1f6;
  --ma-1: #0d9488;
  --ma-2: #7357d6;
  --ma-3: #2563eb;
  --ma-4: #db2777;
  --ma-5: #16a34a;
  --ma-6: #ca8a04;
  --ma-7: #ea580c;
  --ma-8: #dc2626;
  --sim-linha: var(--moldura-linha);
  color: var(--texto);
}
html[data-aparencia="claro"] .sim-area .sim-trilho { background: var(--moldura); border-color: var(--moldura-linha); }
html[data-aparencia="claro"] .sim-trilho .trilho-botao { color: #b4c0d4; }
html[data-aparencia="claro"] .sim-trilho .trilho-botao:hover:not(:disabled), html[data-aparencia="claro"] .sim-trilho .trilho-botao.aberto { color: #fff; }

html[data-aparencia="claro"] .sim-trilho #s-r-ia .trilho-rot { color: #b9b2ff; }
html[data-aparencia="claro"] .sim-replay .sim-vender { color: #ff8a9b; }
html[data-aparencia="claro"] .sim-replay .sim-comprar { color: #3fe0b2; }
html[data-aparencia="claro"] .sim-ferramentas button { color: #b4c0d4; }
html[data-aparencia="claro"] .sim-ferramentas button:hover, html[data-aparencia="claro"] .sim-ferramentas button[aria-pressed="true"] { color: #fff; }
html[data-aparencia="claro"] .sim-ferramentas button.ferr-ia { color: #b79cff; background: rgb(139 92 246 / 0.13); }
html[data-aparencia="claro"] .sim-ferramentas button.ferr-ia:hover:not(:disabled) { color: #d6c8ff; background: rgb(139 92 246 / 0.26); }
html[data-aparencia="claro"] .sim-ferramentas button.ferr-ia[aria-pressed="true"] { color: #fff; background: rgb(139 92 246 / 0.42); }
html[data-aparencia="claro"] :is(.sim-icone, .sim-tfs button, .sim-lote-seta, .lay-op, .sim-acao, .sim-chip, .ind-nav-item, .ind-pilula) { color: #b4c0d4; }
html[data-aparencia="claro"] :is(.sim-icone:hover, .sim-tfs button:hover, .sim-tfs button[aria-pressed="true"], .sim-lote-seta:hover, .lay-op:hover, .lay-op[aria-pressed="true"], .sim-acao:hover, .ind-nav-item:hover, .ind-nav-item[aria-current="true"], .ind-pilula:hover) { color: #fff; }
html[data-aparencia="claro"] .ind-nav-item { color: var(--texto); }

html[data-aparencia="claro"] .sim-barra select option, html[data-aparencia="claro"] .sim-replay select option { background: #181f2b; color: #e9edf0; }