/* ============================================================
   Emérito CRM — identidade Aldo Freitas (aldofreitas.com.br)
   preto cinematográfico + verde-limão, Space Grotesk / Inter / JetBrains Mono
   ============================================================ */
:root {
  /* ---- TEMA CLARO (padrão — branco, do próprio site do Aldo) ---- */
  --fundo: #F7F8F4;
  --fundo-alt: #EFF1E9;
  --card: #FFFFFF;
  --card-2: #F2F4EC;
  --borda: #DDE0D3;
  --borda-forte: #C4C8B7;

  --lime: #F5B12E;            /* acento AMARELO como FUNDO (botão/badge/avatar) */
  --lime-hover: #FFC94D;
  --lime-dim: #C88A12;        /* borda/hover mais escura p/ contraste no branco */
  --lime-txt: #9A6A08;        /* acento COMO TEXTO vira âmbar escuro legível */
  --sobre-lime: #1A1204;      /* texto quase-preto por cima do amarelo */

  --branco: #14170D;          /* cor de maior contraste (títulos) = quase-preto */
  --texto: #272B20;
  --mudo: #50564A;
  --fraco: #737968;

  --ok: #1F9E4F;
  --alerta: #B9770A;
  --perigo: #C93321;
  --azul: #2C6FA6;

  --display: 'Space Grotesk', sans-serif;
  --corpo: 'Inter', sans-serif;
  --mono: 'JetBrains Mono', monospace;

  --r-s: 8px; --r-m: 12px; --r-g: 16px; --r-pill: 999px;
  --shadow-card: 0 6px 22px rgba(20,23,13,.10);
  --shadow-glow: 0 0 0 1px rgba(154,106,8,.30), 0 6px 20px rgba(245,177,46,.20);
  --grao-op: .03;
}

/* ---- TEMA ESCURO (variante opcional) ---- */
:root[data-tema="escuro"] {
  --fundo: #0A0A0A;
  --fundo-alt: #101010;
  --card: #161616;
  --card-2: #1C1C1C;
  --borda: #262626;
  --borda-forte: #333;

  --lime: #F5B12E;            /* fundo de botão continua amarelo vibrante */
  --lime-hover: #FFC94D;
  --lime-dim: #E0A020;        /* acento em bordas/hover */
  --lime-txt: #F5B12E;        /* acento como TEXTO — amarelo legível sobre escuro */
  --sobre-lime: #1A1204;      /* texto por cima do fundo amarelo */

  --branco: #FFFFFF;
  --texto: #EDEDED;
  --mudo: #B4B4B4;
  --fraco: #8C8C8C;

  --ok: #35C46A;
  --alerta: #F5A524;
  --perigo: #F0503C;
  --azul: #4D9DE0;

  --shadow-card: 0 8px 30px rgba(0,0,0,.45);
  --shadow-glow: 0 0 0 1px rgba(245,177,46,.30), 0 6px 24px rgba(245,177,46,.15);
  --grao-op: .05;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { color-scheme: light; }
html[data-tema="escuro"] { color-scheme: dark; }
body {
  font-family: var(--corpo);
  background: var(--fundo);
  color: var(--texto);
  font-size: 15px;
  line-height: 1.5;
  display: grid;
  grid-template-columns: 248px 1fr;
  min-height: 100vh;
}

/* grão sutil por cima de tudo */
.grao {
  position: fixed; inset: 0; pointer-events: none; z-index: 999; opacity: var(--grao-op);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.oculto { display: none !important; }
.eyebrow {
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--fraco);
}

/* ---------- lateral ---------- */
.lateral {
  border-right: 1px solid var(--borda);
  background: var(--fundo-alt);
  padding: 22px 16px;
  display: flex; flex-direction: column; gap: 26px;
  position: sticky; top: 0; height: 100vh;
}
.marca { display: flex; gap: 12px; align-items: center; }
.marca-simbolo {
  width: 40px; height: 40px; border-radius: var(--r-s);
  background: var(--lime); color: var(--sobre-lime);
  font-family: var(--display); font-weight: 700; font-size: 24px;
  display: grid; place-items: center;
}
.marca strong { font-family: var(--display); font-size: 17px; letter-spacing: -.02em; display: block; }
.marca-sub { font-family: var(--mono); font-size: 10px; color: var(--fraco); letter-spacing: .06em; }

.menu { display: flex; flex-direction: column; gap: 4px; }
.menu-item {
  all: unset; cursor: pointer; padding: 10px 14px; border-radius: var(--r-s);
  color: var(--mudo); font-weight: 500; font-size: 14.5px;
  transition: background .15s, color .15s;
}
.menu-item:hover { background: var(--card); color: var(--texto); }
.menu-item.ativo { background: var(--card-2); color: var(--lime-txt); font-weight: 600; }

.lateral-rodape { margin-top: auto; display: flex; flex-direction: column; gap: 12px; }
.btn-tema { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; }
.meta-dia { background: var(--card); border: 1px solid var(--borda); border-radius: var(--r-m); padding: 12px 14px; }
.meta-topo { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.meta-topo strong { font-family: var(--display); font-size: 18px; }
.meta-barra { height: 6px; border-radius: var(--r-pill); background: var(--card-2); overflow: hidden; }
.meta-barra > div { height: 100%; width: 0%; background: var(--lime); border-radius: var(--r-pill); transition: width .4s ease; }

/* ---------- conteúdo ---------- */
.conteudo { padding: 26px 32px 80px; max-width: 1240px; }
.topo { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 18px; flex-wrap: wrap; }
.topo h1 { font-family: var(--display); font-size: clamp(26px, 3vw, 34px); letter-spacing: -.02em; }
.topo-acoes { display: flex; align-items: center; gap: 14px; }
#busca {
  background: var(--card); border: 1px solid var(--borda); border-radius: var(--r-pill);
  color: var(--texto); padding: 9px 18px; width: 280px; font-family: var(--corpo); font-size: 14px;
  outline: none; transition: border-color .15s, box-shadow .15s;
}
#busca:focus { border-color: var(--lime-dim); box-shadow: var(--shadow-glow); }

/* ---------- filtros ---------- */
.filtros { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.filtros select {
  background: var(--card); color: var(--mudo); border: 1px solid var(--borda);
  border-radius: var(--r-pill); padding: 7px 12px; font-size: 13px; font-family: var(--corpo);
  outline: none; cursor: pointer; max-width: 210px;
}
.filtros select:focus, .filtros select.usado { border-color: var(--lime-dim); color: var(--texto); }

/* ---------- botões ---------- */
.btn {
  all: unset; cursor: pointer; text-align: center; font-weight: 600; font-size: 14px;
  padding: 10px 18px; border-radius: var(--r-pill); transition: background .15s, transform .1s;
}
.btn:active { transform: scale(.98); }
.btn-primario { background: var(--lime); color: var(--sobre-lime); }
.btn-primario:hover { background: var(--lime-hover); }
.btn-fantasma { border: 1px solid var(--borda); color: var(--mudo); padding: 6px 14px; font-size: 13px; }
.btn-fantasma:hover { border-color: var(--borda-forte); color: var(--texto); }
.btn-perigo { border: 1px solid var(--perigo); color: var(--perigo); }
.btn-whats { background: #25D366; color: #06250f; }
.btn-whats:hover { filter: brightness(1.08); }
.btn-ig { background: linear-gradient(45deg, #F58529, #DD2A7B, #8134AF); color: #fff; }
.btn-ig:hover { filter: brightness(1.08); }

/* instagram na lista */
.ig-mini { font-family: var(--mono); font-size: 11.5px; color: #C13584; margin-top: 2px; }
.ig-mini.parado { color: var(--alerta); }
.ig-mini .ig-parado { color: var(--alerta); }

/* instagram na ficha */
.ig-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.ig-handle { font-family: var(--display); font-size: 18px; color: #C13584; text-decoration: none; font-weight: 700; }
.ig-handle:hover { text-decoration: underline; }
.ig-stat { font-family: var(--mono); font-size: 12px; color: var(--mudo); }
.ig-stat.parado { color: var(--alerta); font-weight: 600; }
.ig-bio { font-size: 13px; color: var(--mudo); font-style: italic; margin-top: 8px; }
.ig-dica { font-size: 12.5px; color: var(--texto); background: rgba(245,165,36,.10); border-radius: var(--r-s); padding: 8px 10px; margin-top: 10px; }
.btn[disabled] { opacity: .4; cursor: not-allowed; }

/* ---------- cards / kpis ---------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 26px; }
.kpi {
  background: var(--card); border: 1px solid var(--borda); border-radius: var(--r-m);
  padding: 16px 18px; box-shadow: var(--shadow-card);
}
.kpi strong { font-family: var(--display); font-size: 30px; letter-spacing: -.02em; display: block; }
.kpi.lima strong { color: var(--lime-txt); }

.secao-titulo { font-family: var(--display); font-size: 18px; letter-spacing: -.01em; margin: 26px 0 12px; }

/* ---------- tabela / linhas de lead ---------- */
.tabela { display: flex; flex-direction: column; gap: 8px; }
.linha {
  display: grid;
  grid-template-columns: 34px 1.6fr 1fr .9fr .9fr .9fr 100px;
  gap: 12px; align-items: center;
  background: var(--card); border: 1px solid var(--borda); border-radius: var(--r-m);
  padding: 12px 16px; cursor: pointer; transition: border-color .15s, background .15s;
}
.linha:hover { border-color: var(--lime-dim); background: var(--card-2); }
.linha .nome { font-weight: 600; color: var(--branco); }
.linha .sub { font-size: 12.5px; color: var(--fraco); }
.avatar {
  width: 34px; height: 34px; border-radius: var(--r-s); background: var(--lime);
  color: var(--sobre-lime); font-family: var(--display); font-weight: 700;
  display: grid; place-items: center; font-size: 16px;
}
.avatar.frio { background: var(--card-2); color: var(--mudo); border: 1px solid var(--borda); }

.pill {
  display: inline-block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .05em;
  padding: 3px 9px; border-radius: var(--r-pill); border: 1px solid var(--borda);
  color: var(--mudo); text-transform: uppercase; white-space: nowrap;
}
.pill.quente { border-color: var(--perigo); color: var(--perigo); }
.pill.alvo { border-color: var(--lime-dim); color: var(--lime-txt); }
.pill.morno { border-color: var(--alerta); color: var(--alerta); }
.pill.descartar { opacity: .5; }
.pill.nivel { border-color: var(--borda-forte); color: var(--texto); }
.pill.ok { border-color: var(--ok); color: var(--ok); }
.pill.info { border-color: var(--azul); color: var(--azul); }
.pill.bloqueado { border-color: var(--perigo); color: var(--perigo); }

.toque-hoje { color: var(--lime-txt); font-family: var(--mono); font-size: 12px; }
.toque-vencido { color: var(--perigo); font-family: var(--mono); font-size: 12px; }

/* ---------- pirâmide ---------- */
.piramide { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 30px 0; }
.pir-nivel {
  --larg: 100%;
  width: var(--larg);
  background: var(--card); border: 1px solid var(--borda); border-radius: var(--r-m);
  padding: 14px 22px; cursor: pointer; display: flex; justify-content: space-between; align-items: center;
  transition: border-color .15s, transform .15s, box-shadow .2s;
}
.pir-nivel:hover { border-color: var(--lime-dim); transform: translateY(-2px); box-shadow: var(--shadow-glow); }
.pir-nivel .pir-nome { font-family: var(--display); font-size: 16px; }
.pir-nivel .pir-desc { font-size: 12.5px; color: var(--fraco); }
.pir-nivel .pir-qtd { font-family: var(--display); font-size: 26px; color: var(--lime-txt); }
.pir-5 { --larg: 34%; min-width: 300px; }
.pir-4 { --larg: 48%; min-width: 340px; }
.pir-3 { --larg: 62%; min-width: 380px; }
.pir-2 { --larg: 78%; }
.pir-1 { --larg: 94%; }

/* ---------- funil (kanban) ---------- */
.kanban {
  display: grid; grid-auto-flow: column; grid-auto-columns: 260px; align-items: start;
  gap: 12px; height: calc(100vh - 260px); max-height: 640px;
  overflow-x: auto; overflow-y: hidden; padding-bottom: 16px;
}
.kcol {
  background: var(--fundo-alt); border: 1px solid var(--borda); border-radius: var(--r-m);
  padding: 12px; height: 100%; display: flex; flex-direction: column;
}
.kcol .kcol-cards { overflow-y: auto; flex: 1; margin: 0 -4px; padding: 0 4px; }

.kanban::-webkit-scrollbar, .kcol-cards::-webkit-scrollbar { height: 9px; width: 7px; }
.kanban::-webkit-scrollbar-track, .kcol-cards::-webkit-scrollbar-track { background: var(--card-2); border-radius: var(--r-pill); }
.kanban::-webkit-scrollbar-thumb, .kcol-cards::-webkit-scrollbar-thumb { background: var(--lime-dim); border-radius: var(--r-pill); }
.kanban::-webkit-scrollbar-thumb:hover, .kcol-cards::-webkit-scrollbar-thumb:hover { background: var(--lime); }
.kanban { scrollbar-color: var(--lime-dim) var(--card-2); scrollbar-width: thin; }
.kcol-cards { scrollbar-color: var(--lime-dim) var(--card-2); scrollbar-width: thin; }
.kcol h3 { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--fraco); margin-bottom: 12px; display: flex; justify-content: space-between; }
.kcard {
  background: var(--card); border: 1px solid var(--borda); border-radius: var(--r-s);
  padding: 10px 12px; margin-bottom: 8px; cursor: pointer; transition: border-color .15s;
}
.kcard:hover { border-color: var(--lime-dim); }
.kcard .nome { font-weight: 600; font-size: 13.5px; }
.kcard .sub { font-size: 11.5px; color: var(--fraco); }

/* ---------- gaveta (ficha) ---------- */
.veu { position: fixed; inset: 0; background: rgba(0,0,0,.65); backdrop-filter: blur(3px); z-index: 50; }
.gaveta {
  position: fixed; inset: 0; margin: auto; z-index: 60;
  width: min(640px, 94vw); height: fit-content; max-height: 88vh;
  background: var(--fundo-alt); border: 1px solid var(--borda-forte);
  border-radius: var(--r-g); box-shadow: var(--shadow-card), 0 0 80px rgba(0,0,0,.6);
  overflow-y: auto; overflow-x: hidden; padding: 24px 26px 34px;
  animation: entrar .2s ease;
}
@keyframes entrar { from { transform: translateY(14px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }

.gaveta h2 { font-family: var(--display); font-size: 24px; letter-spacing: -.02em; margin-bottom: 2px; }
.gaveta .sub { color: var(--fraco); margin-bottom: 16px; }
.gaveta-acoes { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0 20px; }
.bloco { background: var(--card); border: 1px solid var(--borda); border-radius: var(--r-m); padding: 16px; margin-bottom: 14px; }
.bloco h4 { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--fraco); margin-bottom: 12px; }

.campo { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.campo label { font-size: 12px; color: var(--fraco); }
.campo input, .campo select, .campo textarea {
  background: var(--card-2); border: 1px solid var(--borda); border-radius: var(--r-s);
  color: var(--texto); padding: 8px 10px; font-family: var(--corpo); font-size: 14px; outline: none;
  width: 100%; min-width: 0;
}
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--lime-dim); }
.campo input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--lime); }
.campos-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0 12px; }
.campos-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0 12px; }
.servicos { display: flex; gap: 18px; flex-wrap: wrap; padding: 4px 0; }
.servicos label { display: flex; gap: 8px; align-items: center; font-size: 13.5px; color: var(--mudo); cursor: pointer; }
.servicos input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--lime); }

.timeline { display: flex; flex-direction: column; gap: 10px; }
.evento { border-left: 2px solid var(--borda-forte); padding-left: 12px; }
.evento .quando { font-family: var(--mono); font-size: 11px; color: var(--fraco); }
.evento .oque { font-size: 13.5px; }
.evento.bom { border-left-color: var(--ok); }
.evento.ruim { border-left-color: var(--perigo); }

.dossie-md {
  white-space: pre-wrap; font-size: 13.5px; color: var(--mudo);
  max-height: 380px; overflow-y: auto; line-height: 1.6;
}

.vazio { text-align: center; color: var(--fraco); padding: 60px 0; }

/* ---------- tela de login ---------- */
body.tela-login {
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.login-card {
  width: 100%; max-width: 380px;
  background: var(--card); border: 1px solid var(--borda); border-radius: var(--r-g);
  box-shadow: var(--shadow-card); padding: 32px 30px;
}
.login-marca { display: flex; gap: 12px; align-items: center; margin-bottom: 24px; }
.login-marca strong { font-family: var(--display); font-size: 17px; letter-spacing: -.02em; display: block; }
.login-card h1 { font-family: var(--display); font-size: 26px; letter-spacing: -.02em; margin-bottom: 4px; }
.login-sub { color: var(--fraco); font-size: 13.5px; margin-bottom: 22px; }
.login-card form { display: flex; flex-direction: column; gap: 14px; }
.login-card .btn-primario { margin-top: 6px; padding: 12px; font-size: 15px; }
.login-erro {
  color: var(--perigo); font-size: 13.5px; margin: 0;
  background: rgba(201,51,33,.08); border: 1px solid var(--perigo);
  border-radius: var(--r-s); padding: 9px 12px;
}
.sair { margin-top: 2px; }

/* radar */
.aviso-radar {
  background: rgba(245,177,46,.10); border: 1px solid var(--lime-dim); border-radius: var(--r-m);
  color: var(--texto); padding: 12px 16px; margin-bottom: 18px; font-size: 13.5px; line-height: 1.55;
}
.aviso-radar strong { color: var(--lime-txt); }
.radar-log {
  font-family: var(--mono); font-size: 12px; line-height: 1.6; color: var(--mudo);
  background: var(--card-2); border: 1px solid var(--borda); border-radius: var(--r-s);
  padding: 12px; max-height: 300px; overflow-y: auto; white-space: pre-wrap;
}

/* mensagens (biblioteca) */
.msg-card { background: var(--card); border: 1px solid var(--borda); border-radius: var(--r-m); padding: 16px; margin-bottom: 10px; }
.msg-card h4 { font-size: 14px; margin-bottom: 6px; color: var(--branco); }
.msg-card p { font-size: 13.5px; color: var(--mudo); white-space: pre-wrap; }
.msg-card .btn { margin-top: 10px; }

.aviso-bloqueio {
  background: rgba(240,80,60,.08); border: 1px solid var(--perigo); border-radius: var(--r-m);
  color: var(--perigo); padding: 12px 16px; margin-bottom: 14px; font-size: 13.5px;
}

@media (max-width: 860px) {
  body { grid-template-columns: 1fr; }
  .lateral { position: static; height: auto; flex-direction: row; align-items: center; flex-wrap: wrap; }
  .lateral-rodape { margin: 0; flex-direction: row; align-items: center; }
  .linha { grid-template-columns: 34px 1.4fr 1fr 90px; }
  .linha .col-oculta { display: none; }
}