/* ==========================================================================
   QuartzFlow — front editável (14/08/2026)
   Identidade inspirada no Quartz OS: fundo lavanda, destaque roxo, raio de 9px,
   tipografia encorpada. Ao contrário do app antigo, aqui NÃO há build: editar
   este arquivo e recarregar já vale.
   ========================================================================== */

/* ==========================================================================
   ISTO PRECISA VIR ANTES DE QUALQUER display:.
   O navegador esconde elementos com [hidden] via display:none na folha DELE --
   e qualquer regra de autor com display: vence a do navegador. Como .login e
   .app declaram display:grid, o atributo hidden virava letra morta: a tela de
   login continuava visivel depois do login bem-sucedido e parecia que o
   sistema "nao entrava". Foi exatamente esse o defeito relatado em 14/08/2026.
   ========================================================================== */
[hidden]{display:none !important}


:root{
  --bg-page:#f7f7fb;
  --bg-surface:#ffffff;
  --bg-muted:#f3f2fa;
  --bg-hover:#f0eefc;
  --borda:#e6e5ef;
  --borda-forte:#d4d3e2;

  --texto:#14131e;
  --texto-2:#3a3d4d;
  --texto-3:#626678;

  --destaque:#6c5ce7;
  --destaque-suave:#f0eefc;
  --ok:#12b76a;
  --ok-suave:rgba(18,183,106,.12);
  --erro:#f04438;
  --erro-suave:rgba(240,68,56,.10);
  --atencao:#f79009;
  --atencao-suave:rgba(247,144,9,.12);

  --r:9px;
  --r-g:14px;
  --sombra:0 1px 2px rgba(20,19,30,.04), 0 8px 24px rgba(20,19,30,.06);

  --fs-xs:12px;
  --fs-sm:13px;
  --fs:14px;
  --fs-md:15px;
  --fs-lg:18px;
  --fs-xl:24px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg-page); color:var(--texto);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:var(--fs); line-height:1.55; -webkit-font-smoothing:antialiased;
}
h1,h2,h3{margin:0; font-weight:600; letter-spacing:-.01em}
p{margin:0}
button,input,select,textarea{font-family:inherit; font-size:inherit; color:inherit}

/* ---------- login ---------- */
.login{min-height:100vh; display:grid; place-items:center; padding:24px;
  background:radial-gradient(ellipse 70% 50% at 50% 0%, var(--destaque-suave) 0%, transparent 70%), var(--bg-page)}
.login-caixa{width:100%; max-width:380px; background:var(--bg-surface); border:1px solid var(--borda);
  border-radius:var(--r-g); padding:28px; box-shadow:var(--sombra); display:flex; flex-direction:column; gap:16px}
.login-marca{display:flex; align-items:center; gap:12px; margin-bottom:4px}
.login-logo{width:42px; height:42px; border-radius:11px; background:var(--destaque); color:#fff;
  display:grid; place-items:center; font-weight:700; font-size:20px; flex-shrink:0}
.login-logo.pequeno{width:30px; height:30px; font-size:15px; border-radius:8px}
.login-marca h1{font-size:var(--fs-lg)}
.login-marca p{font-size:var(--fs-sm); color:var(--texto-3)}
.login-erro{background:var(--erro-suave); color:#b42318; border-radius:var(--r);
  padding:9px 12px; font-size:var(--fs-sm)}

.campo{display:flex; flex-direction:column; gap:6px}
.campo span{font-size:var(--fs-sm); font-weight:500; color:var(--texto-2)}
.campo input,.campo select{padding:10px 12px; border:1px solid var(--borda); border-radius:var(--r);
  background:var(--bg-surface); outline:none}
.campo input:focus,.campo select:focus{border-color:var(--destaque); box-shadow:0 0 0 3px var(--destaque-suave)}

.botao{border:1px solid transparent; border-radius:var(--r); padding:9px 16px; font-size:var(--fs-sm);
  font-weight:600; cursor:pointer; transition:filter .15s, background .15s}
.botao:disabled{opacity:.55; cursor:progress}
.botao-primario{background:var(--destaque); color:#fff}
.botao-primario:hover:not(:disabled){filter:brightness(1.08)}
.botao-discreto{background:var(--bg-muted); color:var(--texto-2); border-color:var(--borda)}
.botao-discreto:hover{background:var(--bg-hover)}

/* ---------- estrutura ---------- */
.app{display:grid; grid-template-columns:236px 1fr; min-height:100vh}
.lateral{background:var(--bg-surface); border-right:1px solid var(--borda);
  display:flex; flex-direction:column; padding:16px 12px; gap:14px; position:sticky; top:0; height:100vh}
.lateral-marca{display:flex; align-items:center; gap:10px; padding:4px 8px; font-weight:600}
.menu{display:flex; flex-direction:column; gap:2px; overflow-y:auto; flex:1}
.menu a{display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:var(--r);
  color:var(--texto-2); text-decoration:none; font-size:var(--fs-sm); font-weight:500}
.menu a:hover{background:var(--bg-muted); color:var(--texto)}
.menu a.ativo{background:var(--destaque-suave); color:var(--destaque); font-weight:600}
.menu-ponto{width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.55; flex-shrink:0}

.lateral-rodape{border-top:1px solid var(--borda); padding-top:12px; display:flex; flex-direction:column; gap:10px}
.usuario{display:flex; align-items:center; gap:10px}
.usuario-avatar{width:32px; height:32px; border-radius:50%; background:var(--destaque-suave);
  color:var(--destaque); display:grid; place-items:center; font-weight:700; font-size:var(--fs-sm)}
.usuario-dados{display:flex; flex-direction:column; line-height:1.3; overflow:hidden}
.usuario-dados strong{font-size:var(--fs-sm); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.usuario-dados span{font-size:var(--fs-xs); color:var(--texto-3)}

.conteudo{display:flex; flex-direction:column; min-width:0}
.topo{display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  padding:22px 26px 16px; border-bottom:1px solid var(--borda); background:var(--bg-surface)}
.topo h2{font-size:var(--fs-xl); font-weight:600}
.topo p{font-size:var(--fs-sm); color:var(--texto-3); margin-top:2px}
.acoes{display:flex; gap:8px; flex-wrap:wrap}
.corpo{padding:22px 26px 48px; min-width:0}

/* ---------- blocos ---------- */
.cartoes{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; margin-bottom:18px}
.cartao{background:var(--bg-surface); border:1px solid var(--borda); border-radius:var(--r-g); padding:14px 16px}
.cartao b{display:block; font-size:var(--fs-xl); font-weight:700; letter-spacing:-.02em}
.cartao span{font-size:var(--fs-sm); color:var(--texto-3); font-weight:500}

.filtros{display:flex; gap:10px; margin-bottom:14px; flex-wrap:wrap; align-items:center}
.filtros input,.filtros select{padding:8px 12px; border:1px solid var(--borda); border-radius:var(--r);
  background:var(--bg-surface); outline:none; font-size:var(--fs-sm)}
.filtros input{min-width:230px; flex:1}
.filtros input:focus,.filtros select:focus{border-color:var(--destaque)}

.quadro{background:var(--bg-surface); border:1px solid var(--borda); border-radius:var(--r-g); overflow:auto}
table{border-collapse:collapse; width:100%; min-width:840px}
th,td{text-align:left; padding:11px 14px; border-bottom:1px solid var(--bg-muted); white-space:nowrap}
thead th{position:sticky; top:0; background:var(--bg-muted); z-index:1; font-size:var(--fs-xs);
  font-weight:600; color:var(--texto-2); text-transform:uppercase; letter-spacing:.05em}
tbody tr:hover{background:var(--bg-hover)}
tbody tr:last-child td{border-bottom:none}
td .principal{font-weight:600}
td .secundario{font-size:var(--fs-xs); color:var(--texto-3)}

.selo{display:inline-block; padding:3px 9px; border-radius:999px; font-size:var(--fs-xs); font-weight:600}
.selo-neutro{background:var(--bg-muted); color:var(--texto-2)}
.selo-ok{background:var(--ok-suave); color:#0a7a47}
.selo-erro{background:var(--erro-suave); color:#b42318}
.selo-atencao{background:var(--atencao-suave); color:#b54708}
.selo-destaque{background:var(--destaque-suave); color:var(--destaque)}

select.status{border:1px solid var(--borda); border-radius:999px; padding:4px 8px;
  font-size:var(--fs-xs); font-weight:600; background:var(--bg-surface); cursor:pointer}

.paginacao{display:flex; align-items:center; gap:10px; justify-content:flex-end; margin-top:14px;
  font-size:var(--fs-sm); color:var(--texto-3)}
.vazio{padding:38px; text-align:center; color:var(--texto-3); font-size:var(--fs-sm)}
.carregando{padding:38px; text-align:center; color:var(--texto-3); font-size:var(--fs-sm)}

/* ---------- aviso flutuante ---------- */
.aviso{position:fixed; right:20px; bottom:20px; background:var(--texto); color:#fff;
  padding:11px 16px; border-radius:var(--r); font-size:var(--fs-sm); font-weight:500;
  box-shadow:var(--sombra); z-index:50; max-width:340px}
.aviso.erro{background:var(--erro)}
.aviso.ok{background:var(--ok)}

@media (max-width:860px){
  .app{grid-template-columns:1fr}
  .lateral{position:static; height:auto; flex-direction:row; align-items:center; flex-wrap:wrap; gap:10px}
  .menu{flex-direction:row; flex-wrap:wrap; flex:1 1 100%}
  .lateral-rodape{border-top:none; padding-top:0; flex-direction:row; align-items:center; gap:12px}
  .topo,.corpo{padding-left:16px; padding-right:16px}
}

/* Olho para revelar a senha. Alem de conveniencia, serve de diagnostico:
   a dica ao lado conta os caracteres e avisa se ha espaco sobrando nas pontas,
   causa classica de "a senha esta certa e mesmo assim nao entra". */
.campo-senha{position:relative; display:block}
.campo-senha input{width:100%; padding-right:42px}
.olho{position:absolute; right:6px; top:50%; transform:translateY(-50%);
  background:none; border:none; padding:6px; cursor:pointer; color:var(--texto-3);
  display:flex; align-items:center; border-radius:6px}
.olho:hover{background:var(--bg-muted); color:var(--texto-2)}
.olho.ativo{color:var(--destaque)}
.dica-senha{font-size:11px; color:var(--texto-3)}
.dica-senha.alerta{color:var(--erro); font-weight:600}

/* ==========================================================================
   Quadro do funil (CRM)
   Colunas de largura fixa com rolagem horizontal: com 12 etapas nao adianta
   tentar espremer tudo na tela. O cartao carrega uma faixa colorida a esquerda
   com a cor da etapa, para o olho achar o estado sem ler o cabecalho.
   ========================================================================== */
.funil{display:flex; gap:12px; overflow-x:auto; padding-bottom:14px; align-items:flex-start}
.funil-coluna{flex:0 0 268px; background:var(--bg-muted); border:1px solid var(--borda);
  border-radius:var(--r-g); padding:10px; display:flex; flex-direction:column; gap:8px; max-height:calc(100vh - 300px)}
.funil-coluna.alvo{background:var(--destaque-suave); border-color:var(--destaque)}
.funil-topo{display:flex; align-items:center; justify-content:space-between; gap:8px;
  border-top:3px solid var(--destaque); padding-top:8px}
.funil-titulo{font-size:var(--fs-sm); font-weight:600}
.funil-conta{font-size:var(--fs-xs); font-weight:700; color:var(--texto-3);
  background:var(--bg-surface); border-radius:999px; padding:1px 8px; border:1px solid var(--borda)}
.funil-soma{font-size:var(--fs-xs); color:var(--texto-3); font-weight:600; margin-top:-4px}
.funil-pilha{display:flex; flex-direction:column; gap:8px; overflow-y:auto; min-height:70px; padding:2px}
.funil-vazio{border:1px dashed var(--borda-forte); border-radius:var(--r); padding:14px;
  text-align:center; font-size:var(--fs-xs); color:var(--texto-3)}

.cartao-lead{background:var(--bg-surface); border:1px solid var(--borda); border-left:3px solid var(--destaque);
  border-radius:var(--r); padding:10px 12px; display:flex; flex-direction:column; gap:6px;
  cursor:grab; box-shadow:0 1px 2px rgba(20,19,30,.04)}
.cartao-lead:active{cursor:grabbing}
.cartao-lead.arrastando{opacity:.45; transform:rotate(1deg)}
.cartao-lead-nome{font-weight:600; font-size:var(--fs-sm); line-height:1.35}
.cartao-lead-titulo{font-size:var(--fs-xs); color:var(--texto-2)}
.cartao-lead-meta{display:flex; flex-wrap:wrap; gap:6px; align-items:center}
.cartao-lead-valor{font-size:var(--fs-xs); font-weight:700; color:var(--ok)}
.cartao-lead-pe{display:flex; justify-content:space-between; gap:8px;
  font-size:11px; color:var(--texto-3)}
.cartao-lead select.status{width:100%; margin-top:2px}

/* ==========================================================================
   Blocos das telas de cadastro e do dashboard
   ========================================================================== */
.grade-produtos{display:grid; grid-template-columns:repeat(auto-fill,minmax(268px,1fr)); gap:14px}
.produto{background:var(--bg-surface); border:1px solid var(--borda); border-radius:var(--r-g);
  overflow:hidden; display:flex; flex-direction:column}
.produto-capa{aspect-ratio:16/9; background:var(--bg-muted); display:grid; place-items:center;
  color:var(--texto-3); font-size:var(--fs-xs)}
.produto-capa img{width:100%; height:100%; object-fit:cover; display:block}
.produto-corpo{padding:14px 16px; display:flex; flex-direction:column; gap:7px}
.produto-topo{display:flex; align-items:flex-start; justify-content:space-between; gap:8px}
.produto-topo h3{font-size:var(--fs-md); line-height:1.3}
.produto-praca{font-size:var(--fs-xs); color:var(--texto-3)}
.produto-desc{font-size:var(--fs-xs); color:var(--texto-2); line-height:1.5;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.produto-dados{display:flex; gap:16px; flex-wrap:wrap; border-top:1px solid var(--bg-muted); padding-top:9px}
.produto-dados>div{display:flex; flex-direction:column}
.produto-rotulo{font-size:10px; color:var(--texto-3); text-transform:uppercase; letter-spacing:.06em; font-weight:600}
.produto-dados strong{font-size:var(--fs-sm); font-weight:600}

.grade-equipes{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:12px}
.equipe{background:var(--bg-surface); border:1px solid var(--borda); border-radius:var(--r-g);
  padding:14px 16px; display:flex; flex-direction:column; gap:9px}
.equipe-topo{display:flex; align-items:center; justify-content:space-between; gap:8px}
.equipe-topo h3{font-size:var(--fs-md)}
.equipe-membros{font-size:var(--fs-xs); color:var(--texto-2); line-height:1.5; min-height:2em}
.equipe-edicao{border-top:1px solid var(--bg-muted); padding-top:9px; display:flex;
  flex-direction:column; gap:5px; max-height:220px; overflow-y:auto}
.equipe-pessoa{display:flex; align-items:center; gap:8px; font-size:var(--fs-xs); cursor:pointer}
.equipe-pessoa input{accent-color:var(--destaque)}

th.mod,td.mod{text-align:center; width:92px}
th.mod-off{color:var(--texto-3); text-decoration:line-through}
td.mod input{accent-color:var(--destaque); width:16px; height:16px; cursor:pointer}
td.mod input:disabled{opacity:.35; cursor:not-allowed}
.nota{font-size:var(--fs-xs); color:var(--texto-3); margin-top:10px; line-height:1.6}

.grade-paineis{display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:14px}
.painel{background:var(--bg-surface); border:1px solid var(--borda); border-radius:var(--r-g); padding:16px}
.painel-titulo{font-size:var(--fs-sm); font-weight:600; color:var(--texto-2);
  text-transform:uppercase; letter-spacing:.05em; margin-bottom:12px}
.barra-linha{display:grid; grid-template-columns:132px 1fr 74px; align-items:center; gap:10px; margin-bottom:8px}
.barra-rotulo{font-size:var(--fs-xs); color:var(--texto-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.barra-trilho{background:var(--bg-muted); border-radius:999px; height:9px; overflow:hidden}
.barra{height:100%; border-radius:999px; transition:width .3s}
.barra-valor{font-size:var(--fs-xs); font-weight:700; text-align:right}

/* ---------------------------------------------------------------- Inbox
   Duas colunas: lista de conversas e a conversa aberta. A altura é presa à
   janela (não ao conteúdo) de propósito -- num chat quem rola é a thread, não
   a página; sem isso a lista de mensagens empurraria a caixa de resposta para
   fora da tela.

   Os controles vão sem classe no HTML e são estilizados pelo contexto, como o
   resto do front faz em `.filtros input`. */
.inbox{display:grid; grid-template-columns:320px 1fr; gap:14px;
  height:calc(100vh - 200px); min-height:420px}

.inbox-lista{background:var(--bg-surface); border:1px solid var(--borda); border-radius:var(--r-g);
  display:flex; flex-direction:column; overflow:hidden}
.inbox-busca{padding:10px; border-bottom:1px solid var(--borda)}
.inbox-busca input{width:100%; padding:8px 12px; border:1px solid var(--borda);
  border-radius:var(--r); background:var(--bg-surface); outline:none}
.inbox-busca input:focus{border-color:var(--destaque)}
.inbox-itens{flex:1; overflow-y:auto}

.inbox-item{position:relative; display:block; width:100%; text-align:left; background:none;
  border:0; border-bottom:1px solid var(--borda); padding:11px 12px; cursor:pointer; font:inherit}
.inbox-item:hover{background:var(--bg-hover)}
.inbox-item.ativo{background:var(--bg-muted)}
.inbox-item-topo{display:flex; justify-content:space-between; align-items:baseline; gap:8px}
.inbox-item-nome{font-size:var(--fs-sm); font-weight:600; color:var(--texto);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.inbox-item-hora{font-size:var(--fs-xs); color:var(--texto-3); flex-shrink:0}
.inbox-item-meta{font-size:var(--fs-xs); color:var(--texto-3); margin-top:3px; padding-right:34px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.inbox-nao-lidas{position:absolute; right:12px; bottom:10px; background:var(--ok); color:#fff;
  font-size:var(--fs-xs); font-weight:700; border-radius:999px; padding:1px 7px}

.inbox-chat{background:var(--bg-surface); border:1px solid var(--borda); border-radius:var(--r-g);
  display:flex; flex-direction:column; overflow:hidden}
.inbox-topo{display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:12px 14px; border-bottom:1px solid var(--borda)}
.inbox-topo-nome{font-size:var(--fs-md); font-weight:600}
.inbox-topo-acoes{display:flex; gap:8px; align-items:center; flex-shrink:0}
.inbox-topo-acoes select{min-width:170px; padding:6px 10px; border:1px solid var(--borda);
  border-radius:var(--r); background:var(--bg-surface); outline:none}
.inbox-topo-acoes select:focus{border-color:var(--destaque)}

.inbox-thread{flex:1; overflow-y:auto; padding:14px; background:var(--bg-page);
  display:flex; flex-direction:column; gap:6px}
.inbox-dia{align-self:center; font-size:var(--fs-xs); color:var(--texto-3);
  background:var(--bg-surface); border:1px solid var(--borda); border-radius:999px;
  padding:2px 10px; margin:8px 0}

.inbox-bolha{max-width:70%; align-self:flex-start; background:var(--bg-surface);
  border:1px solid var(--borda); border-radius:var(--r); padding:8px 11px}
.inbox-bolha.minha{align-self:flex-end; background:var(--destaque-suave); border-color:transparent}
.inbox-bolha-texto{font-size:var(--fs-sm); color:var(--texto); white-space:pre-wrap; word-break:break-word}
.inbox-bolha-pe{font-size:var(--fs-xs); color:var(--texto-3); text-align:right; margin-top:3px}

.inbox-responder{border-top:1px solid var(--borda); padding:10px 12px}
.inbox-responder-linha{display:flex; gap:8px; align-items:flex-end}
.inbox-responder-linha textarea{flex:1; resize:vertical; padding:9px 12px;
  border:1px solid var(--borda); border-radius:var(--r); background:var(--bg-surface); outline:none}
.inbox-responder-linha textarea:focus{border-color:var(--destaque)}
.inbox-janela{font-size:var(--fs-xs); color:var(--atencao); background:var(--atencao-suave);
  border-radius:var(--r); padding:7px 10px; margin-bottom:8px}

/* Numa tela estreita as duas colunas não cabem lado a lado: a lista vira uma
   faixa de altura limitada e o chat fica embaixo, em vez de espremer as duas. */
@media (max-width: 860px){
  .inbox{grid-template-columns:1fr; height:auto}
  .inbox-itens{max-height:230px}
  .inbox-thread{min-height:320px}
}

/* ------------------------------------------------------- Configurações */
.config-secao{margin-bottom:14px}
.config-secao .nota{margin:-4px 0 12px}

.config-modulos{display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:8px}
.config-modulo{display:flex; align-items:center; gap:9px; padding:9px 11px;
  border:1px solid var(--borda); border-radius:var(--r); cursor:pointer; font-size:var(--fs-sm)}
.config-modulo:hover{background:var(--bg-hover)}
.config-modulo input{accent-color:var(--destaque); width:16px; height:16px; cursor:pointer}
/* Sem a permissão o item continua legível -- some a mão e o realce de clique,
   não a informação. */
.config-modulo.travado{cursor:default; opacity:.7}
.config-modulo.travado:hover{background:none}
.config-modulo.travado input{cursor:not-allowed}

.config-cor{display:flex; align-items:center; gap:10px}
.config-cor input[type=color]{width:52px; height:36px; padding:2px; border:1px solid var(--borda);
  border-radius:var(--r); background:var(--bg-surface); cursor:pointer}

/* ------------------------------------------------- Cartão sem permissão
   Sem crm:write o cartão continua legível e some só a mão de arrastar --
   mesma regra de .config-modulo.travado. Estas duas regras nasceram no Kanban;
   quando ele foi retirado (25/08/2026) e o CRM ficou sendo o único quadro,
   vieram junto, porque a situação é a mesma: quem só lê continua lendo. */
.cartao-lead:not([draggable=true]){cursor:default}
.cartao-lead select.status:disabled{opacity:.55; cursor:not-allowed}

/* ------------------------------------------------------------- Diálogo
   Usado quando a confirmação precisa EXPLICAR o efeito (marcar venda lança um
   recebível) ou pedir um dado obrigatório (motivo da perda) -- coisas que não
   cabem em confirm()/prompt() do navegador. */
.modal{position:fixed; inset:0; z-index:120; display:flex; align-items:center;
  justify-content:center; padding:20px; background:rgba(20,19,30,.45)}
.modal-caixa{background:var(--bg-surface); border:1px solid var(--borda);
  border-radius:var(--r-g); box-shadow:var(--sombra); padding:20px 22px;
  width:100%; max-width:440px; display:flex; flex-direction:column; gap:14px}
.modal-caixa h3{font-size:var(--fs-lg); font-weight:600; letter-spacing:-.01em}
.modal-caixa p{font-size:var(--fs-sm); color:var(--texto-2); line-height:1.6}
.modal-pe{display:flex; justify-content:flex-end; gap:9px; margin-top:2px}

/* Campo obrigatório em branco: o servidor devolveria 400, então a recusa
   aparece aqui, no campo, antes da viagem. */
.modal-caixa input.invalido{border-color:var(--erro)}
.modal-caixa input.invalido:focus{box-shadow:0 0 0 3px var(--erro-suave)}

/* ------------------------------------------------------------- Financeiro
   A tela reúne quatro assuntos (recebíveis, lançamentos, comissões, resultado)
   e por isso ganhou abas -- é a primeira do front novo com mais de uma visão
   sobre o mesmo módulo. */
.abas{display:flex; gap:4px; margin-bottom:16px; border-bottom:1px solid var(--borda)}
.aba{background:none; border:0; border-bottom:2px solid transparent; margin-bottom:-1px;
  padding:9px 14px; font:inherit; font-size:var(--fs-sm); font-weight:500;
  color:var(--texto-3); cursor:pointer}
.aba:hover{color:var(--texto)}
.aba.ativa{color:var(--destaque); border-bottom-color:var(--destaque); font-weight:600}

/* Dinheiro em coluna precisa alinhar pela direita e ter dígito de largura fixa,
   senão a vírgula "dança" de linha para linha e o valor fica difícil de comparar. */
td.valor{text-align:right; font-variant-numeric:tabular-nums; font-weight:600; white-space:nowrap}
td.secundario{font-size:var(--fs-xs); color:var(--texto-3)}
td.atrasado{color:var(--erro); font-weight:600}
td.acoes-linha{display:flex; gap:6px; justify-content:flex-end}
td.acoes-linha .botao{padding:5px 11px}

.cartao-alerta{display:block; font-size:var(--fs-xs); font-weight:600; color:var(--erro); margin-top:2px}

/* ---- DRE */
.dre{min-width:0}
.dre td{padding:8px 0; border-bottom:1px dashed var(--borda); white-space:nowrap}
.dre td.valor{font-variant-numeric:tabular-nums}
.dre .dre-recuo{padding-left:16px; color:var(--texto-3)}
.dre tr.dre-total td{border-bottom:1px solid var(--borda-forte); font-weight:700}
.dre tr:last-child td{border-bottom:none}

/* ---- Fluxo de caixa
   Entrada e saída são POLARIDADE, não identidade: por isso os dois tons de
   estado da paleta (verde/vermelho) e não cores de série. O validador de
   paleta reprova esse par sozinho -- ΔE 6,4 em deuteranopia e contraste
   2,55:1 do verde contra o fundo --, então a cor NUNCA vem sozinha: cada
   barra carrega o rótulo ("entrada"/"saída") e o valor em texto, e o texto
   usa tom de texto, não a cor da série. Sem esses rótulos o gráfico fica
   ilegível para quem não distingue verde de vermelho. */
.fluxo-dia{display:grid; grid-template-columns:76px 1fr 108px; gap:10px;
  align-items:center; padding:8px 0; border-bottom:1px dashed var(--borda)}
.fluxo-dia:last-of-type{border-bottom:none}
.fluxo-data{font-size:var(--fs-xs); color:var(--texto-2); font-weight:600}
.fluxo-barras{display:flex; flex-direction:column; gap:5px; min-width:0}
.fluxo-linha{display:grid; grid-template-columns:9px 52px 1fr auto; gap:7px; align-items:center}
.fluxo-nome{font-size:var(--fs-xs); color:var(--texto-3)}
.fluxo-trilho{background:var(--bg-muted); border-radius:999px; height:8px; overflow:hidden}
.fluxo-barra{height:100%; border-radius:999px; transition:width .3s}
.fluxo-valor{font-size:var(--fs-xs); font-variant-numeric:tabular-nums;
  color:var(--texto); font-weight:600; white-space:nowrap}

/* A marca de cor tem tamanho de alvo próprio (9px) e aparece também na lista de
   lançamentos, para "entrada/saída" ser reconhecível nas duas telas. */
.fluxo-marca{display:inline-block; width:9px; height:9px; border-radius:3px; flex-shrink:0}
.fluxo-marca.entrada{background:var(--ok)}
.fluxo-marca.saida{background:var(--erro)}
.fluxo-barra.entrada{background:var(--ok)}
.fluxo-barra.saida{background:var(--erro)}
.fluxo-tipo{display:inline-flex; align-items:center; gap:7px}

.fluxo-saldo{text-align:right; font-size:var(--fs-sm); font-weight:700;
  font-variant-numeric:tabular-nums; color:var(--texto-2); white-space:nowrap}
.fluxo-saldo.negativo{color:var(--erro)}

/* Numa tela estreita a coluna de data sai de cima e o dia vira um bloco só. */
@media (max-width: 640px){
  .fluxo-dia{grid-template-columns:1fr; gap:6px}
  .fluxo-saldo{text-align:left}
}

/* Nota abaixo de um campo do diálogo: explica a consequência de preencher
   aquilo (que responsável e período entram na conta da meta, por exemplo). */
.campo-nota{font-size:var(--fs-xs); color:var(--texto-3); line-height:1.5}
.modal-caixa textarea{padding:10px 12px; border:1px solid var(--borda); border-radius:var(--r);
  background:var(--bg-surface); outline:none; font:inherit; resize:vertical}
.modal-caixa textarea:focus{border-color:var(--destaque); box-shadow:0 0 0 3px var(--destaque-suave)}
.modal-caixa input.invalido,.modal-caixa textarea.invalido{border-color:var(--erro)}

/* --------------------------------------------------------------- Tarefas
   Lista de itens acionáveis, não tabela: o que se faz aqui é marcar como
   feito, e o alvo de clique disso precisa ser grande e ficar sempre no mesmo
   lugar -- por isso a marca é a primeira coluna de todas as linhas. */
.tarefas{display:flex; flex-direction:column; gap:8px}
.tarefa{display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:start;
  background:var(--bg-surface); border:1px solid var(--borda); border-left:3px solid var(--borda-forte);
  border-radius:var(--r-g); padding:12px 14px}
.tarefa.atrasada{border-left-color:var(--erro)}
/* Concluída não some nem fica ilegível: recua, para o olho ir ao que falta. */
.tarefa.feita{opacity:.62; border-left-color:var(--ok)}
.tarefa.feita .tarefa-titulo{text-decoration:line-through; text-decoration-thickness:1px}

.tarefa-marca{width:22px; height:22px; margin-top:1px; flex-shrink:0; cursor:pointer;
  border:1.5px solid var(--borda-forte); border-radius:7px; background:var(--bg-surface);
  color:#fff; font-size:13px; line-height:1; font-weight:700; padding:0}
.tarefa-marca:hover:not(:disabled){border-color:var(--destaque)}
.tarefa-marca.marcada{background:var(--ok); border-color:var(--ok)}
.tarefa-marca:disabled{cursor:not-allowed; opacity:.5}

.tarefa-meio{min-width:0}
.tarefa-titulo{display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-size:var(--fs-sm); font-weight:600; color:var(--texto)}
.tarefa-descricao{font-size:var(--fs-xs); color:var(--texto-2); margin-top:3px; line-height:1.5}
.tarefa-pe{font-size:var(--fs-xs); color:var(--texto-3); margin-top:5px}

.tarefa-direita{display:flex; align-items:center; gap:10px; flex-shrink:0}
.tarefa-prazo{font-size:var(--fs-xs); color:var(--texto-3); white-space:nowrap}
.tarefa-prazo.atrasada{color:var(--erro); font-weight:700}
.tarefa-direita .botao{padding:5px 11px}

@media (max-width: 640px){
  .tarefa{grid-template-columns:auto 1fr}
  .tarefa-direita{grid-column:2; justify-content:space-between; width:100%}
}

/* ----------------------------------------------------------------- Metas
   Cada meta é um cartão com barra de avanço. O número aparece SEMPRE em
   texto ao lado da barra: a barra dá a sensação, o texto dá o fato, e quem
   não distingue a cor de preenchimento lê os dois do mesmo jeito. */
.metas{display:grid; grid-template-columns:repeat(auto-fill, minmax(330px, 1fr)); gap:14px}
.meta{background:var(--bg-surface); border:1px solid var(--borda); border-radius:var(--r-g);
  padding:15px 16px; display:flex; flex-direction:column; gap:9px}
.meta.batida{border-color:var(--ok)}

.meta-topo{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.meta-nome{font-size:var(--fs-md); font-weight:600; margin-right:auto}

.meta-numeros{display:flex; align-items:baseline; gap:5px}
.meta-numeros b{font-size:var(--fs-xl); font-weight:700; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.meta-numeros span{font-size:var(--fs-sm); color:var(--texto-3)}
.meta-pct{margin-left:auto; font-size:var(--fs-sm); font-weight:700;
  color:var(--texto-2); font-variant-numeric:tabular-nums}
.meta-pct.batida{color:var(--ok)}

.meta-trilho{background:var(--bg-muted); border-radius:999px; height:9px; overflow:hidden}
.meta-barra{height:100%; border-radius:999px; background:var(--destaque); transition:width .3s}
.meta-barra.batida{background:var(--ok)}

.meta-pe{font-size:var(--fs-xs); color:var(--texto-3); line-height:1.5}
.meta-origem{font-size:var(--fs-xs); color:var(--texto-3); line-height:1.5;
  border-top:1px dashed var(--borda); padding-top:8px}
.meta-acoes{display:flex; gap:6px; flex-wrap:wrap}
.meta-acoes .botao{padding:5px 11px}

/* ---- Relatórios
   A tabela dos relatórios é genérica (a tela desenha o que a API descreve em
   `colunas`), então o que precisa de estilo aqui é só o que a folha ainda não
   tinha: a linha de total e a tabela pequena dentro de um painel. */
.linha-total td{border-top:1px solid var(--borda-forte); border-bottom:none;
  font-weight:700; background:var(--bg-muted)}
/* O `min-width:840px` de `table` foi pensado para a lista de leads; numa
   tabelinha de seis colunas dentro de um painel ele só produz rolagem. */
.tabela-estreita{min-width:0}
.painel .quadro{border-radius:var(--r)}

/* ---- Agenda
   A linha é uma grade de três colunas fixas: hora, o que é, o que fazer. A hora
   à esquerda em coluna própria é o que permite varrer o dia de cima a baixo sem
   ler o resto. */
.agenda-dia{margin-bottom:18px}
.agenda-dia-titulo{display:flex; align-items:center; gap:8px; font-size:var(--fs-sm);
  font-weight:600; color:var(--texto-2); text-transform:uppercase; letter-spacing:.05em;
  margin-bottom:8px}
.agenda-dia-conta{font-size:var(--fs-xs); font-weight:700; color:var(--texto-3);
  background:var(--bg-muted); border-radius:999px; padding:1px 8px; letter-spacing:0}
.agenda-dia.atrasados .agenda-dia-titulo{color:var(--erro)}

.compromisso{display:grid; grid-template-columns:54px 1fr auto; gap:12px; align-items:start;
  background:var(--bg-surface); border:1px solid var(--borda); border-left:3px solid var(--destaque);
  border-radius:var(--r); padding:11px 13px; margin-bottom:8px}
/* Atrasado é o único item que cobra ação: ganha a borda de erro. Resolvido
   (realizado, cancelado, não compareceu) desbota, porque já não pede nada. */
.compromisso.atrasado{border-left-color:var(--erro)}
.compromisso.resolvido{opacity:.62; border-left-color:var(--borda-forte)}
.compromisso-hora{font-size:var(--fs-sm); font-weight:700; padding-top:3px;
  font-variant-numeric:tabular-nums}
.compromisso-meio{min-width:0}
.compromisso-titulo{display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-size:var(--fs-sm)}
.compromisso-pe{font-size:var(--fs-xs); color:var(--texto-3); margin-top:4px}
.compromisso-obs{font-size:var(--fs-xs); color:var(--texto-2); margin-top:4px; line-height:1.5}
.compromisso-acoes{display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  justify-content:flex-end; flex-shrink:0}
.compromisso-acoes .botao{padding:5px 11px}
.compromisso-acoes select.status{min-width:136px}
/* A cor acompanha a situação, mas o texto do <option> já a diz por extenso —
   a cor não é a única codificação. */
.status-REALIZADO{color:#0a7a47; border-color:rgba(18,183,106,.55)}
.status-NAO_COMPARECEU{color:#b54708; border-color:rgba(247,144,9,.55)}
.status-CANCELADO{color:var(--texto-3)}

/* ---- Ficha do lead
   Tres colunas de painel em tela larga (a mesma `.grade-paineis` do Dashboard),
   uma em tela estreita. O que muda aqui e a linha de dado: rotulo a esquerda,
   valor a direita, alinhados entre si -- e o que faz a ficha ser varrida com o
   olho em vez de lida. */
.ficha-dado{display:flex; align-items:center; gap:10px; padding:7px 0;
  border-bottom:1px dashed var(--borda); font-size:var(--fs-sm)}
.ficha-dado:last-child{border-bottom:none}
.ficha-rotulo{font-size:var(--fs-xs); color:var(--texto-3); min-width:104px}
.ficha-dado strong{font-weight:600; margin-right:auto}
.ficha-dado select.status{margin-left:auto}
.ficha-observacao{font-size:var(--fs-xs); color:var(--texto-2); line-height:1.6;
  background:var(--bg-muted); border-radius:var(--r); padding:9px 11px; margin-top:10px;
  white-space:pre-wrap}

.ficha-item{padding:8px 0; border-bottom:1px dashed var(--borda)}
.ficha-item:last-child{border-bottom:none}
.ficha-item.atrasado{border-left:2px solid var(--erro); padding-left:9px}
.ficha-item.feito{opacity:.6}
.ficha-item-titulo{display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-size:var(--fs-sm); font-weight:500}
.ficha-item-pe{font-size:var(--fs-xs); color:var(--texto-3); margin-top:3px}

.painel-titulo-acao{display:flex; align-items:center; justify-content:space-between; gap:8px}

/* O nome do lead vira porta de entrada da ficha, na lista e no cartao. No
   cartao ele e um bloco: <a> nasce em linha, e ai o nome dividia a linha com o
   titulo do negocio em vez de ficar por cima dele. */
.ficha-link{color:inherit; text-decoration:none; cursor:pointer}
.ficha-link:hover{color:var(--destaque); text-decoration:underline}
a.cartao-lead-nome{display:block}

/* Selo do desfecho: o negocio fechado continua fechado mesmo depois de o
   cartao ser arrastado de volta para uma etapa aberta -- nenhuma rota da API
   limpa won_at/lost_at. Sem este selo o estado ficaria invisivel. */
.cartao-lead-selo{font-size:11px; font-weight:600; color:var(--texto-3);
  border-top:1px dashed var(--borda); padding-top:5px}

/* ---- Propostas
   Cartao, e nao linha de tabela: cada proposta carrega uma linha do tempo
   propria (link gerado, aberta, aceita, vale ate) que nao cabe numa celula, e e
   ela que responde "e ai?". */
.propostas{display:grid; grid-template-columns:repeat(auto-fill, minmax(340px, 1fr)); gap:14px}
.proposta{background:var(--bg-surface); border:1px solid var(--borda);
  border-radius:var(--r-g); padding:15px 16px; display:flex; flex-direction:column; gap:9px}
.proposta-marcos{font-size:var(--fs-xs); color:var(--texto-3); line-height:1.6;
  border-top:1px solid var(--bg-muted); padding-top:9px}
.proposta .meta-acoes .botao{padding:5px 11px}
/* O <a> de "Ver como o cliente" precisa parecer botao como os <button> ao lado. */
.proposta .meta-acoes a.botao{display:inline-flex; align-items:center; text-decoration:none}


/* ---- Plantão (20/09/2026)
   Dois estados que o olho precisa separar sem ler: presente/na roleta (verde)
   e ausente/fora (apagado). A cor acompanha o texto, nunca o substitui. */
.cartao b.plantao-ok{color:var(--ok)}
.cartao b.plantao-off{color:var(--texto-3)}
.plantao-texto{font-size:var(--fs-sm); color:var(--texto-2); line-height:1.55; margin-bottom:12px}
.plantao-emps{margin-top:12px}
.plantao-mapa{display:inline-block; margin-top:10px; font-size:var(--fs-xs); color:var(--destaque)}
.plantao-equipe,.plantao-historico{margin-top:14px}
.plantao-equipe table{min-width:0}

/* ---- Carteira (20/09/2026)
   Lista no tempo, um cliente por linha larga: nome e contato à esquerda, valor
   e "quando entrou" à direita. A faixa colorida à esquerda é a cor da ETAPA,
   a mesma do quadro do CRM. A ficha completa abre embaixo, sem sair da lista. */
.carteira{display:flex; flex-direction:column; gap:10px}
.carteira-cliente{background:var(--bg-surface); border:1px solid var(--borda); border-left:3px solid var(--destaque);
  border-radius:var(--r-g); padding:13px 16px}
.carteira-cliente.aberto{box-shadow:var(--sombra)}
.carteira-topo{display:flex; justify-content:space-between; gap:14px; align-items:flex-start; flex-wrap:wrap}
.carteira-esq{min-width:0; flex:1 1 280px; display:flex; flex-direction:column; gap:5px}
.carteira-nome{font-weight:600; font-size:var(--fs-md)}
.carteira-meta{display:flex; flex-wrap:wrap; gap:6px; align-items:center}
.carteira-emp{font-size:var(--fs-xs); color:var(--texto-2); background:var(--bg-muted); border-radius:999px; padding:3px 9px}
.carteira-contato{font-size:var(--fs-xs); color:var(--texto-3)}
.carteira-dir{display:flex; flex-direction:column; align-items:flex-end; gap:4px; flex-shrink:0}
.carteira-valor{font-weight:700; color:var(--ok); font-size:var(--fs-sm)}
.carteira-quando{font-size:var(--fs-xs); color:var(--texto-3)}
.carteira-abrir{padding:5px 11px; margin-top:4px}
.carteira-ficha{border-top:1px dashed var(--borda); margin-top:12px; padding-top:12px}
.carteira-ficha .painel{padding:12px 14px}
.carteira-ir{display:inline-flex; align-items:center; text-decoration:none; margin-top:12px}
@media (max-width:860px){
  .carteira-dir{align-items:flex-start; width:100%}
}

/* ---- Empreendimento: ficha interna e cadastro (20/09/2026)
   Desenho do protótipo Even: capa larga, texto à esquerda, quadro de dados à
   direita. O cadastro é a mesma página em modo de edição, com os campos em
   linhas de até 4 colunas. */
.produto-abre{cursor:pointer}
.produto-abre:hover{border-color:var(--destaque)}
.produto-abrir{align-self:flex-start; padding:5px 11px; margin-top:4px; text-decoration:none}
.emp-capa{aspect-ratio:21/8; background:var(--bg-muted); border:1px solid var(--borda); border-radius:var(--r-g);
  display:grid; place-items:center; color:var(--texto-3); font-size:var(--fs-sm); overflow:hidden; margin-bottom:18px}
.emp-capa img{width:100%; height:100%; object-fit:cover; display:block}
.emp-grade{display:grid; grid-template-columns:minmax(0,1.4fr) minmax(300px,.8fr); gap:18px; align-items:start}
.emp-esq{min-width:0}
.emp-dir{display:flex; flex-direction:column; gap:14px}
.emp-selos{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:8px}
.emp-nome{font-size:28px; font-weight:700; letter-spacing:-.02em; line-height:1.15; margin:0 0 4px}
.emp-praca{color:var(--texto-3); font-size:var(--fs-sm); margin:0 0 14px}
.emp-descricao{font-size:var(--fs-md); line-height:1.55; color:var(--texto-2); margin:0 0 16px; white-space:pre-wrap}
.emp-secao{font-size:var(--fs-xs); font-weight:600; color:var(--texto-2); text-transform:uppercase; letter-spacing:.05em; margin:18px 0 8px}
.emp-diferenciais{margin:0; padding:0; list-style:none; display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:6px 18px}
.emp-diferenciais li{font-size:var(--fs-sm); padding-left:16px; position:relative}
.emp-diferenciais li::before{content:'—'; color:var(--destaque); position:absolute; left:0}
.emp-galeria{display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:10px}
.emp-galeria a,.emp-foto-edicao{aspect-ratio:4/3; background:var(--bg-muted); border:1px solid var(--borda); border-radius:var(--r); overflow:hidden; display:block; position:relative}
.emp-galeria img{width:100%; height:100%; object-fit:cover; display:block}
.emp-material{display:flex; justify-content:space-between; gap:10px; align-items:center; background:var(--bg-surface);
  border:1px solid var(--borda); border-radius:var(--r); padding:11px 14px; margin-bottom:8px; text-decoration:none; color:inherit; font-size:var(--fs-sm); font-weight:600}
.emp-material:hover{border-color:var(--destaque)}
.emp-material-tipo{font-size:var(--fs-xs); color:var(--texto-3); font-weight:500; white-space:nowrap}
.emp-material-nome{flex:1; padding:6px 10px; border:1px solid var(--borda); border-radius:var(--r); font-size:var(--fs-sm)}
.emp-link{padding-top:10px}
.emp-link a{font-size:var(--fs-sm); font-weight:600; word-break:break-all; background:var(--destaque-suave); color:var(--destaque);
  display:block; padding:9px 12px; border-radius:var(--r); margin-top:4px; text-decoration:none}
.emp-etapas{display:flex; flex-wrap:wrap; gap:6px; margin-top:10px}
.emp-form{display:flex; flex-direction:column; gap:12px; max-width:1100px}
.emp-form-secao{font-size:var(--fs-xs); font-weight:600; color:var(--texto-2); text-transform:uppercase; letter-spacing:.05em; margin-top:10px;
  border-bottom:1px solid var(--borda); padding-bottom:6px}
.emp-form-linha{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px; align-items:end}
.emp-form-uma{grid-template-columns:1fr}
.emp-form .campo textarea{padding:10px 12px; border:1px solid var(--borda); border-radius:var(--r); background:var(--bg-surface); resize:vertical; line-height:1.5}
.emp-form .campo textarea:focus{border-color:var(--destaque); outline:none; box-shadow:0 0 0 3px var(--destaque-suave)}
.emp-form .campo input.invalido,.emp-form .campo select.invalido{border-color:var(--erro)}
.emp-form-arquivos{display:flex; flex-direction:column; gap:10px}
.emp-galeria-edicao .emp-foto-edicao img{width:100%; height:100%; object-fit:cover; display:block}
.emp-foto-edicao .selo{position:absolute; top:6px; left:6px}
.emp-foto-botoes{position:absolute; bottom:6px; right:6px; display:flex; gap:4px}
.emp-foto-botoes .botao{padding:3px 8px; font-size:11px}
.emp-check{display:flex; align-items:center; gap:8px; font-size:var(--fs-sm); padding:10px 0; cursor:pointer}
.emp-check input{accent-color:var(--destaque); width:16px; height:16px}
.emp-form-pe{display:flex; gap:8px; align-items:center; flex-wrap:wrap; padding-top:8px; border-top:1px solid var(--borda)}
.emp-form-pe a.botao{text-decoration:none; display:inline-flex; align-items:center}
.emp-apagar{margin-left:auto; color:var(--erro)}
.crm-matriz.ativo{background:var(--destaque); color:#fff; border-color:var(--destaque)}
@media (max-width:860px){
  .emp-grade{grid-template-columns:1fr}
  .emp-nome{font-size:22px}
}
.acoes a.botao{display:inline-flex; align-items:center; text-decoration:none}

.emp-chamada{font-size:20px; font-weight:500; line-height:1.35; margin:0 0 12px}
.emp-figura{margin:0}
.emp-figura a{display:block; aspect-ratio:4/3; overflow:hidden; border-radius:var(--r); border:1px solid var(--borda); background:var(--bg-muted)}
.emp-figura figcaption{font-size:var(--fs-xs); text-align:center; margin-top:4px; color:var(--texto-2)}
.emp-realizacao{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:10px}
.emp-realiza{background:var(--bg-surface); border:1px solid var(--borda); border-radius:var(--r); padding:10px}
.emp-realiza img{width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:6px; margin-bottom:8px}
.emp-realiza b{display:block; font-size:var(--fs-sm)}
.emp-realiza p{font-size:var(--fs-xs); color:var(--texto-2); margin:4px 0 0; line-height:1.5}
.emp-item-legenda{aspect-ratio:auto; display:flex; flex-direction:column; gap:6px; padding:8px; padding-bottom:36px}
.emp-item-legenda img{aspect-ratio:4/3; width:100%; object-fit:cover; border-radius:6px}
.emp-legenda{padding:6px 8px; border:1px solid var(--borda); border-radius:6px; font-size:var(--fs-xs); width:100%}

/* ---- Chat IA do empreendimento (20/09/2026) */
.emp-ia-conversa{display:flex; flex-direction:column; gap:8px; max-height:420px; overflow-y:auto; padding:4px 0 8px}
.emp-ia-bolha{max-width:92%; padding:9px 12px; border-radius:12px; font-size:var(--fs-sm); line-height:1.5; white-space:pre-wrap; word-break:break-word}
.emp-ia-bolha.eu{align-self:flex-end; background:var(--destaque); color:#fff; border-bottom-right-radius:4px}
.emp-ia-bolha.ia{align-self:flex-start; background:var(--bg-muted); border-bottom-left-radius:4px}
.emp-ia-bolha.erro{color:var(--erro)}
.emp-ia-sugestoes{display:flex; flex-wrap:wrap; gap:6px; margin:8px 0}
.emp-ia-sugestoes .botao{padding:5px 10px; font-size:var(--fs-xs)}
.emp-ia-linha{display:flex; gap:8px; align-items:flex-end}
.emp-ia-entrada{flex:1; padding:9px 12px; border:1px solid var(--borda); border-radius:var(--r); resize:vertical; font-size:var(--fs-sm); line-height:1.4; background:var(--bg-surface)}
.emp-ia-entrada:focus{border-color:var(--destaque); outline:none; box-shadow:0 0 0 3px var(--destaque-suave)}

/* ---- origem do lead: formulario / chat / whatsapp / anuncio (20/09/2026) */
.selo-origem{font-size:10px; letter-spacing:.03em; text-transform:uppercase}
.origem-formulario{background:#e8f1ff; color:#1d4ed8}
.origem-chat{background:var(--destaque-suave); color:var(--destaque)}
.origem-whatsapp{background:#e3f7ec; color:#0a7a47}
.origem-anuncio{background:#fef0e1; color:#b54708}
.origem-outro{background:var(--bg-muted); color:var(--texto-2)}
.crm-origem{min-width:160px; border:1px solid var(--borda); border-radius:999px; padding:6px 10px; font-size:var(--fs-xs); font-weight:600; background:var(--bg-surface); cursor:pointer}
.inbox-item-meta .selo-origem{margin-right:4px; vertical-align:middle}

/* ---- Site (editor): o site num quadro, ocupando a tela */
.ed-nota{margin:0 0 10px}
.ed-quadro{width:100%; height:calc(100vh - 150px); min-height:600px; border:1px solid var(--borda); border-radius:var(--r-g); background:#fff}

/* ---- Chat IA como janela de mensageiro (20/09/2026) */
.ia-flutuante{position:fixed; right:22px; bottom:22px; z-index:60; background:var(--destaque); color:#fff; border:none; border-radius:999px;
  padding:13px 20px; font-weight:700; font-size:var(--fs-sm); box-shadow:0 8px 24px rgba(108,79,232,.35); cursor:pointer}
.ia-flutuante.aberto{background:var(--texto)}
.ia-janela{position:fixed; right:22px; bottom:84px; width:400px; max-width:calc(100vw - 32px); height:560px; max-height:calc(100vh - 120px);
  background:var(--bg-surface); border:1px solid var(--borda); border-radius:var(--r-g); box-shadow:var(--sombra); z-index:61; display:flex; flex-direction:column; overflow:hidden}
.ia-topo{display:flex; align-items:flex-start; gap:10px; padding:12px 14px; border-bottom:1px solid var(--borda)}
.ia-topo b{display:block; font-size:var(--fs-sm)}
.ia-topo span{font-size:var(--fs-xs); color:var(--texto-3)}
.ia-fechar{margin-left:auto; background:none; border:none; font-size:20px; color:var(--texto-3); cursor:pointer; line-height:1}
.ia-conversa{flex:1; overflow-y:auto; padding:12px 14px; display:flex; flex-direction:column; gap:8px; background:var(--bg-muted)}
.ia-conversa .emp-ia-bolha.ia{background:var(--bg-surface); border:1px solid var(--borda)}
.ia-sugestoes{display:flex; gap:6px; overflow-x:auto; padding:8px 12px; border-top:1px solid var(--borda)}
.ia-sugestoes button{flex:0 0 auto; border:1px solid var(--borda); background:var(--bg-surface); border-radius:999px; padding:5px 10px; font-size:var(--fs-xs); cursor:pointer; color:var(--texto-2)}
.ia-sugestoes button:hover{border-color:var(--destaque); color:var(--destaque)}
.ia-rodape{display:flex; gap:8px; align-items:flex-end; padding:10px 12px; border-top:1px solid var(--borda)}
.ia-entrada{flex:1; padding:9px 12px; border:1px solid var(--borda); border-radius:var(--r); resize:none; min-height:40px; max-height:120px; font-size:var(--fs-sm); line-height:1.4}
.ia-entrada:focus{border-color:var(--destaque); outline:none}
.ia-rodape .botao{padding:9px 14px}
.ia-restam{font-size:11px; color:var(--texto-3); padding:0 14px 8px}
@media (max-width:860px){ .ia-janela{right:8px; left:8px; width:auto; bottom:76px} .ia-flutuante{right:12px; bottom:12px} }

/* ---- Relatorios Meta Ads (20/09/2026) */
.meta-conexao{margin-bottom:14px}
.meta-cabecalho{margin:0 0 12px}
.meta-tabela td,.meta-tabela th{white-space:nowrap}
.meta-tabela .nivel-1 td:nth-child(2){padding-left:28px}
.meta-tabela .nivel-2 td:nth-child(2){padding-left:48px}
.meta-tabela .nivel-1{background:rgba(108,79,232,.03)}
.meta-tabela .nivel-2{background:rgba(108,79,232,.06)}
.meta-abrir{padding:2px 9px; font-weight:700}
.meta-bd-detalhe{font-size:11px; color:var(--texto-3); margin:-4px 0 8px 142px}
.meta-criativos{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:10px}
.meta-criativo{display:flex; gap:10px; background:var(--bg-surface); border:1px solid var(--borda); border-radius:var(--r); padding:8px}
.meta-criativo img{width:72px; height:72px; object-fit:cover; border-radius:6px; flex-shrink:0; background:var(--bg-muted)}
.meta-criativo-corpo{min-width:0}
.meta-criativo-corpo b{display:block; font-size:var(--fs-sm); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.meta-criativo-corpo p{font-size:var(--fs-xs); color:var(--texto-2); margin:3px 0; line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.meta-pergunta{width:100%; padding:9px 12px; border:1px solid var(--borda); border-radius:var(--r); margin-top:10px; font-size:var(--fs-sm)}
.meta-ia{white-space:pre-wrap; line-height:1.6; font-size:var(--fs-sm); background:var(--bg-muted); border-radius:var(--r); padding:12px 14px}
.painel + .painel{margin-top:14px}
@media print{
  .lateral,#acoes-tela,.meta-conexao,.meta-abrir,.meta-pergunta,.painel-titulo .botao,.ia-flutuante,.ia-janela{display:none !important}
  .app{grid-template-columns:1fr} .corpo{padding:0} .painel{break-inside:avoid; border:1px solid #ddd}
}

.conversa-texto{font-size:var(--fs-sm); line-height:1.55; white-space:pre-wrap; background:var(--bg-muted); border-radius:var(--r); padding:8px 10px; margin:6px 0}

/* ---- dialogo largo (20/09/2026): formularios de 6+ campos em duas colunas,
   e toda caixa rola por dentro em vez de sair da tela */
.modal-caixa{max-height:calc(100vh - 40px); overflow-y:auto}
.modal-caixa-larga{max-width:780px; display:grid; grid-template-columns:1fr 1fr; gap:12px 16px; align-content:start}
.modal-caixa-larga h3,.modal-caixa-larga > p,.modal-caixa-larga .campo-largo,.modal-caixa-larga .modal-pe{grid-column:1 / -1}
.modal-caixa-larga h3{margin-bottom:-4px}
@media (max-width:700px){ .modal-caixa-larga{grid-template-columns:1fr} }

/* ---- plantao por empreendimento (gestor) */
.plantao-emp-grade{display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:12px}
.plantao-emp{background:var(--bg-surface); border:1px solid var(--borda); border-radius:var(--r-g); padding:12px 14px}
.plantao-emp.com-sorteio{border-color:rgba(18,183,106,.45)}
.plantao-emp-topo{display:flex; justify-content:space-between; align-items:center; gap:8px}
.plantao-emp-topo b{font-size:var(--fs-sm)}
.plantao-emp-pessoa{display:flex; justify-content:space-between; align-items:center; gap:8px; padding:7px 0; border-top:1px dashed var(--borda); font-size:var(--fs-sm)}
.plantao-emp-pessoa.sorteio .plantao-emp-nome{font-weight:600}
.plantao-emp-selos{display:flex; gap:4px; flex-wrap:wrap; justify-content:flex-end}

/* ---- arrastar e ajustar fotos (20/09/2026) */
.emp-arrastavel{cursor:grab}
.emp-arrastavel.arrastando{opacity:.4}
.emp-arrastavel.alvo{outline:2px dashed var(--destaque); outline-offset:2px}
.emp-form-arquivos.solta-aqui{outline:2px dashed var(--destaque); outline-offset:6px; border-radius:var(--r); background:var(--destaque-suave)}
.emp-galeria a,.emp-foto-edicao,.emp-capa,.produto-capa{overflow:hidden}
.modal-ajuste{max-width:720px}
.ajuste-quadro{aspect-ratio:16/9; width:100%; background:var(--bg-muted); border:1px solid var(--borda); border-radius:var(--r); overflow:hidden; cursor:grab; touch-action:none; user-select:none}
.ajuste-quadro:active{cursor:grabbing}
.ajuste-quadro img{width:100%; height:100%; object-fit:cover; display:block; pointer-events:none}
.campo input[type=range]{padding:0; border:none; accent-color:var(--destaque)}

/* ---- Visao 360 do corretor (21/09/2026) */
.v360-cab{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:18px}
.v360-rotulo{font-size:10px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--texto-3); margin-bottom:6px}
.v360-nome{margin:0 0 4px; font-size:24px; font-weight:700; letter-spacing:-.03em}
.v360-sub{font-size:var(--fs-xs); color:var(--texto-3); line-height:1.5; margin-bottom:10px}
.v360-selos{display:flex; gap:6px; flex-wrap:wrap; align-items:center}
.v360-cartoes{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.v360-mini{font-size:var(--fs-xs); color:var(--texto-3); margin-top:4px; line-height:1.4}
.v360-grade{display:grid; grid-template-columns:320px 1fr 300px; gap:16px; align-items:start; margin-bottom:16px}
.v360-col{display:flex; flex-direction:column; gap:16px}
.v360-dados{display:grid; grid-template-columns:110px 1fr; row-gap:8px; column-gap:10px; font-size:var(--fs-sm)}
.v360-k{color:var(--texto-3)}
.v360-v{font-weight:600; word-break:break-word}
.v360-acoes{display:flex; gap:8px; flex-wrap:wrap; margin-top:14px}
.v360-etapa{margin-bottom:10px}
.v360-etapa-topo{display:flex; justify-content:space-between; align-items:baseline; gap:8px; font-size:var(--fs-sm)}
.v360-etapa-topo b{font-weight:700}
.v360-etapa-topo a{font-weight:600; color:var(--texto); text-decoration:none}
.v360-etapa-topo a:hover{color:var(--destaque)}
.v360-barra{height:6px; background:var(--bg-muted); border-radius:999px; overflow:hidden; margin-top:5px}
.v360-barra-fill{height:100%; background:var(--destaque); border-radius:999px}
.v360-timeline{display:flex; flex-direction:column}
.v360-evento{display:flex; gap:12px; padding-bottom:14px}
.v360-quando{width:74px; flex:0 0 74px; font-size:var(--fs-xs); font-weight:600; color:var(--texto-3); font-variant-numeric:tabular-nums; padding-top:2px}
.v360-trilho{width:2px; flex:0 0 2px; background:var(--borda); position:relative}
.v360-ponto{position:absolute; left:-3px; top:4px; width:8px; height:8px; border-radius:3px}
.v360-texto{padding-left:4px; min-width:0; font-size:var(--fs-sm); line-height:1.45}
.v360-texto a{color:var(--texto); text-decoration:none}
.v360-texto a:hover{color:var(--destaque)}
.v360-tipo{font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase}
.v360-emp{padding:10px 11px; border:1px solid var(--borda); border-radius:var(--r); margin-bottom:8px}
.v360-tarefa{margin-bottom:10px}
.v360-tarefa-titulo{font-size:var(--fs-sm); font-weight:600; line-height:1.35}
.v360-tarefa.atrasada .v360-mini{color:var(--erro); font-weight:600}
.v360-vinculos .quadro{margin-top:4px}
@media (max-width:1100px){ .v360-grade{grid-template-columns:1fr 1fr} .v360-col:nth-child(2){grid-column:1 / -1; grid-row:2} }
@media (max-width:760px){ .v360-grade{grid-template-columns:1fr} .v360-col:nth-child(2){grid-column:auto; grid-row:auto} }

/* Novo lead: seção "Imóvel ideal que o cliente busca" e escolha múltipla (14/10/2026) */
.form-secao{margin:10px 0 -2px; padding-top:12px; border-top:1px solid var(--borda); font-size:var(--fs-sm); font-weight:700; color:var(--texto)}
.modal-caixa-larga .form-secao{grid-column:1 / -1}
.campo-checks{display:flex; flex-wrap:wrap; gap:8px 16px; padding:4px 0}
.campo-checks label{display:inline-flex; align-items:center; gap:6px; font-size:var(--fs-sm); color:var(--texto-2); cursor:pointer}
.campo .campo-checks input{padding:0; width:auto}

/* ---- 22/10/2026: check-in no topo, plantão e indicadores na Visão geral, tela "Como funciona" ---- */
.topo-direita{display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end}
.presenca-topo{display:flex; align-items:center; gap:8px; padding:4px 4px 4px 12px; border:1px solid var(--borda); border-radius:999px; background:var(--bg-surface)}
.presenca-topo .botao{border-radius:999px}
.presenca-selo{font-size:var(--fs-sm); font-weight:600; white-space:nowrap}
.presenca-selo::before{content:""; display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:7px; vertical-align:1px; background:var(--texto-3)}
.presenca-selo.presente{color:var(--ok)} .presenca-selo.presente::before{background:var(--ok)}
.presenca-selo.ausente{color:var(--texto-2)} .presenca-selo.ausente::before{background:var(--atencao)}
.presenca-painel{margin-bottom:18px}
.presenca-passos{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:10px; margin:6px 0 14px}
.presenca-passo{display:flex; gap:10px; align-items:flex-start; padding:10px 12px; border:1px solid var(--borda); border-radius:var(--r); background:var(--bg-muted)}
.presenca-passo b{display:block; font-size:var(--fs-sm)} .presenca-passo span{font-size:var(--fs-xs); color:var(--texto-3)}
.presenca-num{flex:none; width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font-size:var(--fs-sm); font-weight:700; background:var(--bg-surface); border:1px solid var(--borda-forte); color:var(--texto-3)}
.presenca-passo.feito{background:var(--ok-suave); border-color:transparent}
.presenca-passo.feito .presenca-num{background:var(--ok); border-color:var(--ok); color:#fff}
.dash-grupo{font-size:var(--fs-md); font-weight:600; color:var(--texto-2); margin:4px 0 10px}
.cartao small{display:block; font-size:var(--fs-xs); color:var(--texto-3); margin-top:2px}
a.cartao-link{color:inherit; text-decoration:none; transition:border-color .15s, box-shadow .15s}
a.cartao-link:hover{border-color:var(--destaque); box-shadow:var(--sombra)}
.dash-ok{color:var(--ok)} .dash-atencao{color:var(--atencao)} .dash-erro{color:var(--erro)}
@media (max-width:860px){ .topo-direita{justify-content:flex-start; width:100%} }

.guia-bloco{margin-bottom:16px}
.guia-intro{color:var(--texto-2); max-width:760px; margin:2px 0 14px}
.guia-icone{display:block}
.guia-caminho{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(6,1fr); gap:14px; counter-reset:x}
.guia-passo{position:relative; display:flex; flex-direction:column; gap:4px; padding:14px; border:1px solid var(--borda); border-radius:var(--r-g); background:var(--bg-surface)}
.guia-passo:not(:last-child)::after{content:"→"; position:absolute; right:-13px; top:30px; font-size:16px; font-weight:700; color:var(--destaque)}
.guia-passo b{font-size:var(--fs-sm)} .guia-passo span{font-size:var(--fs-xs); color:var(--texto-3); line-height:1.5}
.guia-passo-icone{position:relative; width:48px; height:48px; border-radius:14px; display:grid; place-items:center; background:var(--destaque-suave); color:var(--destaque); margin-bottom:6px}
.guia-passo-num{position:absolute; top:-6px; right:-6px; width:20px; height:20px; border-radius:50%; background:var(--destaque); color:#fff; font-size:11px; font-weight:700; display:grid; place-items:center}
.guia-passo-fim{border-color:var(--ok); background:var(--ok-suave)}
.guia-passo-fim .guia-passo-icone{background:var(--ok); color:#fff}
.guia-passo-fim .guia-passo-num{background:var(--ok)}
@media (max-width:1100px){ .guia-caminho{grid-template-columns:repeat(3,1fr)} .guia-passo:nth-child(3)::after{content:none} }
@media (max-width:640px){ .guia-caminho{grid-template-columns:1fr} .guia-passo:not(:last-child)::after{content:"↓"; right:auto; left:34px; top:auto; bottom:-15px} .guia-passo:nth-child(3)::after{content:"↓"} }
.guia-desenho-caixa{border:1px solid var(--borda); border-radius:var(--r-g); background:var(--bg-muted); padding:10px}
.guia-desenho{display:block; width:100%; height:auto; max-height:340px; font-family:inherit}
.guia-dia{display:grid; grid-template-columns:repeat(5,1fr); gap:0; position:relative}
.guia-dia-item{display:flex; flex-direction:column; gap:8px; padding:0 10px; position:relative}
.guia-dia-item::before{content:""; position:absolute; top:21px; left:0; right:0; height:2px; background:var(--destaque-suave); z-index:0}
.guia-dia-item:first-child::before{left:50%} .guia-dia-item:last-child::before{right:50%}
.guia-dia-bola{position:relative; z-index:1; width:44px; height:44px; border-radius:50%; display:grid; place-items:center; background:var(--destaque); color:#fff; align-self:center}
.guia-dia-item b{display:block; font-size:var(--fs-sm); text-align:center} .guia-dia-item span{display:block; font-size:var(--fs-xs); color:var(--texto-3); text-align:center; line-height:1.5}
@media (max-width:860px){ .guia-dia{grid-template-columns:1fr; gap:12px} .guia-dia-item{flex-direction:row; align-items:flex-start} .guia-dia-item::before{content:none} .guia-dia-item b,.guia-dia-item span{text-align:left} .guia-dia-bola{flex:none; align-self:flex-start} }
.guia-funil{display:flex; flex-direction:column; gap:6px; max-width:820px}
.guia-funil-linha{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px; align-items:center}
.guia-funil-barra{margin:0 auto; background:var(--destaque); color:#fff; border-radius:8px; padding:9px 12px; text-align:center; font-size:var(--fs-sm)}
.guia-funil-linha:last-child .guia-funil-barra{background:var(--ok); opacity:1 !important}
.guia-funil-linha span{font-size:var(--fs-sm); color:var(--texto-2)}
@media (max-width:640px){ .guia-funil-linha{grid-template-columns:1fr; gap:2px} .guia-funil-linha span{text-align:center; font-size:var(--fs-xs)} }
.guia-grupo{font-size:var(--fs-sm); font-weight:700; color:var(--texto-2); text-transform:uppercase; letter-spacing:.04em; margin:16px 0 8px}
.guia-modulos{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:10px}
.guia-modulo{display:flex; gap:12px; align-items:flex-start; padding:12px; border:1px solid var(--borda); border-radius:var(--r); background:var(--bg-surface); color:inherit; text-decoration:none}
a.guia-modulo:hover{border-color:var(--destaque); box-shadow:var(--sombra)}
.guia-modulo b{display:block; font-size:var(--fs-sm)} .guia-modulo span{display:block; font-size:var(--fs-xs); color:var(--texto-3); line-height:1.5}
.guia-modulo em{display:block; font-style:normal; font-size:var(--fs-xs); font-weight:600; color:var(--destaque); margin-top:4px}
.guia-modulo em.guia-sem{color:var(--texto-3); font-weight:500}
.guia-modulo-off{opacity:.62; background:var(--bg-muted)}
.guia-modulo-icone{flex:none; width:38px; height:38px; border-radius:10px; display:grid; place-items:center; background:var(--destaque-suave); color:var(--destaque)}
.guia-faq{border-top:1px solid var(--borda); padding:10px 0}
.guia-faq:first-of-type{border-top:0}
.guia-faq summary{cursor:pointer; font-weight:600; font-size:var(--fs-sm)}
.guia-faq p{color:var(--texto-2); font-size:var(--fs-sm); margin-top:6px; max-width:760px}
/* ajustes vistos no retrato (22/10/2026): o número do passo herdava a cor
   cinza de `.guia-passo span`; no celular o botão do topo quebrava em 3 linhas */
.guia-passo .guia-passo-num{color:#fff; font-size:11px; line-height:1}
.presenca-topo .botao{white-space:nowrap}
@media (max-width:640px){ .presenca-topo{width:100%; justify-content:space-between} .presenca-selo{white-space:normal} }
@media (max-width:640px){ .topo{flex-wrap:wrap} .topo-direita{flex-basis:100%} }
/* "Como funciona" em destaque no menu (22/10/2026) */
.menu a.menu-destaque{background:var(--destaque-suave); color:var(--destaque); font-weight:600; border:1px solid color-mix(in srgb, var(--destaque) 28%, transparent); margin-bottom:8px}
.menu a.menu-destaque:hover{background:var(--destaque); color:#fff}
.menu a.menu-destaque.ativo{background:var(--destaque); color:#fff}
.menu-ajuda{flex:none; width:18px; height:18px; border-radius:50%; display:inline-grid; place-items:center; background:var(--destaque); color:#fff; font-size:11px; font-weight:700; margin-right:8px; font-style:normal}
.menu a.menu-destaque:hover .menu-ajuda,.menu a.menu-destaque.ativo .menu-ajuda{background:#fff; color:var(--destaque)}
.menu-selo{margin-left:auto; padding-left:8px; font-style:normal; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; opacity:.85; white-space:nowrap}
.menu a.menu-destaque{flex-wrap:wrap; row-gap:0; white-space:nowrap} .menu-ajuda{margin-right:0} .menu-selo{flex-basis:100%; margin-left:28px; padding-left:0; font-size:9.5px; line-height:1.3}
/* "as regras podem ser adaptadas" em destaque na seção 2 do Como funciona (22/10/2026) */
.guia-destaque{display:flex; gap:14px; align-items:flex-start; margin-top:14px; padding:16px 18px; border-radius:var(--r-g); background:var(--destaque); color:#fff; box-shadow:var(--sombra)}
.guia-destaque .guia-icone{flex:none; margin-top:2px}
.guia-destaque b{display:block; font-size:var(--fs-md); margin-bottom:4px}
.guia-destaque span{display:block; font-size:var(--fs-sm); line-height:1.6; opacity:.95}
.guia-destaque .guia-destaque-pe{margin-top:8px; font-weight:600; opacity:1}