/* JMJtech · tema cinza claro e preto (Manual da Marca v1.0, página 08)
   Vale para o CRM e para os módulos Pipeline Executivo e MyLeads, que rodam dentro dele.
   Cinza claro #E0DFE5 como fundo de apoio (menu, capa, destaques), preto #000103 no texto,
   branco no fundo principal e azul #153CF6 só no símbolo, no destaque e no link.
   Carrega depois de jmjtech-marca.css e prevalece sobre ela. */

:root {
  --jmj-cinza: #E0DFE5; --jmj-preto: #000103; --jmj-azul: #153CF6;
  --jmj-cinza-hover: rgba(0, 1, 3, .06); --jmj-cinza-fio: rgba(0, 1, 3, .12);
}

/* ===== Menu lateral: cinza claro, letras pretas, logo positivo ===== */
aside.lateral, aside.side, aside#side, .lateral { background: var(--jmj-cinza) !important; color: var(--jmj-preto) !important; border-right: 1px solid var(--jmj-cinza-fio); }
aside.lateral .fio, aside.lateral .marca-fio, aside.lateral .lat-marca .fio { background: var(--jmj-cinza-fio) !important; }
aside.lateral .produto b, aside.lateral > .marca b, aside.lateral .lat-nome b, aside.lateral b { color: var(--jmj-preto) !important; }
aside.lateral nav button, aside.lateral nav a, aside.lateral .aba, aside.lateral .nav-link button, aside.lateral .nav button { color: var(--jmj-preto) !important; background: transparent; }
aside.lateral nav button svg, aside.lateral nav a svg, aside.lateral .aba svg { color: var(--jmj-preto) !important; opacity: .78; }
aside.lateral nav button:hover, aside.lateral nav a:hover, aside.lateral .aba:hover { background: var(--jmj-cinza-hover) !important; color: var(--jmj-preto) !important; }
aside.lateral nav .ativo, aside.lateral nav .ativa, aside.lateral .aba.ativa, aside.lateral nav button.ativo, aside.lateral nav a.on, aside.lateral .nav-link.ativo button, aside.lateral .nav-link button.ativo {
  background: #fff !important; color: var(--jmj-preto) !important; box-shadow: inset 3px 0 0 var(--jmj-azul) !important; font-weight: 600 !important;
}
aside.lateral nav .ativo svg, aside.lateral .aba.ativa svg, aside.lateral nav .ativa svg { color: var(--jmj-azul) !important; opacity: 1; }
aside.lateral .nav-grupo, aside.lateral .nav-sec, aside.lateral nav .grp, aside.lateral .sec { color: #45454F !important; }
aside.lateral .busca-atalho, aside.lateral .lat-recolher { border: 1px solid var(--jmj-cinza-fio) !important; background: #fff !important; color: var(--jmj-preto) !important; }
aside.lateral kbd { background: var(--jmj-cinza) !important; color: var(--jmj-preto) !important; }
aside.lateral .lat-pe, aside.lateral .jmj-pe-menu, aside.lateral .lat-rodape { border-top-color: var(--jmj-cinza-fio) !important; }
aside.lateral .avatar, aside.lateral .jmj-avatar, aside.lateral .av { background-color: var(--jmj-preto) !important; color: #fff !important; }
aside.lateral .lat-quem b, aside.lateral .jmj-quem b { color: var(--jmj-preto) !important; }
aside.lateral .lat-quem small, aside.lateral .jmj-quem small { color: #45454F !important; }
aside.lateral .lat-sair, aside.lateral .jmj-sair, aside.lateral .topo-bt { color: var(--jmj-preto) !important; border: 1px solid var(--jmj-cinza-fio) !important; background: #fff !important; }
aside.lateral .lat-rodape:not(.jmj-pe-menu), aside.lateral .jmj-info, aside.lateral .lat-rodape span, aside.lateral small { color: #45454F !important; }
aside.lateral .lat-link, aside.lateral .jmj-link, aside.lateral .lat-rodape-link, aside.lateral a.lat-link { color: var(--jmj-azul) !important; }
aside.lateral .lat-nome { border-left-color: var(--jmj-cinza-fio) !important; }
aside.lateral .contador { background: var(--jmj-preto) !important; color: #fff !important; }
aside.lateral .contador.alerta { background: #e8952b !important; color: var(--jmj-preto) !important; }
aside.lateral .selo { color: #fff; }
aside.lateral .seta-ext { color: #686875 !important; }
aside.lateral::-webkit-scrollbar-thumb { background: rgba(0,1,3,.18); }

/* Barra superior do celular */
.topo-movel { background: var(--jmj-cinza) !important; color: var(--jmj-preto) !important; border-bottom: 1px solid var(--jmj-cinza-fio); }
.topo-movel button, .topo-movel b, .topo-movel svg { color: var(--jmj-preto) !important; }

/* ===== Botões: preto chapado, letra branca; azul fica para link e destaque ===== */
.bt-primario, .btn-primary, .btn.primary, .bt.primario, .login-bt, .jmj-prim, .rp-bt.primario { background: var(--jmj-preto) !important; border-color: var(--jmj-preto) !important; color: #fff !important; }
.bt-primario:hover, .btn-primary:hover, .login-bt:hover, .jmj-prim:hover { background: #26262D !important; border-color: #26262D !important; }

/* ===== Tela de entrada: capa cinza claro com texto preto ===== */
.entrada .entrada-azul { background: var(--jmj-cinza) !important; color: var(--jmj-preto) !important; border-top: 3px solid var(--jmj-azul) !important; }
.entrada .entrada-azul *, .entrada .entrada-tese h1, .entrada .entrada-etapas span { color: var(--jmj-preto) !important; }
.entrada .entrada-marca small, .entrada .entrada-tese p { color: #45454F !important; }
.entrada .entrada-marca span { background: var(--jmj-cinza-fio) !important; }
.entrada .entrada-etapas i { background: var(--jmj-azul) !important; box-shadow: none !important; }
.login::before {
  background-color: var(--jmj-cinza) !important; color: var(--jmj-preto) !important; border-top: 3px solid var(--jmj-azul) !important;
  background-image: url("jmjtech-pos.svg") !important;
}

/* ===== Destaques: cinza claro com texto preto e filete azul ===== */
.radar, .ent-exec, .evo-sintese, .ia-leitura, .rede-kpis div {
  background: var(--jmj-cinza) !important; color: var(--jmj-preto) !important; border-top: 2px solid var(--jmj-azul) !important;
}
.ent-exec *, .evo-sintese *, .ia-leitura *, .rede-kpis div * { color: var(--jmj-preto); }
.radar h2, .radar b { color: var(--jmj-preto) !important; }
.radar p, .radar small:not(.radar-faixa small) { color: #45454F !important; }
.radar .alternador { border-color: var(--jmj-cinza-fio) !important; background: #fff !important; }
.radar .alternador button { color: var(--jmj-preto) !important; }
.radar .alternador button.ativo { background: var(--jmj-preto) !important; color: #fff !important; }
.radar-faixa button, .radar-faixa button b, .radar-faixa button small { color: #fff !important; }
.rede { background: var(--jmj-cinza) !important; color: var(--jmj-preto) !important; }
.rede-seg button { color: var(--jmj-preto) !important; }
.rede-seg button.on { background: var(--jmj-preto) !important; color: #fff !important; }
.cluster { background: #fff !important; border: 1px solid var(--jmj-cinza-fio) !important; color: var(--jmj-preto) !important; }

/* Pipeline: rodapé do menu */
aside.lateral .jmj-pe-pipeline .lat-quem b, aside.lateral .jmj-pe-pipeline .lat-usuario .topo-bt, aside.lateral .jmj-pe-pipeline .lat-rodape-link { color: var(--jmj-preto) !important; }
aside.lateral .jmj-pe-pipeline .lat-usuario .topo-bt:hover { background: var(--jmj-cinza-hover) !important; }

/* ===== Módulo aberto dentro do CRM =====
   O menu e o rodapé ficam no CRM. O menu próprio do módulo vira uma faixa de abas no topo. */
html.jmj-embutido, html.jmj-embutido body { background: #fff !important; }
html.jmj-embutido .app, html.jmj-embutido .app.recolhida { display: block !important; grid-template-columns: none !important; min-height: 100vh; }
html.jmj-embutido .topo-movel { display: none !important; }
html.jmj-embutido aside.lateral {
  position: sticky !important; top: 0 !important; inset: auto !important; transform: none !important; width: auto !important; height: auto !important;
  display: flex !important; flex-direction: row !important; align-items: stretch !important; gap: 0 !important;
  padding: 0 20px !important; overflow-x: auto !important; overflow-y: hidden !important; z-index: 40 !important;
  background: #fff !important; border-right: 0 !important; border-bottom: 1px solid var(--jmj-cinza) !important; min-height: 46px;
}
html.jmj-embutido aside.lateral > :not(nav):not(.nav) { display: none !important; }
html.jmj-embutido aside.lateral nav, html.jmj-embutido aside.lateral .nav {
  display: flex !important; flex-direction: row !important; align-items: stretch !important; gap: 2px !important; padding: 0 !important; margin: 0 !important; overflow: visible !important; flex: none !important;
}
html.jmj-embutido aside.lateral .nav-sec, html.jmj-embutido aside.lateral .nav-grupo, html.jmj-embutido aside.lateral nav .grp, html.jmj-embutido aside.lateral .sec,
html.jmj-embutido aside.lateral .jmj-externo { display: none !important; }
html.jmj-embutido aside.lateral nav a[target="_blank"] { display: none !important; }
html.jmj-embutido aside.lateral nav button, html.jmj-embutido aside.lateral nav a, html.jmj-embutido aside.lateral .aba {
  white-space: nowrap !important; height: 46px !important; min-height: 46px !important; padding: 0 12px !important; margin: 0 !important; width: auto !important;
  display: inline-flex !important; align-items: center !important; gap: 8px !important; background: transparent !important; box-shadow: none !important; font-size: 13.5px !important;
}
html.jmj-embutido aside.lateral nav a > button { height: 46px !important; padding: 0 !important; background: transparent !important; box-shadow: none !important; }
html.jmj-embutido aside.lateral nav .ativo, html.jmj-embutido aside.lateral nav .ativa, html.jmj-embutido aside.lateral .aba.ativa,
html.jmj-embutido aside.lateral nav button.ativo, html.jmj-embutido aside.lateral nav a.on, html.jmj-embutido aside.lateral .nav-link.ativo button {
  background: transparent !important; box-shadow: inset 0 -2px 0 var(--jmj-azul) !important; color: var(--jmj-preto) !important;
}
html.jmj-embutido aside.lateral nav span:not(.selo):not(.contador):not(.badge) { display: inline !important; }
html.jmj-embutido .conteudo { min-height: calc(100vh - 47px); }

/* Blocos de destaque que tinham texto claro sobre fundo escuro: tudo em preto, variações legíveis */
.ent-exec *, .evo-sintese *, .ia-leitura *, .rede-kpis div * { color: var(--jmj-preto) !important; }
.ent-exec .ent-olho, .ent-exec .ent-dica, .ent-exec .rot, .ent-exec .sub, .ent-exec small,
.evo-sintese small, .evo-sintese p, .ia-leitura small, .ia-leitura p, .rede-kpis div small { color: #45454F !important; }
.ent-exec .acima, .ent-exec .ent-delta.acima, .evo-sintese .acima { color: #0A7F52 !important; }
.ent-exec .abaixo, .ent-exec .ent-delta.abaixo, .evo-sintese .abaixo { color: #C42B2F !important; }
.ent-exec .ent-rotulo { color: var(--jmj-preto) !important; }

/* MyLeads · Mapa de relacionamentos: rede sobre cinza claro, rótulos pretos */
.rede { background: var(--jmj-cinza) !important; color: var(--jmj-preto) !important; }
.rede .anel { stroke: rgba(0,1,3,.10) !important; }
.rede .rot { fill: var(--jmj-preto) !important; stroke: var(--jmj-cinza) !important; }
.rede .rot-centro { fill: var(--jmj-preto) !important; }
.rede .rot-cat text { stroke: var(--jmj-cinza) !important; }
.rede .rot-cat .rot-cat-n { fill: #45454F !important; }
.rede .halo { fill: rgba(21,60,246,.10) !important; stroke: rgba(21,60,246,.35) !important; }
.rede-seg { background: #fff !important; border: 1px solid var(--jmj-cinza-fio) !important; border-radius: 0 !important; }
.rede-seg button { color: var(--jmj-preto) !important; border-radius: 0 !important; }
.rede-seg button.on { background: var(--jmj-preto) !important; color: #fff !important; }
.rede-busca input { background: #fff !important; color: var(--jmj-preto) !important; border: 1px solid var(--jmj-cinza-fio) !important; border-radius: 0 !important; }
.rede-busca input::placeholder { color: #686875 !important; }
.rede-sugest, .rede-painel { background: #fff !important; color: var(--jmj-preto) !important; border: 1px solid var(--jmj-cinza-fio) !important; }
.rede-sugest button, .rede-painel * { color: var(--jmj-preto); }
.rede-sugest small, .rede-painel small { color: #45454F !important; }
.rede-sugest button:hover { background: var(--jmj-cinza-hover) !important; }
.rede-filtros button { background: #fff !important; color: #45454F !important; border: 1px solid var(--jmj-cinza-fio) !important; border-radius: 0 !important; }
.rede-filtros button.on { background: color-mix(in srgb, var(--c) 14%, #fff) !important; color: var(--jmj-preto) !important; border-color: color-mix(in srgb, var(--c) 55%, transparent) !important; }
.rede-filtros button i { opacity: 1 !important; }
.rede-zoom button { background: #fff !important; color: var(--jmj-preto) !important; border: 1px solid var(--jmj-cinza-fio) !important; }
.rede-zoom button:hover { background: var(--jmj-cinza) !important; }
.rede-legenda { background: rgba(255,255,255,.9) !important; color: var(--jmj-preto) !important; border: 1px solid var(--jmj-cinza-fio) !important; }
.rede-vazio { color: #45454F !important; }
.rede-kpis span { color: #45454F !important; }
.m-N { color: #8E8E99 !important; } .m-P { color: #B45309 !important; }