:root {
  --petroleo: #0D2B33; --petroleo-2: #164049; --grao: #E9A33C; --nascente: #70CAC3; --cal: #F3F2EE;
  --fundo: #F4F5F3; --superficie: #FFFFFF; --superficie-2: #FAFBF9; --cab: #E4ECEB; --cab-2: #F7F8F6;
  --texto: #14262B; --texto-2: #4A5D61; --texto-3: #5C6E72; --borda: #DADFDC; --borda-2: #EEF0EC; --borda-campo: #C3CAC6;
  --link: #1F5F66; --foco: #E9A33C;
  --ok-bg: #DCEFEC; --ok: #0D4A47; --atencao-bg: #F6E7CC; --atencao: #6B4410; --erro-bg: #F6DAD3; --erro: #8E2A14; --neutro-bg: #E6E8E5; --neutro: #4A5D61;
  --destaque-menu: #F6E7CC;
  color-scheme: light;
}
html[data-tema="escuro"] {
  --fundo: #0A2026; --superficie: #0F2E36; --superficie-2: #12353E; --cab: #164049; --cab-2: #12353E;
  --texto: #F3F2EE; --texto-2: #C7D3D3; --texto-3: #9FB4B5; --borda: #24505A; --borda-2: #1C444D; --borda-campo: #3A6A73;
  --link: #8FD8D2; --ok-bg: #154A45; --ok: #BFEDE7; --atencao-bg: #4A3511; --atencao: #F6D9A6; --erro-bg: #4F2015; --erro: #F7C5B8; --neutro-bg: #22444C; --neutro: #C7D3D3;
  --destaque-menu: #25505A;
  color-scheme: dark;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: "IBM Plex Sans", system-ui, sans-serif; font-size: 14px; color: var(--texto); background: var(--fundo); }
a { color: var(--link); }
a:hover { color: var(--texto); }
:focus-visible { outline: 2px solid var(--foco); outline-offset: 1px; }
h1 { font-size: 20px; font-weight: 600; margin: 0; }
h2 { font-size: 15px; font-weight: 600; margin: 0; }
.sr { position: absolute; left: -9999px; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--texto-3); font-size: 13px; }

/* ---- barra superior ---- */
.topbar { min-height: 60px; background: var(--superficie); border-bottom: 1px solid var(--borda); display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; padding: 0 12px; position: sticky; top: 0; z-index: 10; }
.icone { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: none; border-radius: 4px; color: var(--texto); cursor: pointer; }
.icone:hover { background: var(--cab); }
.icone svg { width: 20px; height: 20px; }
.topbar .marca { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 500; margin-left: 4px; color: var(--texto); text-decoration: none; }
.topbar .marca b { font-weight: 700; }
.topbar .marca .simbolo { width: 26px; height: 26px; color: var(--petroleo); }
html[data-tema="escuro"] .topbar .marca .simbolo { color: var(--cal); }
.topbar .sep { width: 1px; height: 24px; background: var(--borda); margin: 0 8px; }
.topbar .busca { flex: 1 1 240px; display: flex; justify-content: center; }
.topbar .busca input { width: 100%; max-width: 420px; height: 36px; padding: 0 12px; border: 1px solid var(--borda-campo); border-radius: 4px; background: var(--superficie-2); color: var(--texto); font: inherit; font-size: 13px; }
.topbar .usuario { display: flex; align-items: center; gap: 8px; }
.topbar .usuario .info { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.3; }
.topbar .usuario .info span:first-child { font-size: 13px; font-weight: 600; }
.topbar .usuario .info span:last-child { font-size: 11px; color: var(--texto-3); }
.topbar form { margin: 0; }
.menu-movel { display: none; }

/* ---- layout ---- */
.layout { display: flex; min-height: calc(100vh - 60px); }
.menu { width: 260px; flex: none; background: var(--superficie); border-right: 1px solid var(--borda); padding: 8px 0 24px; }
.menu details > summary { list-style: none; display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 16px; font-weight: 600; cursor: pointer; color: var(--texto-2); }
.menu details > summary::-webkit-details-marker { display: none; }
.menu details[open] > summary { color: var(--texto); }
.menu details > summary svg { width: 16px; height: 16px; fill: var(--texto-3); }
.menu details[open] > summary svg { fill: var(--grao); }
.menu .itens { margin: 0 0 6px 24px; border-left: 1px solid var(--borda-2); }
.menu .item { display: flex; align-items: center; justify-content: space-between; min-height: 34px; padding: 0 12px; font-size: 13.5px; color: var(--texto); text-decoration: none; }
.menu .item:hover { background: var(--cab-2); }
.menu .item.ativo { background: var(--destaque-menu); font-weight: 600; }
.menu .item.breve { color: var(--texto-3); cursor: default; }
.menu .item.breve small { font-size: 10.5px; border: 1px solid var(--borda); border-radius: 3px; padding: 0 5px; }
.menu .inicio { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 16px; font-weight: 600; color: var(--texto); text-decoration: none; }
.menu .inicio.ativo { background: var(--destaque-menu); }
.conteudo { flex: 1; min-width: 0; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.caminho { font-size: 12.5px; color: var(--texto-3); }
.cabecalho { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.cabecalho .titulo { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.acoes { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* ---- botões ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; height: 36px; padding: 0 12px; border: 1px solid var(--borda-campo); border-radius: 4px; background: var(--superficie); color: var(--texto); font: inherit; font-size: 13px; font-weight: 500; text-decoration: none; cursor: pointer; white-space: nowrap; }
.btn:hover { border-color: var(--texto-3); color: var(--texto); }
.btn-pri { background: var(--petroleo); border-color: var(--petroleo); color: var(--cal); font-weight: 600; }
.btn-pri:hover { background: var(--petroleo-2); color: var(--cal); }
html[data-tema="escuro"] .btn-pri { background: var(--grao); border-color: var(--grao); color: var(--petroleo); }
.btn-link { border: 0; background: none; padding: 0; height: auto; color: var(--link); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.btn-link.perigo { color: var(--erro); }
form.inline { display: inline; margin: 0; }

/* ---- painéis, tabelas, etiquetas ---- */
.painel { background: var(--superficie); border: 1px solid var(--borda); border-radius: 4px; overflow: hidden; }
.painel-cab { background: var(--cab); padding: 9px 14px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.painel-corpo { padding: 14px 16px; }
.rolagem { overflow-x: auto; }
table.grade { width: 100%; border-collapse: collapse; font-size: 13px; }
table.grade th { text-align: left; font-weight: 600; padding: 9px 12px; background: var(--cab); color: var(--texto); white-space: nowrap; }
table.grade td { padding: 9px 12px; border-top: 1px solid var(--borda-2); vertical-align: top; }
table.grade tr.inativo td { color: var(--texto-3); }
table.grade .dir { text-align: right; }
.vazio { padding: 16px; color: var(--texto-3); font-size: 13px; }
.tag { display: inline-block; font-size: 11.5px; font-weight: 600; padding: 2px 7px; border-radius: 3px; white-space: nowrap; }
.tag.ok { background: var(--ok-bg); color: var(--ok); }
.tag.atencao { background: var(--atencao-bg); color: var(--atencao); }
.tag.erro { background: var(--erro-bg); color: var(--erro); }
.tag.neutro { background: var(--neutro-bg); color: var(--neutro); }
.tag.prod { background: transparent; border: 1px solid var(--borda-campo); color: var(--link); }
.resumo { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); background: var(--superficie); border: 1px solid var(--borda); border-radius: 4px; }
.resumo > a, .resumo > div { padding: 12px 16px; border-right: 1px solid var(--borda-2); display: flex; flex-direction: column; gap: 3px; text-decoration: none; color: var(--texto); }
.resumo .rot { font-size: 12px; color: var(--texto-3); }
.resumo .val { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.resumo .nota { font-size: 12px; color: var(--texto-3); }

/* ---- abas, filtros ---- */
.abas { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 1px solid var(--borda); }
.abas a { display: inline-flex; align-items: center; gap: 4px; height: 40px; padding: 0 14px; border-bottom: 3px solid transparent; color: var(--texto); text-decoration: none; font-size: 13.5px; }
.abas a.ativa { border-bottom-color: var(--grao); font-weight: 600; }
.abas a small { color: var(--texto-3); font-size: 12.5px; }
.filtros { background: var(--superficie); border: 1px solid var(--borda); border-radius: 4px; padding: 10px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.filtros input[type=search] { flex: 1 1 260px; height: 36px; padding: 0 12px; border: 1px solid var(--borda-campo); border-radius: 4px; background: var(--superficie); color: var(--texto); font: inherit; font-size: 13px; }
.filtros select { height: 34px; padding: 0 10px; border: 1px solid var(--borda-campo); border-radius: 999px; background: var(--superficie); color: var(--texto); font: inherit; font-size: 13px; }
.filtros select.ativo { border-color: var(--petroleo-2); background: var(--cab); font-weight: 600; }

/* ---- formulários ---- */
.form-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px 14px; }
.campo { display: flex; flex-direction: column; gap: 4px; }
.campo.largo { grid-column: 1 / -1; }
.campo label, .campo .rotulo { font-size: 12px; font-weight: 600; color: var(--texto-2); }
.campo input, .campo select, .campo textarea { height: 36px; padding: 0 10px; border: 1px solid var(--borda-campo); border-radius: 4px; background: var(--superficie); color: var(--texto); font: inherit; font-size: 13px; }
.campo textarea { height: auto; min-height: 70px; padding: 8px 10px; resize: vertical; }
.campo.com-erro input, .campo.com-erro select { border-color: var(--erro); }
.campo .erro { font-size: 12.5px; color: var(--erro); }
.campo .ajuda { font-size: 12px; color: var(--texto-3); }
.checks { display: flex; flex-wrap: wrap; gap: 14px; min-height: 36px; align-items: center; }
.checks label { display: flex; gap: 6px; align-items: center; font-size: 13px; font-weight: 400; color: var(--texto); }
.checks input { width: 16px; height: 16px; accent-color: var(--petroleo); }
.secao { font-size: 13px; font-weight: 600; color: var(--texto-2); border-bottom: 1px solid var(--borda-2); padding-bottom: 6px; grid-column: 1 / -1; margin-top: 6px; }
.rodape-form { display: flex; gap: 6px; padding-top: 4px; }
.leitura { min-height: 36px; display: flex; align-items: center; padding: 0 10px; border: 1px solid var(--borda); border-radius: 4px; background: var(--superficie-2); font-size: 13px; }

/* ---- mensagens ---- */
.msg { border-radius: 4px; padding: 10px 14px; font-size: 13px; font-weight: 600; }
.msg.ok { background: var(--ok-bg); color: var(--ok); }
.msg.erro { background: var(--erro-bg); color: var(--erro); }
.msg.info { background: var(--atencao-bg); color: var(--atencao); }

/* ---- login ---- */
.login-fundo { min-height: 100vh; background: var(--petroleo); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding: 40px 16px; position: relative; overflow: hidden; }
.login-fundo svg.malha { position: absolute; inset: 0; width: 100%; height: 100%; }
.login-cartao { position: relative; width: 100%; max-width: 400px; background: #FFFFFF; color: #14262B; border-radius: 6px; padding: 32px 32px 24px; display: flex; flex-direction: column; gap: 16px; }
.login-cartao .campo input { background: #FFFFFF; color: #14262B; border-color: #C3CAC6; }
.login-cartao .campo label { color: #4A5D61; }
.login-cartao .btn-pri { height: 44px; background: #0D2B33; color: #F3F2EE; border-color: #0D2B33; }
.login-rodape { position: relative; text-align: center; color: #B9CFCF; font-size: 13px; }
.logo-reservado { display: flex; align-items: center; justify-content: center; border: 1px dashed #8A9A9D; border-radius: 4px; color: #5C6E72; font-size: 11px; }

@media (max-width: 860px) {
  .menu { position: fixed; top: 60px; bottom: 0; left: 0; z-index: 9; transform: translateX(-100%); transition: transform .15s; overflow-y: auto; }
  body.menu-aberto .menu { transform: none; box-shadow: 0 0 0 100vmax rgba(0,0,0,.35); }
  .menu-movel { display: inline-flex; }
  .topbar .usuario .info, .topbar .marca, .topbar .sep { display: none; }
  .topbar .busca { order: 10; flex-basis: 100%; padding-bottom: 8px; }
}

/* ---- CRM: alternar modo, quadro (kanban) e painel lateral ---- */
.alternar { display: inline-flex; border: 1px solid var(--borda-campo); border-radius: 4px; overflow: hidden; }
.alternar a { height: 34px; padding: 0 12px; display: inline-flex; align-items: center; font-size: 13px; color: var(--texto); text-decoration: none; }
.alternar a + a { border-left: 1px solid var(--borda-campo); }
.alternar a.ativo { background: var(--petroleo); color: var(--cal); font-weight: 600; }
html[data-tema="escuro"] .alternar a.ativo { background: var(--grao); color: var(--petroleo); }
.quadro-aviso { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font-size: 12.5px; }
.quadro { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 8px; align-items: flex-start; min-height: 320px; }
.coluna { flex: 0 0 248px; background: var(--cab-2); border: 1px solid var(--borda); border-radius: 4px; display: flex; flex-direction: column; max-height: calc(100vh - 250px); }
.coluna > header { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 9px 10px; background: var(--cab); font-size: 12.5px; font-weight: 600; border-radius: 4px 4px 0 0; }
.coluna > header small { font-weight: 600; color: var(--texto-2); background: var(--superficie); border-radius: 999px; padding: 0 8px; }
.coluna.col-ganho > header { background: var(--ok-bg); color: var(--ok); }
.coluna.col-perdido > header { background: var(--neutro-bg); color: var(--neutro); }
.coluna .cartoes { padding: 8px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; min-height: 60px; }
.coluna.alvo { outline: 2px dashed var(--grao); outline-offset: -2px; }
.cartao { display: flex; flex-direction: column; gap: 3px; padding: 9px 10px; background: var(--superficie); border: 1px solid var(--borda); border-radius: 4px; color: var(--texto); text-decoration: none; font-size: 13px; cursor: grab; }
.cartao:hover { border-color: var(--texto-3); color: var(--texto); }
.cartao.aberto { border-color: var(--grao); box-shadow: inset 3px 0 0 var(--grao); }
.cartao.arrastando { opacity: .45; }
.cartao strong { font-weight: 600; line-height: 1.3; }
.cartao .muted { font-size: 12px; }
.cartao .pequeno { font-size: 12px; color: var(--texto-2); }
.cartao .passo { font-size: 12px; color: var(--texto-2); border-top: 1px solid var(--borda-2); padding-top: 4px; margin-top: 2px; }
.cartao .passo b { font-weight: 600; color: var(--texto); }
table.grade tr.selecionada td { background: var(--destaque-menu); }
.painel-fundo { position: fixed; inset: 60px 0 0 0; background: rgba(10, 32, 38, .28); z-index: 20; }
.painel-lateral { position: fixed; top: 60px; right: 0; bottom: 0; width: min(480px, 100%); background: var(--superficie); border-left: 1px solid var(--borda); z-index: 21; display: flex; flex-direction: column; box-shadow: -8px 0 24px rgba(10, 32, 38, .12); }
.pl-cab { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; padding: 14px 16px; border-bottom: 1px solid var(--borda); background: var(--cab-2); }
.pl-corpo { padding: 14px 16px 32px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }
.pl-linha { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pl-linha .rotulo { font-size: 12px; font-weight: 600; color: var(--texto-2); }
.pl-linha select { flex: 1; min-width: 160px; height: 36px; padding: 0 10px; border: 1px solid var(--borda-campo); border-radius: 4px; background: var(--superficie); color: var(--texto); font: inherit; font-size: 13px; }
.pl-bloco { border-top: 1px solid var(--borda-2); padding-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.pl-bloco h3 { font-size: 13px; font-weight: 600; margin: 0; color: var(--texto-2); text-transform: uppercase; letter-spacing: .03em; }
.pl-bloco.destaque { border: 1px solid var(--grao); border-radius: 4px; padding: 12px; background: var(--atencao-bg); color: var(--texto); }
html[data-tema="escuro"] .pl-bloco.destaque { color: var(--atencao); }
.pl-grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pl-contato { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; font-size: 13px; padding: 6px 0; border-bottom: 1px solid var(--borda-2); }
.pl-contato.inativo { opacity: .55; }
.pl-dados { display: grid; grid-template-columns: 150px 1fr; gap: 4px 10px; margin: 0; font-size: 13px; }
.pl-dados dt { color: var(--texto-3); }
.pl-dados dd { margin: 0; overflow-wrap: anywhere; }
.linha-tempo { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 13px; }
.linha-tempo li { border-left: 2px solid var(--borda); padding-left: 10px; display: flex; flex-direction: column; gap: 3px; }
.linha-tempo li > span:first-child { align-self: flex-start; }
.agenda li { display: flex; gap: 10px; }
@media (max-width: 560px) {
  .pl-grade { grid-template-columns: 1fr; }
  .pl-grade .campo { grid-column: auto !important; }
  .pl-dados { grid-template-columns: 1fr; }
}

/* ---- Orçamentos ---- */
.cartao .valor-card { font-size: 12px; font-weight: 600; color: var(--ok); }
.itens-orc td { vertical-align: top; padding: 6px 8px; }
.itens-orc .ent { width: 100%; height: 34px; padding: 0 8px; border: 1px solid var(--borda-campo); border-radius: 4px; background: var(--superficie); color: var(--texto); font: inherit; font-size: 13px; }
.itens-orc textarea.ent.det { height: 30px; min-height: 30px; margin-top: 4px; padding: 5px 8px; resize: vertical; font-size: 12px; color: var(--texto-2); }
.itens-orc .ent.num { text-align: right; }
.desc { display: flex; gap: 4px; }
.desc select, .itens-orc .desc select.ent { width: 60px; flex: none; height: 34px; padding: 0 4px; border: 1px solid var(--borda-campo); border-radius: 4px; background: var(--superficie); color: var(--texto); font: inherit; font-size: 13px; }
.desc input, .itens-orc .desc input.ent { min-width: 0; flex: 1; height: 34px; padding: 0 8px; border: 1px solid var(--borda-campo); border-radius: 4px; background: var(--superficie); color: var(--texto); font: inherit; font-size: 13px; text-align: right; }
.sel-catalogo { height: 34px; max-width: 360px; padding: 0 10px; border: 1px solid var(--borda-campo); border-radius: 4px; background: var(--superficie); color: var(--texto); font: inherit; font-size: 13px; }
.totais-orc { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 12px; }
.bloco-total { border: 1px solid var(--borda); border-radius: 4px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; background: var(--superficie-2); }
.bloco-total h3 { margin: 0; font-size: 13px; font-weight: 600; color: var(--texto-2); }
.bloco-total .linha { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13px; }
.bloco-total .linha .desc { width: 170px; }
.bloco-total .linha.total { border-top: 1px solid var(--borda); padding-top: 8px; font-weight: 600; font-size: 16px; }
.bloco-total .linha.com-erro input { border-color: var(--erro); }
.bloco-total .erro { font-size: 12.5px; color: var(--erro); }
.tela-modelo { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; border-bottom: 1px solid var(--borda-2); }
.tela-modelo img { width: 260px; max-width: 100%; border: 1px solid var(--borda); border-radius: 4px; }
.tela-modelo.inativo { opacity: .55; }

/* ---- Início ---- */
.hero { position: relative; overflow: visible; background: var(--petroleo); color: var(--cal); border-radius: 6px; padding: 26px 28px 18px; display: flex; flex-direction: column; gap: 14px; }
.hero-malha { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 6px; pointer-events: none; }
.hero > *:not(.hero-malha) { position: relative; }
.hero-data { margin: 0; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--grao); font-weight: 600; }
.hero h1 { font-size: 28px; font-weight: 600; color: #fff; margin: 4px 0 0; letter-spacing: -.01em; }
.comando { z-index: 3; display: flex; align-items: center; gap: 10px; max-width: 720px; height: 50px; padding: 0 14px; background: #fff; border-radius: 6px; color: #14262B; box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.comando svg { width: 20px; height: 20px; color: #5C6E72; flex: none; }
.comando input { flex: 1; min-width: 0; border: 0; outline: 0; font: inherit; font-size: 15px; background: transparent; color: #14262B; }
.comando kbd { font: inherit; font-size: 11px; color: #5C6E72; border: 1px solid #DADFDC; border-radius: 4px; padding: 2px 6px; white-space: nowrap; }
.comando:focus-within { outline: 2px solid var(--grao); outline-offset: 2px; }
.sugestoes { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: var(--superficie); border: 1px solid var(--borda); border-radius: 6px; box-shadow: 0 10px 28px rgba(10,32,38,.22); overflow: hidden; z-index: 30; text-align: left; }
.busca { position: relative; }
.sugestoes a { display: grid; grid-template-columns: 82px 1fr; gap: 2px 10px; padding: 9px 12px; color: var(--texto); text-decoration: none; font-size: 13px; border-top: 1px solid var(--borda-2); }
.sugestoes a:first-child { border-top: 0; }
.sugestoes a.ativa, .sugestoes a:hover { background: var(--destaque-menu); }
.sugestoes a .tag { grid-row: span 2; align-self: center; justify-self: start; }
.sugestoes a span.sub { color: var(--texto-3); font-size: 12px; }
.sugestoes .nada { padding: 10px 12px; font-size: 13px; color: var(--texto-3); }
.hero-atalhos { display: flex; flex-wrap: wrap; gap: 6px; }
.hero-atalhos a { font-size: 12.5px; font-weight: 600; color: var(--cal); text-decoration: none; border: 1px solid #3C6B73; border-radius: 999px; padding: 5px 12px; }
.hero-atalhos a:hover { background: var(--petroleo-2); color: #fff; }
.trilho { display: flex; margin-top: 10px; padding-top: 6px; overflow-x: auto; }
.trilho .no { flex: 1 0 96px; display: flex; flex-direction: column; align-items: center; gap: 4px; position: relative; text-decoration: none; color: #8FB0B1; padding: 0 4px 4px; }
.trilho .no::before { content: ""; position: absolute; top: 33px; left: -50%; right: 50%; height: 2px; background: #2A5560; }
.trilho .no:first-child::before { display: none; }
.trilho .no.cheio::before { background: var(--nascente); }
.trilho .qtd { font-size: 20px; font-weight: 600; color: #5E8186; font-variant-numeric: tabular-nums; line-height: 1; }
.trilho .no.cheio .qtd { color: #fff; }
.trilho .ponto { width: 12px; height: 12px; border-radius: 50%; background: var(--petroleo); border: 2px solid #3C6B73; position: relative; z-index: 1; }
.trilho .no.cheio .ponto { background: var(--grao); border-color: var(--grao); }
.trilho .no.ganho.cheio .ponto { background: var(--nascente); border-color: var(--nascente); }
.trilho .nome { font-size: 11.5px; text-align: center; line-height: 1.25; }
.trilho .no.cheio .nome { color: var(--cal); }
.trilho .valor { font-size: 11px; color: var(--grao); font-weight: 600; white-space: nowrap; }
.trilho .no:hover .nome { text-decoration: underline; }
.inicio-grade { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.coluna-dir { display: flex; flex-direction: column; gap: 12px; }
.dia-grupo { margin: 0; padding: 12px 16px 4px; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--texto-3); font-weight: 600; }
.dia-grupo.atras { color: var(--atencao); }
.dia-lista { list-style: none; margin: 0; padding: 0 8px 6px; }
.dia-lista li { display: flex; align-items: center; gap: 10px; padding: 4px 8px; border-radius: 4px; }
.dia-lista li:hover { background: var(--cab-2); }
.dia-quando { width: 44px; flex: none; font-size: 12px; font-weight: 600; color: var(--texto-2); }
.dia-item { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; padding: 6px 0; text-decoration: none; color: var(--texto); border-left: 3px solid var(--grao); padding-left: 10px; }
.dia-item strong { font-weight: 600; font-size: 13.5px; }
.dia-item span { font-size: 12.5px; color: var(--texto-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dia-wpp { width: 34px; height: 34px; color: #1F8F5F; }
.dia-wpp svg { width: 18px; height: 18px; }
.dia-vazio { padding: 22px 16px; font-size: 13.5px; color: var(--texto-2); }
.dia-rodape { display: block; padding: 10px 16px; border-top: 1px solid var(--borda-2); font-size: 12.5px; font-weight: 600; text-decoration: none; }
.proposta-linha { display: flex; flex-direction: column; gap: 4px; padding: 11px 16px; border-top: 1px solid var(--borda-2); color: var(--texto); text-decoration: none; }
.proposta-linha:first-of-type { border-top: 0; }
.proposta-linha:hover { background: var(--cab-2); }
.pl-topo { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; }
.pl-meio { font-size: 12px; }
.barra-validade { height: 4px; border-radius: 2px; background: var(--borda-2); overflow: hidden; }
.barra-validade span { display: block; height: 100%; background: var(--nascente); }
.barra-validade span.quase { background: var(--grao); }
.rascunhos { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 10px 16px; border-top: 1px solid var(--borda-2); font-size: 12.5px; }
.recentes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: 8px; padding: 12px; }
.recentes a { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border: 1px solid var(--borda); border-radius: 4px; text-decoration: none; color: var(--texto); font-size: 13px; }
.recentes a:hover { border-color: var(--texto-3); }
.recentes a .tag { align-self: flex-start; }
.recentes a .muted { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lista-busca { grid-template-columns: 1fr; }
@media (max-width: 1000px) { .inicio-grade { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .hero { padding: 20px 16px 14px; } .hero h1 { font-size: 22px; } .comando kbd { display: none; } }
.topbar .busca .sugestoes { left: 50%; right: auto; transform: translateX(-50%); width: min(420px, 100%); }

/* ---- Mapa ---- */
.mapa { height: 420px; background: var(--cab-2); z-index: 0; }
.mapa .leaflet-tile-pane { filter: grayscale(.85) contrast(.92) brightness(1.04); }
html[data-tema="escuro"] .mapa .leaflet-tile-pane { filter: grayscale(1) invert(.92) hue-rotate(180deg) brightness(.85) contrast(.9); }
.mapa-filtros { display: flex; gap: 6px; flex-wrap: wrap; }
.chip-mapa { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border: 1px solid var(--borda-campo); border-radius: 999px; background: var(--superficie); font-size: 12.5px; font-weight: 600; cursor: pointer; user-select: none; }
.chip-mapa input { position: absolute; opacity: 0; pointer-events: none; }
.chip-mapa .bol { width: 10px; height: 10px; border-radius: 50%; }
.chip-mapa.cli .bol { background: var(--petroleo); box-shadow: 0 0 0 2px var(--nascente); }
.chip-mapa.lead .bol { background: var(--grao); }
.chip-mapa b { font-variant-numeric: tabular-nums; color: var(--texto-2); }
.chip-mapa:has(input:not(:checked)) { opacity: .5; text-decoration: line-through; }
.chip-mapa:has(input:focus-visible) { outline: 2px solid var(--foco); outline-offset: 1px; }
.leaflet-marker-icon.pino { display: flex; align-items: center; justify-content: center; border-radius: 50%; font: 600 12px "IBM Plex Sans", sans-serif; box-shadow: 0 2px 6px rgba(0,0,0,.35); border: 2px solid #fff; }
.pino span { line-height: 1; }
.pino-clientes { background: #0D2B33; color: #F3F2EE; border-color: #70CAC3; }
.pino-leads { background: #E9A33C; color: #0D2B33; }
.mapa-pop { font: 13px "IBM Plex Sans", sans-serif; min-width: 200px; }
.mapa-pop strong { font-size: 14px; }
.mapa-pop .grupo { margin-top: 8px; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #5C6E72; }
.mapa-pop .grupo.leads { color: #6B4410; }
.mapa-pop ul { margin: 2px 0 0; padding-left: 16px; max-height: 180px; overflow-y: auto; }
.mapa-pop li { margin: 2px 0; }
.mapa-pop small { color: #5C6E72; }
.mapa-rodape { padding: 8px 14px; font-size: 12px; border-top: 1px solid var(--borda-2); }
.leaflet-container a.leaflet-popup-close-button { color: #5C6E72; }
@media (max-width: 560px) { .mapa { height: 320px; } }

/* ---- Financeiro ---- */
.filtros input.mes-filtro { height: 34px; padding: 0 10px; border: 1px solid var(--borda-campo); border-radius: 999px; background: var(--superficie); color: var(--texto); font: inherit; font-size: 13px; }
.filtros input.mes-filtro.ativo { border-color: var(--petroleo-2); background: var(--cab); font-weight: 600; }
table.grade tfoot td { border-top: 2px solid var(--borda); padding: 9px 12px; }
.resultado-mes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 12px; }
.res-linhas { display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; }
.res-linhas > div { display: flex; justify-content: space-between; gap: 10px; }
.res-linhas .tot { border-top: 1px solid var(--borda); padding-top: 8px; font-size: 17px; }
.res-linhas .tot b { color: var(--ok); }
.res-linhas .tot.neg b { color: var(--erro); }
.barras-cat { display: flex; flex-direction: column; gap: 8px; font-size: 12.5px; }
.barras-cat > div { display: grid; grid-template-columns: 150px 1fr 100px; gap: 8px; align-items: center; }
.barras-cat .barra { height: 8px; background: var(--borda-2); border-radius: 4px; overflow: hidden; }
.barras-cat .barra span { display: block; height: 100%; background: var(--grao); }
.barras-cat b { text-align: right; font-weight: 600; }
@media (max-width: 1000px) { .fluxo-grade { grid-template-columns: 1fr !important; } }
.fin-linha { display: grid; grid-template-columns: 62px minmax(0, 1fr) 82px 96px auto; gap: 8px; align-items: center; padding: 9px 16px; border-top: 1px solid var(--borda-2); font-size: 13px; }
.fin-linha:first-of-type { border-top: 0; }
.fin-linha > a:not(.btn-link) { color: var(--texto); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fin-linha .num { text-align: right; }
.fin-linha .atrasado { color: var(--erro); font-weight: 600; }
@media (max-width: 560px) { .fin-linha { grid-template-columns: 60px 1fr auto; } .fin-linha > span.num:first-of-type { display: none; } }

/* ---- Chamados e projetos ---- */
.prio { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; }
.prio::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.prio-alta { color: var(--erro); } .prio-media { color: var(--atencao); } .prio-baixa { color: var(--texto-3); }
td.atrasado { color: var(--erro); font-weight: 600; }
.tipos-ch { gap: 8px 20px; }
.tipos-ch label span small { color: var(--texto-3); font-size: 12px; }
.projetos-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 12px; }
.projeto-cartao { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; text-decoration: none; color: var(--texto); }
.projeto-cartao:hover { border-color: var(--texto-3); }
.projeto-cartao strong { font-size: 15px; font-weight: 600; }
.pc-topo, .pc-rodape { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12.5px; }
.pc-rodape .atrasado { color: var(--erro); font-weight: 600; }
.progresso { height: 6px; border-radius: 3px; background: var(--borda-2); overflow: hidden; margin-top: 4px; }
.progresso span { display: block; height: 100%; background: var(--nascente); }
.acompanhamento { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.acompanhamento .prog { flex: 1 1 260px; }
.acompanhamento input[type=range] { accent-color: var(--petroleo); height: 36px; padding: 0; border: 0; background: none; }
.fases { display: flex; flex-direction: column; gap: 12px; }
.fase-n { display: inline-flex; width: 22px; height: 22px; border-radius: 50%; background: var(--grao); color: var(--petroleo); font-size: 12px; font-weight: 700; align-items: center; justify-content: center; margin-right: 8px; }
.tarefas { list-style: none; margin: 0; padding: 4px 0; }
.tarefas li { display: flex; align-items: center; gap: 10px; padding: 6px 14px; border-bottom: 1px solid var(--borda-2); font-size: 13.5px; }
.tarefas li.feita .t-nome { color: var(--texto-3); text-decoration: line-through; }
.tarefas .check { width: 22px; height: 22px; border: 2px solid var(--borda-campo); border-radius: 4px; background: var(--superficie); color: #fff; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.tarefas li.feita .check { background: var(--ok); border-color: var(--ok); }
.tarefas .t-nome { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tarefas .t-nome small { font-size: 12px; text-decoration: none; }
.t-horas { display: flex; gap: 4px; align-items: center; margin: 0; }
.t-horas input { width: 56px; height: 28px; padding: 0 6px; border: 1px solid var(--borda-campo); border-radius: 4px; background: var(--superficie); color: var(--texto); font: inherit; font-size: 12px; }
.nova-tarefa { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 14px; background: var(--superficie-2); }
.nova-tarefa input, .nova-tarefa select { height: 34px; padding: 0 8px; border: 1px solid var(--borda-campo); border-radius: 4px; background: var(--superficie); color: var(--texto); font: inherit; font-size: 13px; }
.nova-tarefa input[name=nome] { flex: 1 1 200px; }

/* ---- painéis (gráficos) ---- */
:root { --serie-1: #009688; --serie-2: #c98a1c; --serie-3: #5a6bd0; --serie-4: #9a4a32; --g-grade: #E8ECE9; --g-base: #A9B4B0; }
html[data-tema="escuro"] { --serie-1: #16a090; --serie-2: #c58719; --serie-3: #7d88e0; --serie-4: #c56649; --g-grade: #1E4851; --g-base: #4F7880; }
.paineis-topo { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 8px; }
.periodo { display: inline-flex; border: 1px solid var(--borda-campo); border-radius: 4px; overflow: hidden; background: var(--superficie); }
.periodo a { display: inline-flex; align-items: center; height: 34px; padding: 0 12px; font-size: 13px; color: var(--texto); text-decoration: none; border-left: 1px solid var(--borda-campo); }
.periodo a:first-child { border-left: 0; }
.periodo a.ativo { background: var(--petroleo); color: var(--cal); font-weight: 600; }
html[data-tema="escuro"] .periodo a.ativo { background: var(--grao); color: var(--petroleo); }
.resumo .val.alerta { color: var(--erro); }
.resumo .val.negativo { color: var(--erro); }
.paineis-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.paineis-grade .largo { grid-column: 1 / -1; }
@media (max-width: 1000px) { .paineis-grade { grid-template-columns: 1fr; } }
.painel-cab .sub { font-size: 12px; color: var(--texto-3); font-weight: 400; margin-left: 6px; }
.g-corpo { padding: 10px 14px 12px; }
.g-caixa { position: relative; min-height: 40px; }
.g-caixa .vazio { padding: 4px 0; }
.g-svg { display: block; overflow: visible; font-family: inherit; }
.g-svg .s1 { fill: var(--serie-1); } .g-svg .s2 { fill: var(--serie-2); } .g-svg .s3 { fill: var(--serie-3); } .g-svg .s4 { fill: var(--serie-4); }
.g-svg .g-rot { font-size: 12.5px; fill: var(--texto); }
.g-svg .g-val { font-size: 12px; fill: var(--texto-2); font-variant-numeric: tabular-nums; }
.g-svg .g-eixo { font-size: 11px; fill: var(--texto-3); font-variant-numeric: tabular-nums; }
.g-svg .g-grade { stroke: var(--g-grade); stroke-width: 1; }
.g-svg .g-base { stroke: var(--g-base); stroke-width: 1; }
.g-svg .g-linha { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.g-svg .g-linha.c1 { stroke: var(--serie-1); } .g-svg .g-linha.c2 { stroke: var(--serie-2); }
.g-svg .g-ponto { stroke: var(--superficie); stroke-width: 2; }
.g-svg .g-cruz { stroke: var(--texto-3); stroke-width: 1; }
.g-svg .g-alvo { fill: transparent; cursor: default; outline: none; }
.g-svg .g-alvo:hover, .g-svg .g-alvo:focus { fill: var(--texto); fill-opacity: .04; }
.g-legenda { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12.5px; color: var(--texto-2); margin-bottom: 6px; }
.g-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.g-cor { display: inline-block; width: 10px; height: 10px; border-radius: 2px; flex: none; }
.g-cor.s1 { background: var(--serie-1); } .g-cor.s2 { background: var(--serie-2); } .g-cor.s3 { background: var(--serie-3); } .g-cor.s4 { background: var(--serie-4); }
.g-dica { position: absolute; z-index: 5; pointer-events: none; background: var(--superficie); border: 1px solid var(--borda); border-radius: 4px; box-shadow: 0 4px 14px rgba(13, 43, 51, .14); padding: 8px 10px; font-size: 12.5px; min-width: 150px; max-width: 280px; }
.g-dica-tit { font-weight: 600; margin-bottom: 4px; }
.g-dica-lin { display: flex; align-items: center; gap: 6px; color: var(--texto-2); }
.g-dica-lin b { margin-left: auto; padding-left: 12px; color: var(--texto); font-weight: 600; font-variant-numeric: tabular-nums; }
.g-tabela { font-size: 13px; }
.g-tabela td.dir, .g-tabela th.dir { text-align: right; }
.g-alternar[aria-pressed="true"] { color: var(--texto); }