/* =================================================================
   Painel de Leads — Sistema de design
   ================================================================= */
:root{
  /* Marca */
  --marca:#0A037B;
  --marca-hover:#2A1FD9;

  /* Superfícies */
  --bg:#F2F3FA;
  --surface:#FFFFFF;
  --borda:#E6E8F4;

  /* Texto */
  --texto:#15163A;
  --texto-2:#6B6E8F;

  /* Estados */
  --sucesso:#1FAE5A;
  --whatsapp:#25D366;
  --whatsapp-hover:#1da851;
  --novo:#F5A623;
  --erro:#E04848;

  /* Sombras / raios */
  --raio:14px;
  --raio-sm:10px;
  --sombra:0 1px 2px rgba(21,22,58,.04), 0 4px 14px rgba(21,22,58,.06);
  --sombra-hover:0 6px 22px rgba(10,3,123,.14);

  --header-h:64px;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--texto);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ---------- Botões base ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:none;border-radius:var(--raio-sm);cursor:pointer;
  font-family:inherit;font-size:14px;font-weight:600;text-decoration:none;
  padding:11px 16px;line-height:1;transition:background .15s,box-shadow .15s,transform .12s,color .15s,border-color .15s;
  white-space:nowrap;
}
.btn i{font-size:14px}
.btn:active{transform:scale(.98)}

.btn-primario{background:var(--marca);color:#fff}
.btn-primario:hover{background:var(--marca-hover)}

.btn-ghost{
  background:rgba(255,255,255,.14);color:#fff;
  border:1px solid rgba(255,255,255,.22);
}
.btn-ghost:hover{background:rgba(255,255,255,.26)}
.btn-ghost.is-off{opacity:.7}

.btn-whatsapp{
  width:100%;background:var(--whatsapp);color:#fff;font-weight:700;padding:12px 16px;
}
.btn-whatsapp:hover{background:var(--whatsapp-hover)}
.btn-whatsapp i{font-size:18px}

/* =================================================================
   HEADER
   ================================================================= */
.topo{
  position:sticky;top:0;z-index:30;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-height:var(--header-h);
  background:var(--marca);color:#fff;
  padding:10px 20px;
  box-shadow:0 2px 12px rgba(10,3,123,.25);
}
.topo-esq{display:flex;align-items:center;gap:12px;min-width:0}
.topo-logo{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;flex:0 0 40px;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.18);
  border-radius:12px;font-size:18px;color:#fff;
}
.topo-titulo{min-width:0}
.topo h1{font-size:18px;font-weight:700;letter-spacing:-.01em;line-height:1.2}

/* Status com pontinho colorido */
.status{
  display:inline-flex;align-items:center;gap:7px;
  font-size:12.5px;font-weight:500;color:rgba(255,255,255,.85);margin-top:2px;
}
.status::before{
  content:"";width:8px;height:8px;border-radius:50%;
  background:rgba(255,255,255,.6);box-shadow:0 0 0 0 rgba(255,255,255,.4);
}
.status--conectado::before{background:var(--sucesso);animation:pulse-dot 2s infinite}
.status--conectando::before{background:var(--novo)}
.status--erro::before{background:var(--erro)}
@keyframes pulse-dot{
  0%{box-shadow:0 0 0 0 rgba(31,174,90,.5)}
  70%{box-shadow:0 0 0 6px rgba(31,174,90,0)}
  100%{box-shadow:0 0 0 0 rgba(31,174,90,0)}
}

.topo-dir{display:flex;align-items:center;gap:8px}
.btn-som-label{display:inline}

/* =================================================================
   CONTEÚDO
   ================================================================= */
.conteudo{
  max-width:1100px;margin:0 auto;
  padding:28px 20px 48px;
}

/* Barra de info */
.barra-info{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-bottom:18px;flex-wrap:wrap;
}
.contador-wrap{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--surface);border:1px solid var(--borda);
  color:var(--texto-2);font-size:13.5px;font-weight:600;
  padding:9px 14px;border-radius:999px;box-shadow:var(--sombra);
}
.contador-wrap i{color:var(--marca);font-size:14px}
.contador{color:var(--texto)}

/* Alerta */
.alerta{
  display:flex;align-items:center;gap:10px;
  background:#FCECEC;border:1px solid #F6D5D5;border-left:4px solid var(--erro);
  color:#8d2a2a;font-size:14px;font-weight:500;
  padding:12px 14px;border-radius:var(--raio-sm);margin-bottom:18px;
}
.alerta i{color:var(--erro);font-size:16px}
.alerta-erro{background:#FCECEC;border-left-color:var(--erro)}

/* =================================================================
   LISTA / CARDS
   ================================================================= */
.lista-leads{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:16px;
}

.vazio{
  grid-column:1/-1;
  display:flex;flex-direction:column;align-items:center;gap:12px;
  color:var(--texto-2);text-align:center;padding:60px 20px;
}
.vazio i{font-size:40px;color:#C7CAE4}

.lead{
  position:relative;
  background:var(--surface);
  border:1px solid var(--borda);
  border-left:4px solid var(--marca);
  border-radius:var(--raio);
  padding:18px 18px 16px;
  box-shadow:var(--sombra);
  transition:transform .16s ease,box-shadow .16s ease;
  animation:card-in .28s ease both;
}
.lead:hover{transform:translateY(-2px);box-shadow:var(--sombra-hover)}
@keyframes card-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* Lead recém-chegado: realce sutil */
.lead.is-novo{
  border-color:#FBE2B8;border-left-color:var(--novo);
  animation:card-in .28s ease both, highlight-novo 2.4s ease 1;
}
@keyframes highlight-novo{
  0%{box-shadow:0 0 0 3px rgba(245,166,35,.35), var(--sombra)}
  100%{box-shadow:var(--sombra)}
}

.lead-cabe{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;padding-right:54px}
.lead-nome{font-size:17px;font-weight:700;color:var(--texto);line-height:1.25;letter-spacing:-.01em}

.badge-novo{
  position:absolute;top:14px;right:14px;
  background:var(--novo);color:#fff;
  font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:4px 9px;border-radius:999px;
  box-shadow:0 2px 6px rgba(245,166,35,.4);
  animation:pulse-badge 1.6s ease-in-out infinite;
}
@keyframes pulse-badge{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.07)}
}

.lead-info{display:flex;flex-direction:column;gap:10px;margin:14px 0 16px}
.lead-campo{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:var(--texto)}
.lead-campo > i{
  width:18px;flex:0 0 18px;text-align:center;
  color:var(--marca);font-size:13px;opacity:.9;margin-top:2px;
}
.campo-texto{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.campo-texto .rotulo{
  font-size:11px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;
  color:var(--texto-2);
}
.campo-texto .valor{color:var(--texto);font-weight:600;word-break:break-word}

.lead-acoes{margin-top:auto;display:flex;flex-direction:column;gap:8px}
.lead-sem-wa{
  display:inline-flex;align-items:center;gap:8px;
  color:var(--texto-2);font-size:13px;font-style:italic;
}

/* Botão "Marcar como atendido" */
.btn-status{
  width:100%;background:var(--surface);color:var(--marca);
  border:1px solid var(--borda);font-weight:600;
}
.btn-status:hover{background:var(--bg);border-color:#D5D8EE}
.btn-status i{color:var(--marca);transition:color .15s}
.btn-status.is-atendido{background:var(--sucesso);color:#fff;border-color:var(--sucesso)}
.btn-status.is-atendido:hover{background:#1B9D50;border-color:#1B9D50}
.btn-status.is-atendido i{color:#fff}
.btn-status:disabled{opacity:.7;cursor:default}

/* Card de lead já ATENDIDO: realce verde suave, mantendo a identidade */
.lead.card--atendido{
  border-color:rgba(31,174,90,.35);
  border-left-color:var(--sucesso);
  background:linear-gradient(0deg, rgba(31,174,90,.08), rgba(31,174,90,.08)), var(--surface);
}
.lead.card--atendido .lead-nome{color:#15633a}

/* =================================================================
   MOBILE
   ================================================================= */
@media (max-width:640px){
  .topo{flex-wrap:wrap;padding:10px 14px}
  .topo h1{font-size:16px}
  .topo-dir{width:100%;justify-content:flex-end}
  .btn-som-label{display:none}
  .conteudo{padding:20px 14px 40px}
  .lista-leads{grid-template-columns:1fr}
  .btn{padding:12px 16px}
}

/* =================================================================
   LOGIN
   ================================================================= */
.tela-login{
  min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(42,31,217,.35), transparent 60%),
    linear-gradient(160deg,#0A037B 0%,#140a9e 45%,#1a0f7a 100%);
}
.card-login{
  width:100%;max-width:380px;
  background:var(--surface);border:1px solid var(--borda);
  border-radius:18px;padding:34px 28px;
  text-align:center;
  box-shadow:0 24px 60px rgba(5,2,50,.45);
}
.logo-login{
  width:60px;height:60px;margin:0 auto 16px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(140deg,var(--marca),var(--marca-hover));
  color:#fff;font-size:24px;border-radius:16px;
  box-shadow:0 8px 20px rgba(10,3,123,.35);
}
.card-login h1{font-size:21px;font-weight:700;color:var(--texto);margin-bottom:4px}
.subtitulo{color:var(--texto-2);font-size:14px;margin-bottom:24px}

.card-login form{display:flex;flex-direction:column;gap:14px;text-align:left}
.card-login label{font-size:13px;font-weight:600;color:var(--texto-2)}
.card-login .campo-senha{position:relative;display:flex;align-items:center}
.card-login .campo-senha i{
  position:absolute;left:14px;color:var(--texto-2);font-size:14px;pointer-events:none;
}
.card-login input{
  width:100%;padding:13px 14px 13px 40px;
  border:1px solid var(--borda);border-radius:var(--raio-sm);
  background:#FBFBFE;color:var(--texto);font-family:inherit;font-size:15px;
  transition:border-color .15s,box-shadow .15s;
}
.card-login input:focus{
  outline:none;border-color:var(--marca);
  box-shadow:0 0 0 3px rgba(10,3,123,.12);
}
.card-login .btn-primario{width:100%;padding:13px;font-size:15px;margin-top:4px}

.alerta-login{
  display:flex;align-items:center;gap:9px;
  background:#FCECEC;border:1px solid #F6D5D5;border-left:4px solid var(--erro);
  color:#8d2a2a;font-size:13.5px;text-align:left;
  padding:11px 13px;border-radius:var(--raio-sm);margin-bottom:18px;
}
.alerta-login i{color:var(--erro)}