/* app.css — visual do painel SDR.
   Mantém a identidade que a equipe já conhecia: amarelo SeteApp sobre fundo claro.
   Tudo em variáveis: para mudar a cor da marca, mexa só no bloco :root. */

:root{
  --amarelo:#F5C518; --amarelo-escuro:#D9A800; --escuro:#12141C;
  --borda:#E5E7EB; --texto:#111827; --texto-suave:#6B7280; --fundo:#F5F6F8;
  --branco:#fff; --hover:#FAFBFC;
  --bom:#0F7B3E; --bom-bg:#E7F5EC;
  --aviso:#8A6100; --aviso-bg:#FDF3DC;
  --grave:#A32D2D; --grave-bg:#FBE1E1;
  --info:#1D4E89; --info-bg:#E8F0FB;
}
*{box-sizing:border-box}
body{font-family:Arial,Helvetica,sans-serif;margin:0;background:var(--fundo);color:var(--texto);font-size:14px}
a{color:var(--info)}
h1,h2,h3{margin:0}
button,input,select,textarea{font-family:inherit;font-size:14px;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--amarelo-escuro);outline-offset:2px}

/* ==================================================================
   A CASCA: menu lateral fixo + barra superior
   ==================================================================
   O menu é position:fixed e o resto da página ganha margem à esquerda. Foi a
   escolha que permitiu trocar a navegação das 20 telas sem tocar em nenhuma
   delas: se a lateral fosse uma coluna de verdade, cada tela precisaria de uma
   <div> a mais aberta e fechada no lugar certo — vinte chances de esquecer uma
   e quebrar a página.

   A medida da lateral vive numa variável porque três coisas dependem dela
   (a largura do menu e a margem da barra e do conteúdo). Com número solto,
   mexer em uma e esquecer as outras deixa uma faixa em branco que ninguém
   entende de onde veio.
   ================================================================== */
:root{ --lateral:214px; --lateral-estreita:66px; }

.pular{position:absolute;left:-9999px;top:0;background:var(--amarelo);color:#111;
  padding:10px 16px;border-radius:0 0 8px 0;z-index:100;font-weight:bold}
.pular:focus{left:0}

.sidebar{position:fixed;left:0;top:0;bottom:0;width:var(--lateral);z-index:30;
  background:var(--escuro);color:#C6C9D2;display:flex;flex-direction:column;
  padding:18px 10px 12px;overflow-y:auto;overscroll-behavior:contain}
.sb-logo{display:flex;align-items:center;gap:9px;padding:0 10px 20px;
  color:#fff;text-decoration:none;font-size:17px;font-weight:bold;flex:0 0 auto}
.sb-logo svg{width:21px;height:21px;color:var(--amarelo);flex:0 0 auto}
.sb-logo b{color:var(--amarelo);font-weight:bold}
.sb-nav{display:flex;flex-direction:column;gap:2px;flex:1 1 auto}
.sb-grupo{font-size:10px;text-transform:uppercase;letter-spacing:.09em;
  color:#6E7480;padding:14px 12px 5px;font-weight:bold}
.sb-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;
  color:#C6C9D2;text-decoration:none;font-size:13.5px;line-height:1.25;transition:.12s}
.sb-item svg{width:17px;height:17px;flex:0 0 auto}
.sb-item:hover{background:rgba(255,255,255,.07);color:#fff}
/* O item aceso é preenchido, não sublinhado: em uma coluna de quinze linhas,
   contraste de fundo é o que se enxerga sem procurar. */
.sb-item.ativo{background:var(--amarelo);color:#111;font-weight:bold}
.sb-pe{flex:0 0 auto;border-top:1px solid rgba(255,255,255,.09);padding-top:8px;margin-top:10px;
  display:flex;flex-direction:column;gap:2px}
.sb-item.sair{color:#E39A94}
.sb-item.sair:hover{background:rgba(227,154,148,.14);color:#FFC9C4}

/* topo */
.topbar{background:var(--branco);border-bottom:1px solid var(--borda);padding:15px 26px;
  margin-left:var(--lateral);
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
.tb-titulo h1{font-size:19px;line-height:1.25;margin:0}
.tb-titulo p{font-size:12.5px;color:var(--texto-suave);margin:2px 0 0}
.marca{display:flex;align-items:center;gap:8px;font-weight:bold;font-size:17px}
.marca svg{width:20px;height:20px;color:var(--amarelo-escuro)}
.marca .destaque{color:var(--amarelo-escuro)}
.saudacao{font-size:13px;color:var(--texto-suave)}
.topbar-acoes{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tb-quem{display:flex;flex-direction:column;align-items:flex-end;line-height:1.2}
.tb-nome{font-size:13.5px;font-weight:bold}
.tb-papel{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--texto-suave)}
.btn{background:var(--escuro);color:#fff;border:none;padding:9px 15px;border-radius:8px;
  font-size:13px;font-weight:bold;text-decoration:none;display:inline-block}
.btn.amarelo{background:var(--amarelo);color:#111}
.btn.amarelo:hover{background:var(--amarelo-escuro)}
.btn.claro{background:var(--branco);color:var(--texto);border:1px solid var(--borda)}
.btn:disabled{opacity:.55;cursor:default}

.tabs{display:flex;gap:4px;padding:0 26px;background:var(--branco);border-bottom:1px solid var(--borda);
  margin-left:var(--lateral);
  overflow-x:auto}
.tab{background:none;border:none;padding:12px 14px;font-size:13.5px;color:var(--texto-suave);
  border-bottom:3px solid transparent;white-space:nowrap}
.tab.ativa{color:var(--texto);font-weight:bold;border-bottom-color:var(--amarelo)}
.conteudo{padding:22px 26px 60px;margin-left:var(--lateral)}
.secao{display:none}
.secao.ativa{display:block}

/* avisos */
.aviso{padding:12px 16px;border-radius:8px;margin-bottom:16px;font-size:13px;line-height:1.55}
.aviso.erro{background:var(--grave-bg);color:var(--grave)}
.aviso.ok{background:var(--bom-bg);color:var(--bom)}
.aviso.atencao{background:var(--aviso-bg);color:var(--aviso)}
.aviso.info{background:var(--info-bg);color:var(--info)}

/* ------------------------------------------------------------------
   Cartões de número
   ------------------------------------------------------------------
   O ícone no canto não é enfeite: numa fileira de quatro ou cinco cartões
   iguais, é o que a pessoa usa para achar o número que procura sem ler os
   rótulos todos. Por isso ele segue o SIGNIFICADO do cartão (relógio para
   tempo, pessoas para gente, alerta para o que está errado) e não a marca.
   ------------------------------------------------------------------ */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:12px;margin-bottom:20px}
.stat{background:var(--branco);border:1px solid var(--borda);border-radius:12px;padding:14px 16px}
.stat .rotulo{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--texto-suave);
  display:block;margin-bottom:6px}
.stat .valor{font-size:26px;font-weight:bold;display:block;line-height:1.1;
  font-variant-numeric:tabular-nums}
.stat .sub{font-size:12px;color:var(--texto-suave);margin-top:4px;display:block}
.stat.alerta{border-color:#E9A9A2;background:#FFF8F7}
.stat.alerta .valor{color:var(--grave)}
.stat.bom{border-color:#B8E0CB;background:#F7FCF9}
.stat.bom .valor{color:var(--bom)}
.stat .ico{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;
  justify-content:center;margin-bottom:9px;background:#EEF1F5;color:#5B6068}
.stat .ico svg{width:16px;height:16px}
.stat.alerta .ico{background:var(--grave-bg);color:var(--grave)}
.stat.bom .ico{background:var(--bom-bg);color:var(--bom)}
.stat.info .ico{background:var(--info-bg);color:var(--info)}
/* Tendência: a seta diz a direção antes do número ser lido. Verde não é
   "bom" por princípio — é "subiu"; quem monta o cartão decide qual das duas
   classes usar, porque churn subindo é vermelho e não verde. */
.stat .tend{font-size:11.5px;font-weight:bold;display:inline-flex;align-items:center;
  gap:3px;margin-top:6px}
.stat .tend.sobe{color:var(--bom)} .stat .tend.desce{color:var(--grave)}
.stat .tend.igual{color:var(--texto-suave);font-weight:normal}

/* painéis */
.painel{background:var(--branco);border:1px solid var(--borda);border-radius:12px;padding:18px;margin-bottom:18px}
.painel h2{font-size:15px;margin-bottom:4px}
.painel .legenda{font-size:12.5px;color:var(--texto-suave);margin:0 0 14px;line-height:1.6;max-width:78ch}

/* filtros */
.filtros{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.filtros input,.filtros select{padding:8px 10px;border:1px solid var(--borda);border-radius:8px;
  background:var(--branco);font-size:13px}
.filtros input[type=search]{flex:1;min-width:200px}

/* tabela */
.tabela-wrap{overflow-x:auto;background:var(--branco);border:1px solid var(--borda);border-radius:12px}
table{border-collapse:collapse;width:100%;font-size:13px;min-width:760px}
th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--texto-suave);
  font-weight:bold;padding:10px 12px;border-bottom:1px solid var(--borda);background:var(--branco);
  position:sticky;top:0;z-index:2;white-space:nowrap}
td{padding:9px 12px;border-bottom:1px solid #F1F2F4;vertical-align:middle}
tbody tr:hover{background:var(--hover)}
tbody tr.clicavel{cursor:pointer}
td.num{text-align:right;font-variant-numeric:tabular-nums}
td.nome{font-weight:bold;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* etiquetas */
.tag{display:inline-block;font-size:11.5px;font-weight:bold;padding:2px 8px;border-radius:999px;white-space:nowrap}
.tag.bom{background:var(--bom-bg);color:var(--bom)}
.tag.aviso{background:var(--aviso-bg);color:var(--aviso)}
.tag.grave{background:var(--grave-bg);color:var(--grave)}
.tag.neutro{background:#EEF0F3;color:var(--texto-suave)}
/* Selos de aquisição no cartão da SDR.
   Qualidade usa a mesma escala de cor em toda a ferramenta (A verde, D vermelho)
   e canal usa a MESMA cor dos gráficos do painel de Aquisição — a cor segue o
   canal em todo lugar, para ninguém precisar reaprender a legenda a cada tela. */
.tag.quente{background:#FDE7E3;color:#B3261E}
.tag.qA{background:#DFF3E7;color:#126B3E}
.tag.qB{background:#E4EEFB;color:#1B4F91}
.tag.qC{background:#FDF0CC;color:#7A5A00}
.tag.qD{background:#F1F2F4;color:#70757D}
.tag.canal-meta{background:#E4EEFB;color:#1B4F91}
.tag.canal-99{background:#FDEBE2;color:#9A3B12}
.tag.canal-rua{background:#DDF2EA;color:#0E6B4C}
.tag.info{background:var(--info-bg);color:var(--info)}
.prio{display:inline-flex;align-items:center;gap:6px;font-weight:bold;font-variant-numeric:tabular-nums}
.prio i{width:9px;height:9px;border-radius:50%;display:inline-block}

/* kanban */
.kanban{display:flex;gap:14px;overflow-x:auto;padding-bottom:12px;align-items:flex-start}
.coluna{background:#EEF0F3;border-radius:12px;padding:10px;min-width:288px;width:288px;flex:none}
.coluna h3{font-size:12.5px;margin-bottom:2px}
.coluna .conta{font-size:11px;color:var(--texto-suave);margin-bottom:10px}
.coluna.destaque{outline:2px dashed var(--amarelo-escuro);outline-offset:-4px}
.card{background:var(--branco);border:1px solid var(--borda);border-radius:10px;padding:11px 12px;
  margin-bottom:8px;cursor:pointer}
.card:hover{border-color:var(--amarelo-escuro)}
.card .cnome{font-weight:bold;font-size:13.5px;margin-bottom:3px}
.card .cinfo{font-size:11.5px;color:var(--texto-suave);margin-bottom:7px}
.card .crodape{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.card .cacao{font-size:11.5px;color:var(--info);margin-top:7px;line-height:1.45}

/* modal */
.sobreposicao{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:50;
  align-items:flex-start;justify-content:center;overflow-y:auto;padding:28px 14px}
.sobreposicao.aberta{display:flex}
.modal{background:var(--branco);border-radius:14px;width:100%;max-width:520px;padding:22px}
.modal h3{font-size:18px;margin-bottom:2px}
.modal .sub{font-size:12.5px;color:var(--texto-suave);margin-bottom:12px}
.modal label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--texto-suave);font-weight:bold;margin:14px 0 5px}
.modal input,.modal select,.modal textarea{width:100%;padding:9px 11px;border:1px solid var(--borda);
  border-radius:8px;background:#FAFAFA}
.modal textarea{min-height:74px;resize:vertical}
.linha2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.acoes-modal{display:flex;gap:8px;margin-top:18px;flex-wrap:wrap}
.explica{background:var(--info-bg);border-radius:9px;padding:11px 13px;font-size:12.5px;
  line-height:1.6;color:var(--info);margin-bottom:12px}
.explica b{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px}
.acao-sugerida{border-left:3px solid var(--amarelo-escuro);padding:3px 0 3px 11px;font-weight:bold;margin-bottom:12px}
.btn-whats{display:block;text-align:center;background:#25D366;color:#fff;padding:10px;border-radius:9px;
  font-weight:bold;text-decoration:none;margin:12px 0}
.historico{max-height:210px;overflow-y:auto;border:1px solid var(--borda);border-radius:9px;padding:10px;margin-bottom:6px}
.historico .item{border-bottom:1px solid #F1F2F4;padding:7px 0;font-size:12.5px}
.historico .item:last-child{border-bottom:none}
.historico .quando{color:var(--texto-suave);font-size:11px}

.vazio{text-align:center;padding:44px;color:var(--texto-suave)}
.rodape-ajuda{font-size:12px;color:var(--texto-suave);margin-top:10px;line-height:1.6}
/* --- barra de navegação única ---------------------------------------
   Os rótulos de grupo ("Operação", "Análise") explicam a barra sem exigir
   um menu que esconde as opções. O item ativo fica marcado porque, em oito
   telas parecidas, saber onde se está vale mais que economizar um pixel. */
.nav-grupo{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--texto-suave);opacity:.75;margin:0 2px 0 4px;align-self:center;white-space:nowrap}
.nav-sep{display:inline-block;width:1px;height:20px;background:var(--borda);
  margin:0 6px;align-self:center}
.topbar-acoes .btn.ativo{background:var(--amarelo);border-color:var(--amarelo-escuro);
  color:#1A1D21;font-weight:bold}
@media (max-width:900px){ .nav-grupo{display:none} }

/* Ações que pertencem ao painel, e não à navegação: criar lead, exportar,
   sincronizar. Ficam numa faixa própria abaixo da barra para que a navegação
   continue sendo só navegação. */
.topbar-extra{display:flex;gap:8px;flex-wrap:wrap;padding:10px 22px;margin-left:var(--lateral);
  background:#FAFBFC;border-bottom:1px solid var(--borda)}

/* ------------------------------------------------------------------
   Filtro por clique
   ------------------------------------------------------------------
   Duas afordâncias diferentes, porque são duas intenções diferentes:
   clicar na LINHA abre o motorista; clicar na ETIQUETA filtra a base.
   Sem essa distinção visual, o usuário descobre a diferença errando.
   ------------------------------------------------------------------ */
.filtro-tag{text-decoration:none;color:inherit;border-radius:5px;padding:1px 3px;
  transition:background .12s,box-shadow .12s}
.filtro-tag:hover{background:#EEF3FA;box-shadow:0 0 0 1px #C9DAF0}
.barra-link{transition:background .12s}
.barra-link:hover{background:#F5F8FC;outline:1px solid #DCE6F2}
.barra-link:hover .rotulo{color:#1B4F91}

/* ------------------------------------------------------------------
   Faixa "atualizado há X" — em todas as telas
   ------------------------------------------------------------------
   Responde, sem ninguém precisar perguntar, se a ferramenta está viva.
   Fica logo abaixo da barra de navegação, discreta quando está tudo bem
   e impossível de ignorar quando não está.
   ------------------------------------------------------------------ */
.faixa-sync{font-size:12.5px;line-height:1.5;padding:7px 22px;
  border-bottom:1px solid transparent;margin-left:var(--lateral)}
.faixa-sync.ok{background:#F1F8F4;color:#1B5E3A;border-bottom-color:#D6EADF}
.faixa-sync.atencao{background:#FFFBF2;color:#6B5200;border-bottom-color:#F0DFB0}
.faixa-sync.ruim{background:#FDF2F1;color:#8F211C;border-bottom-color:#F2CBC7}
@media (max-width:700px){ .faixa-sync{padding:7px 14px;font-size:12px} }
.faixa-sync.leitura{background:#F4F6FA;color:#2C3F63;border-bottom-color:#D9E1EF}

/* ------------------------------------------------------------------
   Acesso só-leitura
   ------------------------------------------------------------------
   O servidor já barra qualquer gravação. Isto é a camada visual: some com
   o botão que não funcionaria, para a pessoa não perder tempo preenchendo
   um formulário que seria recusado no fim.

   ATENÇÃO — a regra é por MÉTODO do formulário, e isso é deliberado.
   ------------------------------------------------------------------
   A primeira versão escondia TODO botão de enviar. O efeito não previsto foi
   grave: o botão "Aplicar filtros" também é um <button type=submit>, então
   marketing, tráfego, TI e o administrativo ficaram sem conseguir filtrar
   nada — as telas abriam, os números apareciam, e o botão que recorta a
   informação era invisível. Passaram a semana achando que só o gestor podia
   filtrar.

   Filtrar é LER. Nenhum formulário GET deste sistema grava coisa alguma —
   todos os que gravam usam POST. Então a regra passou a olhar o método:
   POST some, GET fica. O "i" no seletor aceita method="post" e method="POST".
   ------------------------------------------------------------------ */
body.somente-leitura form[method="post" i] button[type="submit"],
body.somente-leitura .btn.primario,
body.somente-leitura .btn.amarelo,
body.somente-leitura .so-gestor{display:none !important}
/* Botão de filtro volta a aparecer mesmo quando herdou .primario/.amarelo:
   ele vive dentro de um formulário GET, e GET não grava. */
body.somente-leitura form[method="get" i] button[type="submit"],
body.somente-leitura form:not([method]) button[type="submit"]{display:inline-block !important}
body.somente-leitura .acoes-modal,
body.somente-leitura .acao-sugerida{display:none !important}

/* Exceção nominal: o bloco marcado .libera volta a mostrar os botões mesmo em
   modo leitura. É como o time administrativo lança custo sem virar gestor.
   A exceção é do BLOCO, nunca da pessoa — o HTML só coloca .libera onde o PHP
   já conferiu a permissão daquela ação. */
body.somente-leitura .libera form button[type="submit"],
body.somente-leitura .libera .btn.primario,
body.somente-leitura .libera .btn.amarelo{display:inline-block !important}

/* ------------------------------------------------------------------
   Mensagem de abertura pronta
   ------------------------------------------------------------------
   Fica ACIMA do botão do WhatsApp de propósito: a SDR lê o que vai ser
   enviado antes de abrir a conversa. Mensagem que aparece só depois de
   clicar é mensagem que ninguém confere.
   ------------------------------------------------------------------ */
.msg-abertura{border:1px solid #CDE7D6;background:#F5FBF7;border-radius:11px;
  padding:12px 14px;margin:0 0 10px}
.msg-topo{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:12.5px;
  color:#14663D;margin-bottom:7px}
.msg-tag{background:#DFF1E7;color:#14663D;border-radius:99px;padding:2px 9px;font-size:11.5px}
.msg-texto{white-space:pre-wrap;font-size:13.5px;line-height:1.55;color:#1A1D21;
  background:#fff;border:1px solid #DCEDE3;border-radius:8px;padding:10px 12px}
.msg-acoes{display:flex;align-items:center;gap:11px;margin-top:9px;flex-wrap:wrap}
.msg-porque{font-size:11.5px;color:#5B6068;line-height:1.45;flex:1;min-width:180px}

/* ==================================================================
   A casca em tela pequena — dois degraus, não um
   ==================================================================
   Notebook (até 1160px): o menu encolhe para só os ícones. O rótulo sai, a
   POSIÇÃO fica — que é o que a pessoa já decorou. O title= continua lá para
   quem passar o mouse.

   Celular (até 760px): coluna vira faixa horizontal no topo, que rola de lado.
   Menu lateral em tela de celular come metade da largura útil, e a tela de
   quem trabalha em pé é justamente a que menos pode perder espaço. O cadastro
   da operação é feito em Android numa proporção de 5 para 1 — aqui não é
   detalhe de acabamento, é a tela principal.
   ================================================================== */
@media (max-width:1160px){
  :root{ --lateral:var(--lateral-estreita); }
  .sb-item span, .sb-logo span, .sb-grupo{display:none}
  .sb-item{justify-content:center;padding:11px 0}
  .sb-logo{justify-content:center;padding:0 0 16px}
  .sb-nav{gap:4px}
  /* Sem os títulos de grupo, um traço separa os blocos — senão viram
     quinze ícones iguais empilhados, que é pior que a barra antiga. */
  .sb-grupo + .sb-item{border-top:1px solid rgba(255,255,255,.09);
    margin-top:6px;padding-top:13px}
}

@media (max-width:760px){
  .sidebar{position:sticky;top:0;bottom:auto;width:auto;flex-direction:row;
    align-items:center;gap:4px;padding:7px 10px;overflow-x:auto;overflow-y:hidden}
  .sb-logo{padding:0 8px 0 2px}
  .sb-logo span{display:inline}
  .sb-logo span b{display:inline}
  .sb-nav{flex-direction:row;gap:3px}
  .sb-pe{flex-direction:row;border-top:none;border-left:1px solid rgba(255,255,255,.12);
    margin:0 0 0 6px;padding:0 0 0 6px}
  .sb-item{padding:9px 11px}
  .sb-grupo + .sb-item{border-top:none;margin-top:0;padding-top:9px}
  .topbar,.tabs,.conteudo,.faixa-sync,.topbar-extra{margin-left:0}
}

@media (max-width:640px){
  .conteudo{padding:16px 14px 50px}
  .topbar,.tabs{padding-left:14px;padding-right:14px}
  .topbar{padding-top:12px;padding-bottom:12px}
  .tb-titulo h1{font-size:17px}
  .linha2{grid-template-columns:1fr}
}