/* Núcleo Motta — casca no layout do Facebook, com a cor da Motta no lugar do azul.
   Preto, cinza e branco; a cor só em botões, links e ícone ativo. */

:root {
  --fundo:    #f0f2f5;   /* cinza do Facebook */
  --cartao:   #ffffff;
  --cinza:    #e4e6eb;   /* botões/áreas cinzas do Facebook */
  --cinza2:   #d8dadf;
  --divisa:   #ced0d4;
  --texto:    #050505;
  --texto2:   #65676b;
  --cor:      #0e7490;   /* a cor da Motta (no lugar do azul do Facebook) */
  --cor2:     #0c6179;
  --sombra:   0 1px 2px rgba(0, 0, 0, .2);
  --sombra2:  0 2px 12px rgba(0, 0, 0, .18);
  --raio:     8px;
  --topo-altura: 56px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--fundo);
  color: var(--texto);
  font-family: "Segoe UI Historic", "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.34;
  min-height: 100vh;
}
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input { font: inherit; }

/* Texto nunca sai da caixa, em nenhuma tela */
.cartao, .evento, .painel-solto, .fila-item, .menu-item, .fluxo-corpo, .evento-corpo,
.decisao-corpo, .preco-linha, .sobe-nome, .quadro-cartao, .caixa-rodape, .pilar-mini {
  overflow-wrap: break-word; word-break: break-word; min-width: 0;
}

/* Bolinhas decorativas: fora do padrão Facebook */
.menu-bola { display: none; }

/* ── Barra do topo (branca e fina, como o Facebook) ─────────────── */
.topo {
  position: fixed; inset: 0 0 auto 0; height: var(--topo-altura);
  background: var(--cartao);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
  z-index: 50;
}
.topo-area {
  height: 100%; margin: 0; padding: 0 16px;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px;
}
.marca { display: flex; align-items: center; gap: 8px; }
.marca img { display: block; width: 40px; height: 40px; border-radius: 50%; }
.marca-nome { font-weight: 700; font-size: 16px; white-space: nowrap; color: var(--cor); }

.busca {
  display: flex; align-items: center; gap: 8px;
  background: var(--fundo);
  border-radius: 50px;
  padding: 0 12px; height: 40px;
  max-width: 240px; min-width: 0;
  color: var(--texto2);
}
.busca .icone { width: 16px; height: 16px; flex: none; }
.busca input {
  background: none; border: 0; outline: 0; color: var(--texto);
  width: 100%; min-width: 0; font-size: 15px;
}
.busca input::placeholder { color: var(--texto2); }

/* Abas centrais: ícones cinza, ativa na cor da Motta */
.abas {
  position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  height: 100%; display: flex; gap: 8px;
}
.aba {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; width: 112px; height: 100%;
  color: var(--texto2); font-size: 11px;
  border-bottom: 3px solid transparent; border-top: 3px solid transparent;
}
.aba .icone { width: 24px; height: 24px; }
.aba span { display: none; }
.aba:hover { background: #f2f2f2; border-radius: 8px; }
.aba.ativa, .aba.ativa:hover { color: var(--cor); border-bottom-color: var(--cor); border-radius: 0; background: none; }

.topo-direita { position: relative; display: flex; align-items: center; gap: 8px; justify-self: end; }
.redondo {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--cinza); border: 0;
  display: flex; align-items: center; justify-content: center;
  position: relative; color: var(--texto);
}
.redondo:hover { background: var(--cinza2); }
.redondo .icone { width: 20px; height: 20px; }
.avatar { background: var(--cor); color: #fff; font-weight: 700; font-size: 16px; }
.avatar:hover { background: var(--cor2); }
.selo-contagem {
  position: absolute; top: -2px; right: -2px;
  background: #e41e3f; color: #fff;
  font-size: 11px; font-weight: 700;
  min-width: 18px; height: 18px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center; padding: 0 5px;
}

.painel-solto {
  position: absolute; top: 48px; right: 0; width: 360px; max-width: calc(100vw - 16px);
  background: var(--cartao); border-radius: var(--raio);
  box-shadow: var(--sombra2);
  padding: 8px; z-index: 60;
}
.painel-solto h3 { font-size: 20px; font-weight: 700; padding: 8px 8px 12px; }
.painel-lista { max-height: 60vh; overflow-y: auto; display: flex; flex-direction: column; }
.painel-lista .evento { margin-bottom: 0; box-shadow: none; border-radius: 8px; }
.painel-lista .evento:hover { background: var(--fundo); }
.painel-link { display: block; padding: 10px 8px; border-radius: 8px; font-weight: 600; font-size: 15px; }
.painel-link:hover { background: var(--fundo); }
.painel-nota { color: var(--texto2); font-size: 12px; padding: 8px; }
.painel-nota.centro { text-align: center; }

/* ── Palco de 3 colunas (densidade do Facebook) ─────────────────── */
.palco {
  max-width: 1280px; margin: 0 auto;
  padding: calc(var(--topo-altura) + 16px) 16px 72px;
  display: grid;
  grid-template-columns: 280px minmax(0, 680px) 280px;
  gap: 16px; justify-content: center;
  align-items: start;
}
.coluna-esquerda, .coluna-direita {
  position: sticky; top: calc(var(--topo-altura) + 16px);
  max-height: calc(100vh - var(--topo-altura) - 32px);
  overflow-y: auto;
}
.coluna-central { min-width: 0; }
.coluna-direita { display: flex; flex-direction: column; gap: 16px; }

/* Menu lateral (linhas como as do Facebook) */
.menu-lateral { display: flex; flex-direction: column; }
.menu-item {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 8px; border-radius: 8px; font-weight: 500; font-size: 15px;
  color: var(--texto);
}
.menu-item:hover { background: rgba(0, 0, 0, .05); }
.menu-item.ativo { color: var(--cor); font-weight: 600; }
.menu-titulo {
  color: var(--texto2); font-size: 13px; font-weight: 600;
  padding: 16px 8px 4px; border-top: 1px solid var(--divisa); margin-top: 8px;
}
.menu-codigo { color: var(--texto2); font-size: 13px; font-weight: 600; width: 30px; flex: none; }

/* ── Cartões ────────────────────────────────────────────────────── */
.cartao {
  background: var(--cartao);
  border-radius: var(--raio); box-shadow: var(--sombra);
  padding: 12px 16px;
}
.cartao-titulo { font-size: 17px; font-weight: 600; margin-bottom: 8px; color: var(--texto2); }

/* Compositor de nota (como a caixa "no que você está pensando?") */
.compositor { margin-bottom: 16px; }
.compositor-linha { display: flex; align-items: center; gap: 8px; }
.avatar-feed {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  background: var(--cor); color: #fff; font-weight: 700; font-size: 16px;
  display: flex; align-items: center; justify-content: center;
}
#campo-nota {
  flex: 1; min-width: 0;
  background: var(--fundo); border: 0; border-radius: 50px;
  padding: 10px 14px; color: var(--texto); outline: 0; font-size: 15px;
}
#campo-nota::placeholder { color: var(--texto2); }
#campo-nota:hover { background: var(--cinza); }
.compositor-acoes {
  display: flex; gap: 8px; margin-top: 12px; padding-top: 10px;
  border-top: 1px solid var(--divisa); justify-content: flex-end;
}

.botao-primario {
  background: var(--cor); color: #fff; font-weight: 600; font-size: 15px;
  border-radius: 6px; padding: 8px 14px;
}
.botao-primario:hover { background: var(--cor2); }
.botao-fraco {
  background: var(--cinza); border: 0;
  border-radius: 6px; padding: 8px 14px; font-weight: 600; font-size: 15px; color: var(--texto);
}
.botao-fraco:hover { background: var(--cinza2); }
.botao-largo { width: 100%; padding: 11px; font-size: 17px; }

/* Avisos do feed */
.aviso-busca {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--cartao); border-radius: var(--raio); box-shadow: var(--sombra);
  padding: 10px 16px; margin-bottom: 16px; font-size: 14px; color: var(--texto2);
}
.aviso-novos { display: flex; justify-content: center; margin-bottom: 14px; }

/* Posts do feed: nome, horário e texto — sem rótulo, sem ícone por card */
.evento {
  background: var(--cartao);
  border-radius: var(--raio); box-shadow: var(--sombra);
  padding: 12px 16px; margin-bottom: 16px;
}
.evento.novo { animation: chegar .35s ease; }
@keyframes chegar { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.evento-cabeca { display: flex; align-items: center; gap: 8px; }
.evento-avatar {
  width: 40px; height: 40px; border-radius: 50%; flex: none; overflow: hidden;
  background: var(--cor); color: #fff; font-weight: 700; font-size: 16px;
  display: flex; align-items: center; justify-content: center;
}
.evento-avatar img { width: 100%; height: 100%; display: block; }
.evento-quem { min-width: 0; flex: 1; }
.evento-nome { font-weight: 600; font-size: 15px; color: var(--texto); }
.evento-quando { color: var(--texto2); font-size: 13px; }
.evento-corpo { margin-top: 8px; white-space: pre-wrap; overflow-wrap: break-word; font-size: 15px; }
.evento-corpo strong { font-weight: 600; }
.evento-corpo .evento-detalhe { color: var(--texto); }

.sentinela { height: 1px; }
.feed-fim { text-align: center; color: var(--texto2); padding: 16px 0 28px; font-size: 14px; }
.vazio { color: var(--texto2); padding: 6px 0; font-size: 14px; }
.vazio-grande { text-align: center; padding: 36px 20px; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.vazio-grande strong { font-size: 17px; font-weight: 600; }
.vazio-grande span { color: var(--texto2); }

/* Fila da manhã */
.fila-lista { display: flex; flex-direction: column; }
.fila-item {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 8px; border-radius: 8px; cursor: pointer;
}
.fila-item:hover { background: var(--fundo); }
.fila-caixa {
  width: 20px; height: 20px; flex: none; margin-top: 1px;
  border: 2px solid var(--cinza2); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: transparent; font-size: 11px; font-weight: 700; background: var(--cartao);
}
.fila-item.feita .fila-caixa { background: var(--cor); border-color: var(--cor); color: #fff; }
.fila-item.feita .fila-titulo { text-decoration: line-through; color: var(--texto2); }
.fila-titulo { font-weight: 500; font-size: 14px; }
.fila-detalhe { color: var(--texto2); font-size: 13px; margin-top: 1px; }

/* Pilares em miniatura (coluna direita, linhas simples) */
.pilares-mini { display: flex; flex-direction: column; }
.pilar-mini { display: flex; gap: 8px; align-items: center; padding: 8px; border-radius: 8px; font-size: 14px; }
.pilar-mini:hover { background: var(--fundo); }
.pilar-mini strong { font-weight: 600; }
.pilar-mini small { color: var(--texto2); font-size: 12.5px; }

/* Páginas internas */
.pagina-titulo { font-size: 24px; font-weight: 700; margin-bottom: 4px; }
.pagina-sub { color: var(--texto2); margin-bottom: 4px; font-size: 15px; }
.futuro-selo { color: var(--texto2); margin: 8px 0 16px; font-size: 14px; }

.plano-lista { list-style: none; display: flex; flex-direction: column; }
.plano-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid var(--cinza);
}
.plano-item:last-child { border-bottom: 0; }
.plano-numero {
  width: 32px; height: 32px; border-radius: 50%; flex: none;
  background: var(--cinza); color: var(--texto2); font-size: 14px;
  display: flex; align-items: center; justify-content: center; font-weight: 700;
}
.plano-nome { flex: 1; font-weight: 500; font-size: 15px; }
.plano-estado { color: var(--texto2); font-size: 12px; font-weight: 600; }
.plano-item.estado-em-construção .plano-numero { background: var(--cor); color: #fff; }
.plano-item.estado-em-construção .plano-estado { color: var(--cor); }
.plano-item.estado-pronta .plano-numero { background: var(--cor); color: #fff; opacity: .55; }

/* ── Estrutura da empresa (preto, cinza e branco) ───────────────── */
.bloco { margin-top: 16px; }
.bloco-titulo { font-size: 20px; font-weight: 700; margin-bottom: 2px; }
.texto-ciano, .texto-azul, .texto-verde, .texto-ambar, .texto-neutro, .texto-vermelho { color: var(--texto2); }
.fundo-ciano, .fundo-azul, .fundo-verde, .fundo-ambar, .fundo-roxo, .fundo-neutro, .fundo-vermelho { background: var(--fundo); color: var(--texto); }
.borda-ciano, .borda-azul, .borda-verde, .borda-ambar, .borda-neutro { border-color: var(--cinza) !important; }

.mapa-pilares { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 12px; }
.mapa-pilar { border: 1px solid var(--cinza); border-radius: var(--raio); overflow: hidden; background: var(--cartao); }
.mapa-pilar-cabeca { font-weight: 600; padding: 10px 14px; font-size: 15px; background: var(--fundo); border-bottom: 1px solid var(--cinza); }
.mapa-pilar ul { list-style: none; padding: 8px 14px 4px; }
.mapa-pilar li { padding: 4px 0; font-size: 14px; color: var(--texto2); }
.mapa-saida { padding: 8px 14px 12px; color: var(--texto); font-size: 12.5px; font-weight: 600; }
.mapa-fundacao { margin-top: 14px; border-top: 1px solid var(--cinza); padding-top: 12px; }
.mapa-fundacao-rotulo { color: var(--texto2); font-size: 13px; font-weight: 600; }
.mapa-fundacao-blocos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 10px; }
.mapa-fundo-bloco { background: var(--cartao); border: 1px solid var(--cinza); border-radius: var(--raio); padding: 12px 14px; font-size: 14px; }
.mapa-fundo-bloco:hover { background: var(--fundo); }
.mapa-fundo-bloco strong { font-weight: 600; }
.mapa-fundo-bloco small { color: var(--texto2); }

.escada { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; align-items: end; margin-top: 12px; }
.degrau { border: 1px solid var(--cinza); border-radius: var(--raio); background: var(--cartao); padding: 12px; display: flex; flex-direction: column; gap: 4px; }
.degrau-altura-0 { min-height: 150px; } .degrau-altura-1 { min-height: 185px; }
.degrau-altura-2 { min-height: 220px; } .degrau-altura-3 { min-height: 255px; }
.degrau-altura-4 { min-height: 290px; }
.degrau-numero { font-size: 24px; font-weight: 700; color: var(--texto2); }
.degrau-nome { font-weight: 600; font-size: 14px; }
.degrau-detalhe { color: var(--texto2); font-size: 13px; flex: 1; }
.degrau-teste { font-size: 13px; color: var(--texto2); border-top: 1px solid var(--cinza); padding-top: 6px; }
.degrau-teste span { display: block; color: var(--texto2); font-size: 10px; font-weight: 700; letter-spacing: .5px; }

.selo-grade { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 12px; }
.selo-cartao { border: 1px solid var(--cinza); border-radius: var(--raio); background: var(--cartao); padding: 12px 16px; }
.selo-cabeca { font-weight: 600; font-size: 15px; padding-bottom: 4px; }
.selo-cabeca span { font-size: 18px; font-weight: 700; margin-right: 8px; color: var(--texto2); }
.selo-criterio { display: flex; align-items: baseline; gap: 10px; border-top: 1px solid var(--cinza); padding: 8px 0; }
.selo-criterio strong { font-size: 17px; font-weight: 700; white-space: nowrap; }
.selo-criterio small { color: var(--texto2); font-size: 13px; }
.faixa-regra {
  margin-top: 12px; background: var(--fundo);
  border-radius: var(--raio); padding: 12px 14px; font-weight: 500; font-size: 14px; color: var(--texto2);
}

.sobe-lista { display: flex; flex-direction: column; margin-top: 8px; }
.sobe-linha { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--cinza); }
.sobe-linha:last-child { border-bottom: 0; }
.sobe-linha:hover .sobe-nome { color: var(--cor); }
.sobe-nome { flex: 1; font-size: 14px; font-weight: 500; min-width: 0; }
.sobe-trilha { display: flex; gap: 8px; }
.sobe-ponto { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--cinza2); color: var(--texto2); font-size: 11px; display: flex; align-items: center; justify-content: center; background: var(--cartao); }
.sobe-ponto.alvo { background: var(--cor); border-color: var(--cor); color: #fff; font-weight: 700; }

.quadro-rolagem { overflow-x: auto; max-width: 100%; margin-top: 12px; }
.quadro { display: grid; grid-template-columns: repeat(5, minmax(190px, 1fr)); gap: 10px; min-width: 1010px; }
.quadro-coluna { border: 1px dashed var(--cinza2); border-radius: var(--raio); padding: 10px; min-height: 240px; background: var(--fundo); }
.quadro-cabeca { font-size: 13px; margin-bottom: 8px; }
.quadro-cabeca strong { font-weight: 600; }
.quadro-cabeca small { display: block; color: var(--texto2); font-size: 11.5px; }
.quadro-cartao { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; background: var(--cartao); border-radius: 6px; padding: 8px 10px; margin-bottom: 6px; font-size: 13px; font-weight: 500; box-shadow: var(--sombra); overflow-wrap: normal; word-break: normal; }
.quadro-cartao:hover { background: #fafafa; }
.quadro-prioridade { width: 100%; padding-left: 36px; color: var(--texto2); font-size: 11px; font-weight: 600; }

.roteiro { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 12px; }
.roteiro-fase { border: 1px solid var(--cinza); border-radius: var(--raio); overflow: hidden; background: var(--cartao); display: flex; flex-direction: column; }
.roteiro-cabeca { font-weight: 600; padding: 10px 14px; font-size: 14px; background: var(--fundo); border-bottom: 1px solid var(--cinza); }
.roteiro-cabeca small { display: block; font-weight: 400; font-size: 12px; color: var(--texto2); }
.roteiro-fase ul { list-style: none; padding: 8px 14px; flex: 1; }
.roteiro-fase li { padding: 5px 0; font-size: 13px; display: flex; gap: 6px; align-items: baseline; color: var(--texto); }
.roteiro-pronto { border-top: 1px solid var(--cinza); padding: 8px 14px 12px; font-size: 13px; color: var(--texto2); }
.roteiro-pronto span { display: block; font-size: 10px; font-weight: 700; letter-spacing: .5px; }

.precos { display: flex; flex-direction: column; margin-top: 8px; }
.preco-linha { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--cinza); font-size: 15px; }
.preco-linha:last-child { border-bottom: 0; }
.preco-linha span { color: var(--texto); }
.preco-linha strong { font-weight: 600; text-align: right; }
.decisoes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 12px; }
.decisao { display: flex; gap: 12px; background: var(--cartao); border: 1px solid var(--cinza); border-radius: var(--raio); padding: 14px; }
.decisao-numero { font-size: 17px; font-weight: 700; color: var(--texto2); }
.decisao.fechada .decisao-numero { color: var(--cor); }
.decisao-pergunta { font-weight: 600; font-size: 14px; }
.decisao-sugestao { margin-top: 6px; font-size: 13px; color: var(--texto2); }
.decisao-sugestao span { display: block; font-size: 10px; font-weight: 700; letter-spacing: .5px; }
.decisao-resposta { margin-top: 6px; color: var(--cor); font-size: 13px; font-weight: 600; }

/* Página de processo */
.processo-cabeca { display: flex; align-items: center; gap: 10px; }
.processo-cabeca .pagina-titulo { margin-bottom: 0; }
.processo-cabeca + .pagina-sub { margin-top: 6px; }
.fluxo { display: flex; flex-direction: column; margin-top: 8px; }
.fluxo-passo { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--cinza); }
.fluxo-passo:last-child { border-bottom: 0; }
.fluxo-dono {
  flex: none; width: 90px; font-size: 11px; font-weight: 600;
  color: var(--texto2); text-transform: uppercase; letter-spacing: .3px; padding-top: 3px;
}
.fluxo-corpo { flex: 1; min-width: 0; font-size: 14px; }
.fluxo-corpo strong { display: block; font-weight: 600; font-size: 15px; }
.fluxo-corpo span { color: var(--texto2); font-size: 13.5px; }
.fluxo-tempo { flex: none; color: var(--texto2); font-size: 12px; font-weight: 600; padding-top: 3px; }
.quatro-caixas { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 16px; }
.caixa-rodape { padding: 12px 16px; }
.caixa-rodape span { display: block; font-size: 11px; font-weight: 700; letter-spacing: .5px; margin-bottom: 2px; color: var(--texto2); }
.caixa-rodape strong { font-size: 14px; font-weight: 600; }

/* ── Vocabulário de cores: cada tipo de coisa tem a sua, sempre a mesma ──
   lead azul · cliente verde · cobrança roxo · entrega laranja ·
   agente cinza-azulado · sistema (Motta) petróleo · você terracota.
   Discretas: só no avatar e no marcador pequeno, nunca no texto. */
:root {
  --c-lead:     #3b82f6;  --t-lead:     rgba(59, 130, 246, .13);
  --c-cliente:  #16a34a;  --t-cliente:  rgba(22, 163, 74, .13);
  --c-cobranca: #8b5cf6;  --t-cobranca: rgba(139, 92, 246, .13);
  --c-entrega:  #d97706;  --t-entrega:  rgba(217, 119, 6, .13);
  --c-agente:   #64748b;  --t-agente:   rgba(100, 116, 139, .14);
  --c-sistema:  #0e7490;  --t-sistema:  rgba(14, 116, 144, .12);
  --c-voce:     #b45309;  --t-voce:     rgba(180, 83, 9, .13);
}
.marcador {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin-right: 6px; vertical-align: baseline; background: var(--cinza2);
}
.cor-lead.marcador     { background: var(--c-lead); }
.cor-cliente.marcador  { background: var(--c-cliente); }
.cor-cobranca.marcador { background: var(--c-cobranca); }
.cor-entrega.marcador  { background: var(--c-entrega); }
.cor-agente.marcador   { background: var(--c-agente); }
.cor-sistema.marcador  { background: var(--c-sistema); }
.cor-voce.marcador     { background: var(--c-voce); }

/* Estágios: mesma cor em toda tela.
   novo azul · em conversa âmbar · proposta roxo · fechado/ativo/paga verde ·
   perdido/atrasada vermelho · dormente/encerrado/cancelada cinza · pausado/pendente âmbar */
.est-novo        { background: var(--c-lead); }
.est-em-conversa { background: #d97706; }
.est-proposta    { background: #8b5cf6; }
.est-fechado, .est-ativo, .est-paga { background: var(--c-cliente); }
.est-perdido, .est-atrasada { background: #dc2626; }
.est-dormente, .est-encerrado, .est-cancelada { background: #9ca3af; }
.est-pausado, .est-pendente { background: #d97706; }

/* Áreas (pilares) nos indicadores */
.area-atrair   { background: #0891b2; }
.area-vender   { background: var(--c-lead); }
.area-entregar { background: var(--c-cliente); }
.area-manter   { background: #d97706; }
.area-fundacao { background: #8b5cf6; }

/* Avatares pintados pelo tipo (fundo suave, letra na cor) */
.pessoa-avatar.cor-lead, .evento-avatar.cor-lead, .perfil-avatar.cor-lead { background: var(--t-lead); color: var(--c-lead); }
.pessoa-avatar.cor-cliente, .evento-avatar.cor-cliente, .perfil-avatar.cor-cliente { background: var(--t-cliente); color: var(--c-cliente); }
.evento-avatar.cor-agente { background: var(--t-agente); color: var(--c-agente); }
.evento-avatar.cor-sistema { background: var(--t-sistema); color: var(--c-sistema); }
.evento-avatar.cor-voce { background: var(--t-voce); color: var(--c-voce); }

/* Filtros e grupos das listas */
.filtros { display: flex; gap: 12px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.filtros label { display: flex; gap: 6px; align-items: center; color: var(--texto2); font-size: 13px; font-weight: 600; }
.filtros select {
  background: var(--fundo); border: 1px solid var(--cinza); border-radius: 6px;
  padding: 6px 10px; font-size: 14px; color: var(--texto); outline: 0;
}
.grupo-titulo { font-size: 15px; font-weight: 700; margin-bottom: 6px; }
.grupo-titulo small { color: var(--texto2); font-weight: 600; font-size: 13px; margin-left: 4px; }

/* ── Gente: listas e perfis ─────────────────────────────────────── */
.bloco-busca { margin-bottom: 16px; }
.evento-link:hover { text-decoration: underline; }
.lista-pessoas { display: flex; flex-direction: column; }
.pessoa-linha {
  display: flex; align-items: center; gap: 10px;
  padding: 8px; border-radius: 8px;
}
.pessoa-linha:hover { background: var(--fundo); }
.pessoa-avatar {
  width: 36px; height: 36px; border-radius: 50%; flex: none;
  background: var(--cinza); color: var(--texto2); font-weight: 700; font-size: 15px;
  display: flex; align-items: center; justify-content: center;
}
.pessoa-corpo { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 1px; }
.pessoa-nome { font-weight: 600; font-size: 15px; display: block; }
.pessoa-colunas { display: grid; grid-template-columns: 130px 150px 1fr; gap: 10px; }
.pessoa-col { color: var(--texto2); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pessoa-detalhe { color: var(--texto2); font-size: 13px; min-width: 0; }

.perfil-capa { padding-top: 20px; }
.perfil-cabeca { display: flex; align-items: center; gap: 14px; }
.perfil-avatar {
  width: 72px; height: 72px; border-radius: 50%; flex: none;
  background: var(--cor); color: #fff; font-weight: 700; font-size: 30px;
  display: flex; align-items: center; justify-content: center;
}
.perfil-quem { min-width: 0; }
.perfil-sub { display: flex; gap: 6px 14px; align-items: center; flex-wrap: wrap; }
.perfil-sub .marcador { margin-right: 4px; }
.perfil-degrau { color: var(--texto2); }
.perfil-dados { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 16px; margin-top: 16px; border-top: 1px solid var(--cinza); padding-top: 12px; }
.perfil-dado { display: flex; gap: 8px; align-items: baseline; padding: 4px 0; font-size: 14px; }
.perfil-dado span { color: var(--texto2); flex: none; }
.perfil-dado strong { font-weight: 600; }
.bloco-solto { padding: 0 4px 8px; }

.lista-cobrancas { display: flex; flex-direction: column; }
.cobranca-linha { display: flex; gap: 12px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--cinza); font-size: 14px; flex-wrap: wrap; }
.cobranca-linha:last-child { border-bottom: 0; }
.cobranca-valor { font-weight: 600; flex: none; }
.cobranca-detalhe { color: var(--texto2); flex: 1; min-width: 0; }
.cobranca-estado { color: var(--texto2); font-size: 13px; flex: none; }

/* ── Medição ────────────────────────────────────────────────────── */
.medicao-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.medicao-tile { display: flex; flex-direction: column; gap: 2px; padding: 16px; }
.medicao-tile strong { font-size: 26px; font-weight: 700; }
.medicao-tile span { font-size: 14px; font-weight: 600; }
.medicao-tile small { color: var(--texto2); font-size: 12.5px; }

.funil { display: flex; flex-direction: column; margin-top: 10px; }
.funil-linha { display: grid; grid-template-columns: 110px 1fr 60px 110px; gap: 10px; align-items: center; padding: 7px 0; }
.funil-nome { font-size: 13.5px; font-weight: 600; }
.funil-barra { background: var(--fundo); border-radius: 999px; height: 14px; overflow: hidden; }
.funil-cheio { display: block; height: 100%; background: var(--cor); border-radius: 999px; }
.funil-valor { font-weight: 700; font-size: 14px; text-align: right; }
.funil-meta { color: var(--texto2); font-size: 12px; }

.dicionario { display: flex; flex-direction: column; margin-top: 8px; }
.indicador { padding: 12px 0; border-bottom: 1px solid var(--cinza); }
.indicador:last-child { border-bottom: 0; }
.indicador-cabeca { display: flex; gap: 10px; align-items: baseline; justify-content: space-between; }
.indicador-cabeca strong { font-weight: 600; font-size: 15px; }
.indicador-area { color: var(--texto2); font-size: 12px; font-weight: 600; flex: none; }
.indicador-definicao { color: var(--texto2); font-size: 13.5px; margin-top: 2px; }
.indicador-rodape { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 8px; }
.indicador-col { color: var(--texto); font-size: 13px; min-width: 0; overflow-wrap: break-word; }
.indicador-col small { display: block; color: var(--texto2); font-size: 11px; font-weight: 600; }

/* Barra de celular */
.barra-celular {
  display: none;
  position: fixed; inset: auto 0 0 0; height: 52px;
  background: var(--cartao); border-top: 1px solid var(--divisa);
  z-index: 50;
}
.barra-celular a, .barra-celular button {
  flex: 1; display: flex; align-items: center; justify-content: center;
  color: var(--texto2); font-weight: 600; font-size: 13px;
}
.barra-celular .ativa { color: var(--cor); }
.veu { position: fixed; inset: 0; background: rgba(0, 0, 0, .45); z-index: 55; }

/* ── Login ──────────────────────────────────────────────────────── */
.tela-login { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 20px; background: var(--fundo); }
.login-palco { width: 100%; max-width: 396px; display: flex; flex-direction: column; gap: 20px; }
.login-marca { text-align: center; }
.login-marca img { width: 60px; height: 60px; border-radius: 50%; }
.login-marca h1 { font-size: 26px; font-weight: 700; margin-top: 10px; color: var(--cor); }
.login-marca p { color: var(--texto); margin-top: 6px; font-size: 17px; }
.login-cartao { display: flex; flex-direction: column; gap: 10px; padding: 20px 18px 24px; }
.login-cartao label { display: none; }
.login-cartao input {
  background: var(--cartao); border: 1px solid #dddfe2; border-radius: 6px;
  padding: 13px 14px; color: var(--texto); outline: 0; font-size: 16px;
}
.login-cartao input::placeholder { color: var(--texto2); }
.login-cartao input:focus { border-color: var(--cor); box-shadow: 0 0 0 2px rgba(14, 116, 144, .15); }
.login-cartao .botao-primario { margin-top: 6px; }
.login-erro {
  background: #ffebe8; border: 1px solid #dd3c10;
  color: var(--texto); border-radius: 6px; padding: 10px 12px; font-size: 13.5px;
}

/* ── Tablet ─────────────────────────────────────────────────────── */
@media (max-width: 1150px) {
  .palco { grid-template-columns: minmax(0, 680px) 280px; }
  .coluna-esquerda { display: none; }
  .abas { position: static; transform: none; justify-self: center; }
  .topo-area { grid-template-columns: auto auto 1fr auto; }
  .busca { max-width: 180px; }
  .aba { width: 90px; }
}

/* ── Celular (390px é o alvo de teste) ──────────────────────────── */
@media (max-width: 900px) {
  .palco { grid-template-columns: minmax(0, 1fr); padding: calc(var(--topo-altura) + 12px) 8px 80px; gap: 12px; }
  .coluna-direita { display: none; position: static; max-height: none; }
  .barra-celular { display: flex; }
  .marca-nome { display: none; }
  .abas { display: none; }
  .topo-area { grid-template-columns: auto 1fr auto; }
  .busca { max-width: none; }
  .cartao { padding: 12px; }

  .mapa-pilares, .selo-grade, .roteiro, .decisoes, .quatro-caixas, .mapa-fundacao-blocos { grid-template-columns: 1fr; }
  .escada { grid-template-columns: 1fr; align-items: stretch; }
  .degrau { min-height: 0; }
  .sobe-linha { flex-wrap: wrap; }
  .sobe-trilha { width: 100%; justify-content: space-between; }
  .fluxo-passo { flex-wrap: wrap; }
  .fluxo-dono { width: 100%; padding-top: 0; }
  .fluxo-tempo { padding-top: 2px; }
  .medicao-tiles { grid-template-columns: repeat(2, 1fr); }
  .perfil-dados { grid-template-columns: 1fr; }
  .funil-linha { grid-template-columns: 92px 1fr 48px; }
  .funil-meta { display: none; }
  .pessoa-colunas { grid-template-columns: 112px 1fr; }
  .pessoa-colunas .pessoa-col:nth-child(3) { display: none; }
  .indicador-rodape { grid-template-columns: repeat(2, 1fr); }
  .perfil-sub .perfil-degrau { display: block; }

  .coluna-direita.aberta, .coluna-esquerda.aberta {
    display: flex; flex-direction: column; gap: 12px;
    position: fixed; inset: auto 0 52px 0; max-height: 70vh;
    background: var(--cartao);
    border-radius: 12px 12px 0 0;
    padding: 16px 12px; overflow-y: auto; z-index: 56;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, .25);
  }
  .coluna-esquerda.aberta { display: block; }
}