/* ============ Dashboard HubSpot — design do Painel (minimalista corporativo) ============ */
:root {
  --obsidiana: #000000;   /* textos fortes                */
  --platina:   #E6E3E1;   /* trilhas / neutros            */
  --ouro:      #FCCB60;   /* destaques, barras, chips     */
  --branco:    #FFFFFF;   /* fundo                        */
  --cinza:     #9A9A9A;   /* labels de apoio              */
  --borda:     #EDEDED;   /* bordas dos cards             */
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* ---------- Aviso de carga inicial ("Carregando dados…") ---------- */
.tela-carregando {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(255, 255, 255, .88); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
}
.tela-carregando[hidden] { display: none; }
.tela-carregando-caixa {
  display: flex; align-items: center; gap: 14px;
  font-size: 16px; font-weight: 600; color: var(--obsidiana);
  background: var(--branco); border: 1px solid var(--borda); border-radius: 14px;
  padding: 18px 26px; box-shadow: 0 12px 40px rgba(0, 0, 0, .10);
}
.tela-spinner {
  width: 20px; height: 20px; border-radius: 50%;
  border: 3px solid var(--platina); border-top-color: var(--ouro);
  animation: girar .8s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

body {
  font-family: "Figtree", system-ui, -apple-system, Arial, sans-serif;
  background: var(--branco);
  color: var(--obsidiana);
  -webkit-font-smoothing: antialiased;
}

/* labels pequenas em maiúsculas usam IBM Plex Mono (como no Painel) */
.mono-label {
  font-family: "IBM Plex Mono", monospace;
  text-transform: uppercase;
  letter-spacing: .08em;
}

/* ---------- Estrutura: sidebar + conteúdo ---------- */
.shell { display: flex; min-height: 100vh; }
.sidebar {
  width: 88px; flex-shrink: 0; background: #1f1f1f;
  display: flex; flex-direction: column; align-items: center;
  padding: 26px 0; gap: 30px;
}
.sidebar-logo { width: 42px; height: 42px; object-fit: contain; }
.nav { display: flex; flex-direction: column; gap: 12px; }
.nav-btn {
  width: 46px; height: 46px; border: none; border-radius: 12px;
  background: transparent; color: #6f6f6f; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: .15s;
}
.nav-btn svg { fill: currentColor; }
.nav-btn:hover { background: #2b2b2b; color: #cfcfcf; }
.nav-btn.active { background: #2b2b2b; color: #FCCB60; }

.main { flex: 1; min-width: 0; }
/* mesma moldura do Painel: largura total da tela e os mesmos respiros */
.page {
  padding: 34px 48px 38px;
}

/* ---------- Cabeçalho ---------- */
.topbar {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 20px; flex-wrap: wrap; margin-bottom: 30px;
}
.topbar h1 { font-size: clamp(26px, 2.2vw, 38px); font-weight: 800; letter-spacing: -0.02em; color: var(--obsidiana); }
.subtitle { font-size: 14px; color: var(--cinza); margin-top: 4px; font-weight: 500; }

.controls { display: flex; gap: 10px; align-items: center; }
.select-pipe {
  padding: 9px 14px; border-radius: 9px;
  border: 1px solid #ececec; background: #fff;
  font-family: inherit; font-size: 14px; font-weight: 500; color: #1a1a1a;
  min-width: 210px; cursor: pointer;
}
.select-pipe:hover { border-color: #d8d8d8; }
.btn-icon {
  display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--borda);
  background: #fff; color: var(--obsidiana); cursor: pointer; transition: .15s;
}
.btn-icon:hover { background: #fffaf0; border-color: var(--ouro); }

/* ---------- Abas da área analítica ---------- */
.abas {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-bottom: 26px; border-bottom: 1px solid var(--borda);
}
.aba-btn {
  border: none; background: transparent; font: inherit;
  font-size: 14px; font-weight: 600; color: #6f6f6f;
  padding: 10px 18px 12px; cursor: pointer;
  border-bottom: 2.5px solid transparent; margin-bottom: -1px;
  transition: .12s;
}
.aba-btn:hover { color: var(--obsidiana); }
.aba-btn.ativo { color: var(--obsidiana); border-bottom-color: var(--ouro); }
.aba-conteudo[hidden] { display: none; }

/* filtros DENTRO da aba (qualificado × desqualificado + UTMs) */
.aba-filtros {
  display: flex; align-items: center;
  gap: 14px; flex-wrap: wrap; margin-bottom: 22px;
}
.filtros-utm { display: flex; gap: 10px; flex-wrap: wrap; margin-left: auto; }
.filtro-utm {
  border: 1.5px solid var(--borda); border-radius: 10px; background: var(--branco);
  font-family: inherit; font-size: 13px; font-weight: 600; color: var(--obsidiana);
  padding: 10px 32px 10px 14px; cursor: pointer;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239A9A9A' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
  max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: .15s;
}
.filtro-utm:hover, .filtro-utm:focus { border-color: var(--ouro); outline: none; }

/* Qualificado / Desqualificado: status e todos os filtros ficam sempre
   na mesma linha. Em telas estreitas, a linha rola horizontalmente. */
#aba-utms .aba-filtros {
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  width: 100%;
  padding-bottom: 5px;
  scrollbar-width: thin;
  scrollbar-color: var(--platina) transparent;
  overscroll-behavior-inline: contain;
}
#aba-utms .filtro-qual {
  flex: 0 0 200px;
  min-width: 200px;
  white-space: nowrap;
}
#aba-utms .filtros-utm {
  flex: 1 0 960px;
  min-width: 960px;
  flex-wrap: nowrap;
  margin-left: 0;
}
#aba-utms .filtro-utm {
  flex: 1 1 0;
  min-width: 150px;
  max-width: none;
}

/* ---------- Barra de filtros ---------- */
.filtros {
  display: flex; align-items: flex-end; gap: 28px; flex-wrap: wrap;
  padding-bottom: 26px; margin-bottom: 40px; border-bottom: 1px solid #f0f0f0;
}
.filtro { display: inline-flex; flex-direction: column; gap: 5px; cursor: pointer; }
.filtro-label {
  font-family: "IBM Plex Mono", monospace;
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--cinza); font-weight: 600;
}
.filtro-select, .filtro-date {
  border: none; border-bottom: 1.5px solid var(--borda); background: transparent;
  font-family: inherit; font-size: 14px; color: var(--obsidiana); cursor: pointer;
  padding: 4px 2px 6px; transition: border-color .15s; min-width: 150px;
}
.filtro-select {
  padding-right: 18px; max-width: 230px; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23a8a8a8' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 2px center;
}
.filtro-select:hover, .filtro-select:focus,
.filtro-date:hover, .filtro-date:focus { border-bottom-color: #FCCB60; outline: none; }
.filtro-date::placeholder { color: #bcbcbc; }

.btn-limpar {
  align-self: flex-end; margin-bottom: 3px;
  border: none; background: transparent; color: #a8a8a8;
  font-family: inherit; font-size: 13px; cursor: pointer; padding: 6px 8px; border-radius: 6px;
}
.btn-limpar:hover { color: #e74c3c; }

/* ---------- Avisos / carregando ---------- */
.warning {
  background: #fff8e6; border: 1px solid #ffe4a8; color: #7a5c00;
  padding: 12px 16px; border-radius: 10px; font-size: 13.5px; margin-bottom: 26px;
}
.loading { color: #b0b0b0; font-size: 15px; padding: 30px 0; }

/* ---------- KPIs (números grandes, em card como no Painel) ---------- */
.stats {
  display: flex; flex-wrap: wrap; margin-bottom: 36px;
  background: var(--branco); border: 1px solid var(--borda); border-radius: 16px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .04);
  padding: 28px 32px;
}
.stat {
  flex: 1 1 0; min-width: 130px;
  padding: 4px 30px 6px; border-left: 1.5px solid var(--borda);
}
.stat:first-child { padding-left: 0; border-left: none; }
.stat-label {
  font-family: "IBM Plex Mono", monospace;
  display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--cinza); font-weight: 600; margin-bottom: 13px;
}
.stat-value {
  display: block; font-size: 36px; font-weight: 800; color: var(--obsidiana);
  letter-spacing: -0.03em; line-height: 1;
}
.stat-sub {
  font-family: "IBM Plex Mono", monospace;
  display: inline-block; margin-top: 12px;
  background: var(--ouro); color: var(--obsidiana);
  font-size: 10.5px; font-weight: 600;
  padding: 3px 10px; border-radius: 20px; white-space: nowrap;
}
/* distribuições ao lado dos big numbers (qualificação e certificados/mês) */
.qualif-base {
  display: block; margin-top: 6px;
  font-size: 11px; color: #c6c6c6; font-weight: 500; line-height: 1.4;
}
.qualif-lista {
  margin-top: 10px; display: flex; flex-direction: column; gap: 6px;
  max-height: 140px; overflow-y: auto; padding-right: 4px;
}
.qualif-item { font-size: 13px; color: #4a4a4a; }
.qualif-item b { color: var(--obsidiana); font-weight: 700; }
.qualif-qtd { color: var(--cinza); font-size: 11.5px; }
.qualif-vazio { display: block; margin-top: 10px; font-size: 12px; color: var(--cinza); }

/* legenda discreta com a regra/filtro do número (igual à do Painel) */
.stat-nota {
  display: block; margin-top: 9px;
  font-size: clamp(9.5px, 0.62vw, 11.5px); color: #c6c6c6;
  font-weight: 500; line-height: 1.45;
}
/* linha de cima: KPIs à esquerda + card de motivos de perda à direita */
.linha-topo {
  display: flex; align-items: stretch; gap: 24px; flex-wrap: wrap;
  margin-bottom: 36px;
}
/* todos os blocos (números + qualificação + certificados) na MESMA linha,
   separados por divisórias verticais e centralizados na altura do card */
.linha-topo .stats {
  flex: 1.8 1 560px; margin-bottom: 0;
  align-items: center; align-content: center;
}
.linha-topo .stats .stat { padding: 4px 22px 6px; margin: 0; }
.linha-topo .stats .stat:first-child { padding-left: 0; }
.linha-topo #analitico { flex: 1 1 420px; margin-top: 0; min-width: 0; }

/* Grades de KPIs com divisórias sempre retas: as linhas são o VÃO entre as
   células (gap) sobre um fundo cinza — funcionam com qualquer conteúdo e em
   qualquer largura de tela.
   grade-2x2 (vista Desqualificado): 4 blocos em 2 colunas.
   grade-3x2 (vista Reunião Agendada): 5 blocos em 3 colunas. */
.linha-topo .stats.grade-2x2,
.linha-topo .stats.grade-3x2 {
  display: grid;
  gap: 1.5px;
  align-items: stretch; align-content: stretch;
  padding: 24px 10px;
  /* cinza só atrás da grade (vira as linhas); o resto do card segue branco */
  background: linear-gradient(var(--borda), var(--borda)) content-box, var(--branco);
}
.linha-topo .stats.grade-2x2 { grid-template-columns: repeat(2, 1fr); }
.linha-topo .stats.grade-3x2 { grid-template-columns: repeat(3, 1fr); }
.linha-topo .stats.grade-2x2 .stat,
.linha-topo .stats.grade-3x2 .stat {
  border: none; margin: 0; min-width: 0;
  background: var(--branco);
  padding: 14px 22px 16px;
  /* alinhado pelo TOPO: rótulo, número e chip começam na mesma altura em
     todos os blocos; flex-start impede o chip de esticar na largura toda */
  display: flex; flex-direction: column;
  justify-content: flex-start; align-items: flex-start;
}
.linha-topo .stats.grade-2x2 .stat:first-child,
.linha-topo .stats.grade-3x2 .stat:first-child { padding-left: 22px; }
.linha-topo .stats.grade-3x2 .stat:nth-child(5) { grid-column: span 2; }

/* telas médias: a grade de 3 colunas cai para 2 (a última célula ocupa a linha) */
@media (max-width: 1180px) {
  .linha-topo .stats.grade-3x2 { grid-template-columns: repeat(2, 1fr); }
}
/* telas estreitas: uma coluna, um bloco embaixo do outro */
@media (max-width: 640px) {
  .linha-topo .stats.grade-2x2,
  .linha-topo .stats.grade-3x2 { grid-template-columns: 1fr; padding: 16px 0; }
  .linha-topo .stats.grade-2x2 .stat,
  .linha-topo .stats.grade-3x2 .stat { padding: 14px 18px 16px; }
  .linha-topo .stats.grade-2x2 .stat:first-child,
  .linha-topo .stats.grade-3x2 .stat:first-child { padding-left: 18px; }
  .linha-topo .stats.grade-3x2 .stat:nth-child(5) { grid-column: auto; }
}

/* ---------- Origem dos leads (campos de UTM, linha inteira) ---------- */
.utms-card {
  background: var(--branco); border: 1px solid var(--borda); border-radius: 16px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .04);
  padding: 26px 30px 28px;
  margin-bottom: 36px;
}
.utms-head { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.utms-abas { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.utm-aba {
  border: 1px solid var(--borda); background: transparent;
  font: inherit; font-size: 12.5px; font-weight: 600; color: #6f6f6f;
  padding: 7px 14px; border-radius: 20px; cursor: pointer; transition: .12s;
}
.utm-aba:hover { border-color: #d8d8d8; color: var(--obsidiana); }
.utm-aba.ativo { background: var(--ouro); border-color: var(--ouro); color: var(--obsidiana); }
/* listas longas (ex.: página) rolam dentro do card em vez de esticar a página */
#utmsLista { max-width: none; max-height: 420px; overflow-y: auto; padding-right: 8px; }
/* na aba Página (LP), as linhas abrem a prévia da página num pop-up */
.lp-click { cursor: pointer; }
.lp-click:hover .funil-label { color: var(--obsidiana); text-decoration: underline; }

/* Motivos de perda: as linhas abrem o pop-up com as UTMs daquele motivo */
.motivo-click { cursor: pointer; border-radius: 8px; transition: background .12s; padding: 3px 8px; margin: 0 -8px; }
.motivo-click:hover { background: #fbf7ea; }
.motivo-click:hover .funil-label { color: var(--obsidiana); }
.motivo-click .funil-label::after { content: " ↗"; color: var(--ouro); font-weight: 700; }

/* pop-up das UTMs de um motivo de perda */
/* Pop-up largo (ate 1280px) e alto. O seletor combinado e' obrigatorio: a regra
   generica .modal-box (max-width 620px) vem DEPOIS no arquivo e, com a mesma
   forca, ganharia desta - foi por isso que o pop-up ficava preso em 620px. */
.modal-box.motivo-box { max-width: 1280px; max-height: 92vh; }
/* linha das abas: tudo numa linha só (sem quebra); abas à esquerda, faixa à direita */
/* abas + faixa de leads numa linha só. As abas se esticam para preencher todo o
   espaço até a faixa (sem sobrar branco no meio). */
.motivo-abas-wrap { padding: 14px 24px 0; display: flex; align-items: center; gap: 16px; flex-wrap: nowrap; }
.motivo-abas-wrap .utms-abas { margin-left: 0; flex: 1 1 auto; flex-wrap: nowrap; gap: 8px; min-width: 0; overflow: visible; }
.motivo-abas-wrap .utm-aba {
  flex: 1 1 0; min-width: 0; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  padding: 10px 16px; font-size: 13.5px;
}
#motivoLista { padding: 14px 24px 20px; gap: 8px; }
/* colunas: nome | barra | leads | desqualificados | taxa.
   O nome e' limitado a uma fracao da largura (nao a um valor fixo) para a barra
   NUNCA ficar sem espaco em janela estreita. */
#motivoLista .funil-row { grid-template-columns: minmax(150px, 32%) minmax(110px, 1fr) 56px 82px 56px; }
/* barra 100%, sem trilha cinza: [vermelho = desqualificados do motivo][amarelo = demais leads]
   lado a lado, separados por uma divisória fina. Mais alta que as barras comuns. */
#motivoLista .motivo-track { display: flex; align-items: stretch; gap: 2px; height: 12px; border-radius: 6px; background: transparent; }
#motivoLista .motivo-seg { height: 100%; transition: width .5s ease; }
#motivoLista .motivo-seg-perdido { background: #E5484D; flex: 0 0 auto; min-width: 3px; border-radius: 6px 0 0 6px; }
#motivoLista .motivo-seg-leads { background: var(--ouro); flex: 1 1 auto; border-radius: 0 6px 6px 0; }
/* só um segmento (100% desqualificados): arredonda os dois lados */
#motivoLista .motivo-seg-perdido:only-child { border-radius: 6px; }
/* números: desqualificados em vermelho (mesma cor da faixa), leads em preto */
#motivoLista .motivo-desq { color: #E5484D; }
#motivoLista .motivo-leads { color: var(--obsidiana); font-weight: 600; }
/* cabeçalho das colunas de números */
.motivo-cab span {
  font-family: "IBM Plex Mono", monospace; font-size: 10px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--cinza);
  text-align: right; white-space: nowrap;
}
.motivo-cab .motivo-cab-desq { color: #E5484D; }
#motivoLista .motivo-cab { margin-bottom: 2px; padding-bottom: 6px; border-bottom: 1px solid #f0f0f0; }
/* cabeçalhos clicáveis: ordenam a lista (▾ maior primeiro, ▴ menor primeiro) */
.motivo-cab .motivo-ord { cursor: pointer; user-select: none; transition: color .12s; }
.motivo-cab .motivo-ord:hover, .motivo-cab .motivo-ord.ativo { color: var(--obsidiana); }
.motivo-cab .motivo-ord.motivo-cab-desq:hover, .motivo-cab .motivo-ord.motivo-cab-desq.ativo { color: #c93a3f; }
.motivo-cab .motivo-cab-info { text-align: left; text-transform: none; letter-spacing: 0; font-family: inherit; font-size: 12px; font-weight: 500; }
/* faixa de leads e legenda na linha das abas */
/* faixa de leads (mesmo controle da aba Campanhas), encostada à direita */
.motivo-faixa { margin-left: auto; flex-shrink: 0; white-space: nowrap; }
/* legenda das cores fica no cabeçalho, entre o título e o botão de fechar */
.motivo-legenda {
  display: flex; gap: 14px; align-items: center; flex-shrink: 0;
  font-size: 12px; color: var(--cinza); margin-left: auto; padding-top: 4px; white-space: nowrap;
}
.motivo-legenda span::before {
  content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px;
  margin-right: 6px; vertical-align: -1px; background: var(--ouro);
}
.motivo-legenda .leg-perdido::before { background: #E5484D; }

/* pop-up da prévia da página (quase tela cheia, para ver a versão desktop) */
.modal-box.lp-box { max-width: 96vw; height: 94vh; max-height: 94vh; }   /* idem: precisa ganhar de .modal-box */
.lp-head-info { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.lp-url {
  font-size: 12.5px; color: #6f6f6f; text-decoration: underline;
  word-break: break-all;
}
.lp-url:hover { color: var(--obsidiana); }
.lp-frame-wrap { flex: 1; min-height: 0; background: #fafafa; }
.lp-frame { display: block; width: 100%; height: 100%; border: none; background: #fff; }
/* coluna do nome com largura FIXA: todas as barras começam alinhadas
   na mesma linha vertical e vão até o fim do card. O nome fica numa
   linha só (se passar da coluna, corta com "…" — o mouse mostra inteiro). */
#utmsLista .funil-row { grid-template-columns: 320px 1fr 46px 48px; }

/* números clicáveis (abrem o pop-up) */
.stat-click { cursor: pointer; transition: opacity .15s; }
.stat-click:hover { opacity: .55; }
.stat-click .stat-label::after {
  content: " ↗"; color: var(--ouro); font-weight: 700;
}

/* ---------- Pop-up (modal) ---------- */
.modal[hidden] { display: none; }
.modal {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.modal-overlay {
  position: absolute; inset: 0; background: rgba(20, 20, 20, .45);
  backdrop-filter: blur(2px);
}
.modal-box {
  position: relative; width: 100%; max-width: 620px; max-height: 82vh;
  background: #fff; border-radius: 16px; box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
  display: flex; flex-direction: column; overflow: hidden;
}
.modal-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px; padding: 22px 24px 16px; border-bottom: 1px solid #f0f0f0;
}
.modal-title { font-size: 18px; font-weight: 600; color: #111; }
.modal-sub { font-size: 12.5px; color: #a0a0a0; }
.modal-close {
  border: none; background: transparent; font-size: 26px; line-height: 1;
  color: #b0b0b0; cursor: pointer; padding: 0 4px;
}
.modal-close:hover { color: #1a1a1a; }
.modal-search { padding: 14px 24px; border-bottom: 1px solid #f0f0f0; }
.modal-search-input {
  width: 100%; box-sizing: border-box;
  border: 1px solid #ececec; border-radius: 10px; background: #fafafa;
  font-family: inherit; font-size: 13.5px; color: #1a1a1a; padding: 10px 13px;
  transition: .15s;
}
.modal-search-input:focus { outline: none; border-color: #FCCB60; background: #fff; }
.modal-search-input::placeholder { color: #b0b0b0; }

.modal-body { overflow-y: auto; padding: 6px 24px; }
.lista-item {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 14px;
  padding: 13px 12px; margin: 0 -12px;
  border-bottom: 1px solid #f4f4f4; align-items: baseline;
}
.lista-item:last-child { border-bottom: none; }
.lista-item[data-id] { cursor: pointer; border-radius: 8px; transition: background .12s; }
.lista-item[data-id]:hover { background: #fbf7ea; }
.lista-nome { font-size: 14px; font-weight: 500; color: #1a1a1a; }
.lista-data { font-size: 12px; color: #a8a8a8; text-align: right; white-space: nowrap; }
.lista-meta { font-size: 12.5px; color: #7a7a7a; }
.lista-valor { font-size: 12.5px; color: #7a7a7a; text-align: right; }
.lista-vazio { padding: 30px 0; color: #b0b0b0; font-size: 14px; text-align: center; }
.modal-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 14px 24px 20px; border-top: 1px solid #f0f0f0;
}
.modal-nav {
  border: 1px solid #ececec; background: #fff; color: #1a1a1a;
  font-family: inherit; font-size: 13px; cursor: pointer;
  padding: 8px 14px; border-radius: 20px; transition: .15s;
}
.modal-nav:hover:not(:disabled) { border-color: #FCCB60; }
.modal-nav:disabled { color: #cfcfcf; cursor: default; border-color: #f3f3f3; }
.modal-range { font-size: 12.5px; color: #a0a0a0; }

/* ---------- Motivos de perda (pop-up dos desqualificados) ---------- */
.motivos { display: flex; flex-direction: column; gap: 6px; padding: 14px 0 18px; }
.motivos .funil-row { grid-template-columns: minmax(150px, 240px) 1fr 40px 48px; }

/* ---------- Análise (motivos de perda, card como no Painel) ---------- */
#analitico {
  margin-top: 24px;
  background: var(--branco); border: 1px solid var(--borda); border-radius: 16px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .04);
  padding: 26px 30px 28px;
}
.ana-total { font-size: 13px; color: var(--cinza); font-weight: 500; }
#analitico[hidden], #anaMotivos[hidden], #origemCard[hidden] { display: none; }

/* Vista Desqualificado (sem o card de origem): a linha de cima ocupa a altura
   da tela. Os números ficam centralizados no card e as barras dos motivos se
   espalham para preencher o card de Motivos de perda. */
#content.sem-origem .linha-topo {
  min-height: max(440px, calc(100vh - 330px));
  margin-bottom: 0;
}
#content.sem-origem #analitico { display: flex; flex-direction: column; }
#content.sem-origem #anaMotivos { flex: 1; display: flex; flex-direction: column; min-height: 0; }
#content.sem-origem .ana-motivos { flex: 1; justify-content: space-evenly; gap: 10px; }
#content.sem-origem .linha-topo .stats.grade-2x2 .stat-value { font-size: 44px; }
.ana-motivos { max-width: none; }   /* as barras vão até o fim do card */
.ana-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }

/* a tabela rola DENTRO desta área: a barra horizontal fica sempre visível embaixo */
.tabela-wrap { overflow: auto; margin-bottom: 4px; }
.ana-tabela { max-height: calc(100vh - 400px); min-height: 220px; }
.tabela { border-collapse: separate; border-spacing: 0; font-size: 13px; }
.tabela th, .tabela td {
  padding: 9px 14px; text-align: left; border-bottom: 1px solid #f4f4f4;
  white-space: nowrap; max-width: 240px; overflow: hidden; text-overflow: ellipsis;
}
/* cabeçalho fixo no topo enquanto rola para baixo */
.tabela th {
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--cinza); font-weight: 600; background: #fff;
  position: sticky; top: 0; z-index: 2;
}
.tabela td { color: #1a1a1a; }
/* primeira coluna (nome) fixa durante o scroll lateral */
.tabela th:first-child, .tabela td:first-child {
  position: sticky; left: 0; background: #fff; font-weight: 600;
  box-shadow: 2px 0 0 #f4f4f4;
}
.tabela td:first-child { z-index: 1; }
.tabela th:first-child { z-index: 3; }

/* ---------- Qualificação de Lead: fundo clarinho na cor da etiqueta ---------- */
/* Fervendo = vermelho */
.lista-item[data-qual="Fervendo"], .tabela tr[data-qual="Fervendo"] td { background: #fdeceb; }
.lista-item[data-qual="Fervendo"]:hover { background: #fadcda; }
/* Quente = amarelo */
.lista-item[data-qual="Quente"], .tabela tr[data-qual="Quente"] td { background: #fdf4de; }
.lista-item[data-qual="Quente"]:hover { background: #fbecc9; }
/* Morno = verde */
.lista-item[data-qual="Morno"], .tabela tr[data-qual="Morno"] td { background: #e4f7f0; }
.lista-item[data-qual="Morno"]:hover { background: #d3f0e5; }
/* Frio = azul */
.lista-item[data-qual="Frio"], .tabela tr[data-qual="Frio"] td { background: #e3f2f7; }
.lista-item[data-qual="Frio"]:hover { background: #d2e9f1; }
/* Não classificado = roxo */
.lista-item[data-qual="Não classificado"], .tabela tr[data-qual="Não classificado"] td { background: #ededf9; }
.lista-item[data-qual="Não classificado"]:hover { background: #e0e0f4; }

/* ---------- Detalhe do lead (informações do HubSpot) ---------- */
.detalhe-voltar {
  border: none; background: transparent; color: #7a5c00; font-weight: 600;
  font-family: inherit; font-size: 13px; cursor: pointer; padding: 12px 0 10px;
}
.detalhe-voltar:hover { text-decoration: underline; }
.detalhe { display: flex; flex-direction: column; padding-bottom: 18px; }
.detalhe-row {
  display: grid; grid-template-columns: 210px 1fr; gap: 14px;
  padding: 11px 0; border-bottom: 1px solid #f4f4f4; align-items: baseline;
}
.detalhe-row:last-child { border-bottom: none; }
.detalhe-label {
  font-family: "IBM Plex Mono", monospace;
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--cinza); font-weight: 600;
}
.detalhe-valor { font-size: 14px; color: #1a1a1a; word-break: break-word; }

/* ---------- Bloco / funil (cards como no Painel) ---------- */
.bloco {
  display: flex; flex-direction: column;
  background: var(--branco); border: 1px solid var(--borda); border-radius: 16px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .04);
  padding: 26px 30px 28px;
}
.bloco-title {
  font-size: 16px; color: var(--obsidiana); font-weight: 800; letter-spacing: -0.01em;
  margin-bottom: 22px;
}
/* flex:1 + space-between => o funil menor espalha as linhas para preencher a mesma altura */
.funil { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 14px; }
.funil-row {
  display: grid; grid-template-columns: 150px 1fr 46px 46px;
  align-items: center; gap: 14px;
}
.funil-label {
  font-size: 13.5px; color: #4a4a4a;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.funil-track { height: 9px; background: var(--platina); border-radius: 6px; overflow: hidden; }
.funil-fill {
  height: 100%; background: var(--ouro); border-radius: 6px;
  transition: width .5s ease;
}
.funil-val { font-size: 13.5px; font-weight: 700; color: var(--obsidiana); text-align: right; }
.funil-pct { font-size: 11.5px; font-weight: 500; color: var(--cinza); text-align: right; }

/* ---------- Aba Campanhas ---------- */
/* cards de destaque (mesmo card dos KPIs); o "valor" é o NOME da campanha */
.camp-destaques { margin-bottom: 24px; }
.camp-destaques .stat-value.camp-nome {
  font-size: 19px; line-height: 1.3; letter-spacing: -0.01em;
  word-break: break-word; min-height: 50px;
}
.camp-destaques .stat-nota { margin-top: 10px; }
/* bolinha de cor da qualificação (Fervendo/Quente/Morno/Frio) */
.camp-dot {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  margin-right: 7px; vertical-align: middle; flex-shrink: 0;
}
/* toggle Por Campanha × Por Criativo (fica à esquerda; o filtro, à direita) */
.camp-dimensao { margin-left: 0; }
#campFiltro { margin-left: auto; }
.camp-faixa-leads {
  display: inline-flex; align-items: center; gap: 9px;
  border: 1.5px solid var(--borda); border-radius: 10px; background: var(--branco);
  padding: 7px 9px 7px 13px; color: var(--obsidiana);
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .035em;
  transition: .15s;
}
.camp-faixa-leads:focus-within { border-color: var(--ouro); }
.camp-faixa-leads label { color: var(--cinza); }
.camp-faixa-leads input {
  width: 62px; border: 1px solid var(--borda); border-radius: 7px; background: #fafafa;
  padding: 5px 6px; color: var(--obsidiana); font: inherit; font-size: 13px;
  text-align: center; outline: none;
}
.camp-faixa-leads input:focus { border-color: var(--ouro); background: var(--branco); }
.camp-faixa-leads input.invalido { border-color: #E5484D; }
/* tabela por campanha: rola dentro do card, colunas numéricas à direita */
.camp-tabela { max-height: 480px; overflow: auto; }
.camp-tabela .tabela { width: 100%; min-width: 1400px; }
.tabela th.num, .tabela td.num { text-align: right; font-variant-numeric: tabular-nums; }
.camp-tabela th:first-child, .camp-tabela td:first-child {
  position: sticky; left: 0; z-index: 1; background: var(--branco);
}
.camp-tabela thead th:first-child { z-index: 3; }
/* cabeçalho ordenável (clique ordena; clique de novo inverte) */
.camp-tabela th[data-ordena] { cursor: pointer; user-select: none; white-space: nowrap; }
.camp-tabela th[data-ordena]:hover { color: var(--obsidiana); }
.camp-th-conteudo {
  display: flex; align-items: center; justify-content: flex-start;
  width: 100%; min-width: max-content;
}
.camp-tabela th.num .camp-th-conteudo { justify-content: flex-end; }
.camp-info {
  display: inline-grid; place-items: center; width: 17px; height: 17px;
  margin-left: 6px; padding: 0; border: 1px solid #b8b8b8; border-radius: 50%;
  background: var(--branco); color: var(--cinza); font: 700 11px/1 Arial, sans-serif;
  text-transform: none; vertical-align: 1px; cursor: help;
}
.camp-info:hover, .camp-info:focus-visible {
  border-color: var(--ouro); color: var(--obsidiana); outline: none;
  box-shadow: 0 0 0 2px rgba(203, 158, 55, .16);
}
.camp-num-taxa {
  display: grid; grid-template-columns: minmax(24px, 1fr) 48px;
  align-items: baseline; column-gap: 8px; width: 100%;
}
.camp-qtd { text-align: right; }
.camp-desqualificados {
  border: 0; padding: 2px 0; background: none; color: #c5393e;
  font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.camp-desqualificados:hover { color: #8f2025; }
.camp-desqualificados:focus-visible { outline: 2px solid #c5393e; outline-offset: 3px; border-radius: 2px; }
.modal-box.camp-motivos-box { max-width: 900px; }
#campMotivosLista { padding: 18px 24px; }
#campMotivosLista .funil-row { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) 40px 48px; }
#campMotivosLista .funil-label { white-space: normal; overflow-wrap: anywhere; }
#campMotivosSub { overflow-wrap: anywhere; }
#campMotivosLista .funil-fill { background: #E5484D; }
.camp-pct {
  font-size: 11px; color: var(--cinza); font-weight: 600;
  margin-left: 0; text-align: right;
}
.camp-tabela tfoot td {
  position: sticky; bottom: 0; z-index: 2;
  background: #fbf8f0; border-top: 2px solid var(--ouro);
  border-bottom: 0; font-weight: 700;
  box-shadow: 0 -5px 12px rgba(0, 0, 0, .035);
}
.camp-tabela tfoot td:first-child {
  z-index: 4; background: #fbf8f0;
}
.camp-total td:first-child span {
  color: var(--cinza); font-size: 11px; font-weight: 600;
}
.camp-total .camp-pct { color: #71684f; }
.utms-card .stat-nota { margin-top: 14px; }

/* ---------- Seletor de período: calendário duplo (estilo Gerenciador de Anúncios) ---------- */
.seletor-periodo { position: relative; }
.periodo-btn {
  display: flex; align-items: center; gap: 10px;
  border: 1.5px solid var(--borda); border-radius: 10px; background: var(--branco);
  padding: 10px 16px; font-family: inherit; font-size: 14px; font-weight: 600;
  color: var(--obsidiana); cursor: pointer; transition: .15s;
}
.periodo-btn:hover, .seletor-periodo.aberto .periodo-btn { border-color: var(--ouro); }
.periodo-btn svg { flex-shrink: 0; color: var(--cinza); }

/* filtro Desqualificado (vermelho) × Qualificado (verde) × Reunião Agendada
   (dourado): cada clique avança para a próxima vista */
.filtro-qual { min-width: 172px; justify-content: center; }
.qual-cor { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.filtro-qual.desqualificado .qual-cor { background: #E5484D; }
.filtro-qual.desqualificado:hover { border-color: #E5484D; }
.filtro-qual.qualificado .qual-cor { background: #30A46C; }
.filtro-qual.qualificado:hover { border-color: #30A46C; }
.filtro-qual.agendada .qual-cor { background: var(--ouro); }
.filtro-qual.agendada:hover { border-color: var(--ouro); }

.picker {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 60;
  display: flex; background: var(--branco);
  border: 1px solid var(--borda); border-radius: 16px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, .14);
  overflow: hidden;
}
.picker[hidden] { display: none; }

/* coluna de atalhos (Hoje, Últimos 7 dias...) */
.picker-presets {
  display: flex; flex-direction: column; gap: 2px;
  padding: 14px 10px; border-right: 1px solid var(--borda); min-width: 160px;
}
.preset {
  border: none; background: transparent; text-align: left; font: inherit;
  font-size: 13px; font-weight: 500; color: #4a4a4a;
  padding: 8px 12px; border-radius: 8px; cursor: pointer; white-space: nowrap;
}
.preset:hover { background: #f6f6f6; }
.preset.ativo { background: #FDF1D3; color: var(--obsidiana); font-weight: 700; }

.picker-corpo { display: flex; flex-direction: column; }
.picker-cals { display: flex; gap: 28px; padding: 18px 22px 10px; }
.cal { width: 252px; }
.cal-topo {
  position: relative; height: 30px; margin-bottom: 10px;
  display: flex; align-items: center; justify-content: center; gap: 4px;
}
.cal-seta {
  position: absolute; top: 0; width: 30px; height: 30px;
  border: none; border-radius: 8px; background: transparent;
  color: #6f6f6f; font-size: 20px; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
}
.cal-seta:hover { background: #f4f4f4; color: var(--obsidiana); }
.cal-seta.esq { left: 0; }
.cal-seta.dir { right: 0; }
.cal-sel {
  border: none; background: transparent; font-family: inherit;
  font-size: 14px; font-weight: 700; color: var(--obsidiana); cursor: pointer;
  appearance: none; -webkit-appearance: none; padding: 2px 16px 2px 4px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239A9A9A' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 2px center;
}
.cal-sel:focus { outline: none; }

.cal-grade { display: grid; grid-template-columns: repeat(7, 34px); row-gap: 2px; justify-content: center; }
.cal-dow { font-size: 9.5px; color: var(--cinza); font-weight: 600; text-align: center; padding: 4px 0 8px; }
.dia {
  position: relative; height: 32px; border: none; background: transparent;
  font: inherit; font-size: 13px; font-weight: 500; color: var(--obsidiana);
  cursor: pointer; display: grid; place-items: center; border-radius: 8px;
}
.dia:hover { background: #f2f2f2; }
.dia.vazio { visibility: hidden; cursor: default; }
/* faixa do intervalo: miolo em ouro claro, pontas em ouro sólido */
.dia.meio, .dia.meio:hover { background: #FCEBC2; border-radius: 0; }
.dia.ponta, .dia.ponta:hover { background: var(--ouro); font-weight: 800; }
.dia.ponta.ini { border-radius: 8px 0 0 8px; }
.dia.ponta.fim { border-radius: 0 8px 8px 0; }
.dia.hoje::after {
  content: ""; position: absolute; bottom: 3px; left: 50%; margin-left: -2px;
  width: 4px; height: 4px; border-radius: 50%; background: currentColor;
}

.picker-rodape {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 22px 16px; border-top: 1px solid var(--borda);
}
.picker-resumo { margin-right: auto; font-size: 12.5px; color: #6f6f6f; white-space: nowrap; }
.btn-ghost {
  border: none; background: transparent; font: inherit; font-size: 13.5px;
  font-weight: 600; color: #6f6f6f; padding: 9px 14px; border-radius: 9px; cursor: pointer;
}
.btn-ghost:hover { background: #f4f4f4; color: var(--obsidiana); }
.btn-ouro {
  border: none; background: var(--ouro); color: var(--obsidiana); font: inherit;
  font-size: 13.5px; font-weight: 700; padding: 9px 18px; border-radius: 9px; cursor: pointer;
}
.btn-ouro:hover { filter: brightness(.97); }

/* ---------- Responsivo ---------- */
@media (max-width: 760px) {
  .sidebar { width: 60px; padding: 20px 0; }
  .sidebar-logo { width: 34px; height: 34px; }
  .nav-btn { width: 40px; height: 40px; }
  .page { padding: 32px 22px 48px; }
  .stats { padding: 20px 18px; }
  .bloco, #analitico { padding: 20px 18px 22px; }
  .stat { flex-basis: 45%; padding: 2px 18px; margin-bottom: 20px; }
  .stat:nth-child(odd) { padding-left: 0; border-left: none; }
  .stat-value { font-size: 28px; }
  .funil-row { grid-template-columns: 100px 1fr 40px 42px; gap: 10px; }
  #utmsLista .funil-row { grid-template-columns: 140px 1fr 40px 42px; }
  /* tela pequena: os blocos empilham, então não força altura */
  #content.sem-origem .linha-topo { min-height: 0; margin-bottom: 36px; }
  #content.sem-origem .linha-topo .stats.grade-2x2 .stat-value { font-size: 28px; }
  .detalhe-row { grid-template-columns: 1fr; gap: 3px; }
  /* calendário em tela pequena: sem atalhos e um mês por vez */
  .picker-presets { display: none; }
  .picker-cals .cal:last-child { display: none; }
  .picker-cals { padding: 14px 16px 8px; }
}