/* CIC · identidade WeRev (docs/marca.md) */
:root {
  --navy: #1f2b38;
  --navy-2: #2a3949;
  --navy-3: #364759;
  --whiskey: #844420;
  --whiskey-2: #9b5530;
  --taupe: #8e6e59;
  --grey: #c6c6c6;
  --linen: #e6dfdd;
  --fundo: #f4f1f0;
  --branco: #ffffff;
  --texto: #1f2b38;
  --texto-2: #5b6672;
  --erro: #9c3a2a;
  --ok: #4f6b4a;
  --raio: 6px;
  --f-titulo: 'Arsenal', Georgia, serif;
  --f-texto: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--f-texto);
  font-size: 15px;
  color: var(--texto);
  background: var(--fundo);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}
[hidden] { display: none !important; }
button { font: inherit; cursor: pointer; }
input { font: inherit; }

/* Assinatura em texto (até chegar o SVG oficial) */
.assinatura {
  font-family: var(--f-titulo);
  font-size: 26px;
  letter-spacing: .42em;
  color: var(--navy);
  line-height: 1;
  padding-left: .42em; /* compensa o tracking pra centralizar */
}
.assinatura sup { font-size: 9px; letter-spacing: 0; vertical-align: top; margin-left: -.3em; }
.assinatura-clara { color: var(--grey); font-size: 20px; padding-left: 0; }
.simbolo { display: inline-block; }
.simbolo svg { display: block; width: 100%; height: 100%; }
.simbolo-acesso { width: 34px; height: 52px; color: var(--navy); margin-bottom: 18px; }
.marca-lateral { display: flex; align-items: center; gap: 12px; }
.simbolo-lateral { width: 17px; height: 26px; color: var(--linen); }

/* ---------- Acesso ---------- */
.acesso {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  background: var(--navy);
}
.acesso-card {
  width: 100%;
  max-width: 400px;
  background: var(--linen);
  border-radius: var(--raio);
  padding: 40px 32px 32px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .25);
}
.acesso-topo { text-align: center; margin-bottom: 28px; }
.acesso-sub {
  margin: 14px 0 0;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--taupe);
}
.acesso-cliente { margin: 6px 0 0; font-family: var(--f-titulo); font-size: 17px; color: var(--whiskey); }
.acesso-cliente:empty { display: none; }
.acesso-view h1 {
  font-family: var(--f-titulo);
  font-weight: 400;
  font-size: 22px;
  margin: 0 0 18px;
  color: var(--navy);
}
.texto { color: var(--texto-2); font-size: 14px; line-height: 1.5; margin: -6px 0 18px; }
.campo { display: block; margin-bottom: 14px; }
.campo span { display: block; font-size: 12px; font-weight: 500; color: var(--texto-2); margin-bottom: 6px; }
.campo input {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--grey);
  border-radius: var(--raio);
  background: var(--branco);
  color: var(--texto);
}
.campo input:focus { outline: 2px solid var(--whiskey); outline-offset: -1px; border-color: transparent; }
.msg { min-height: 20px; margin: 2px 0 12px; font-size: 13px; color: var(--erro); }
.msg.ok { color: var(--ok); }
.btn-principal {
  width: 100%;
  padding: 12px;
  border: 0;
  border-radius: var(--raio);
  background: var(--whiskey);
  color: var(--branco);
  font-weight: 500;
  letter-spacing: .02em;
}
.btn-principal:hover { background: var(--whiskey-2); }
.btn-principal:disabled { opacity: .6; cursor: wait; }
.btn-secundario {
  width: 100%;
  padding: 11px;
  border: 1px solid var(--navy);
  border-radius: var(--raio);
  background: transparent;
  color: var(--navy);
}
.acesso-links { display: flex; justify-content: space-between; gap: 12px; margin-top: 16px; }
.link { background: none; border: 0; padding: 0; color: var(--navy); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
.link:hover { color: var(--whiskey); }
.lista-clientes { display: grid; gap: 8px; }
.lista-clientes button {
  text-align: left;
  padding: 14px 16px;
  border: 1px solid var(--grey);
  border-radius: var(--raio);
  background: var(--branco);
  color: var(--navy);
  font-family: var(--f-titulo);
  font-size: 17px;
}
.lista-clientes button:hover { border-color: var(--whiskey); }
.acesso-rodape { margin-top: 20px; font-size: 11px; color: rgba(198, 198, 198, .55); letter-spacing: .05em; }

/* ---------- CIC ---------- */
.cic { display: flex; min-height: 100%; }
.lateral {
  width: 248px;
  flex-shrink: 0;
  background: var(--navy);
  color: var(--grey);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}
.lateral-topo { padding: 28px 24px 22px; border-bottom: 1px solid var(--navy-3); }
.lateral-cliente { margin-top: 10px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--taupe); }
.lat-trocar { margin-top: 6px; background: none; border: 0; padding: 0; color: var(--grey); font-size: 12px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.lat-trocar:hover { color: var(--taupe); }
.lateral.recolhida .lat-trocar { display: none; }
.menu { flex: 1; overflow-y: auto; padding: 12px 0; }
.menu a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 24px;
  color: var(--grey);
  text-decoration: none;
  font-size: 14px;
  border-left: 2px solid transparent;
}
.menu a:hover { background: var(--navy-2); color: var(--branco); }
.menu a.ativo { background: var(--navy-2); color: var(--branco); border-left-color: var(--whiskey); }
.menu a.ativo .ic { color: var(--whiskey-2); }
.lateral-base { padding: 16px 24px 20px; border-top: 1px solid var(--navy-3); }
.usuario-nome { color: var(--branco); font-size: 14px; }
.usuario-papel { font-size: 12px; color: var(--taupe); margin-top: 2px; }
.btn-sair {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--grey);
  font-size: 13px;
}
.btn-sair:hover { color: var(--branco); }
.build { margin-top: 14px; font-size: 10.5px; color: rgba(198, 198, 198, .45); letter-spacing: .04em; }

.ic { display: inline-flex; width: 18px; height: 18px; flex-shrink: 0; }
.ic svg { width: 100%; height: 100%; stroke-width: 1.5; }
.ic-grande { width: 40px; height: 40px; color: var(--taupe); }

.conteudo { flex: 1; min-width: 0; padding: 40px 48px; }
.conteudo-topo h1 { font-family: var(--f-titulo); font-weight: 400; font-size: 30px; margin: 0; color: var(--navy); }
.tela-desc { margin: 6px 0 0; color: var(--texto-2); font-size: 14px; }
.painel-vazio {
  margin-top: 32px;
  padding: 56px 24px;
  background: var(--branco);
  border: 1px solid #e3ddda;
  border-radius: var(--raio);
  text-align: center;
}
.painel-vazio h2 { font-family: var(--f-titulo); font-weight: 400; font-size: 20px; margin: 14px 0 6px; }
.painel-vazio p { margin: 0; color: var(--texto-2); font-size: 14px; }

.bloco { margin-top: 32px; background: var(--branco); border: 1px solid #e3ddda; border-radius: var(--raio); padding: 24px; }
.bloco-topo h2 { font-family: var(--f-titulo); font-weight: 400; font-size: 20px; margin: 0; }
.bloco-topo p { margin: 4px 0 18px; color: var(--texto-2); font-size: 14px; }
.links-grupo + .links-grupo { margin-top: 20px; }
.links-grupo h3 { margin: 0 0 8px; font-size: 13px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--taupe); }
.link-venda { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid #eee8e6; }
.link-venda:first-of-type { border-top: 0; }
.link-info { flex: 1; min-width: 0; }
.link-nome { font-weight: 500; font-size: 14px; }
.link-url { font-size: 12.5px; color: var(--texto-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn-copiar { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; padding: 8px 12px; border: 1px solid var(--navy); border-radius: var(--raio); background: transparent; color: var(--navy); font-size: 13px; }
.btn-copiar:hover { background: var(--navy); color: var(--branco); }
.btn-copiar.ok { border-color: var(--ok); background: var(--ok); color: var(--branco); }
.link-cupom { display: flex; align-items: center; gap: 10px; margin-top: 6px; font-size: 13px; color: var(--texto); }
.link-cupom span { font-weight: 500; }
.btn-copiar-mini { padding: 3px 10px; font-size: 12px; }
.links-vazio { color: var(--texto-2); font-size: 14px; margin: 0; }

/* Menu recolhível (desktop) */
.lat-recolher { position: absolute; top: 30px; right: -13px; z-index: 5; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--navy-3); background: var(--navy); color: var(--grey); font-size: 15px; line-height: 1; display: flex; align-items: center; justify-content: center; padding: 0 0 2px; }
.lat-recolher:hover { color: var(--branco); background: var(--navy-2); }
.lateral { transition: width .18s ease; }
.lateral.recolhida { width: 64px; }
.lateral.recolhida .lateral-topo { padding: 28px 0 22px; display: flex; justify-content: center; }
.lateral.recolhida .assinatura, .lateral.recolhida .lateral-cliente, .lateral.recolhida .menu-txt,
.lateral.recolhida .usuario, .lateral.recolhida .build { display: none; }
.lateral.recolhida .menu a { justify-content: center; padding: 12px 0; }
.lateral.recolhida .lateral-base { padding: 16px 0 20px; display: flex; justify-content: center; }
.lateral.recolhida .btn-sair { margin-top: 0; }

/* Home: cards no formato do G2 */
.hm-sec { display: flex; align-items: baseline; gap: 12px; margin: 4px 0 14px; padding-left: 12px; border-left: 3px solid var(--whiskey); }
.hm-sec h2 { margin: 0; font-family: var(--f-titulo); font-weight: 400; font-size: 20px; color: var(--navy); }
.hm-sec small { color: var(--texto-2); font-size: 13px; }
.hm-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.hm-grid + .hm-grid { margin-top: 12px; }
.hm-card { background: var(--branco); border: 1px solid #e3ddda; border-radius: var(--raio); padding: 16px 18px 0; display: flex; flex-direction: column; min-width: 0; }
.hm-lab { font-size: 12.5px; color: var(--texto-2); }
.hm-val { margin-top: 6px; font-size: 22px; font-weight: 500; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-dupla { display: flex; gap: 20px; flex-wrap: wrap; }
.hm-split { margin-top: 8px; display: grid; gap: 2px; font-size: 12.5px; color: var(--texto-2); }
.hm-split b { float: right; font-weight: 500; color: var(--texto); margin-left: 8px; }
.hm-ho { margin: 12px -18px 0; padding: 10px 18px 12px; border-top: 1px solid #eee8e6; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; margin-top: auto; }
.hm-ho-c { min-width: 0; }
.hm-ho-c b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-card .hm-ho { margin-top: 12px; }
.hm-ho-c { display: flex; flex-direction: column; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-2); }
.hm-ho-c b { font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--texto); font-weight: 500; margin-top: 2px; }
.hm-ho-c.on b { color: var(--whiskey); }
.hm-ho-cap { grid-column: 1 / -1; font-size: 11px; color: var(--texto-2); }
.hm-card > .hm-split:last-child { padding-bottom: 16px; }
.tabela.lista tr.hm-prod td { border-top: 1px solid var(--grey); background: #faf8f7; }
.tabela.lista tr.hm-oferta td:first-child { padding-left: 24px; color: var(--texto-2); }

/* Dia a dia */
.tabela.matriz { font-size: 13px; }
.tabela.matriz th, .tabela.matriz td { padding: 8px 10px; }
.tabela.matriz thead th { text-align: right; line-height: 1.2; }
.tabela.matriz thead th span { display: block; font-size: 10.5px; font-weight: 400; color: var(--texto-2); text-transform: none; letter-spacing: 0; }
.tabela.matriz tbody th { text-align: left; font-weight: 500; font-size: 12.5px; color: var(--texto-2); white-space: nowrap; }
.tabela.matriz .fds { background: #f3efed; color: var(--texto-2); }
.tabela.matriz .hoje { background: #f6ece5; }
.tabela.matriz thead .hoje { color: var(--whiskey); }
.tabela.matriz .total { font-weight: 600; border-left: 1px solid var(--grey); color: var(--navy); }

/* ---------- Painéis de dados ---------- */
.painel { margin-top: 24px; }
.painel-msg { color: var(--texto-2); font-size: 14px; margin: 16px 0; }
.painel-erro { color: var(--erro); }
.painel-cabeca { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.periodo { margin: 0 0 16px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--taupe); }
.painel-cabeca .periodo { margin: 0; }
.seletor { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--texto-2); }
.seletor select { font: inherit; padding: 8px 10px; border: 1px solid var(--grey); border-radius: var(--raio); background: var(--branco); color: var(--texto); min-width: 200px; }
.seletor select:focus { outline: 2px solid var(--whiskey); outline-offset: -1px; }

.kpi-grupo + .kpi-grupo { margin-top: 20px; }
.kpi-grupo h3 { margin: 0 0 10px; font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--taupe); }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.kpi { background: var(--branco); border: 1px solid #e3ddda; border-radius: var(--raio); padding: 16px 18px; min-width: 0; }
.kpi-destaque { border-top: 2px solid var(--whiskey); }
.kpi-rotulo { font-size: 12.5px; color: var(--texto-2); }
.kpi-valor { margin-top: 6px; font-size: 22px; font-weight: 500; color: var(--navy); letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-sub { margin-top: 4px; font-size: 12.5px; color: var(--texto-2); line-height: 1.5; }

.tag { display: inline-block; padding: 1px 8px; border-radius: 99px; font-size: 11.5px; background: var(--linen); color: var(--texto-2); white-space: nowrap; }
.tag-ok { background: #e3e9e0; color: var(--ok); }
.tag-abaixo { background: #f1e6df; color: var(--whiskey); }


.grafico { display: block; width: 100%; height: auto; }
.g-grade { stroke: #ece6e3; stroke-width: 1; }
.g-eixo { font-size: 11px; fill: var(--texto-2); font-family: var(--f-texto); }
.grafico g:hover rect[fill^="#"] { opacity: .85; }
.legenda { display: flex; gap: 18px; margin: -6px 0 10px; font-size: 12.5px; color: var(--texto-2); }
.legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }

.regua { padding: 8px 0 4px; }
.regua-trilho { position: relative; height: 12px; border-radius: 99px; background: var(--linen); }
.regua-feito { position: absolute; inset: 0 auto 0 0; border-radius: 99px; background: var(--navy); min-width: 2px; }
.regua-marco { position: absolute; top: -4px; width: 2px; height: 20px; margin-left: -1px; background: var(--taupe); }
.regua-marco.batido { background: var(--whiskey); }
.regua-proj { position: absolute; top: -7px; height: 26px; margin-left: -1px; border-left: 2px dashed var(--whiskey); }
.regua-rotulos { position: relative; height: 38px; margin: 10px 0 8px; }
.regua-rotulo { position: absolute; transform: translateX(-50%); text-align: center; font-size: 12px; color: var(--texto-2); white-space: nowrap; }
.regua-rotulo:first-child { transform: none; text-align: left; }
.regua-rotulo:last-child { transform: translateX(-100%); text-align: right; }
.regua-rotulo strong { display: block; font-weight: 500; color: var(--navy); }
.regua-rotulo.batido strong { color: var(--whiskey); }
.regua-rotulo.atual strong { color: var(--whiskey); }
.regua-rotulo span { display: block; }

.tabela-rolagem { overflow-x: auto; }
.tabela { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabela th { text-align: left; font-weight: 500; font-size: 12px; color: var(--texto-2); padding: 8px 10px; border-bottom: 1px solid var(--grey); white-space: nowrap; }
.tabela td { padding: 10px; border-bottom: 1px solid #eee8e6; white-space: nowrap; }
.tabela .n { text-align: right; }
.tabela tbody tr:last-child td { border-bottom: 0; }


/* Filtro e listas (Relatórios, Reembolsos) */
.filtro { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; margin-bottom: 20px; }
.seletor input[type="date"] { font: inherit; padding: 7px 10px; border: 1px solid var(--grey); border-radius: var(--raio); background: var(--branco); color: var(--texto); }
.seletor input[type="date"]:focus { outline: 2px solid var(--whiskey); outline-offset: -1px; }
.filtro + div > .kpis { margin-bottom: 0; }
.lista-topo { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.lista-topo h2 { font-family: var(--f-titulo); font-weight: 400; font-size: 20px; margin: 0; }
.lista-topo p { margin: 4px 0 0; color: var(--texto-2); font-size: 14px; }
.lista-total { text-align: right; }
.lista-total span { display: block; font-size: 12px; color: var(--texto-2); }
.lista-total strong { font-size: 22px; font-weight: 500; color: var(--ok); }
.tabela.lista th { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.tabela.lista td { vertical-align: middle; }
.fraco { color: var(--texto-2); font-size: 12.5px; }
.tabela.lista td.quebra { white-space: normal; min-width: 140px; }
.tabela.lista td.n { white-space: nowrap; }
.tabela.lista th, .tabela.lista td { padding-left: 8px; padding-right: 8px; }
.pessoa { display: inline-flex; align-items: center; gap: 8px; }
.pessoa i { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--navy); color: var(--linen); font-style: normal; font-size: 10.5px; font-weight: 500; letter-spacing: .03em; flex-shrink: 0; }
.pessoa-sem { color: var(--texto-2); }
.pessoa-sem i { background: var(--linen); color: var(--taupe); }
.valor-ok { color: var(--ok); font-weight: 500; }
.valor-riscado { color: var(--texto-2); text-decoration: line-through; margin-right: 8px; }
.valor-abatido { color: var(--erro); font-weight: 500; }
.painel-msg.vazio { text-align: center; margin: 8px 0; }

/* Gestão: barras horizontais, funil, duas colunas */
.barras-h { display: grid; gap: 10px; }
.bh { display: grid; grid-template-columns: minmax(120px, 34%) 1fr 110px; align-items: center; gap: 12px; font-size: 13.5px; }
.bh-rotulo span { display: block; font-size: 12px; color: var(--texto-2); }
.bh-trilho { height: 10px; background: #f0ebe9; border-radius: 99px; overflow: hidden; }
.bh-barra { height: 100%; border-radius: 99px; min-width: 2px; }
.bh-valor { text-align: right; font-weight: 500; white-space: nowrap; }
.bh-valor span { font-weight: 400; color: var(--texto-2); font-size: 12px; }
.funil { display: grid; gap: 12px; }
.funil-etapa { display: grid; grid-template-columns: 220px 1fr 90px; align-items: center; gap: 14px; }
.funil-nome strong { display: block; font-weight: 500; font-size: 14px; }
.funil-nome span { font-size: 12.5px; color: var(--texto-2); }
.funil-trilho { height: 26px; background: #f0ebe9; border-radius: 4px; }
.funil-barra { height: 100%; background: var(--navy); border-radius: 4px; min-width: 2px; }
.funil-pct { text-align: right; }
.funil-pct strong { display: block; font-size: 18px; font-weight: 500; color: var(--whiskey); }
.funil-pct span { font-size: 11.5px; color: var(--texto-2); }
.duas { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.duas > .bloco { min-width: 0; }
.kpis-2 { grid-template-columns: 1fr 1fr; margin-bottom: 8px; }
.sub-h { margin: 20px 0 10px; font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--taupe); }
.nota { margin: 12px 0 0; }
.aviso-nota { margin: 12px 0 0; padding: 10px 14px; border-left: 3px solid var(--whiskey); background: #f7f1ec; border-radius: 4px; font-size: 13px; color: var(--texto-2); line-height: 1.5; }
.nome-longo { white-space: normal; overflow-wrap: anywhere; min-width: 180px; max-width: 280px; }
.rodape-fonte { margin: 28px 0 0; padding-top: 14px; border-top: 1px solid #e3ddda; font-size: 12px; color: var(--texto-2); line-height: 1.5; }
.bh-valor { min-width: 0; }

.btn-menu { display: none; }

/* Celular: menu vira gaveta */
@media (max-width: 860px) {
  .lateral {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 20;
    transform: translateX(-100%);
    transition: transform .2s ease;
  }
  .lateral.aberta { transform: none; box-shadow: 0 0 0 100vmax rgba(31, 43, 56, .45); }
  .btn-menu {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    position: fixed;
    top: 14px;
    left: 16px;
    z-index: 10;
    width: 40px;
    height: 40px;
    padding: 10px;
    border: 0;
    border-radius: var(--raio);
    background: var(--navy);
  }
  .btn-menu span { display: block; height: 1.5px; background: var(--grey); }
  .conteudo { padding: 72px 16px 32px; }
  .conteudo-topo h1 { font-size: 24px; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi { padding: 14px; }
  .hm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-val { font-size: 18px; white-space: normal; overflow-wrap: anywhere; }
  .lat-recolher { display: none; }
  .lateral.recolhida { width: 248px; }
  .lateral.recolhida .assinatura, .lateral.recolhida .lateral-cliente, .lateral.recolhida .menu-txt, .lateral.recolhida .usuario, .lateral.recolhida .build { display: revert; }
  .lateral.recolhida .menu a { justify-content: flex-start; padding: 10px 24px; }
  .lateral.recolhida .lat-trocar { display: revert; }
  .duas { grid-template-columns: 1fr; }
  .bh { grid-template-columns: 1fr 70px; }
  .bh-rotulo { grid-column: 1 / -1; }
  .funil-etapa { grid-template-columns: 1fr 64px; gap: 6px 10px; }
  .funil-nome { grid-column: 1 / -1; }
  .kpi-valor { font-size: 18px; white-space: normal; overflow-wrap: anywhere; }
  .bloco { padding: 18px 16px; }
  .regua-rotulos { height: auto; display: flex; flex-wrap: wrap; gap: 6px 18px; }
  .regua-rotulo, .regua-rotulo:first-child, .regua-rotulo:last-child { position: static; transform: none; text-align: left; }
}

/* Meta do mês: burn-up e matriz por funil */
.g-fds { fill: #f3efed; }
.g-gap { fill: rgba(132, 68, 32, .12); }
.g-linha { fill: none; stroke-width: 2; }
.g-bronze { stroke: var(--taupe); }
.g-prata { stroke: var(--navy); stroke-dasharray: 6 5; }
.g-ouro { stroke: #b8975a; }
.g-real { stroke: var(--whiskey); stroke-width: 3; }
.g-ponto { fill: var(--whiskey); }
.legenda i.lg-real { background: var(--whiskey); height: 4px; vertical-align: 2px; }
.legenda i.lg-bronze { background: var(--taupe); height: 3px; vertical-align: 3px; }
.legenda i.lg-prata { background: repeating-linear-gradient(90deg, var(--navy) 0 4px, transparent 4px 7px); height: 3px; vertical-align: 3px; width: 16px; }
.legenda i.lg-ouro { background: #b8975a; height: 3px; vertical-align: 3px; }
.legenda i.lg-gap { background: rgba(132, 68, 32, .2); }
.legenda { flex-wrap: wrap; row-gap: 6px; }
.bloco-topo-acao { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.bloco-topo-acao > div:first-child { flex: 1; min-width: 240px; }
.alternar { display: inline-flex; border: 1px solid var(--grey); border-radius: var(--raio); overflow: hidden; flex-shrink: 0; }
.alternar button { border: 0; background: var(--branco); color: var(--texto-2); font-size: 12.5px; padding: 7px 12px; }
.alternar button + button { border-left: 1px solid var(--grey); }
.alternar button.on { background: var(--navy); color: var(--branco); }
.mt-matriz tr.mt-funil th { text-align: left; padding-top: 16px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--navy); background: transparent; border-bottom: 1px solid var(--grey); }
.mt-matriz tr.mt-total th { color: var(--whiskey); }
.tabela.matriz .sem { background: #f6f3f2; font-weight: 500; border-left: 1px solid #e3ddda; }
.tabela.matriz .futuro { color: #bdb4ad; }

@media (max-width: 560px) {
  .hm-grid { grid-template-columns: 1fr; }
  .hm-val { font-size: 20px; }
}

/* Mensageria: campanhas expansíveis e linha do gráfico (06/11/2026) */
.legenda i.leg-linha { height: 3px; width: 16px; vertical-align: 3px; }
.tabela-camp tr.camp { cursor: pointer; }
.tabela-camp tr.camp:hover td { background: rgba(31, 43, 56, .04); }
.tabela-camp tr.camp:focus-visible { outline: 2px solid var(--navy); outline-offset: -2px; }
.tabela-camp .seta { display: inline-block; flex: 0 0 14px; width: 14px; line-height: 1.4; transition: transform .15s; color: var(--texto-2); }
.tabela-camp tr.camp[aria-expanded="true"] .seta { transform: rotate(90deg); }
.tabela-camp tr.lote td { background: rgba(31, 43, 56, .025); font-size: 12.5px; }
.tabela-camp tr.lote td:first-child { padding-left: 28px; }
.tabela-camp .camp-nome { display: flex; gap: 4px; align-items: flex-start; min-width: 200px; }

/* Desempenho individual e Minha página (06/11/2026) */
.ic { width: 14px; height: 14px; stroke-width: 2; }
.tabela-rank .rank-nome { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.medalha { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; font-size: 11.5px; font-weight: 600; color: var(--branco); flex-shrink: 0; }
.medalha.m1 { background: #b8975a; }
.medalha.m2 { background: #9aa3ab; }
.medalha.m3 { background: var(--whiskey-2); }
.rank { display: inline-block; width: 22px; text-align: center; font-size: 12px; color: var(--texto-2); flex-shrink: 0; }
.selo-rei { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px 1px 6px; border-radius: 99px; background: #f3ead9; color: #8a6a2c; font-size: 11.5px; font-weight: 500; }
.selo-rei .ic { width: 12px; height: 12px; }
tr.rei td strong { color: #8a6a2c; }
.part { display: flex; align-items: center; gap: 10px; min-width: 150px; }
.part-barra { flex: 1; height: 8px; border-radius: 99px; background: var(--linen); overflow: hidden; }
.part-barra i { display: block; height: 100%; background: var(--navy); border-radius: 99px; }
.part span { font-size: 12.5px; color: var(--texto-2); width: 46px; text-align: right; }
.vd-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.vd-card { border: 1px solid #e3ddda; border-radius: var(--raio); padding: 16px; background: var(--branco); }
.vd-topo { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid #ece6e3; }
.vd-topo .pessoa i { width: 36px; height: 36px; font-size: 12.5px; }
.vd-id { flex: 1; min-width: 0; }
.vd-nome { font-weight: 500; }
.vd-fat { font-size: 17px; font-weight: 600; margin-top: 2px; }
.vd-conv { text-align: right; font-size: 17px; font-weight: 600; color: var(--whiskey); }
.vd-conv span { display: block; font-size: 11px; font-weight: 400; color: var(--texto-2); }
.vd-bl { padding-top: 10px; }
.vd-bl-tit { font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--texto-2); margin-bottom: 4px; }
.vd-kv { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; font-size: 13.5px; }
.vd-kv span { color: var(--texto-2); }
.vd-kv .dica { cursor: help; border-bottom: 1px dotted var(--grey); }
.g-nivel { stroke: #b8975a; stroke-width: 1.2; stroke-dasharray: 5 4; }
.g-nivel-txt { fill: #8a6a2c; }
.g-proj { stroke: var(--whiskey); stroke-width: 2; stroke-dasharray: 3 4; opacity: .7; }
.g-proj-ponto { fill: var(--branco); stroke: var(--whiskey); stroke-width: 2; }
.legenda i.lg-proj { background: repeating-linear-gradient(90deg, var(--whiskey) 0 3px, transparent 3px 6px); height: 3px; width: 16px; vertical-align: 3px; }
.legenda i.lg-nivel { background: repeating-linear-gradient(90deg, #b8975a 0 4px, transparent 4px 7px); height: 3px; width: 16px; vertical-align: 3px; }
.insights { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.insight { border-left: 3px solid var(--whiskey); background: #faf7f6; border-radius: 0 var(--raio) var(--raio) 0; padding: 12px 14px; }
.insight strong { display: block; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--whiskey); margin-bottom: 4px; }
.insight p { margin: 0; font-size: 14px; line-height: 1.45; }

/* dica ao passar o mouse (09/11/2026) */
.dica { cursor: help; border-bottom: 1px dotted var(--grey); }

/* Presets do filtro de data (09/11/2026) */
.presets { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--grey); border-radius: var(--raio); overflow: hidden; background: var(--branco); }
.preset { border: 0; background: var(--branco); color: var(--texto-2); font: inherit; font-size: 12.5px; padding: 7px 11px; cursor: pointer; }
.preset + .preset { border-left: 1px solid var(--grey); }
.preset:hover { color: var(--texto); background: #faf7f6; }
.preset.on { background: var(--navy); color: var(--branco); }
.preset:focus-visible { outline: 2px solid var(--whiskey); outline-offset: -2px; }

/* Taxa de passagem por origem */
.sec-h { margin-top: 28px; }
.origens { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 16px; }
.origem-card .kpis-2 { margin-bottom: 12px; }

/* Pizza (donut) com legenda */
.pizza { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.pizza-svg { flex-shrink: 0; transform: rotate(0deg); }
.pizza-svg circle { transition: opacity .15s; }
.pizza-svg circle:hover { opacity: .8; }
.pizza-num { font-family: var(--f-texto); font-size: 7px; font-weight: 600; fill: var(--texto); }
.pizza-leg { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 180px; display: grid; gap: 5px; }
.pizza-leg li { display: grid; grid-template-columns: 10px 1fr auto 46px; gap: 8px; align-items: center; font-size: 12.5px; }
.pizza-leg i { width: 10px; height: 10px; border-radius: 2px; }
.pizza-rot { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--texto); }
.pizza-leg b { font-weight: 600; text-align: right; }
.pizza-leg em { font-style: normal; color: var(--texto-2); text-align: right; }
.pz-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.pz-card { border: 1px solid #e3ddda; border-radius: var(--raio); padding: 16px; background: var(--branco); }
.pz-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid #ece6e3; }
.pz-nome { font-weight: 500; min-width: 0; }
.pz-tot { text-align: right; }
.pz-tot b { display: block; font-size: 18px; font-weight: 600; }
.pz-tot span { font-size: 11.5px; color: var(--texto-2); }
@media (max-width: 560px) {
  .origens, .pz-grade { grid-template-columns: 1fr; }
  .pizza { justify-content: center; }
}
.origem-card .oc-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.origem-card .oc-topo h2 { margin: 0; }
.oc-conv { text-align: right; }
.oc-conv b { display: block; font-size: 22px; font-weight: 600; color: var(--whiskey); line-height: 1.1; }
.oc-conv span { display: block; font-size: 11.5px; color: var(--texto-2); }
.oc-conv em { display: block; font-style: normal; font-size: 11.5px; color: var(--texto-2); }
.origem-card .tabela { font-size: 13px; }
.origem-card .tabela th, .origem-card .tabela td { padding-left: 6px; padding-right: 6px; }
.origens > *, .pz-grade > * { min-width: 0; }
@media (max-width: 560px) {
  .presets { border: 0; background: none; gap: 6px; overflow: visible; }
  .preset, .preset + .preset { border: 1px solid var(--grey); border-radius: var(--raio); }
}

/* Taxa de passagem por origem: barra por etapa (entraram x avançaram) */
.oc-barra { margin-top: 6px; height: 8px; min-width: 120px; }
.oc-barra span { display: block; height: 100%; background: var(--linen, #e6dfdd); border-radius: 3px; min-width: 2px; overflow: hidden; }
.oc-barra i { display: block; height: 100%; background: var(--navy); border-radius: 3px; }
.oc-leg { margin: 8px 0 0; font-size: 11.5px; display: flex; align-items: center; gap: 6px; }
.oc-leg i { display: inline-block; width: 10px; height: 8px; border-radius: 2px; }
.oc-leg .oc-l1 { background: var(--linen, #e6dfdd); }
.oc-leg .oc-l2 { background: var(--navy); margin-left: 8px; }