/* JMJtech · camada de marca comum (Manual da Marca v1.0, outubro de 2026)
   Vale para CRM, Pipeline Executivo, MyLeads e Volta. Azul, preto, cinza claro e branco;
   ciano só em filete; Geist no texto e Geist Mono em rótulos e números; cantos retos;
   filete de 1 px no lugar de sombra; um destaque azul por tela. */

@font-face { font-family: "Geist"; src: url("fonts/Geist-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist"; src: url("fonts/Geist-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist"; src: url("fonts/Geist-SemiBold.woff2") format("woff2"); font-weight: 600 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("fonts/GeistMono-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("fonts/GeistMono-Medium.woff2") format("woff2"); font-weight: 500 900; font-style: normal; font-display: swap; }

:root {
  --jmj-azul: #153CF6; --jmj-preto: #000103; --jmj-cinza: #E0DFE5; --jmj-branco: #FFFFFF;
  --jmj-ciano: #2FC6FF; --jmj-navy: #0B1440;
  --jmj-texto-2: #45454F; --jmj-texto-3: #686875; --jmj-apoio: #F5F5F7; --jmj-suave: #F0EFF3;
  --jmj-fonte: "Geist", "Arial", system-ui, sans-serif;
  --jmj-mono: "Geist Mono", ui-monospace, Menlo, Consolas, monospace;
  --jmj-capa: linear-gradient(160deg, #0B1440 0%, #153CF6 100%);
}

html, body { font-family: var(--jmj-fonte) !important; font-feature-settings: "ss01" 0; }
body { background: var(--jmj-branco) !important; color: var(--jmj-preto); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font-family: inherit; }
h1, h2, h3, h4 { font-weight: 600 !important; text-transform: none; letter-spacing: -0.01em; }
code, kbd, pre, .mono { font-family: var(--jmj-mono) !important; }
::selection { background: var(--jmj-azul); color: #fff; }
:focus-visible { outline: 2px solid var(--jmj-azul) !important; outline-offset: 1px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 1px solid var(--jmj-azul) !important; outline-offset: -1px; }

/* Campos e botões: cantos retos, filete de 1 px */
input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea { border-radius: 0 !important; }
input:not([type=checkbox]):not([type=radio]):focus, select:focus, textarea:focus { border-color: var(--jmj-azul) !important; box-shadow: none !important; }
.bt, .btn, button.primario, .bt-primario, .btn-primary { border-radius: 0 !important; }
.bt-primario, .btn-primary, .btn.primary, .bt.primario, .login-bt { background: var(--jmj-azul) !important; border-color: var(--jmj-azul) !important; color: #fff !important; }
.bt-primario:hover, .btn-primary:hover, .login-bt:hover { background: #0F31D6 !important; border-color: #0F31D6 !important; }

/* ===== Menu lateral: azul chapado, logo negativo, item ativo com filete ciano ===== */
aside.lateral, aside.side, aside#side, .lateral { background: var(--jmj-azul) !important; color: #fff; }
aside.lateral img.jmj-logo, .jmj-logo-menu { height: 32px !important; width: auto !important; display: block; }
aside.lateral .lat-marca, aside.lateral > .marca { display: flex !important; align-items: center !important; gap: 12px !important; min-height: 56px; }
aside.lateral .fio, aside.lateral .marca-fio, aside.lateral .lat-marca .fio { width: 1px !important; height: 32px !important; background: rgba(255,255,255,.22) !important; }
aside.lateral .produto b, aside.lateral > .marca b, aside.lateral .lat-nome b { font-size: 15px !important; font-weight: 600 !important; color: #fff !important; letter-spacing: -0.005em; line-height: 1.15; }
aside.lateral .produto small, aside.lateral > .marca small, aside.lateral .lat-nome small { display: none !important; }
aside.lateral nav button, aside.lateral nav a, aside.lateral .aba, aside.lateral .nav-link button {
  border-radius: 0 !important; color: var(--jmj-cinza) !important; font-weight: 500 !important; box-shadow: none !important;
}
aside.lateral nav button:hover, aside.lateral nav a:hover, aside.lateral .aba:hover { background: rgba(255,255,255,.10) !important; color: #fff !important; }
aside.lateral nav .ativo, aside.lateral nav .ativa, aside.lateral .aba.ativa, aside.lateral nav button.ativo, aside.lateral nav a.on {
  background: rgba(255,255,255,.16) !important; color: #fff !important; box-shadow: inset 3px 0 0 var(--jmj-ciano) !important;
}
aside.lateral nav .ativo svg, aside.lateral .aba.ativa svg, aside.lateral nav .ativa svg { color: #fff !important; stroke: currentColor; }
aside.lateral nav .ativo::before, aside.lateral nav .ativa::before, aside.lateral .aba.ativa::before { display: none !important; }
aside.lateral .nav-grupo, aside.lateral .nav-sec, aside.lateral nav .grp, aside.lateral .sec {
  font-family: var(--jmj-mono) !important; font-size: 10.5px !important; letter-spacing: .14em !important; text-transform: uppercase !important; color: rgba(255,255,255,.62) !important; font-weight: 500 !important;
}
aside.lateral .busca-atalho, aside.lateral .lat-recolher { border-radius: 0 !important; border: 1px solid rgba(255,255,255,.28) !important; background: transparent !important; color: #fff !important; }
aside.lateral kbd { background: rgba(255,255,255,.14) !important; color: #fff !important; }
aside.lateral kbd { border-radius: 0 !important; font-family: var(--jmj-mono) !important; }
aside.lateral .lat-pe, aside.lateral .jmj-pe-menu { border-top: 1px solid rgba(255,255,255,.22) !important; }
aside.lateral .avatar, aside.lateral .jmj-avatar, aside.lateral .av { background-color: #fff !important; background-image: none !important; color: var(--jmj-azul) !important; font-family: var(--jmj-mono) !important; font-weight: 500 !important; }
aside.lateral .lat-quem b, aside.lateral .jmj-quem b { font-weight: 600 !important; }
aside.lateral .lat-quem small, aside.lateral .jmj-quem small { color: rgba(255,255,255,.72) !important; }
aside.lateral .lat-sair, aside.lateral .jmj-sair { border-radius: 0 !important; color: #fff !important; }
aside.lateral .lat-rodape:not(.jmj-pe-menu), aside.lateral .jmj-info { font-family: var(--jmj-mono) !important; font-size: 10px !important; letter-spacing: 0; color: rgba(255,255,255,.72) !important; }
aside.lateral .jmj-pe-menu { font-family: var(--jmj-fonte) !important; }
aside.lateral .lat-nome { border-left: 1px solid rgba(255,255,255,.22); padding-left: 12px; min-width: 0; }
aside.lateral .lat-nome b { white-space: normal !important; font-size: 14px !important; }
aside.lateral .lat-link, aside.lateral .jmj-link, aside.lateral .lat-rodape-link { color: #fff !important; font-family: inherit !important; }
.jmj-avatar, .avatar { font-family: var(--jmj-mono); }

/* Barra superior do celular: azul, símbolo negativo */
.topo-movel { background: var(--jmj-azul) !important; }

/* ===== Cartões e painéis: branco, filete de 1 px, sem sombra ===== */
.painel, .cartao, .card, .indicadores, .kpi, .bloco, .caixa, .modal, .modal-caixa, .jmj-modal, .tabela-caixa, .tabela-wrap {
  border-radius: 0 !important; box-shadow: none !important;
}
.jmj-modal { border: 1px solid var(--jmj-cinza); }
.jmj-prim { background: var(--jmj-azul) !important; border-color: var(--jmj-azul) !important; }
.jmj-bt, .jmj-modal input, .jmj-sair { border-radius: 0 !important; }
.jmj-veu { background: rgba(0,1,3,.55) !important; }

/* Números de indicador na Geist Mono */
.num, .kpi-valor, .kpi b, .indicador b.num, .card-valor, .valor-grande, .metric-value { font-family: var(--jmj-mono) !important; font-weight: 500 !important; letter-spacing: -0.02em; }
table th { font-family: var(--jmj-mono) !important; font-weight: 500 !important; letter-spacing: .06em; }
td, th { font-variant-numeric: tabular-nums; }

/* ===== Tela de entrada no padrão comum: azul à esquerda (capa), formulário no branco ===== */
.entrada .entrada-azul {
  background: var(--jmj-azul) !important; border-top: 3px solid var(--jmj-ciano);
}
.entrada .entrada-azul canvas { display: none !important; }
.entrada .entrada-marca img { height: 36px !important; width: auto !important; }
.entrada .entrada-marca small, .entrada .entrada-tese p { color: rgba(255,255,255,.82) !important; }
.entrada .entrada-marca span { background: rgba(255,255,255,.3) !important; }
.entrada .entrada-tese h1 { font-weight: 600 !important; letter-spacing: -0.02em; }
.entrada .entrada-etapas span { font-family: var(--jmj-mono) !important; text-transform: uppercase; letter-spacing: .1em; font-size: 11px !important; color: #fff !important; }
.entrada .entrada-etapas i { background: var(--jmj-ciano) !important; border-radius: 0 !important; }
.entrada .entrada-branca { background: #fff !important; }
.entrada h2 { font-weight: 600 !important; }
.entrada .campo span { font-family: var(--jmj-mono) !important; text-transform: uppercase; letter-spacing: .1em; font-size: 10.5px !important; color: var(--jmj-texto-2) !important; }
.entrada input.ent { background: #fff !important; border: 1px solid var(--jmj-cinza) !important; }

/* Pipeline e MyLeads: a caixa central vira tela dividida igual à do CRM */
.login {
  background: #fff !important; display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(360px, 520px) !important;
  place-items: stretch !important; padding: 0 !important; min-height: 100vh;
}
.login::before {
  content: var(--jmj-capa-texto, "Visibilidade, controle e ação para operações que não podem parar.");
  display: block; background-color: var(--jmj-azul); border-top: 3px solid var(--jmj-ciano);
  background-image: url("jmjtech-neg.svg"); background-repeat: no-repeat; background-position: 56px 52px; background-size: auto 40px;
  color: #fff; font-family: var(--jmj-fonte); font-weight: 600; font-size: clamp(28px, 3.2vw, 44px); line-height: 1.12; letter-spacing: -0.02em;
  padding: 0 56px 64px; display: flex; align-items: flex-end; white-space: pre-line;
}
.login .login-caixa {
  background: #fff !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; backdrop-filter: none !important;
  align-self: center !important; justify-self: center !important; width: min(380px, calc(100% - 64px)) !important; max-width: none !important; padding: 0 !important; color: var(--jmj-preto) !important;
}
.login .login-marca { gap: 0 !important; padding: 0 !important; justify-content: flex-start !important; align-self: flex-start !important; margin-bottom: 28px !important; width: 100%; }
.login .login-nome { text-align: left !important; }
.login .login-link { align-self: flex-start; text-align: left; padding-left: 0 !important; }
.login .login-marca img { display: none !important; }
.login .login-fio { display: none !important; }
.login .login-nome b { color: var(--jmj-preto) !important; font-size: 28px !important; font-weight: 600 !important; letter-spacing: -0.02em; }
.login .login-nome small { display: block !important; color: var(--jmj-texto-3) !important; font-family: var(--jmj-mono) !important; font-size: 0 !important; letter-spacing: .12em; }
.login .login-nome small::after { content: "Acesso com e-mail JMJtech"; font-size: 11px; text-transform: uppercase; }
.login .login-rot { color: var(--jmj-texto-2) !important; font-family: var(--jmj-mono) !important; letter-spacing: .1em !important; font-size: 10.5px !important; }
.login .login-campo { background: #fff !important; border: 1px solid var(--jmj-cinza) !important; color: var(--jmj-preto) !important; }
.login .login-campo::placeholder { color: var(--jmj-texto-3) !important; }
.login .login-link { color: var(--jmj-azul) !important; }
.login .login-erro, .login .erro { color: #C42B2F !important; }
@media (max-width: 860px) {
  .login { grid-template-columns: 1fr !important; grid-template-rows: auto 1fr; }
  .login::before { min-height: 220px; font-size: 24px; padding: 0 24px 28px; background-position: 24px 28px; background-size: auto 34px; }
  .login .login-caixa { padding: 32px 0 !important; }
}

/* ===== Destaques: azul chapado (sem degradê), filete ciano no topo ===== */
.radar, .ent-exec, .evo-sintese, .ia-leitura, .rede-kpis div {
  background: var(--jmj-azul) !important; border-radius: 0 !important; box-shadow: none !important; border-top: 2px solid var(--jmj-ciano) !important;
}
.radar .alternador, .radar .radar-faixa { border-radius: 0 !important; }
.radar .alternador button { border-radius: 0 !important; }
.radar .alternador { border-color: rgba(255,255,255,.3) !important; }
.radar .alternador button { color: #fff !important; }
.radar .alternador button.ativo { background: #fff !important; color: var(--jmj-azul) !important; }
.rede { background: var(--jmj-azul) !important; }
.rede-seg button.on { background: #fff !important; color: var(--jmj-azul) !important; }
.rp-bt.primario { background: var(--jmj-azul) !important; }
.cluster { background: rgba(255,255,255,.16) !important; border: 1px solid rgba(255,255,255,.7); }
.barra i, .barra.progresso i, .comp-parceiros .pb, .cobertura > div { background: var(--jmj-azul) !important; }
.login .login-marca > svg { margin-right: 12px; flex: none; }
.login .login-marca > svg rect, .login .login-marca > svg path { fill: var(--jmj-azul) !important; stroke: var(--jmj-azul) !important; }

/* Pipeline: rodapé do menu no mesmo desenho do CRM, do MyLeads e do Volta */
.app:not(.recolhida) aside.lateral .jmj-pe-pipeline .lat-estado { display: none !important; }
.app:not(.recolhida) aside.lateral .jmj-pe-pipeline { padding: 14px 14px 12px !important; }
.app:not(.recolhida) aside.lateral .jmj-pe-pipeline .lat-usuario { margin: 0 !important; gap: 10px !important; padding: 0 !important; border: 0 !important; }
aside.lateral .jmj-pe-pipeline .avatar { width: 30px !important; height: 30px !important; font-size: 11.5px !important; }
aside.lateral .jmj-pe-pipeline .lat-quem b { font-size: 13px !important; color: #fff !important; }
aside.lateral .jmj-pe-pipeline .lat-quem small { font-size: 11.5px !important; text-transform: none !important; }
aside.lateral .jmj-pe-pipeline .lat-usuario .topo-bt { background: transparent !important; border: 0 !important; color: #fff !important; font: inherit !important; font-size: 13px !important; padding: 4px 6px !important; min-height: 0 !important; height: auto !important; box-shadow: none !important; }
aside.lateral .jmj-pe-pipeline .lat-usuario .topo-bt:hover { background: rgba(255,255,255,.12) !important; }
aside.lateral .jmj-pe-pipeline .lat-rodape { margin-top: 10px !important; gap: 2px !important; line-height: 1.5; }
aside.lateral .jmj-pe-pipeline .lat-rodape-versao { display: none !important; }
aside.lateral .jmj-pe-pipeline .lat-rodape-link { color: #fff !important; text-decoration: underline; }