/* CRM de Leads — visual do painel. Claro e escuro, sem biblioteca nenhuma. */

:root{
  --fundo:#f4f6f9; --papel:#fff; --linha:#e2e6ec; --texto:#1c1f26; --fraco:#6a7280;
  --azul:#2f5fe0; --quente:#c2410c; --morno:#b4740a; --frio:#5b6472; --verde:#1f7a45;
  --sombra:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.1);
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){
  :root{ --fundo:#101215; --papel:#181b20; --linha:#282d35; --texto:#e8eaee; --fraco:#9aa2ae;
         --sombra:0 1px 2px rgba(0,0,0,.4); }
}

*{box-sizing:border-box}
body{margin:0;font:15px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--fundo);color:var(--texto)}
a{color:var(--azul)}

/* ---------- topo ---------- */
.topo{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:10px 18px;background:var(--papel);border-bottom:1px solid var(--linha);position:sticky;top:0;z-index:30}
.topo-esq,.topo-dir{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.marca{font-size:16px}
.resumo{color:var(--fraco);font-size:13px}
.topo input[type=search],.topo select{padding:7px 10px;border:1px solid var(--linha);border-radius:8px;
  background:var(--fundo);color:var(--texto);font:inherit;font-size:14px}
.topo input[type=search]{min-width:230px}
.btn-linha{display:inline-block;padding:7px 12px;border:1px solid var(--linha);border-radius:8px;
  text-decoration:none;color:var(--texto);font-size:14px;background:var(--fundo)}
.btn-linha:hover{border-color:var(--azul);color:var(--azul)}
.usuario{font-size:13px;color:var(--fraco)}
.salvo{font-size:12px;color:var(--fraco);opacity:0;transition:opacity .2s}
.salvo.on{opacity:1;color:var(--verde)}

.aviso-faixa{background:#fff4d6;color:#6b4708;padding:10px 18px;font-size:14px;border-bottom:1px solid #eedfb0}

/* ---------- quadro ---------- */
.quadro{display:flex;gap:14px;padding:16px 18px 32px;overflow-x:auto;align-items:flex-start;min-height:calc(100vh - 60px)}
.coluna{flex:0 0 292px;background:var(--papel);border:1px solid var(--linha);border-radius:12px;
  display:flex;flex-direction:column;max-height:calc(100vh - 96px)}
.coluna-topo{display:flex;align-items:center;gap:8px;padding:11px 13px;border-bottom:1px solid var(--linha)}
.bolinha{width:9px;height:9px;border-radius:50%;flex:none}
.coluna-nome{font-weight:600;font-size:14px}
.coluna-conta{margin-left:auto;font-size:12px;color:var(--fraco);background:var(--fundo);
  padding:2px 8px;border-radius:20px}
.coluna-lista{list-style:none;margin:0;padding:10px;overflow-y:auto;flex:1;min-height:80px}
.coluna.alvo{outline:2px dashed var(--azul);outline-offset:-3px}
.vazio-col{color:var(--fraco);font-size:13px;text-align:center;padding:22px 10px;border:1px dashed var(--linha);border-radius:9px}

/* ---------- card ---------- */
.card{background:var(--papel);border:1px solid var(--linha);border-left:3px solid var(--frio);
  border-radius:9px;padding:10px 11px;margin-bottom:9px;cursor:grab;box-shadow:var(--sombra)}
.card:hover{border-color:var(--azul)}
.card.arrastando{opacity:.45}
.card.mudo{opacity:.5;filter:grayscale(.6)}
.card.t-QUENTE{border-left-color:var(--quente)}
.card.t-MORNO{border-left-color:var(--morno)}
.card.t-FRIO{border-left-color:var(--frio)}
.card-topo{display:flex;align-items:flex-start;gap:8px}
.card-nome{font-weight:600;font-size:14px;line-height:1.3;flex:1}
.card-nota{font-size:12px;font-weight:700;padding:1px 7px;border-radius:20px;background:var(--fundo);color:var(--fraco);flex:none}
.card.t-QUENTE .card-nota{color:var(--quente)}
.card-local{font-size:12px;color:var(--fraco);margin-top:2px}
.card-sinal{font-size:12.5px;color:var(--fraco);margin-top:7px;line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card-marcas{display:flex;gap:5px;flex-wrap:wrap;margin-top:8px}
.marca-chip{font-size:11px;padding:1px 7px;border-radius:20px;background:var(--fundo);color:var(--fraco);border:1px solid var(--linha)}
.marca-chip.m-quente{background:#fee6d5;color:#9a3412;border-color:#f8c9a8}
.marca-chip.m-nao-perturbe{background:#f3f4f6;color:#4b5563;border-color:#d1d5db}
.selo-novo{font-size:10px;font-weight:700;letter-spacing:.4px;background:var(--azul);color:#fff;padding:1px 6px;border-radius:4px}
.card-acao{font-size:12px;color:var(--azul);margin-top:7px}

/* ---------- gaveta do dossiê ---------- */
.fundo{position:fixed;inset:0;background:rgba(10,12,16,.45);z-index:40}
.gaveta{position:fixed;top:0;right:0;height:100%;width:min(560px,100%);background:var(--papel);
  border-left:1px solid var(--linha);z-index:50;overflow-y:auto;box-shadow:-8px 0 30px rgba(0,0,0,.14)}
.gaveta-conteudo{padding:20px 22px 60px}
.g-fechar{float:right;border:0;background:var(--fundo);color:var(--texto);border-radius:8px;
  width:32px;height:32px;font-size:18px;cursor:pointer;line-height:1}
.g-nome{font-size:20px;margin:0 0 2px;padding-right:40px}
.g-local{color:var(--fraco);font-size:14px;margin:0 0 14px}
.g-nota{display:inline-block;font-weight:700;padding:3px 10px;border-radius:20px;background:var(--fundo);font-size:13px}
.g-bloco{border-top:1px solid var(--linha);margin-top:18px;padding-top:16px}
.g-rot{font-size:11px;text-transform:uppercase;letter-spacing:.7px;color:var(--fraco);margin:0 0 6px;font-weight:600}
.g-texto{margin:0 0 10px;font-size:14.5px;line-height:1.6}
.g-prova{display:inline-block;background:var(--azul);color:#fff;text-decoration:none;padding:9px 14px;
  border-radius:8px;font-size:14px;font-weight:500}
.g-prova:hover{filter:brightness(1.08)}
.g-prova-nota{font-size:13px;color:var(--fraco);margin:8px 0 0}
.g-contatos{display:flex;flex-direction:column;gap:7px}
.g-contato{display:flex;gap:8px;font-size:14px;align-items:baseline;flex-wrap:wrap}
.g-contato b{font-weight:600;color:var(--fraco);font-size:12px;min-width:80px}
.g-zap{display:inline-block;background:#128c7e;color:#fff;text-decoration:none;padding:8px 13px;border-radius:8px;font-size:14px}
.g-sel,.g-inp,.g-area{width:100%;padding:9px 11px;border:1px solid var(--linha);border-radius:8px;
  background:var(--fundo);color:var(--texto);font:inherit;font-size:14px}
.g-area{min-height:74px;resize:vertical}
.g-marcas{display:flex;flex-wrap:wrap;gap:7px}
.g-marca{border:1px solid var(--linha);background:var(--fundo);color:var(--texto);border-radius:20px;
  padding:5px 12px;font-size:13px;cursor:pointer}
.g-marca.on{background:var(--azul);border-color:var(--azul);color:#fff}
.g-marca.on.perigo{background:#4b5563;border-color:#4b5563}
.g-btn{background:var(--azul);color:#fff;border:0;border-radius:8px;padding:9px 16px;font:inherit;font-size:14px;cursor:pointer;margin-top:8px}
.g-nota-item{border-left:2px solid var(--linha);padding:2px 0 2px 11px;margin-bottom:11px}
.g-nota-quando{font-size:11.5px;color:var(--fraco)}
.g-fontes{margin:0;padding-left:18px;font-size:13.5px}
.g-fontes li{margin-bottom:5px}
.g-alerta{background:#fff4d6;color:#6b4708;border-radius:8px;padding:10px 12px;font-size:13.5px;margin-top:12px}

/* ---------- telas simples (login, importar) ---------- */
.tela-login{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:20px}
.caixa-login{background:var(--papel);border:1px solid var(--linha);border-radius:14px;
  padding:34px 32px;width:100%;max-width:400px;box-shadow:var(--sombra)}
.caixa-login h1{margin:0 0 4px;font-size:21px}
.caixa-login .sub{margin:0 0 22px;color:var(--fraco);font-size:14px}
.caixa-login label{display:block;font-size:13px;font-weight:600;margin:14px 0 5px}
.caixa-login input{width:100%;padding:11px 12px;border:1px solid var(--linha);border-radius:8px;
  background:var(--fundo);color:var(--texto);font:inherit}
.caixa-login button{width:100%;margin-top:22px;background:var(--azul);color:#fff;border:0;
  border-radius:8px;padding:12px;font:600 15px system-ui;cursor:pointer}
.rodape-login{margin:20px 0 0;font-size:12.5px;color:var(--fraco);text-align:center;line-height:1.5}

.pagina-simples .miolo{max-width:760px;margin:0 auto;padding:26px 20px 70px}
.miolo h1{font-size:22px;margin:0 0 4px}
.miolo .sub{color:var(--fraco);margin:0 0 22px}
.caixa-regra{background:var(--papel);border:1px solid var(--linha);border-radius:10px;padding:14px 18px;margin-bottom:22px;font-size:14px}
.caixa-regra ol{margin:8px 0 0;padding-left:20px}
.caixa-regra li{margin-bottom:6px}
.form-importar label{display:block;font-size:13px;font-weight:600;margin:16px 0 5px}
.form-importar input[type=file],.form-importar textarea{width:100%;padding:10px 12px;border:1px solid var(--linha);
  border-radius:8px;background:var(--papel);color:var(--texto);font:inherit;font-size:14px}
.form-importar textarea{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px}
.form-importar button{margin-top:18px;background:var(--azul);color:#fff;border:0;border-radius:8px;
  padding:12px 24px;font:600 15px system-ui;cursor:pointer}
.ou{text-align:center;color:var(--fraco);margin:16px 0 0;font-size:13px}
.dica{font-size:12.5px;color:var(--fraco);margin-top:26px;line-height:1.6}
.erro{background:#fdecec;border-left:4px solid #d33;padding:12px 14px;border-radius:6px;color:#8a1f1f;margin:0 0 18px;font-size:14px}
.ok{background:#e9f7ef;border-left:4px solid var(--verde);padding:14px 16px;border-radius:6px;color:#14532d;margin:0 0 18px;font-size:14px}
.vazio-geral{margin:60px auto;text-align:center;color:var(--fraco);max-width:420px}

@media (max-width:640px){
  .topo input[type=search]{min-width:0;flex:1}
  .quadro{padding:12px}
  .coluna{flex-basis:270px}
}