/* =====================================================================
   TradeHub — tema claro. Fundo neutro frio, paineis brancos,
   acento petroleo com ambar em segundo plano, P&L em verde/carmim.
   ===================================================================== */
:root{
  --fundo:#EEF3F6;
  --fundo-lateral:#E4EBF0;
  --painel:#FFFFFF;
  --painel-alto:#F1F6F9;
  --linha:#CFDCE4;
  --linha-suave:#E2EAEF;
  --texto:#0E2530;
  --texto-fraco:#5D7A88;

  --primaria:#0B6E75;          /* petroleo: barra, botoes, foco */
  --primaria-clara:#E3F1F1;
  --latao:#B8770E;
  --positivo:#0E7A50;
  --negativo:#C0392B;
  --azul:#2166A8;
  --violeta:#6A45B0;
  --ambar:#B8770E;

  /* escala do calendario */
  --g1:rgba(14,122,80,.10); --g2:rgba(14,122,80,.24);
  --g3:rgba(14,122,80,.46); --g4:rgba(14,122,80,.70);
  --v1:rgba(192,57,43,.10); --v2:rgba(192,57,43,.24);
  --v3:rgba(192,57,43,.46); --v4:rgba(192,57,43,.70);

  /* lidas pelo grafico SVG */
  --grafico-linha:#B8770E;
  --grafico-area:rgba(184,119,14,.16);
  --grelha:#CFDCE4;
  --dica-fundo:#FFFFFF;

  --sombra:0 1px 2px rgba(14,37,48,.06), 0 3px 10px rgba(14,37,48,.05);
  --raio:10px;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--fundo);color:var(--texto);
  font-family:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:15px;line-height:1.45;-webkit-text-size-adjust:100%;
}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-0.01em}
button{font:inherit;cursor:pointer}
input,select{font:inherit}
:focus-visible{outline:2px solid var(--primaria);outline-offset:2px}

.num{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:.92em}
.pos{color:var(--positivo)}
.neg{color:var(--negativo)}

/* ---------------------------------------------------------- marca --- */
.lingote{
  width:18px;height:12px;border-radius:2px;display:inline-block;
  background:linear-gradient(150deg,#F0C75B,#D79A1E 55%,#9A6A0C);
  transform:skewX(-14deg);
}
.marca{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:-0.02em}

/* --------------------------------------------------------- entrada -- */
.porta{display:grid;place-items:center;min-height:100dvh;padding:24px;
       background:linear-gradient(160deg,#EEF3F6,#DBE7EC)}
.entrada{width:100%;max-width:360px}
.entrada-marca{margin-bottom:28px}
.entrada-marca h1{font-size:34px;margin:10px 0 6px;color:var(--primaria)}
.entrada-marca p{color:var(--texto-fraco);margin:0;max-width:34ch}
.entrada-forma{
  background:var(--painel);border:1px solid var(--linha);
  border-radius:var(--raio);padding:20px;display:grid;gap:6px;box-shadow:var(--sombra);
}
.entrada-forma label{font-size:13px;color:var(--texto-fraco);margin-top:8px}
.entrada-forma input{
  background:var(--fundo);border:1px solid var(--linha);color:var(--texto);
  border-radius:6px;padding:10px 12px;
}
.entrada-forma button{
  margin-top:18px;background:var(--primaria);color:#fff;border:0;
  border-radius:6px;padding:11px;font-weight:600;
}
.aviso{color:var(--negativo);font-size:13px;margin:10px 0 0}

/* ------------------------------------------------------------ topo -- */
.topo{
  position:sticky;top:0;z-index:30;
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:12px 16px;background:var(--primaria);color:#fff;
  box-shadow:0 2px 8px rgba(14,37,48,.14);
}
.topo-acoes{display:flex;gap:8px}
.fantasma{
  background:transparent;border:1px solid var(--linha);color:var(--texto);
  border-radius:6px;padding:7px 11px;font-size:13px;
}
.fantasma:hover{border-color:var(--primaria);color:var(--primaria)}
.topo .fantasma{border-color:rgba(255,255,255,.45);color:#fff}
.topo .fantasma:hover{background:rgba(255,255,255,.16);border-color:#fff;color:#fff}
#btn-filtros{display:none}

/* ------------------------------------------------------ disposicao -- */
.disposicao{display:grid;grid-template-columns:270px 1fr;gap:20px;
            padding:20px 16px 60px;max-width:1440px;margin:0 auto}
.painel{position:sticky;top:70px;align-self:start;display:grid;gap:16px;
        max-height:calc(100dvh - 90px);overflow:auto}
.bloco{background:var(--painel);border:1px solid var(--linha);
       border-radius:var(--raio);padding:14px;box-shadow:var(--sombra)}
.bloco h2{font-size:11.5px;color:var(--primaria);font-weight:700;
          text-transform:uppercase;letter-spacing:.06em;margin-bottom:10px}
.bloco-cabeca{display:flex;justify-content:space-between;align-items:baseline}
.mini button{background:none;border:0;color:var(--azul);font-size:12px;padding:0 0 0 8px}

.atalhos{display:flex;flex-wrap:wrap;gap:6px}
.atalhos button{
  background:var(--painel-alto);border:1px solid var(--linha-suave);
  color:var(--texto-fraco);border-radius:999px;padding:5px 10px;font-size:12.5px;
}
.atalhos button:hover{border-color:var(--primaria);color:var(--primaria)}
.atalhos button.ativo{background:var(--primaria);border-color:var(--primaria);
                      color:#fff;font-weight:500}
.datas{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.datas label{font-size:11.5px;color:var(--texto-fraco);display:grid;gap:4px}
.datas input,.campo select{
  background:var(--painel);border:1px solid var(--linha);color:var(--texto);
  border-radius:6px;padding:7px 8px;width:100%;
}
.campo{display:grid;gap:5px;font-size:11.5px;color:var(--texto-fraco);margin-bottom:10px}

.lista-contas{display:grid;gap:2px;max-height:270px;overflow:auto}
.conta{display:flex;align-items:center;gap:9px;padding:7px 6px;border-radius:6px}
.conta:hover{background:var(--painel-alto)}
.conta input{accent-color:var(--primaria);width:15px;height:15px;flex:0 0 auto}
.conta-txt{min-width:0;flex:1}
.conta-nome{display:block;font-size:13.5px;font-weight:500;
            white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.conta-meta{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--texto-fraco)}
.ponto{width:8px;height:8px;border-radius:50%;background:var(--positivo);flex:0 0 auto}
.ponto.frio{background:var(--negativo)}

/* -------------------------------------------------------- destaque -- */
.conteudo{display:grid;gap:18px;min-width:0}
.destaque{
  background:linear-gradient(150deg,#FFFFFF,#F2F8F8 70%);
  border:1px solid var(--linha);border-left:4px solid var(--primaria);
  border-radius:var(--raio);padding:18px 18px 6px;box-shadow:var(--sombra);
}
.destaque-cabeca{display:flex;justify-content:space-between;
                 align-items:flex-start;gap:16px;flex-wrap:wrap}
.destaque-rotulo{margin:0;color:var(--primaria);font-size:12px;font-weight:700;
                 text-transform:uppercase;letter-spacing:.07em}
.destaque-valor{
  margin:6px 0 2px;font-family:var(--mono);font-weight:700;
  font-size:clamp(30px,7vw,46px);letter-spacing:-0.03em;line-height:1;
}
.destaque-sub{margin:0;color:var(--texto-fraco);font-size:12.5px}
.flutuante{text-align:right;border-left:1px solid var(--linha);padding-left:16px}
.flutuante span{display:block;color:var(--texto-fraco);font-size:12px}
.flutuante strong{font-family:var(--mono);font-size:20px}
.grafico{margin-top:14px}
.grafico svg{display:block;width:100%;height:210px;overflow:visible}
.vazio{color:var(--texto-fraco);padding:36px 0;text-align:center;font-size:14px}

/* ------------------------------------------------- tira de metricas -- */
.tira{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));
  background:var(--painel);border:1px solid var(--linha);
  border-radius:var(--raio);overflow:hidden;box-shadow:var(--sombra);
}
.metrica{padding:12px 14px;border-right:1px solid var(--linha-suave);
         border-bottom:1px solid var(--linha-suave);border-left:3px solid transparent}
.metrica span{display:block;color:var(--texto-fraco);font-size:11.5px;margin-bottom:3px}
.metrica strong{font-family:var(--mono);font-size:17px;font-weight:600}
.metrica.cat-resultado{border-left-color:var(--ambar);background:rgba(184,119,14,.05)}
.metrica.cat-qualidade{border-left-color:var(--azul);background:rgba(33,102,168,.05)}
.metrica.cat-risco{border-left-color:var(--negativo);background:rgba(192,57,43,.05)}
.metrica.cat-volume{border-left-color:var(--violeta);background:rgba(106,69,176,.05)}

/* ----------------------------------------------------- separadores -- */
.separadores{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.separadores::-webkit-scrollbar{display:none}
.separadores button{
  background:none;border:0;border-bottom:2.5px solid transparent;
  color:var(--texto-fraco);padding:8px 12px;white-space:nowrap;font-size:14px;
}
.separadores button:hover{color:var(--texto)}
.separadores button.ativo{color:var(--primaria);border-bottom-color:var(--primaria);font-weight:600}

/* --------------------------------------------------------- tabelas -- */
.tabela-caixa{background:var(--painel);border:1px solid var(--linha);
              border-radius:var(--raio);overflow-x:auto;box-shadow:var(--sombra)}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th,td{padding:9px 12px;text-align:right;white-space:nowrap}
th:first-child,td:first-child{text-align:left;position:sticky;left:0;background:var(--painel)}
thead th{
  color:var(--texto-fraco);font-weight:600;font-size:11px;
  text-transform:uppercase;letter-spacing:.04em;
  background:var(--painel-alto);border-bottom:1px solid var(--linha);
}
thead th:first-child{background:var(--painel-alto)}
tbody tr:not(:last-child) td{border-bottom:1px solid var(--linha-suave)}
tbody tr:hover td,tbody tr:hover td:first-child{background:var(--primaria-clara)}
td.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.barra{height:4px;border-radius:2px;margin-top:4px;background:var(--primaria)}
.paginacao{display:flex;gap:8px;align-items:center;justify-content:center;
           padding:12px;color:var(--texto-fraco);font-size:13px}

/* ------------------------------------------------------ calendario -- */
.calendario{display:grid;gap:14px}
.cal-cabeca{
  display:flex;justify-content:space-between;align-items:center;gap:14px;
  flex-wrap:wrap;background:var(--painel);border:1px solid var(--linha);
  border-radius:var(--raio);padding:12px 16px;box-shadow:var(--sombra);
}
.cal-nav{display:flex;align-items:center;gap:8px}
.cal-nav h3{font-size:17px;min-width:9.5em;text-align:center;color:var(--primaria)}
.cal-nav button{padding:5px 11px;line-height:1}
.cal-resumo{text-align:right;display:grid;gap:2px}
.cal-resumo strong{font-size:20px;font-weight:700}
.cal-resumo span{color:var(--texto-fraco);font-size:12.5px}

.cal-grelha{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.cal-dia-nome{
  text-align:center;color:var(--primaria);font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;padding-bottom:2px;
}
.cal-celula{
  aspect-ratio:1/.92;display:flex;flex-direction:column;align-items:flex-start;
  justify-content:flex-start;gap:1px;padding:7px 8px;text-align:left;
  background:var(--painel);border:1px solid var(--linha-suave);
  border-radius:8px;color:var(--texto);font:inherit;overflow:hidden;
  transition:transform .12s ease,box-shadow .12s ease;
}
.cal-celula.vazia{background:none;border:0;pointer-events:none}
.cal-celula.sem-dados{background:var(--painel-alto);color:var(--texto-fraco)}
.cal-celula.fds.sem-dados{background:#E7EEF2}
.cal-celula.hoje{border:2px solid var(--primaria)}
.cal-celula:not(:disabled):hover{transform:translateY(-2px);
  box-shadow:0 4px 14px rgba(14,37,48,.16);cursor:pointer}

.cal-num{font-size:11px;color:var(--texto-fraco);font-weight:600}
.cal-celula.hoje .cal-num{color:var(--primaria)}
.cal-valor{font-size:13.5px;font-weight:700;margin-top:auto;line-height:1.2}
.cal-trades{font-size:10.5px;color:var(--texto-fraco)}

.cal-celula.ganho .cal-valor{color:var(--positivo)}
.cal-celula.perda .cal-valor{color:var(--negativo)}
.cal-celula.ganho.n1{background:var(--g1)} .cal-celula.ganho.n2{background:var(--g2)}
.cal-celula.ganho.n3{background:var(--g3)} .cal-celula.ganho.n4{background:var(--g4)}
.cal-celula.perda.n1{background:var(--v1)} .cal-celula.perda.n2{background:var(--v2)}
.cal-celula.perda.n3{background:var(--v3)} .cal-celula.perda.n4{background:var(--v4)}
.cal-celula.n3 .cal-valor,.cal-celula.n4 .cal-valor{color:#fff}
.cal-celula.n3 .cal-num,.cal-celula.n4 .cal-num,
.cal-celula.n3 .cal-trades,.cal-celula.n4 .cal-trades{color:rgba(255,255,255,.88)}

/* -------------------------------------------------- grupos e regras -- */
.etiqueta{
  font-size:10px;text-transform:uppercase;letter-spacing:.05em;font-weight:700;
  padding:1px 6px;border-radius:999px;color:#fff;background:var(--texto-fraco);
}
.etiqueta.gprop{background:var(--violeta)}
.etiqueta.gpessoal{background:var(--azul)}
.etiqueta.gdemo{background:var(--ambar)}

.regras-lista{display:grid;gap:16px}
.regras-lista > .regra-ajuda{margin:0;max-width:70ch}
.cartao-conta{background:var(--painel);border:1px solid var(--linha);
              border-radius:var(--raio);overflow:hidden;box-shadow:var(--sombra)}
.cartao-cabeca{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:12px 16px;background:var(--painel-alto);border-bottom:1px solid var(--linha);
}
.cartao-cabeca p{margin:2px 0 0}
.cartao-id{flex:1;min-width:0}
.linha-nome{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:2px}
.campo-nome{
  flex:1;min-width:11em;background:transparent;border:1px solid transparent;
  color:var(--texto);font-size:16px;font-weight:600;letter-spacing:-0.01em;
  border-radius:6px;padding:5px 8px;margin-left:-8px;
}
.linha-nome input:not(.campo-nome){
  background:transparent;border:1px solid transparent;color:var(--texto-fraco);
  border-radius:6px;padding:5px 8px;font-size:12.5px;
}
.linha-nome input:hover{border-color:var(--linha)}
.linha-nome input:focus{background:var(--painel);border-color:var(--primaria);outline:none}
.linha-nome input::placeholder{color:var(--texto-fraco);opacity:.7;font-weight:400}

.interruptor{display:flex;align-items:center;gap:7px;font-size:13px;
             color:var(--texto-fraco);white-space:nowrap}
.interruptor input{accent-color:var(--primaria);width:16px;height:16px}

.regra{border-bottom:1px solid var(--linha-suave);padding:12px 16px}
.regra.ligada{background:linear-gradient(90deg,var(--primaria-clara),transparent 55%)}
.regra-cabeca{display:flex;gap:10px;align-items:flex-start;cursor:pointer}
.regra-cabeca input{accent-color:var(--primaria);width:16px;height:16px;
                    margin-top:3px;flex:0 0 auto}
.regra-cabeca strong{display:block;font-weight:600;font-size:14.5px}
.regra-ajuda{display:block;color:var(--texto-fraco);font-size:12.5px;line-height:1.4}

.regra-corpo{
  display:flex;flex-wrap:wrap;gap:12px;margin:10px 0 2px 26px;
  opacity:.4;pointer-events:none;transition:opacity .15s ease;
}
.regra.ligada .regra-corpo{opacity:1;pointer-events:auto}
.regra-campo{display:grid;gap:4px;font-size:11.5px;color:var(--texto-fraco)}
.regra-campo[hidden]{display:none}
.regra-campo input,.regra-campo select{
  background:var(--painel);border:1px solid var(--linha);color:var(--texto);
  border-radius:6px;padding:7px 9px;font-family:var(--mono);font-size:13px;
}
.regra-campo select{font-family:inherit}
.regra-campo button{margin-top:1px}

.cartao-rodape{display:flex;justify-content:flex-end;align-items:center;
               gap:14px;padding:12px 16px}
.primario{background:var(--primaria);color:#fff;border:0;border-radius:6px;
          padding:9px 18px;font-weight:600}
.primario:disabled{opacity:.5}

/* ---------------------------------------------------------- movel --- */
.veu{position:fixed;inset:0;background:rgba(14,37,48,.45);z-index:35}
@media (max-width:860px){
  .disposicao{grid-template-columns:1fr;padding:14px 12px 48px}
  #btn-filtros{display:inline-block}
  .painel{
    position:fixed;inset:0 auto 0 0;width:min(88vw,320px);z-index:40;
    background:var(--fundo-lateral);border-right:1px solid var(--linha);
    padding:14px;max-height:100dvh;transform:translateX(-102%);
    transition:transform .22s ease;border-radius:0;
  }
  .painel.aberto{transform:none;box-shadow:8px 0 24px rgba(14,37,48,.2)}
  .flutuante{border-left:0;padding-left:0;text-align:left}
}
@media (max-width:560px){
  .cal-celula{aspect-ratio:1/1.08;padding:5px;border-radius:6px}
  .cal-valor{font-size:11px}
  .cal-trades{font-size:9px}
  .cal-grelha{gap:3px}
  .cal-resumo{text-align:left}
}
@media (max-width:520px){
  .regra-corpo{margin-left:0}
  .regra-campo input,.regra-campo select{width:100%!important}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ------------------------------------------------ fuso por conta ---- */
.cartao-direita{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap}
.cartao-direita .regra-campo{margin-bottom:0}
.cartao-direita .regra-campo input{width:4.5em;text-align:center}
.aviso-fuso{
  margin:0;padding:10px 16px;background:rgba(184,119,14,.1);
  border-bottom:1px solid var(--linha-suave);color:var(--ambar);
}

/* ------------------------------------------- saldo na barra lateral -- */
.conta-saldo{
  display:flex;align-items:baseline;gap:7px;margin-top:1px;
  font-size:12px;font-variant-numeric:tabular-nums;
}
.conta-saldo > span:first-child{color:var(--texto);font-weight:600}
.conta-saldo .num{font-size:12px}

/* --------------------------------------- opcoes de apresentacao ----- */
.opcoes-apresentacao{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:10px 16px;background:var(--painel-alto);
  border-bottom:1px solid var(--linha-suave);
}
.opcoes-apresentacao .regra-ajuda{display:inline;margin-right:2px}
.opcoes-apresentacao .interruptor{color:var(--texto);font-size:13px}

/* Avisa que o total nao inclui todas as contas. */
.destaque-sub.parcial{color:var(--ambar);font-weight:600}
.destaque-sub.parcial::after{content:" — nem todas as contas estao selecionadas"}