/* base.css — tema e peças de tela que TODAS as telas usam.
 *
 * Saiu do panel.html em 17/08/2026 junto com o comum.js, e pelo mesmo motivo: a tela do
 * construtor de fluxo passou a ser um arquivo próprio, e copiar o tema faria as cópias
 * divergirem na primeira vez que alguém mudasse a cor de destaque.
 *
 * Entra só o que é de TODAS as telas: as variáveis, o reset, e as peças básicas — botão,
 * campo, cartão, dica, etiqueta de estado. O que é de UMA tela fica na tela: a marca do logo,
 * o menu lateral, o seletor de arquivo, o funil e a conversa continuam no painel. A primeira
 * tentativa recortou por faixa de linhas, levou a marca do login junto e truncou uma regra de
 * várias linhas — daí a lista ser explícita.
 */

:root{
  --bg:#f5f6f5;
  --surface:#ffffff;
  --surface-alt:#eef2ef;
  --border:#e2e5e2;
  --text:#161a18;
  --text-muted:#68716c;
  --accent:#17a34a;
  --accent-dark:#0e7a37;
  --accent-tint:#e3f6ea;
  --warn-text:#9a5b12;
  --warn-tint:#fdf1e0;
  --error-text:#9a2f22;
  --error-tint:#fdeceb;
  --r-sm:8px; --r-md:12px; --r-lg:18px; --r-xl:22px; --r-pill:999px;
  --shadow-sm:0 1px 3px rgba(20,24,22,.06);
  --shadow-md:0 6px 20px rgba(20,24,22,.08);
  --shadow-lg:0 16px 40px rgba(20,24,22,.14);
}
*,*::before,*::after{box-sizing:border-box;}
html,body{height:100%;overflow:hidden;}
body{margin:0;font-family:'Manrope',system-ui,sans-serif;background:var(--bg);color:var(--text);}
a{color:var(--accent-dark);}
a:hover{color:var(--accent);}
button{font-family:inherit;}
.hidden{display:none !important;}
.field{display:flex;flex-direction:column;gap:6px;}
.field label{font-size:12.5px;font-weight:600;color:var(--text-muted);}
.input{
  width:100%;min-height:46px;padding:0 16px;font:inherit;font-size:14.5px;color:var(--text);
  background:var(--surface-alt);border:1.5px solid transparent;border-radius:var(--r-md);
  outline:none;transition:border-color .15s,background .15s;
}
.input:hover{border-color:var(--border);}
.input:focus{background:var(--surface);border-color:var(--accent);}
.input[readonly]{cursor:default;}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;
  font-weight:700;font-size:14px;border-radius:var(--r-pill);border:none;
  padding:0 22px;min-height:46px;transition:background .15s,color .15s,box-shadow .15s;
  white-space:nowrap;
}
.btn:disabled{opacity:.6;cursor:not-allowed;}
.btn-primary{background:var(--accent);color:#fff;}
.btn-primary:hover:not(:disabled){background:var(--accent-dark);}
.btn-secondary{background:var(--surface-alt);color:var(--text);}
.btn-secondary:hover{background:var(--border);}
.btn-block{width:100%;}
.btn-icon{width:46px;height:46px;padding:0;border-radius:var(--r-pill);}
.spinner{width:14px;height:14px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;display:inline-block;animation:spin .7s linear infinite;flex:none;}
@keyframes spin{to{transform:rotate(360deg);}}
.card{background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-sm);padding:22px;display:flex;flex-direction:column;gap:16px;}
.card-title{font-size:16.5px;font-weight:700;margin:0;}
.card-desc{font-size:13px;color:var(--text-muted);margin:0;max-width:70ch;line-height:1.55;}
.hint{font-size:12px;color:var(--text-muted);line-height:1.6;margin:0;}
.hint b{color:var(--text);font-weight:700;}
.hint code{background:var(--surface-alt);padding:1px 6px;border-radius:5px;font-size:11px;}
.pill-estado{font-size:11px;font-weight:700;padding:3px 10px;border-radius:var(--r-pill);
  background:var(--surface-alt);color:var(--text-muted);vertical-align:middle;margin-left:8px;}
.pill-estado.ligada{background:var(--accent-tint);color:var(--accent-dark);}

/* O responsavel pelo lead, no card do funil. Discreto: e informacao de apoio, nao o assunto
   do card — quem olha o funil esta procurando o LEAD, e nao quem responde por ele. */
.funil-card-dono{font-size:10.5px;color:var(--text-muted);margin-top:4px;
  display:flex;align-items:center;gap:4px;}
.funil-card-dono::before{content:"";width:5px;height:5px;border-radius:50%;
  background:var(--accent);flex:none;}
/* Dono desativado: alguem saiu da empresa e o lead ficou com ela. Precisa saltar aos olhos,
   porque na parte 2 esse lead ficaria invisivel para o time inteiro. */
.funil-card-dono.saiu{color:var(--error-text);font-weight:600;}
.funil-card-dono.saiu::before{background:var(--error-text);}

.funil-filtro-dono{width:auto;min-width:150px;flex:none;}

/* Chip que e so icone, para a linha de filtros do funil parar de crescer em texto. O numero
   ao lado quando existe: "esconder sem dizer quantos e esconder de verdade". */
.chip-icone{display:inline-flex;align-items:center;gap:5px;padding:0 10px;}
.chip-icone svg{flex:none;}

/* Rodape da coluna do funil: quantos leads ainda faltam desenhar. Sem ele, uma coluna
   cortada em 50 pareceria uma coluna COM 50 — e aí sim o lead teria sumido. */
.funil-col-mais{margin:6px 8px 10px;padding:6px 0;text-align:center;font-size:11.5px;
  color:var(--muted);border-top:1px dashed var(--border);}

/* Aparência: as amostras de tema e de fundo. Cada botão MOSTRA o que faz, em vez de dizer o
   nome de uma cor — "Grafite" não significa nada até a pessoa ver. */
.tema-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px;}
.tema-opcao{display:flex;flex-direction:column;gap:6px;align-items:center;padding:8px;
  background:none;border:1px solid var(--border);border-radius:var(--r-md);cursor:pointer;}
.tema-opcao:hover{border-color:var(--accent);}
.tema-amostra{width:100%;height:44px;border-radius:var(--r-sm);display:flex;align-items:center;
  justify-content:flex-end;padding:6px;}
.tema-bolha{width:26px;height:14px;border-radius:var(--r-pill);}
.tema-nome{font-size:12px;color:var(--text-muted);font-weight:600;}
.fundo-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px;}
.fundo-opcao{display:flex;gap:8px;align-items:center;padding:8px 10px;background:none;
  border:1px solid var(--border);border-radius:var(--r-md);cursor:pointer;font-size:12.5px;
  color:var(--text);}
.fundo-opcao:hover{border-color:var(--accent);}
.fundo-opcao.ativo{border-color:var(--accent);background:var(--accent-tint);font-weight:700;}
.fundo-amostra{width:22px;height:22px;border-radius:var(--r-sm);border:1px solid var(--border);
  flex:none;}
.cor-linha{display:flex;gap:12px;align-items:center;}
.cor-campo{width:64px;height:40px;padding:2px;border:1px solid var(--border);
  border-radius:var(--r-sm);background:var(--surface);cursor:pointer;}
.hint.ok{color:var(--accent-dark);font-weight:600;}
.hint.erro{color:var(--error-text);font-weight:600;}

/* Aparência, parte 2: a letra. Cada opção é escrita na própria fonte — "Estreita" não diz
   nada, ver diz tudo. */
.fonte-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;}
.fonte-opcao{padding:12px 10px;background:none;border:1px solid var(--border);
  border-radius:var(--r-md);cursor:pointer;font-size:14.5px;color:var(--text);}
.fonte-opcao:hover{border-color:var(--accent);}
.fonte-opcao.ativo{border-color:var(--accent);background:var(--accent-tint);font-weight:700;}
.tamanho-linha{display:flex;gap:12px;align-items:center;margin-top:14px;}
.tamanho-linha label{font-size:12.5px;font-weight:600;color:var(--text-muted);}
.tamanho-linha input[type=range]{flex:1;max-width:260px;accent-color:var(--accent);}

/* O fundo do painel de mensagens. As duas variáveis são preenchidas pela folha de aparência
   quando o cliente escolhe um fundo com desenho; sem ela, `none` mantém o liso de sempre.
   A textura é feita com gradiente do próprio CSS — nada é baixado de fora. */
.chat-thread{
  background-image:var(--fundo-desenho, none);
  background-size:var(--fundo-medida, auto);
}

/* Aparência, parte 3: formato dos botões e os interruptores. */
.formato-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;}
.formato-opcao{padding:12px 10px;background:none;border:1px solid var(--border);cursor:pointer;
  font-size:13.5px;font-weight:600;color:var(--text);}
.formato-opcao:hover{border-color:var(--accent);}
.formato-opcao.ativo{border-color:var(--accent);background:var(--accent-tint);}
.interruptor-lista{display:flex;flex-direction:column;gap:10px;}
.interruptor{display:flex;gap:10px;align-items:center;font-size:13.5px;cursor:pointer;}
.interruptor input{width:17px;height:17px;accent-color:var(--accent);cursor:pointer;}