/* ============================================================
 * Painel - Identidade Visual Juridico Pro
 * Consome tokens de /jp-theme.css (servido pelo Express a
 * partir de ../../juridico-pro.theme.css na pasta pai).
 * Nao hardcoda valores - tudo via var(--jp-*).
 * ============================================================ */

body {
  background: var(--jp-color-bg-base);
  color: var(--jp-color-text-primary);
  font-family: var(--jp-font-family);
  font-size: var(--jp-font-size-body-sm);
  line-height: var(--jp-line-height-body-sm);
  margin: 0;
}

header {
  background: var(--jp-color-bg-elevated);
  border-bottom: 1px solid var(--jp-color-border-subtle);
  padding: var(--jp-space-4) var(--jp-space-8);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--jp-space-4);
}

header h1 {
  margin: 0;
  font-size: var(--jp-font-size-h3);
  line-height: var(--jp-line-height-h3);
  font-weight: var(--jp-font-weight-bold);
  letter-spacing: -0.01em;
  color: var(--jp-color-gold-primary);
  cursor: pointer;
  user-select: none;
  transition: opacity var(--jp-duration-fast) var(--jp-easing-standard);
}
header h1:hover { opacity: 0.8; }

header .header-busca {
  display: flex;
  gap: var(--jp-space-2);
  align-items: center;
  flex: 1;
  justify-content: center;
  max-width: 480px;
}
header .header-busca input {
  width: 100%;
  background: var(--jp-color-bg-panel);
  color: var(--jp-color-text-primary);
  border: 1px solid var(--jp-color-border-default);
  padding: var(--jp-space-3) var(--jp-space-4);
  font-family: inherit;
  font-size: var(--jp-font-size-body-sm);
  border-radius: var(--jp-radius-md);
  transition: border-color var(--jp-duration-base) var(--jp-easing-standard);
}
header .header-busca input:focus {
  outline: none;
  border-color: var(--jp-color-gold-primary);
  box-shadow: var(--jp-shadow-gold-focus);
}

header .meta {
  font-size: var(--jp-font-size-caption);
  color: var(--jp-color-text-muted);
  display: flex;
  gap: var(--jp-space-3);
  align-items: center;
}

header #conta-selector {
  background: var(--jp-color-bg-panel);
  color: var(--jp-color-gold-primary);
  border: 1px solid var(--jp-color-gold-primary);
  padding: var(--jp-space-1) var(--jp-space-2);
  font-family: var(--jp-font-family);
  font-size: var(--jp-font-size-caption);
  font-weight: var(--jp-font-weight-semibold);
  border-radius: var(--jp-radius-sm);
  cursor: pointer;
}
header #conta-selector:focus { outline: none; box-shadow: var(--jp-shadow-gold-focus); }

main {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--jp-space-6) var(--jp-space-8) var(--jp-space-16);
}

h2 {
  margin: 0 0 var(--jp-space-3);
  font-size: var(--jp-font-size-label);
  line-height: var(--jp-line-height-label);
  font-weight: var(--jp-font-weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--jp-color-text-muted);
}

button {
  background: transparent;
  color: var(--jp-color-text-secondary);
  border: 1px solid var(--jp-color-border-default);
  padding: var(--jp-space-2) var(--jp-space-3);
  font-family: var(--jp-font-family);
  font-size: var(--jp-font-size-caption);
  font-weight: var(--jp-font-weight-medium);
  cursor: pointer;
  border-radius: var(--jp-radius-sm);
  transition: all var(--jp-duration-base) var(--jp-easing-standard);
}
button:hover {
  border-color: var(--jp-color-gold-primary);
  color: var(--jp-color-gold-primary);
}
button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

input[type="number"], input[type="text"], input[type="search"] {
  background: var(--jp-color-bg-panel);
  color: var(--jp-color-text-primary);
  border: 1px solid var(--jp-color-border-default);
  padding: var(--jp-space-2) var(--jp-space-3);
  font-family: inherit;
  font-size: var(--jp-font-size-body-sm);
  border-radius: var(--jp-radius-md);
  width: 100px;
  transition: border-color var(--jp-duration-base) var(--jp-easing-standard);
}
input[type="number"]:focus, input[type="text"]:focus, input[type="search"]:focus {
  outline: none;
  border-color: var(--jp-color-gold-primary);
  box-shadow: var(--jp-shadow-gold-focus);
}

/* ---------- KPIs ---------- */

.kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--jp-space-3);
  margin-bottom: var(--jp-space-8);
}

.kpi {
  background: var(--jp-color-bg-elevated);
  border: 1px solid var(--jp-color-border-subtle);
  padding: var(--jp-space-4);
  border-radius: var(--jp-radius-lg);
  transition: border-color var(--jp-duration-base) var(--jp-easing-standard);
}
.kpi:hover { border-color: var(--jp-color-border-default); }

.kpi-label {
  font-size: var(--jp-font-size-caption);
  color: var(--jp-color-text-muted);
  letter-spacing: 0.04em;
  font-weight: var(--jp-font-weight-semibold);
  text-transform: uppercase;
}

.kpi-valor {
  font-size: var(--jp-font-size-h1);
  line-height: var(--jp-line-height-h1);
  font-weight: var(--jp-font-weight-bold);
  margin: var(--jp-space-2) 0 var(--jp-space-1);
  color: var(--jp-color-gold-primary);
  letter-spacing: -0.01em;
}

/* Badge de delta temporal (vs janela anterior). Acompanha o valor inline.
   Cor varia conforme direcao + intensidade da variacao. Cores tiradas do
   tema Juridico Pro (success / gold-secondary / error / text-muted). */
.delta {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  vertical-align: middle;
  margin-left: var(--jp-space-2);
  white-space: nowrap;
}

/* Trecho secundario do kpi-sub — usado pra detalhar terminologia entre
   parenteses sem competir visualmente com a descricao principal.
   Ex.: "contratos ÷ propostas (win rate)" — so "(win rate)" fica menor. */
.kpi-sub-detalhe {
  font-size: 9px;
  opacity: 0.7;
}
.delta-cinza { color: var(--jp-color-text-muted); }
.delta-amarelo { color: var(--jp-color-gold-secondary); }
.delta-vermelho { color: var(--jp-color-error); }
.delta-verde-leve { color: var(--jp-color-success); opacity: 0.85; }
.delta-verde { color: var(--jp-color-success); }

.kpi-sub {
  font-size: var(--jp-font-size-caption);
  color: var(--jp-color-text-muted);
}

/* ---------- Blocos ---------- */

.bloco {
  background: var(--jp-color-bg-elevated);
  border: 1px solid var(--jp-color-border-subtle);
  border-radius: var(--jp-radius-lg);
  padding: var(--jp-space-6);
  margin-bottom: var(--jp-space-4);
}

.bloco-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--jp-space-3);
}
.bloco-header h2 { margin: 0; }

.bloco[data-colapso-id] h2 {
  cursor: pointer;
  user-select: none;
}
.toggle-bloco {
  background: transparent;
  border: 0;
  color: var(--jp-color-text-muted);
  font-size: var(--jp-font-size-caption);
  padding: 0 var(--jp-space-2) 0 0;
  cursor: pointer;
}
.toggle-bloco:hover { color: var(--jp-color-gold-primary); }
.bloco.colapsado > *:not(.bloco-header):not(h2) { display: none !important; }
.bloco.colapsado .bloco-header > *:not(h2) { display: none !important; }

/* ---------- Tabela ---------- */

.tabela {
  width: 100%;
  border-collapse: collapse;
}
.tabela th, .tabela td {
  padding: var(--jp-space-2) var(--jp-space-3);
  text-align: left;
  border-bottom: 1px solid var(--jp-color-border-subtle);
  font-size: var(--jp-font-size-body-sm);
}
.tabela th {
  font-size: var(--jp-font-size-caption);
  color: var(--jp-color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: var(--jp-font-weight-semibold);
}
.tabela tr:last-child td { border-bottom: 0; }
.tabela .nome { color: var(--jp-color-text-primary); font-weight: var(--jp-font-weight-medium); }
.tabela .secundario { color: var(--jp-color-text-muted); }
.tabela .horas { color: var(--jp-color-gold-secondary); font-weight: var(--jp-font-weight-semibold); }

/* ---------- Linkavel + acoes ---------- */

.btn-fechar-busca {
  width: 28px;
  height: 28px;
  padding: 0;
  font-size: 14px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--jp-color-text-muted);
  border-color: var(--jp-color-border-default);
}
.btn-fechar-busca:hover {
  color: var(--jp-color-error);
  border-color: var(--jp-color-error);
}

.linkavel {
  cursor: pointer;
  border-bottom: 1px dashed transparent;
  transition: all var(--jp-duration-fast) var(--jp-easing-standard);
}
.linkavel:hover {
  color: var(--jp-color-gold-primary);
  border-bottom-color: var(--jp-color-gold-subtle);
}

.acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--jp-space-2);
}

.resultado-acao {
  margin-top: var(--jp-space-3);
  font-size: var(--jp-font-size-caption);
  color: var(--jp-color-text-muted);
  white-space: pre-wrap;
  max-height: 200px;
  overflow-y: auto;
}
.resultado-acao.ok { color: var(--jp-color-gold-primary); }
.resultado-acao.erro { color: var(--jp-color-error); }

/* ---------- Forms ---------- */

#form-config {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--jp-space-3);
}
#form-config label {
  display: flex;
  flex-direction: column;
  gap: var(--jp-space-1);
  font-size: var(--jp-font-size-caption);
  color: var(--jp-color-text-muted);
}
#form-config .ajuda {
  color: var(--jp-color-text-muted);
  font-size: 10px;
}
#cfg-feedback.ok { color: var(--jp-color-gold-primary); margin-left: var(--jp-space-2); }
#cfg-feedback.erro { color: var(--jp-color-error); margin-left: var(--jp-space-2); }

/* ---------- Logs tabs (mantido) ---------- */

.logs-tabs {
  display: flex;
  gap: var(--jp-space-1);
  margin-bottom: var(--jp-space-2);
  border-bottom: 1px solid var(--jp-color-border-subtle);
}
.logs-tabs button {
  border-radius: var(--jp-radius-sm) var(--jp-radius-sm) 0 0;
  border-bottom: 0;
}
.logs-tabs button.ativo {
  background: var(--jp-color-gold-subtle);
  color: var(--jp-color-gold-primary);
  border-color: var(--jp-color-gold-primary);
}

#logs-conteudo {
  background: var(--jp-color-bg-panel);
  border: 1px solid var(--jp-color-border-subtle);
  border-radius: var(--jp-radius-md);
  padding: var(--jp-space-3);
  font-size: var(--jp-font-size-caption);
  margin: 0;
  white-space: pre-wrap;
  max-height: 320px;
  overflow-y: auto;
  color: var(--jp-color-text-muted);
  font-family: ui-monospace, monospace;
}

/* ---------- Badges ---------- */

.badge {
  display: inline-block;
  padding: 2px var(--jp-space-2);
  border-radius: var(--jp-radius-sm);
  font-size: 10px;
  letter-spacing: 0.04em;
  background: var(--jp-color-border-default);
  color: var(--jp-color-text-muted);
  font-weight: var(--jp-font-weight-medium);
}
.badge.ok { background: var(--jp-color-gold-subtle); color: var(--jp-color-gold-primary); }
.badge.bloq, .badge.falha {
  background: rgba(168, 66, 63, 0.15);
  color: var(--jp-color-error);
}

/* ---------- Timeline ---------- */

.timeline-item {
  display: grid;
  grid-template-columns: 90px 90px 1fr 80px;
  gap: var(--jp-space-3);
  padding: var(--jp-space-2) var(--jp-space-3);
  border-bottom: 1px solid var(--jp-color-border-subtle);
  font-size: var(--jp-font-size-body-sm);
  align-items: center;
}
.timeline-item:last-child { border-bottom: 0; }
.timeline-item .ts { color: var(--jp-color-text-muted); font-size: var(--jp-font-size-caption); }
.timeline-item .fluxo { color: var(--jp-color-text-primary); font-weight: var(--jp-font-weight-semibold); }
.timeline-item .resumo { color: var(--jp-color-text-muted); }
.timeline-item.status-ok .indicador { color: var(--jp-color-gold-primary); }
.timeline-item.status-falha .indicador { color: var(--jp-color-error); }
.timeline-vazio {
  padding: var(--jp-space-6);
  text-align: center;
  color: var(--jp-color-text-muted);
  font-size: var(--jp-font-size-caption);
}

/* ---------- Agentes ---------- */

.agentes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--jp-space-3);
}
.agente-card {
  background: var(--jp-color-bg-panel);
  border: 1px solid var(--jp-color-border-subtle);
  border-radius: var(--jp-radius-md);
  padding: var(--jp-space-3);
}
.agente-card.inativo { opacity: 0.5; }
.agente-card.humano { border-color: var(--jp-color-gold-subtle); }
.agente-nome {
  font-size: var(--jp-font-size-body-sm);
  font-weight: var(--jp-font-weight-semibold);
  color: var(--jp-color-text-primary);
  margin-bottom: 2px;
}
.agente-role {
  font-size: 10px;
  color: var(--jp-color-text-muted);
  margin-bottom: var(--jp-space-3);
}
.agente-metrica {
  display: flex;
  justify-content: space-between;
  font-size: var(--jp-font-size-caption);
  margin-top: var(--jp-space-1);
}
.agente-metrica .valor { color: var(--jp-color-gold-primary); font-weight: var(--jp-font-weight-semibold); }
.agente-metrica .label { color: var(--jp-color-text-muted); }

/* ---------- Kanban ---------- */

.kanban {
  display: flex;
  gap: var(--jp-space-2);
  overflow-x: auto;
  padding-bottom: var(--jp-space-2);
}
.kanban-coluna {
  flex: 0 0 220px;
  background: var(--jp-color-bg-panel);
  border: 1px solid var(--jp-color-border-subtle);
  border-radius: var(--jp-radius-md);
  padding: var(--jp-space-3);
  min-height: 200px;
  max-height: 460px;
  overflow-y: auto;
}
.kanban-coluna-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--jp-space-2);
  padding-bottom: var(--jp-space-2);
  border-bottom: 1px solid var(--jp-color-border-subtle);
}
.kanban-coluna-nome {
  font-size: var(--jp-font-size-caption);
  font-weight: var(--jp-font-weight-semibold);
  color: var(--jp-color-text-primary);
}
.kanban-coluna-count {
  font-size: 10px;
  background: var(--jp-color-border-default);
  padding: 1px var(--jp-space-2);
  border-radius: var(--jp-radius-full);
  color: var(--jp-color-text-muted);
}
.kanban-card {
  background: var(--jp-color-bg-elevated);
  border: 1px solid var(--jp-color-border-subtle);
  border-left: 3px solid;
  border-radius: var(--jp-radius-sm);
  padding: var(--jp-space-2) var(--jp-space-3);
  margin-bottom: var(--jp-space-2);
  font-size: var(--jp-font-size-caption);
  transition: all var(--jp-duration-fast) var(--jp-easing-standard);
}
.kanban-card.linkavel:hover {
  background: var(--jp-color-bg-panel);
  border-color: var(--jp-color-gold-primary);
}
.kanban-card.sem-link { opacity: 0.55; }
.kanban-card-titulo {
  color: var(--jp-color-text-primary);
  margin-bottom: var(--jp-space-1);
  font-weight: var(--jp-font-weight-medium);
}
.kanban-card-meta { color: var(--jp-color-text-muted); font-size: 10px; }
.kanban-vazio {
  text-align: center;
  font-size: 10px;
  color: var(--jp-color-text-muted);
  padding: var(--jp-space-5) 0;
}

/* ---------- Funil: controles e toggle de visao ---------- */

.funil-controles {
  display: flex;
  gap: var(--jp-space-2);
  align-items: center;
}

.seg-toggle {
  display: inline-flex;
  border: 1px solid var(--jp-color-border-default);
  border-radius: var(--jp-radius-sm);
  overflow: hidden;
}
.seg-toggle button {
  border: 0;
  border-right: 1px solid var(--jp-color-border-default);
  border-radius: 0;
  background: transparent;
  color: var(--jp-color-text-muted);
  padding: var(--jp-space-1) var(--jp-space-3);
  font-size: var(--jp-font-size-caption);
  cursor: pointer;
  transition: all var(--jp-duration-fast) var(--jp-easing-standard);
}
.seg-toggle button:last-child { border-right: 0; }
.seg-toggle button:hover {
  color: var(--jp-color-gold-primary);
  background: var(--jp-color-gold-subtle);
}
.seg-toggle button.ativo {
  background: var(--jp-color-gold-subtle);
  color: var(--jp-color-gold-primary);
  font-weight: var(--jp-font-weight-semibold);
}

/* ---------- Funil: visao Metricas ---------- */

.funil-metricas-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--jp-space-3);
  gap: var(--jp-space-2);
}

#btn-funil-config {
  width: 32px;
  height: 28px;
  padding: 0;
  font-size: 14px;
  line-height: 1;
}

#funil-config {
  background: var(--jp-color-bg-panel);
  border: 1px solid var(--jp-color-border-subtle);
  border-radius: var(--jp-radius-md);
  padding: var(--jp-space-3);
  margin-bottom: var(--jp-space-3);
}
.funil-config-hint {
  font-size: var(--jp-font-size-caption);
  color: var(--jp-color-text-muted);
  margin-bottom: var(--jp-space-3);
}
.funil-config-item {
  display: grid;
  grid-template-columns: 1.5fr 1.5fr auto;
  gap: var(--jp-space-3);
  padding: var(--jp-space-1) 0;
  align-items: center;
}
.funil-config-direta {
  font-size: var(--jp-font-size-caption);
  color: var(--jp-color-text-muted);
}
.funil-config-item label {
  display: flex;
  align-items: center;
  gap: var(--jp-space-2);
  font-size: var(--jp-font-size-body-sm);
  color: var(--jp-color-text-primary);
  cursor: pointer;
}
.funil-config-acoes {
  display: flex;
  gap: var(--jp-space-2);
  margin-top: var(--jp-space-3);
}

.metrica-etapa {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: var(--jp-space-3);
  padding: var(--jp-space-3) 0;
  border-bottom: 1px solid var(--jp-color-border-subtle);
  align-items: center;
}
.metrica-etapa:last-child { border-bottom: 0; }
.metrica-etapa-nome {
  color: var(--jp-color-text-primary);
  font-weight: var(--jp-font-weight-medium);
  font-size: var(--jp-font-size-body-sm);
}
.metrica-etapa-pct {
  color: var(--jp-color-text-muted);
  font-size: var(--jp-font-size-caption);
  min-width: 56px;
  text-align: right;
}
.metrica-etapa-count {
  color: var(--jp-color-gold-primary);
  font-weight: var(--jp-font-weight-bold);
  font-size: var(--jp-font-size-body);
  min-width: 40px;
  text-align: right;
}
.metrica-barra {
  grid-column: 1 / -1;
  height: 6px;
  background: var(--jp-color-bg-panel);
  border-radius: var(--jp-radius-sm);
  overflow: hidden;
  margin-top: var(--jp-space-1);
}
.metrica-barra-fill {
  height: 100%;
  background: var(--jp-color-gold-primary);
  border-radius: var(--jp-radius-sm);
  transition: width var(--jp-duration-base) var(--jp-easing-standard);
}
.metrica-etapa.fechado .metrica-barra-fill { background: var(--jp-color-success); }
.metrica-etapa.fechado .metrica-etapa-count { color: var(--jp-color-success); }
.metrica-etapa.perdido .metrica-barra-fill { background: var(--jp-color-error); }
.metrica-etapa.perdido .metrica-etapa-count { color: var(--jp-color-error); }
.metrica-etapa.separador { border-top: 1px dashed var(--jp-color-border-default); padding-top: var(--jp-space-4); }

.metrica-rodape {
  margin-top: var(--jp-space-4);
  padding: var(--jp-space-2) var(--jp-space-3);
  background: var(--jp-color-bg-panel);
  border-left: 2px solid var(--jp-color-gold-primary);
  border-radius: var(--jp-radius-sm);
  font-size: 10px;
  font-style: italic;
  color: var(--jp-color-text-muted);
  line-height: 1.5;
}
.metrica-rodape strong {
  color: var(--jp-color-gold-primary);
  font-weight: var(--jp-font-weight-semibold);
  font-style: normal;
}

/* ---------- Botoes pequenos ---------- */

.acoes-linha {
  display: inline-flex;
  gap: var(--jp-space-1);
  align-items: center;
}

.btn-marcar-feita, .btn-reativar, .btn-urgente {
  background: var(--jp-color-bg-panel);
  color: var(--jp-color-text-muted);
  border: 1px solid var(--jp-color-border-default);
  width: 28px;
  height: 24px;
  padding: 0;
  font-size: 12px;
  line-height: 1;
  border-radius: var(--jp-radius-sm);
  cursor: pointer;
  font-family: var(--jp-font-family);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn-reativar {
  width: auto;
  padding: 0 var(--jp-space-2);
  font-size: 10px;
}
.btn-marcar-feita:hover, .btn-reativar:hover, .btn-urgente:hover {
  border-color: var(--jp-color-gold-primary);
  color: var(--jp-color-gold-primary);
}
.btn-urgente.ativo {
  background: var(--jp-color-error);
  border-color: var(--jp-color-error);
  color: var(--jp-color-text-on-gold);
}
.btn-urgente.ativo:hover {
  background: transparent;
  color: var(--jp-color-error);
}

/* Linha de pendência marcada como urgente */
.tabela tr.urgente {
  background: rgba(168, 66, 63, 0.08);
}
.tabela tr.urgente td:first-child {
  border-left: 3px solid var(--jp-color-error);
}
.badge-urgente {
  display: inline-block;
  font-size: 11px;
  margin-right: 4px;
  vertical-align: middle;
}

/* ---------- Blacklist grupos ---------- */

label.grupo-checkbox {
  display: flex;
  align-items: center;
  gap: var(--jp-space-2);
  padding: var(--jp-space-2) var(--jp-space-2);
  border-bottom: 1px solid var(--jp-color-border-subtle);
  cursor: pointer;
  font-size: var(--jp-font-size-body-sm);
}
label.grupo-checkbox:hover { background: var(--jp-color-bg-panel); }
label.grupo-checkbox:last-child { border-bottom: 0; }
.grupo-nome { flex: 1; }
.grupo-status { font-size: 10px; }

/* ---------- Busca ---------- */

.busca-resultado-item {
  padding: var(--jp-space-3) var(--jp-space-3);
  border-bottom: 1px solid var(--jp-color-border-subtle);
  font-size: var(--jp-font-size-body-sm);
}
.busca-resultado-item:last-child { border-bottom: 0; }
.busca-resultado-meta {
  font-size: 10px;
  color: var(--jp-color-text-muted);
  margin-bottom: var(--jp-space-1);
  display: flex;
  gap: var(--jp-space-3);
}
.busca-resultado-meta .direction-inbound { color: var(--jp-color-gold-secondary); }
.busca-resultado-meta .direction-outbound { color: var(--jp-color-gold-primary); }
.busca-resultado-conteudo {
  color: var(--jp-color-text-primary);
  white-space: pre-wrap;
  word-break: break-word;
}
mark {
  background: var(--jp-color-gold-subtle);
  color: var(--jp-color-gold-primary);
  padding: 0 2px;
  border-radius: var(--jp-radius-sm);
}

/* ---------- Modal ---------- */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--jp-color-black-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: var(--jp-space-5);
}
.modal-conteudo {
  background: var(--jp-color-bg-elevated);
  border: 1px solid var(--jp-color-border-default);
  border-radius: var(--jp-radius-lg);
  width: 100%;
  max-width: 720px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: var(--jp-shadow-lg);
}
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: var(--jp-space-4) var(--jp-space-4);
  border-bottom: 1px solid var(--jp-color-border-subtle);
  gap: var(--jp-space-3);
}
.modal-titulo {
  font-weight: var(--jp-font-weight-semibold);
  color: var(--jp-color-text-primary);
  font-size: var(--jp-font-size-body-sm);
}
.modal-meta {
  font-size: 10px;
  color: var(--jp-color-text-muted);
  margin-top: var(--jp-space-1);
}
#modal-conversa-fechar {
  background: transparent;
  border: 0;
  color: var(--jp-color-text-muted);
  font-size: var(--jp-font-size-h3);
  padding: 0 var(--jp-space-2);
  cursor: pointer;
  line-height: 1;
}
#modal-conversa-fechar:hover { color: var(--jp-color-gold-primary); }
.modal-mensagens {
  overflow-y: auto;
  padding: var(--jp-space-3) var(--jp-space-4);
  flex: 1;
  background: var(--jp-color-bg-base);
}
.modal-msg {
  margin-bottom: var(--jp-space-2);
  padding: var(--jp-space-2) var(--jp-space-3);
  border-radius: var(--jp-radius-md);
  font-size: var(--jp-font-size-body-sm);
  max-width: 78%;
  border-left: 2px solid transparent;
}
/* Cliente (inbound): bolha alinhada a esquerda, fundo neutro, sem dourado.
   Distancia visual maxima dos outbounds (que sao do escritorio). */
.modal-msg.cliente {
  background: var(--jp-color-bg-elevated);
  border-left-color: var(--jp-color-border-strong);
  margin-right: auto;
}
/* IA: bolha a direita, azul fosco (jp-color-info) — sinaliza "automacao".
   Categoria assumida quando outbound nao tem sender_id mas a conversa tem
   ai_agent_id configurado. */
.modal-msg.ia {
  background: rgba(90, 122, 140, 0.18);
  border-left-color: var(--jp-color-info);
  margin-left: auto;
}
/* Humano: bolha a direita, dourada saturada — operador identificado por
   sender_id. Categoria de maior confianca tecnica. */
.modal-msg.humano {
  background: rgba(184, 151, 42, 0.22);
  border-left-color: var(--jp-color-gold-primary);
  margin-left: auto;
}
/* Atendimento: outbound sem sender_id E sem ai_agent_id na conversa.
   Nao distinguimos se eh IA ou humano (limitacao do MCP). Cor dourada
   sutil pra agrupar visualmente com o lado "escritorio" mas com menos
   peso que humano confirmado. */
.modal-msg.atendimento {
  background: rgba(201, 168, 76, 0.10);
  border-left-color: var(--jp-color-gold-secondary);
  margin-left: auto;
}
.modal-msg.system {
  background: transparent;
  border-left-color: var(--jp-color-text-muted);
  color: var(--jp-color-text-muted);
  font-style: italic;
  font-size: var(--jp-font-size-caption);
  text-align: center;
  max-width: 100%;
}
.modal-msg-meta {
  font-size: 10px;
  color: var(--jp-color-text-muted);
  margin-bottom: 3px;
  display: flex;
  gap: var(--jp-space-2);
}
.modal-msg-corpo {
  color: var(--jp-color-text-primary);
  white-space: pre-wrap;
  word-break: break-word;
}
.modal-msg-media { color: var(--jp-color-text-muted); font-style: italic; }
.modal-footer {
  padding: var(--jp-space-3) var(--jp-space-4);
  border-top: 1px solid var(--jp-color-border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--jp-space-3);
}
.modal-tl {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--jp-radius-full);
  font-size: 12px;
  font-weight: 500;
  border: 1px solid var(--jp-color-border-subtle);
  background: var(--jp-color-bg-panel);
  color: var(--jp-color-text-secondary);
}
.modal-tl strong { font-weight: 700; color: var(--jp-color-text-primary); }
.modal-tl.modal-tl-bom { border-color: rgba(74,124,89,0.55); color: #7AB088; }
.modal-tl.modal-tl-medio { border-color: rgba(201,168,76,0.55); color: var(--jp-color-gold-secondary); }
.modal-tl.modal-tl-ruim { border-color: rgba(168,66,63,0.6); color: #D87A77; }
.modal-tl.modal-tl-pendente { border-color: rgba(168,66,63,0.6); color: #D87A77; background: rgba(168,66,63,0.08); }

/* ---------- Selo de versao teste ---------- */

.selo-teste {
  position: fixed;
  bottom: var(--jp-space-3);
  right: var(--jp-space-3);
  background: var(--jp-color-gold-primary);
  color: var(--jp-color-text-on-gold);
  padding: var(--jp-space-1) var(--jp-space-3);
  border-radius: var(--jp-radius-full);
  font-size: 10px;
  font-weight: var(--jp-font-weight-semibold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  box-shadow: var(--jp-shadow-gold-glow);
  z-index: 999;
}

/* Overlay de atualizacao: cobre a tela enquanto recarregarTudo aguarda
   todos os fetches terminarem. So fecha quando cada bloco confirma seu
   re-render. */
#overlay-atualizando {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}
.overlay-conteudo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--jp-space-4);
}
.overlay-spinner {
  width: 44px;
  height: 44px;
  border: 3px solid var(--jp-color-border-default);
  border-top-color: var(--jp-color-gold-primary);
  border-radius: 50%;
  animation: jp-spin 0.85s linear infinite;
}
@keyframes jp-spin {
  to { transform: rotate(360deg); }
}
.overlay-texto {
  color: var(--jp-color-gold-primary);
  font-family: var(--jp-font-family);
  font-weight: var(--jp-font-weight-semibold);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-size: 13px;
}
.overlay-dot {
  display: inline-block;
  opacity: 0;
  animation: jp-blink 1.4s infinite;
}
.overlay-dot:nth-child(1) { animation-delay: 0s; }
.overlay-dot:nth-child(2) { animation-delay: 0.18s; }
.overlay-dot:nth-child(3) { animation-delay: 0.36s; }
@keyframes jp-blink {
  0%, 60%, 100% { opacity: 0; }
  30% { opacity: 1; }
}

.overlay-erro {
  max-width: 520px;
}
.overlay-erro-icone {
  width: 44px;
  height: 44px;
  border: 3px solid var(--jp-color-error);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--jp-color-error);
  font-weight: var(--jp-font-weight-bold);
  font-size: 22px;
}
.overlay-erro-titulo {
  color: var(--jp-color-error);
  font-family: var(--jp-font-family);
  font-weight: var(--jp-font-weight-semibold);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-size: 13px;
}
.overlay-erro-lista {
  background: var(--jp-color-bg-elevated);
  border: 1px solid var(--jp-color-border-default);
  border-radius: var(--jp-radius-md);
  padding: var(--jp-space-3) var(--jp-space-4);
  font-size: var(--jp-font-size-caption);
  color: var(--jp-color-text-secondary);
  text-align: left;
  width: 100%;
  max-height: 240px;
  overflow-y: auto;
}
.overlay-erro-item {
  padding: var(--jp-space-2) 0;
  border-top: 1px solid var(--jp-color-border-subtle);
  line-height: 1.5;
}
.overlay-erro-item:first-child { border-top: 0; }
.overlay-erro-item strong {
  color: var(--jp-color-error);
  font-weight: var(--jp-font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 10px;
  display: block;
  margin-bottom: 2px;
}
.overlay-erro #btn-overlay-fechar {
  padding: var(--jp-space-2) var(--jp-space-5);
}

/* Botoes de icone (lupa, refresh) seguem a identidade JP - texto muted no
   estado normal, dourado no hover, com tamanho consistente. */
.btn-icone {
  width: 32px;
  height: 28px;
  padding: 0;
  font-size: 14px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--jp-color-text-muted);
}
.btn-icone:hover {
  color: var(--jp-color-gold-primary);
  border-color: var(--jp-color-gold-primary);
  background: transparent;
}
.btn-icone svg { display: block; }

/* Email logado no header — discreto, fonte pequena */
/* Badge do "momento do cliente" (Trello) no header */
.btn-momento {
  background: rgba(184, 151, 42, 0.08);
  color: var(--jp-color-gold-primary);
  border: 1px solid var(--jp-color-gold-primary);
  border-radius: var(--jp-radius-full);
  padding: 4px 12px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  white-space: nowrap;
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 120ms ease;
}
.btn-momento:hover {
  background: rgba(184, 151, 42, 0.18);
}
.btn-momento[hidden] { display: none; }

/* Badge de pendências de notas — usa mesma estrutura do btn-momento */
.btn-notas-pendencias { background: rgba(168, 66, 63, 0.10); color: #d87a77; border-color: #a8423f; }
.btn-notas-pendencias:hover { background: rgba(168, 66, 63, 0.20); }
.btn-notas-pendencias.zerado { display: none; }

/* Notas do cliente — formulário de nova nota */
.form-nova-nota {
  display: flex;
  flex-direction: column;
  gap: var(--jp-space-2);
  margin-bottom: var(--jp-space-4);
  padding: var(--jp-space-3);
  background: var(--jp-color-bg-panel);
  border: 1px solid var(--jp-color-border-subtle);
  border-radius: var(--jp-radius-md);
}
.form-nova-nota textarea {
  background: var(--jp-color-bg-base);
  color: var(--jp-color-text-primary);
  border: 1px solid var(--jp-color-border-default);
  border-radius: var(--jp-radius-md);
  padding: 10px 12px;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.5;
  resize: vertical;
  min-height: 64px;
}
.form-nova-nota textarea:focus {
  outline: none;
  border-color: var(--jp-color-gold-primary);
  box-shadow: var(--jp-shadow-gold-focus);
}
.form-nova-nota-rodape {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--jp-space-3);
}
.form-nova-nota-rodape select { max-width: 180px; }

/* Timeline de notas */
.notas-timeline {
  display: flex;
  flex-direction: column;
  gap: var(--jp-space-2);
}
.notas-vazio {
  text-align: center;
  padding: var(--jp-space-5);
  color: var(--jp-color-text-muted);
  font-style: italic;
  font-size: 12px;
}
.nota-item {
  padding: var(--jp-space-3) var(--jp-space-4);
  background: var(--jp-color-bg-elevated);
  border: 1px solid var(--jp-color-border-subtle);
  border-left: 3px solid var(--jp-color-border-default);
  border-radius: var(--jp-radius-md);
  position: relative;
}
.nota-item.nota-cat-decisao { border-left-color: var(--jp-color-gold-primary); }
.nota-item.nota-cat-pendencia { border-left-color: #a8423f; }
.nota-item.nota-cat-conversa { border-left-color: var(--jp-color-text-secondary); }
.nota-item.nota-cat-insight { border-left-color: #5a7a8c; }
.nota-item.nota-fechada {
  opacity: 0.55;
  background: var(--jp-color-bg-panel);
}
.nota-item.nota-fechada .nota-corpo { text-decoration: line-through; }
.nota-cabecalho {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  font-size: 11px;
  color: var(--jp-color-text-muted);
}
.nota-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}
.nota-cat-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: var(--jp-radius-full);
}
.nota-cat-badge.cat-decisao { background: rgba(184, 151, 42, 0.15); color: var(--jp-color-gold-primary); }
.nota-cat-badge.cat-pendencia { background: rgba(168, 66, 63, 0.15); color: #d87a77; }
.nota-cat-badge.cat-conversa { background: var(--jp-color-bg-panel); color: var(--jp-color-text-secondary); }
.nota-cat-badge.cat-insight { background: rgba(90, 122, 140, 0.15); color: #7ea3b8; }
.nota-acoes {
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 120ms ease;
}
.nota-item:hover .nota-acoes { opacity: 1; }
.nota-acao-btn {
  background: transparent;
  border: 1px solid var(--jp-color-border-subtle);
  border-radius: var(--jp-radius-sm);
  padding: 2px 8px;
  font-family: inherit;
  font-size: 10px;
  color: var(--jp-color-text-secondary);
  cursor: pointer;
}
.nota-acao-btn:hover {
  color: var(--jp-color-gold-primary);
  border-color: var(--jp-color-gold-primary);
}
.nota-corpo {
  font-size: 13px;
  line-height: 1.6;
  color: var(--jp-color-text-primary);
  word-wrap: break-word;
}
.nota-corpo p { margin: 0 0 6px 0; }
.nota-corpo p:last-child { margin-bottom: 0; }
.nota-corpo strong { color: var(--jp-color-gold-primary); }
.nota-corpo em { color: var(--jp-color-text-secondary); }
.nota-corpo code {
  background: var(--jp-color-bg-base);
  color: var(--jp-color-gold-secondary);
  padding: 1px 5px;
  border-radius: 3px;
  font-family: ui-monospace, monospace;
  font-size: 11px;
}
.nota-corpo a {
  color: var(--jp-color-gold-secondary);
  text-decoration: underline;
}
.nota-corpo ul, .nota-corpo ol {
  margin: 4px 0 4px 20px;
  padding: 0;
}
.nota-corpo li { margin: 2px 0; }
.nota-corpo blockquote {
  border-left: 2px solid var(--jp-color-border-default);
  margin: 4px 0;
  padding-left: 10px;
  color: var(--jp-color-text-secondary);
}
.nota-autor {
  font-size: 10px;
  color: var(--jp-color-text-disabled);
  margin-left: 6px;
}
.nota-editor {
  width: 100%;
  background: var(--jp-color-bg-base);
  color: var(--jp-color-text-primary);
  border: 1px solid var(--jp-color-gold-primary);
  border-radius: var(--jp-radius-sm);
  padding: 8px;
  font-family: inherit;
  font-size: 13px;
  resize: vertical;
}

/* Popover de seleção de momento — flutua abaixo do badge */
.momento-popover {
  position: fixed;
  top: 70px;
  z-index: 1500;
  background: var(--jp-color-bg-panel);
  border: 1px solid var(--jp-color-border-default);
  border-radius: var(--jp-radius-lg);
  padding: var(--jp-space-3) var(--jp-space-4);
  box-shadow: var(--jp-shadow-lg);
  min-width: 320px;
  max-width: 480px;
}
.momento-popover[hidden] { display: none; }
.momento-popover-titulo {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--jp-color-gold-primary);
  margin-bottom: 6px;
}
.momento-popover-meta {
  font-size: 12px;
  color: var(--jp-color-text-secondary);
  margin-bottom: var(--jp-space-3);
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--jp-color-border-subtle);
}
.momento-popover-opcoes {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.momento-opcao {
  text-align: left;
  background: transparent;
  border: 1px solid var(--jp-color-border-subtle);
  border-radius: var(--jp-radius-md);
  padding: 8px 12px;
  color: var(--jp-color-text-primary);
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}
.momento-opcao:hover {
  border-color: var(--jp-color-gold-secondary);
  background: rgba(184, 151, 42, 0.05);
}
.momento-opcao.ativa {
  border-color: var(--jp-color-gold-primary);
  background: rgba(184, 151, 42, 0.12);
  color: var(--jp-color-gold-primary);
  font-weight: 600;
}
.momento-popover-status {
  margin-top: 10px;
  font-size: 11px;
  color: var(--jp-color-text-muted);
  font-style: italic;
  min-height: 14px;
}

.login-info-header {
  font-size: 11px;
  color: var(--jp-color-text-muted);
  margin-left: var(--jp-space-3);
  padding: 4px 8px;
  border-left: 1px solid var(--jp-color-border-subtle);
}

/* Acao externa (abre em nova aba) - mesmo padrao de .btn-icone mas com borda
   sutil pra diferenciar de botoes locais. Usado pelo botao "Abrir Meta Ads
   Manager" no header da aba Trafego Comercial -> Meta. */
.btn-acao-externa {
  border: 1px solid var(--jp-color-border-subtle);
  border-radius: var(--jp-radius-md);
  text-decoration: none;
  font-size: 14px;
  transition: color 120ms ease, border-color 120ms ease;
}
.btn-acao-externa:hover {
  color: var(--jp-color-gold-primary);
  border-color: var(--jp-color-gold-primary);
  text-decoration: none;
}
.btn-acao-externa[hidden] { display: none; }

/* Estado de carregamento padronizado para conteudo de qualquer bloco. */
.bloco-carregando {
  text-align: center;
  padding: var(--jp-space-5) var(--jp-space-4);
  color: var(--jp-color-text-muted);
  font-style: italic;
  font-size: var(--jp-font-size-caption);
  letter-spacing: 0.05em;
}

/* Sub-header: toolbar abaixo do header principal com busca + filtros de
   atribuicao (Meta / Google). Identidade JP: fundo elevated, separador sutil. */
.sub-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--jp-space-4);
  padding: var(--jp-space-3) var(--jp-space-6);
  background: var(--jp-color-bg-elevated);
  border-bottom: 1px solid var(--jp-color-border-subtle);
}
.sub-busca {
  display: flex;
  gap: var(--jp-space-2);
  flex: 1 1 320px;
  min-width: 220px;
}
.sub-busca input[type="search"] {
  flex: 1;
}
.sub-filtros {
  display: flex;
  gap: var(--jp-space-3);
  align-items: center;
  flex-wrap: wrap;
}
@media (max-width: 600px) {
  .sub-header { padding: var(--jp-space-2) var(--jp-space-4); gap: var(--jp-space-3); }
}

/* Dropdown de origem (global no sub-header + per-block nos headers de cada bloco).
   Estilo unico: dark + gold fosco, consistente com o restante da identidade JP. */
.origem-select {
  background: var(--jp-color-bg-elevated);
  color: var(--jp-color-text-primary);
  border: 1px solid var(--jp-color-border-default);
  border-radius: var(--jp-radius-md);
  padding: 0 28px 0 12px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  height: 28px;
  cursor: pointer;
  transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease;
  /* Custom caret */
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--jp-color-text-secondary) 50%), linear-gradient(135deg, var(--jp-color-text-secondary) 50%, transparent 50%);
  background-position: right 12px center, right 7px center;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}
.origem-select:hover {
  border-color: var(--jp-color-border-strong);
}
.origem-select:focus {
  outline: none;
  border-color: var(--jp-color-gold-primary);
  box-shadow: var(--jp-shadow-gold-focus);
}

/* Estado "Misto" no dropdown global: visual contido mas claramente "indefinido". */
.origem-select.origem-global-misto {
  color: var(--jp-color-text-muted);
  font-style: italic;
  border-style: dashed;
}

/* Dropdown per-block suprimido (Trafego quando global = orgânico). */
.origem-bloco-select.origem-bloco-suprimido {
  opacity: 0.4;
  pointer-events: none;
  border-style: dashed;
}

/* Wrap do dropdown global no sub-header com label "Origem". */
.origem-global-wrap {
  display: inline-flex;
  align-items: center;
  gap: var(--jp-space-2);
  font-size: var(--jp-font-size-caption);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--jp-color-text-muted);
  cursor: pointer;
}
.origem-global-label {
  white-space: nowrap;
}

/* Modal Configuracoes: 2 secoes (Pendencias + Heuristica Google) separadas
   por divisoria. Cada secao tem titulo+meta no topo e form abaixo. */
.modal-intervalos-conteudo {
  max-width: 560px;
}
.modal-corpo-form {
  padding: var(--jp-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--jp-space-6);
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
}
/* Scrollbar estilizada no padrao JP — dark com hint dourado no hover */
.modal-corpo-form::-webkit-scrollbar { width: 8px; }
.modal-corpo-form::-webkit-scrollbar-track { background: transparent; }
.modal-corpo-form::-webkit-scrollbar-thumb {
  background: var(--jp-color-border-default);
  border-radius: 4px;
}
.modal-corpo-form::-webkit-scrollbar-thumb:hover {
  background: var(--jp-color-gold-primary);
}
.cfg-secao + .cfg-secao {
  border-top: 1px solid var(--jp-color-border-subtle);
  padding-top: var(--jp-space-5);
}
.cfg-secao-titulo {
  font-size: var(--jp-font-size-body);
  font-weight: var(--jp-font-weight-semibold);
  color: var(--jp-color-text-primary);
}
.cfg-secao-meta {
  font-size: var(--jp-font-size-caption);
  color: var(--jp-color-text-muted);
  margin-top: var(--jp-space-1);
  margin-bottom: var(--jp-space-3);
  line-height: 1.5;
}
.modal-corpo-form form {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--jp-space-4);
}
.modal-corpo-form form label {
  font-size: var(--jp-font-size-caption);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--jp-color-text-secondary);
  display: flex;
  flex-direction: column;
  gap: var(--jp-space-2);
}
.modal-corpo-form form input[type="number"],
.modal-corpo-form form textarea {
  font-size: var(--jp-font-size-body);
  font-weight: 600;
  width: 100%;
  background: var(--jp-color-bg-base);
  border: 1px solid var(--jp-color-border-default);
  border-radius: var(--jp-radius-md);
  padding: var(--jp-space-2) var(--jp-space-3);
  color: var(--jp-color-text-primary);
  font-family: inherit;
}
.modal-corpo-form form textarea {
  resize: vertical;
  min-height: 96px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}
.modal-corpo-form form input:focus,
.modal-corpo-form form textarea:focus {
  outline: none;
  border-color: var(--jp-color-gold-primary);
  box-shadow: var(--jp-shadow-gold-focus, 0 0 0 3px rgba(184, 151, 42, 0.4));
}
.modal-corpo-form .ajuda {
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
}
.modal-corpo-acoes {
  display: flex;
  align-items: center;
  gap: var(--jp-space-3);
  padding-top: var(--jp-space-2);
  border-top: 1px solid var(--jp-color-border-subtle);
  margin-top: var(--jp-space-2);
}
#modal-intervalos-fechar {
  background: transparent;
  border: 0;
  color: var(--jp-color-text-muted);
  font-size: var(--jp-font-size-h3);
  padding: 0 var(--jp-space-2);
  cursor: pointer;
  line-height: 1;
}
#modal-intervalos-fechar:hover { color: var(--jp-color-gold-primary); }

/* Meta Ads / Tráfego Comercial: header com 2 toggles (canal + período) +
   refresh. Em telas estreitas, quebra linha pra não comprimir. */
.meta-controles {
  display: flex;
  gap: var(--jp-space-2);
  align-items: center;
  flex-wrap: wrap;
}
/* Espaco extra entre o toggle de canal e o toggle de período no header do
   bloco Tráfego Comercial. Sem padding/border interno pra evitar criar
   "area morta" depois do ultimo botao quando ele esta ativo (Geral).
   A separacao visual fica apenas pela margem externa. */
#trafego-canal-toggle {
  margin-right: var(--jp-space-3);
}
.meta-kpis {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--jp-space-3);
}
.meta-kpis .kpi-valor { font-size: var(--jp-font-size-h2); line-height: 1.1; }
@media (max-width: 1100px) {
  .meta-kpis { grid-template-columns: repeat(3, 1fr); }
}
.meta-indisponivel {
  text-align: center;
  padding: var(--jp-space-5);
  color: var(--jp-color-text-muted);
  font-size: var(--jp-font-size-caption);
  font-style: italic;
}

/* Tabela "Por campanha" — breakdown abaixo dos KPIs do card de trafego
   (Meta/Google). Tom secundario: tipografia menor e cor mais sobria que
   os KPIs principais. Recolhivel via <details>, estado persistido por
   conta+canal. Default: aberto na primeira visita. */
.campanhas-bloco {
  margin-top: var(--jp-space-5);
  padding-top: var(--jp-space-4);
  border-top: 1px solid var(--jp-color-border-subtle);
}
.campanhas-titulo {
  font-size: var(--jp-font-size-caption);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--jp-color-text-muted);
  font-weight: var(--jp-font-weight-semibold);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--jp-space-2);
  padding: var(--jp-space-1) 0;
  user-select: none;
  transition: color var(--jp-duration-fast) var(--jp-easing-standard);
}
.campanhas-titulo::-webkit-details-marker { display: none; }
.campanhas-titulo::before {
  content: '▸';
  font-size: 10px;
  color: var(--jp-color-text-muted);
  transition: transform var(--jp-duration-fast) var(--jp-easing-standard);
  display: inline-block;
}
details[open] > .campanhas-titulo::before {
  transform: rotate(90deg);
}
.campanhas-titulo:hover {
  color: var(--jp-color-gold-primary);
}
.campanhas-titulo:hover::before {
  color: var(--jp-color-gold-primary);
}
.campanhas-count {
  color: var(--jp-color-text-muted);
  font-weight: var(--jp-font-weight-regular);
  letter-spacing: 0;
  text-transform: none;
  font-size: 11px;
}
details.campanhas-bloco > .campanhas-tabela {
  margin-top: var(--jp-space-3);
}
.campanhas-tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--jp-font-size-body-small);
}
.campanhas-tabela th {
  text-align: left;
  font-weight: var(--jp-font-weight-medium);
  color: var(--jp-color-text-muted);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: var(--jp-space-1) var(--jp-space-3);
  border-bottom: 1px solid var(--jp-color-border-subtle);
}
.campanhas-tabela th.num,
.campanhas-tabela td.num {
  text-align: right;
}
.campanhas-tabela td {
  padding: var(--jp-space-2) var(--jp-space-3);
  border-bottom: 1px solid var(--jp-color-border-subtle);
  color: var(--jp-color-text-secondary);
}
.campanhas-tabela tr:last-child td { border-bottom: 0; }
.campanhas-tabela td.campanha-nome {
  color: var(--jp-color-text-primary);
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.campanhas-tabela tr:hover td {
  background: var(--jp-color-bg-overlay);
}

/* Nota discreta abaixo dos KPIs do card de trafego (Meta/Google/Geral)
   explicando que PROPOSTAS e CONTRATO FECHADO sao coorte de leads criados
   na janela, nao data do fechamento. Tom contido — fala mas nao compete. */
.rodape-coorte {
  margin-top: var(--jp-space-4);
  padding-top: var(--jp-space-3);
  border-top: 1px solid var(--jp-color-border-subtle);
  text-align: center;
  font-size: 11px;
  line-height: 1.5;
  color: var(--jp-color-text-muted);
  font-style: italic;
  letter-spacing: 0.02em;
}
.rodape-coorte strong {
  color: var(--jp-color-text-secondary);
  font-weight: var(--jp-font-weight-semibold);
}

/* Bloco "aguardando integração" — card placeholder pra fonte ainda não
   conectada (Google Ads sem MCP/API hoje). Mesma estrutura do card ativo
   mas com peso visual reduzido pra sinalizar "WIP". */
.bloco-aguardando {
  opacity: 0.55;
  position: relative;
}
.bloco-aguardando .seg-toggle button[disabled],
.bloco-aguardando .btn-icone[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}
.aguardando-integracao {
  background: var(--jp-color-bg-base);
  border: 1px dashed var(--jp-color-border-strong);
  border-radius: var(--jp-radius-md);
  padding: var(--jp-space-3) var(--jp-space-4);
  margin-bottom: var(--jp-space-4);
  color: var(--jp-color-text-secondary);
  font-size: var(--jp-font-size-caption);
  text-align: center;
  letter-spacing: 0.02em;
}
.preview-vazio .kpi-valor {
  color: var(--jp-color-text-muted);
}
.meta-action-type {
  font-size: 10px;
  color: var(--jp-color-text-muted);
  font-family: ui-monospace, monospace;
  letter-spacing: 0;
  text-transform: none;
  margin-top: 2px;
}
@media (max-width: 700px) {
  .meta-kpis { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .meta-kpis { grid-template-columns: 1fr; }
}

/* Lupa mobile: substitui o form-busca quando a tela aperta. */
.btn-lupa-mobile {
  display: none;
}

/* Modal de busca: aparece no topo, nao centralizado, com folga do header. */
#modal-busca {
  align-items: flex-start;
  padding-top: var(--jp-space-16);
}
#modal-busca .modal-busca-conteudo {
  max-width: 480px;
}
.modal-busca-form {
  display: flex;
  gap: var(--jp-space-2);
  padding: var(--jp-space-4);
  align-items: center;
}
.modal-busca-form input {
  flex: 1;
  width: auto;
}

@media (max-width: 820px) {
  header .header-busca { display: none; }
  .btn-lupa-mobile.btn-icone { display: inline-flex; }
}

@media (max-width: 700px) {
  .kpis { grid-template-columns: 1fr; }
  main { padding: var(--jp-space-4); }
}

/* ---------- Date picker estilo Meta Ads ---------- */

/* Trigger: botao no header que abre o popover. Mostra rotulo da janela ativa. */
.janela-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--jp-color-bg-elevated);
  color: var(--jp-color-text-primary);
  border: 1px solid var(--jp-color-border-default);
  border-radius: var(--jp-radius-md);
  padding: 0 12px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  height: 28px;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease, box-shadow 120ms ease;
  white-space: nowrap;
}
.janela-trigger:hover {
  border-color: var(--jp-color-border-strong);
}
.janela-trigger[aria-expanded="true"],
.janela-trigger.janela-trigger-ativo {
  background: rgba(184, 151, 42, 0.1);
  border-color: var(--jp-color-gold-primary);
  color: var(--jp-color-gold-primary);
}
.janela-trigger-icone {
  display: inline-block;
  vertical-align: -2px;
  opacity: 0.85;
}
.janela-trigger:hover .janela-trigger-icone,
.janela-trigger[aria-expanded="true"] .janela-trigger-icone,
.janela-trigger.janela-trigger-ativo .janela-trigger-icone {
  opacity: 1;
}
.janela-trigger-rotulo {
  font-weight: 600;
}
.janela-trigger-caret {
  font-size: 10px;
  opacity: 0.7;
}

/* Botao de sync (link/unlink). Quando linkada (default), cor gold. */
.janela-sync {
  font-size: 13px;
  opacity: 0.65;
  transition: opacity 120ms ease, color 120ms ease;
}
.janela-sync:hover { opacity: 1; }
.janela-sync.janela-sync-on {
  opacity: 0.9;
  color: var(--jp-color-gold-primary);
}

/* Popover do date picker (singleton). Posicionado absolutamente sobre tudo. */
.janela-popover {
  position: absolute;
  z-index: 9000;
  display: flex;
  background: var(--jp-color-bg-panel);
  border: 1px solid var(--jp-color-border-default);
  border-radius: var(--jp-radius-lg);
  box-shadow: var(--jp-shadow-lg);
  font-size: 12px;
  user-select: none;
}
.janela-popover[hidden] { display: none; }

/* Coluna de presets (esquerda) */
.janela-popover-presets {
  display: flex;
  flex-direction: column;
  padding: var(--jp-space-3);
  gap: 2px;
  border-right: 1px solid var(--jp-color-border-subtle);
  min-width: 170px;
}
.janela-preset {
  background: transparent;
  color: var(--jp-color-text-secondary);
  border: 0;
  border-radius: var(--jp-radius-sm);
  padding: 6px 10px;
  text-align: left;
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  transition: background 100ms ease, color 100ms ease;
}
.janela-preset:hover {
  background: var(--jp-color-bg-overlay);
  color: var(--jp-color-text-primary);
}
.janela-preset.ativo {
  background: rgba(184, 151, 42, 0.15);
  color: var(--jp-color-gold-primary);
  font-weight: 600;
}

/* Área de calendário (direita) */
.janela-popover-cal {
  display: flex;
  flex-direction: column;
  padding: var(--jp-space-3);
  gap: var(--jp-space-3);
}
.janela-popover-inputs {
  display: flex;
  align-items: end;
  gap: var(--jp-space-2);
  font-size: 11px;
  color: var(--jp-color-text-muted);
}
.janela-popover-inputs label {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.janela-popover-inputs input[type="date"] {
  background: var(--jp-color-bg-elevated);
  color: var(--jp-color-text-primary);
  border: 1px solid var(--jp-color-border-default);
  border-radius: var(--jp-radius-sm);
  padding: 4px 8px;
  font-family: inherit;
  font-size: 12px;
  height: 28px;
  color-scheme: dark;
}
.janela-popover-inputs input[type="date"]:focus {
  outline: none;
  border-color: var(--jp-color-gold-primary);
}
.janela-popover-sep {
  padding-bottom: 6px;
  color: var(--jp-color-text-muted);
}

/* Os dois meses lado a lado */
.janela-popover-cals {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--jp-space-4);
}
.janela-cal {
  display: flex;
  flex-direction: column;
  gap: var(--jp-space-2);
}
.janela-cal-head {
  display: grid;
  grid-template-columns: 24px 1fr 24px;
  align-items: center;
  font-weight: 600;
  font-size: 12px;
  color: var(--jp-color-text-primary);
}
.janela-cal-titulo {
  text-align: center;
}
.janela-cal-nav {
  background: transparent;
  color: var(--jp-color-text-secondary);
  border: 0;
  font-size: 16px;
  width: 22px;
  height: 22px;
  border-radius: var(--jp-radius-sm);
  cursor: pointer;
  line-height: 1;
}
.janela-cal-nav:hover {
  background: var(--jp-color-bg-overlay);
  color: var(--jp-color-gold-primary);
}
.janela-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 30px);
  gap: 1px;
  font-size: 11px;
}
.janela-cal-dow {
  text-align: center;
  color: var(--jp-color-text-muted);
  font-weight: 600;
  padding: 4px 0;
}
.janela-cal-vazio { width: 30px; height: 28px; }
.janela-cal-dia {
  width: 30px;
  height: 28px;
  border: 0;
  background: transparent;
  color: var(--jp-color-text-primary);
  border-radius: var(--jp-radius-sm);
  cursor: pointer;
  font-family: inherit;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: background 80ms ease, color 80ms ease;
}
.janela-cal-dia:hover {
  background: var(--jp-color-bg-overlay);
}
.janela-cal-dia.hoje {
  font-weight: 700;
  color: var(--jp-color-gold-primary);
}
.janela-cal-dia.futuro {
  color: var(--jp-color-text-disabled);
  cursor: not-allowed;
}
.janela-cal-dia.range-meio {
  background: rgba(184, 151, 42, 0.12);
  border-radius: 0;
}
.janela-cal-dia.range-inicio {
  background: var(--jp-color-gold-primary);
  color: var(--jp-color-text-on-gold);
  border-radius: var(--jp-radius-sm) 0 0 var(--jp-radius-sm);
}
.janela-cal-dia.range-fim {
  background: var(--jp-color-gold-primary);
  color: var(--jp-color-text-on-gold);
  border-radius: 0 var(--jp-radius-sm) var(--jp-radius-sm) 0;
}
.janela-cal-dia.range-inicio.range-fim {
  border-radius: var(--jp-radius-sm);
}

/* Rodape */
.janela-popover-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--jp-space-2);
  padding-top: var(--jp-space-2);
  border-top: 1px solid var(--jp-color-border-subtle);
}
.janela-popover-cancelar,
.janela-popover-aplicar {
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  height: 30px;
  border-radius: var(--jp-radius-md);
  cursor: pointer;
  padding: 0 14px;
}
.janela-popover-cancelar {
  background: transparent;
  color: var(--jp-color-text-secondary);
  border: 1px solid var(--jp-color-border-default);
}
.janela-popover-cancelar:hover {
  border-color: var(--jp-color-border-strong);
  color: var(--jp-color-text-primary);
}
.janela-popover-aplicar {
  background: var(--jp-color-gold-primary);
  color: var(--jp-color-text-on-gold);
  border: 0;
}
.janela-popover-aplicar:hover {
  background: var(--jp-color-gold-secondary);
}

@media (max-width: 700px) {
  .janela-popover-cals {
    grid-template-columns: 1fr;
  }
  .janela-popover {
    max-width: calc(100vw - 16px);
  }
}

/* ---------- Badges de origem (lista Conversas > Todas) ---------- */
.badge-origem {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--jp-radius-full, 9999px);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid transparent;
  line-height: 1.4;
  white-space: nowrap;
}
.badge-origem-meta {
  background: rgba(90, 122, 140, 0.15);
  color: #87a7bc;
  border-color: rgba(90, 122, 140, 0.4);
}
.badge-origem-google {
  background: rgba(74, 124, 89, 0.15);
  color: #7fb38f;
  border-color: rgba(74, 124, 89, 0.4);
}
.badge-origem-organico {
  background: rgba(184, 151, 42, 0.1);
  color: var(--jp-color-gold-primary);
  border-color: rgba(184, 151, 42, 0.35);
}
.badge-origem-outras {
  background: var(--jp-color-bg-overlay);
  color: var(--jp-color-text-muted);
  border-color: var(--jp-color-border-default);
}

/* Tabela "Conversas > Todas" */
.tabela-conversas-todas td {
  vertical-align: middle;
}

/* ---------- Auditoria Comercial ---------- */
.auditoria-grupos {
  display: flex;
  flex-direction: column;
  gap: var(--jp-space-4);
}
.auditoria-grupo {
  background: var(--jp-color-bg-panel);
  border: 1px solid var(--jp-color-border-subtle);
  border-radius: var(--jp-radius-md);
  padding: var(--jp-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--jp-space-2);
}
.auditoria-grupo-titulo {
  font-size: 14px;
  font-weight: 600;
  color: var(--jp-color-text-primary);
}
.auditoria-grupo-meta {
  font-size: 12px;
  color: var(--jp-color-text-muted);
}
.auditoria-grupo-acoes {
  display: flex;
  gap: var(--jp-space-2);
  align-items: center;
  margin-top: var(--jp-space-2);
  flex-wrap: wrap;
}
.auditoria-grupo-acoes button {
  background: var(--jp-color-gold-primary);
  color: var(--jp-color-text-on-gold);
  border: 0;
  padding: 0 14px;
  height: 30px;
  border-radius: var(--jp-radius-md);
  font-family: inherit;
  font-weight: 600;
  font-size: 12px;
  cursor: pointer;
}
.auditoria-grupo-acoes button:hover { background: var(--jp-color-gold-secondary); }
.auditoria-grupo-acoes button[disabled] { opacity: 0.5; cursor: wait; }
.auditoria-grupo-acoes button.btn-secundario {
  background: transparent;
  color: var(--jp-color-gold-primary);
  border: 1px solid var(--jp-color-gold-primary);
}
.auditoria-grupo-acoes button.btn-secundario:hover {
  background: rgba(184, 151, 42, 0.1);
}

.resultado-auditoria {
  margin-top: var(--jp-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--jp-space-4);
}
.resultado-auditoria:empty { display: none; }
.auditoria-loading,
.auditoria-aviso,
.auditoria-erro {
  padding: var(--jp-space-3);
  border-radius: var(--jp-radius-md);
  font-size: 12px;
  border: 1px solid var(--jp-color-border-subtle);
  background: var(--jp-color-bg-panel);
}
.auditoria-aviso {
  border-color: rgba(201, 168, 76, 0.4);
  background: rgba(201, 168, 76, 0.08);
  color: var(--jp-color-text-primary);
}
.auditoria-erro {
  border-color: rgba(168, 66, 63, 0.5);
  background: rgba(168, 66, 63, 0.1);
  color: #d27c79;
}
.auditoria-kpis {
  grid-template-columns: repeat(4, 1fr);
  gap: var(--jp-space-3);
}
.audit-buckets {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--jp-space-3);
  background: var(--jp-color-bg-panel);
  border: 1px solid var(--jp-color-border-subtle);
  border-radius: var(--jp-radius-md);
}
.audit-bucket-linha {
  display: grid;
  grid-template-columns: 130px 40px 1fr;
  gap: var(--jp-space-2);
  align-items: center;
  font-size: 12px;
}
.audit-bucket-rotulo { color: var(--jp-color-text-secondary); }
.audit-bucket-count { color: var(--jp-color-text-primary); font-weight: 600; text-align: right; }
.audit-bucket-barra {
  height: 6px;
  background: var(--jp-color-bg-overlay);
  border-radius: 3px;
  overflow: hidden;
}
.audit-bucket-fill {
  height: 100%;
  transition: width 200ms ease;
}
.audit-bucket-fill.verde         { background: #4a7c59; }
.audit-bucket-fill.verde-leve    { background: #7fb38f; }
.audit-bucket-fill.amarelo       { background: #c9a84c; }
.audit-bucket-fill.vermelho      { background: #a8423f; }
.audit-bucket-fill.vermelho-forte { background: #7a2c2a; }

.audit-piores-titulo {
  font-size: 13px;
  font-weight: 600;
  color: var(--jp-color-text-primary);
  margin-bottom: var(--jp-space-2);
}
.audit-pendentes {
  border: 1px solid rgba(201, 168, 76, 0.4);
  background: rgba(201, 168, 76, 0.06);
  border-radius: var(--jp-radius-md);
  padding: var(--jp-space-3);
}
.audit-pendentes .audit-piores-titulo {
  color: var(--jp-color-gold-primary);
}
.audit-sem-retorno {
  border: 1px solid var(--jp-color-border-subtle);
  border-radius: var(--jp-radius-md);
  padding: var(--jp-space-3);
}
.audit-sem-retorno summary {
  cursor: pointer;
  list-style: none;
}
.audit-sem-retorno summary::-webkit-details-marker { display: none; }
.audit-sem-retorno summary::before {
  content: '▸';
  display: inline-block;
  margin-right: 6px;
  transition: transform 120ms ease;
}
.audit-sem-retorno[open] summary::before { transform: rotate(90deg); }
.audit-sem-retorno table { margin-top: var(--jp-space-2); }
.audit-delta-ruim {
  color: #d27c79;
  font-weight: 600;
}

.auditoria-meta {
  font-size: 11px;
  line-height: 1.5;
}

@media (max-width: 700px) {
  .auditoria-kpis { grid-template-columns: 1fr 1fr; }
}

/* Banner "Análise realizada em X" — mostra que o resultado eh do cache */
.audit-banner-cache {
  background: var(--jp-color-bg-panel);
  border: 1px solid var(--jp-color-border-subtle);
  border-left: 3px solid var(--jp-color-gold-primary);
  padding: 8px 12px;
  border-radius: var(--jp-radius-md);
  font-size: 11px;
  color: var(--jp-color-text-secondary);
  margin-bottom: var(--jp-space-3);
}
.audit-banner-cache strong { color: var(--jp-color-text-primary); }
/* Variante "legado" — vermelho-aviso, mais chamativo */
.audit-banner-cache.audit-banner-legado {
  background: rgba(201, 168, 76, 0.08);
  border-color: rgba(201, 168, 76, 0.5);
  border-left-color: #c9a84c;
  color: var(--jp-color-text-primary);
  font-size: 12px;
}

/* Tag "com IA" no titulo do grupo de auditoria */
.audit-tag-ia {
  display: inline-block;
  background: rgba(184, 151, 42, 0.15);
  color: var(--jp-color-gold-primary);
  border: 1px solid rgba(184, 151, 42, 0.4);
  border-radius: var(--jp-radius-full, 9999px);
  padding: 1px 8px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-left: 6px;
  vertical-align: middle;
}

/* Funil qualitativo — visualizacao em árvore vertical */
.audit-funil {
  background: var(--jp-color-bg-panel);
  border: 1px solid var(--jp-color-border-subtle);
  border-radius: var(--jp-radius-md);
  padding: var(--jp-space-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.audit-funil-titulo {
  font-size: 14px;
  font-weight: 600;
  color: var(--jp-color-text-primary);
  margin-bottom: var(--jp-space-3);
}
.audit-funil-nivel {
  display: grid;
  grid-template-columns: 1fr 60px 1fr;
  width: 100%;
  max-width: 600px;
  align-items: center;
  padding: 10px 14px;
  background: var(--jp-color-bg-elevated);
  border: 1px solid var(--jp-color-border-default);
  border-radius: var(--jp-radius-md);
}
.audit-funil-fim {
  border-color: var(--jp-color-gold-primary);
  background: rgba(184, 151, 42, 0.08);
}
.audit-funil-nome {
  font-weight: 600;
  font-size: 13px;
  color: var(--jp-color-text-primary);
}
.audit-funil-valor {
  font-weight: 700;
  font-size: 22px;
  color: var(--jp-color-gold-primary);
  text-align: center;
}
.audit-funil-pct {
  font-size: 11px;
  color: var(--jp-color-text-muted);
  text-align: right;
}
.audit-funil-seta {
  font-size: 16px;
  color: var(--jp-color-text-muted);
  line-height: 1;
}

/* Lista compacta de motivos / sinais */
.audit-motivos {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.audit-motivos li {
  font-size: 12px;
  color: var(--jp-color-text-primary);
  padding: 6px 10px;
  background: var(--jp-color-bg-elevated);
  border: 1px solid var(--jp-color-border-subtle);
  border-radius: var(--jp-radius-sm);
}
.audit-motivos li strong { color: var(--jp-color-gold-primary); margin-right: 6px; }

@media (max-width: 700px) {
  .audit-funil-nivel {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "nome valor" "pct pct";
    gap: 4px;
  }
  .audit-funil-nome { grid-area: nome; }
  .audit-funil-valor { grid-area: valor; text-align: right; }
  .audit-funil-pct { grid-area: pct; text-align: left; }
}

/* Checkbox "Visão completa" no header do grupo Funil Qualitativo */
.audit-visao-completa-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--jp-color-text-muted);
  cursor: pointer;
  margin-left: var(--jp-space-2);
  user-select: none;
}
.audit-visao-completa-label input[type="checkbox"] {
  accent-color: var(--jp-color-gold-primary);
  cursor: pointer;
}
.audit-visao-completa-label:hover { color: var(--jp-color-text-primary); }

/* Percentual secundário (% total, % qualif, etc.) — mais discreto */
.audit-pct-secundario {
  color: var(--jp-color-text-muted);
  font-weight: 400;
  font-size: 10px;
}

/* Indicador "ⓘ" pra niveis com tooltip explicativo */
.audit-info-i {
  color: var(--jp-color-text-muted);
  font-size: 11px;
  margin-left: 2px;
  font-weight: 400;
  cursor: help;
}

/* Modal resumo — abre ao clicar no icone 📝 na tabela detalhe */
.modal-resumo-conteudo {
  max-width: 640px;
  width: 90%;
  max-height: 80vh;
}
.modal-resumo-corpo {
  padding: var(--jp-space-4);
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--jp-space-3);
}
.modal-resumo-bloco {
  padding: var(--jp-space-3);
  background: var(--jp-color-bg-elevated);
  border: 1px solid var(--jp-color-border-subtle);
  border-radius: var(--jp-radius-md);
}
.modal-resumo-bloco.modal-resumo-override {
  border-color: var(--jp-color-gold-primary);
  background: rgba(184, 151, 42, 0.06);
}
.modal-resumo-bloco.modal-resumo-override-editor {
  border-color: var(--jp-color-gold-primary);
  background: rgba(184, 151, 42, 0.04);
}
.modal-resumo-editor-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--jp-space-3);
  margin-bottom: var(--jp-space-3);
}
.modal-resumo-editor-grid label,
.modal-resumo-motivo-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.modal-resumo-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--jp-color-text-muted);
}
.modal-resumo-override-motivo {
  background: var(--jp-color-bg-panel);
  color: var(--jp-color-text-primary);
  border: 1px solid var(--jp-color-border-default);
  border-radius: var(--jp-radius-md);
  padding: 8px 10px;
  font-family: inherit;
  font-size: 13px;
  resize: vertical;
  min-height: 48px;
}
.modal-resumo-override-motivo:focus {
  outline: none;
  border-color: var(--jp-color-gold-primary);
  box-shadow: var(--jp-shadow-gold-focus);
}
@media (max-width: 600px) {
  .modal-resumo-editor-grid { grid-template-columns: 1fr; }
}

/* Modal footer com botao Save explicito (drilldown + resumo) */
.modal-footer-acoes {
  padding: var(--jp-space-3) var(--jp-space-4);
  border-top: 1px solid var(--jp-color-border-subtle);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--jp-space-3);
  background: var(--jp-color-bg-elevated);
}
.modal-dirty-status {
  font-size: 12px;
  color: var(--jp-color-gold-secondary);
  font-style: italic;
}
.btn-salvar-modal {
  min-width: 140px;
}
.btn-salvar-modal:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Linha com alteracao pendente no drilldown */
.audit-row-dirty {
  background: rgba(184, 151, 42, 0.12) !important;
  box-shadow: inset 3px 0 0 var(--jp-color-gold-primary);
}
.audit-row-dirty td:first-child::before {
  content: '● ';
  color: var(--jp-color-gold-primary);
  font-weight: 700;
}
.modal-resumo-rotulo {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--jp-color-gold-primary);
  margin-bottom: 6px;
}
.modal-resumo-texto {
  font-size: 13px;
  line-height: 1.5;
  color: var(--jp-color-text-primary);
}

/* Tabela detalhe APERTADA — economiza espaco lateral pra caber direito */
.audit-tabela-detalhe {
  font-size: 11px;
}
.audit-tabela-detalhe th {
  padding: 4px 4px;
  font-size: 9px;
}
.audit-tabela-detalhe td {
  padding: 3px 4px !important;
}
.audit-tabela-detalhe .badge-origem {
  padding: 1px 5px;
  font-size: 8px;
  letter-spacing: 0;
}
.audit-tabela-detalhe .audit-override {
  height: 20px;
  font-size: 9px;
  padding: 0 14px 0 4px;
  background-position: right 4px center, right 1px center;
  background-size: 4px 4px;
}
.audit-tabela-detalhe .audit-btn-urgente {
  width: 22px;
  height: 20px;
  font-size: 11px;
}
.audit-tabela-detalhe .nome.linkavel {
  font-size: 11px;
}

/* Badges follow-up — advogado tentou retomar conversa apos cliente sumir.
   Variantes por status (respondeu / aguardando / sem_retorno). */
.audit-followup-on {
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
  color: #7fb38f; /* default verde */
}
.audit-followup-on.audit-followup-respondeu { color: #7fb38f; }
.audit-followup-on.audit-followup-aguardando { color: var(--jp-color-gold-primary); }
.audit-followup-on.audit-followup-sem-retorno { color: #d27c79; }
.audit-followup-off {
  color: var(--jp-color-text-muted);
  font-size: 10px;
}

/* Nivel de funil clicavel (Atendidos / Oportunidades / Viaveis / etc) */
.audit-funil-nivel-clicavel {
  cursor: pointer;
  transition: background 100ms, transform 100ms;
}
.audit-funil-nivel-clicavel:hover {
  background: rgba(184, 151, 42, 0.08);
  transform: translateX(2px);
}

/* Icone resumo (📝) na ultima coluna — vira botao com hover tooltip */
.audit-col-resumo-icone {
  text-align: center;
  width: 28px;
}
.audit-btn-resumo {
  background: transparent;
  border: 1px solid var(--jp-color-border-default);
  border-radius: var(--jp-radius-sm);
  width: 24px;
  height: 20px;
  padding: 0;
  font-size: 11px;
  cursor: pointer;
  color: var(--jp-color-text-secondary);
  line-height: 1;
  transition: border-color 100ms, color 100ms;
}
.audit-btn-resumo:hover {
  border-color: var(--jp-color-gold-primary);
  color: var(--jp-color-gold-primary);
}

/* Modal drilldown — abre ao clicar em ramo do funil. Z-index 1000 (default).
   Modal-conversa abre POR CIMA quando usuario clica no nome — sobe pra 1500. */
.modal-funil-drilldown-conteudo {
  max-width: 1100px;
  width: 95%;
  max-height: 85vh;
}
.modal-funil-conteudo {
  padding: var(--jp-space-4);
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
}
/* Hierarquia de modais empilhados:
   - modal-funil-drilldown (lista filtrada do funil): 1000 (default)
   - modal-resumo (resumo de um lead): 1200 (abre dentro do drilldown)
   - modal-conversa (conversa completa): 1500 (abre dentro de qualquer um) */
#modal-resumo.modal-overlay {
  z-index: 1200;
}
#modal-conversa.modal-overlay {
  z-index: 1500;
}

/* ---------- Funil bifurcado (novo modelo: Atendidos | Sem atendimento) ---------- */

/* Metrica paralela "tentaram avancar" — sub-info no card "Entraram em contato" */
.audit-funil-metrica-paralela {
  margin: -8px auto 4px;
  padding: 6px 12px;
  background: rgba(184, 151, 42, 0.04);
  border-left: 2px solid var(--jp-color-gold-primary);
  border-radius: var(--jp-radius-sm);
  font-size: 11px;
  color: var(--jp-color-text-secondary);
  max-width: 580px;
  width: 100%;
  text-align: center;
}
.audit-funil-metrica-paralela strong { color: var(--jp-color-gold-primary); }

/* Bifurcacao: 2 colunas (Atendidos | Sem atendimento) */
.audit-funil-bifurcacao {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--jp-space-2);
  width: 100%;
  max-width: 600px;
  margin: 4px auto;
}
.audit-funil-ramo {
  display: grid;
  grid-template-columns: 24px 1fr auto auto;
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid;
  border-radius: var(--jp-radius-md);
  font-size: 12px;
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.audit-funil-ramo:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.audit-badge-abandonados {
  cursor: pointer;
}
.audit-badge-abandonados:hover {
  filter: brightness(1.2);
}
.audit-funil-ramo-icone { font-size: 16px; line-height: 1; }
.audit-funil-ramo-nome { font-weight: 600; color: var(--jp-color-text-primary); }
.audit-funil-ramo-valor {
  font-weight: 700;
  font-size: 18px;
  color: var(--jp-color-gold-primary);
}
.audit-funil-ramo-pct {
  font-size: 11px;
  color: var(--jp-color-text-muted);
}
.audit-funil-ramo-atendidos {
  border-color: rgba(74, 124, 89, 0.4);
  background: rgba(74, 124, 89, 0.06);
}
.audit-funil-ramo-sem-atendimento {
  border-color: rgba(168, 66, 63, 0.4);
  background: rgba(168, 66, 63, 0.06);
}
.audit-funil-ramo-sem-atendimento .audit-funil-ramo-nome { color: #d27c79; }
.audit-funil-ramo-sem-atendimento .audit-funil-ramo-valor { color: #d27c79; }

/* Sub-badge ABANDONADOS — destaque pro caso critico */
.audit-badge-abandonados {
  grid-column: 1 / -1;
  margin-top: 6px;
  padding: 4px 8px;
  background: #a8423f;
  color: #fff;
  border-radius: var(--jp-radius-sm);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: center;
  text-transform: uppercase;
}

/* Mobile: bifurcacao vira coluna unica */
@media (max-width: 700px) {
  .audit-funil-bifurcacao { grid-template-columns: 1fr; }
  .audit-funil-oportunidades-split { grid-template-columns: 1fr; }
}

/* Oportunidades: split entre Constatadas e Potencial Oportunidade */
.audit-funil-oportunidades-wrap {
  width: 100%;
  max-width: 600px;
  margin: 4px auto;
  padding: 10px 12px;
  border: 1px solid var(--jp-color-border-default);
  border-radius: var(--jp-radius-md);
  background: var(--jp-color-bg-elevated);
}
.audit-funil-oportunidades-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px dashed var(--jp-color-border-subtle);
}
.audit-funil-oport-titulo {
  font-weight: 700;
  font-size: 13px;
  color: var(--jp-color-text-primary);
  letter-spacing: 0.02em;
}
.audit-funil-oport-total {
  font-weight: 700;
  font-size: 14px;
  color: var(--jp-color-gold-primary);
}
.audit-funil-oport-total .audit-pct-secundario {
  font-weight: 500;
  color: var(--jp-color-text-muted);
  font-size: 11px;
}
.audit-funil-oportunidades-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--jp-space-2);
}
.audit-oport-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px;
  border: 1px solid;
  border-radius: var(--jp-radius-sm);
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.audit-oport-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
.audit-oport-card-topo {
  display: flex;
  align-items: center;
  gap: 6px;
}
.audit-oport-card-icone { font-size: 14px; line-height: 1; }
.audit-oport-card-nome {
  font-size: 11px;
  font-weight: 600;
  color: var(--jp-color-text-primary);
  letter-spacing: 0.02em;
}
.audit-oport-card-valor {
  font-size: 20px;
  font-weight: 700;
  color: var(--jp-color-gold-primary);
}
.audit-oport-card-pct {
  font-size: 10px;
  color: var(--jp-color-text-muted);
}
.audit-oport-constatada {
  border-color: rgba(74, 124, 89, 0.4);
  background: rgba(74, 124, 89, 0.06);
}
.audit-oport-potencial {
  border-color: rgba(201, 168, 76, 0.4);
  background: rgba(201, 168, 76, 0.06);
}
.audit-oport-potencial .audit-oport-card-nome { color: var(--jp-color-gold-secondary); }
.audit-oport-potencial .audit-oport-card-valor { color: var(--jp-color-gold-secondary); }

/* Badge "sem atendimento" no detalhe lead a lead */
.badge-origem.audit-badge-sem-atendimento {
  background: rgba(168, 66, 63, 0.15);
  color: #d27c79;
  border-color: rgba(168, 66, 63, 0.5);
}
.badge-origem.audit-badge-abandonado-row {
  background: #a8423f;
  color: #fff;
  border-color: #a8423f;
  font-weight: 700;
}
.badge-origem.audit-badge-sem-analise {
  background: transparent;
  color: var(--jp-color-text-muted);
  border-color: var(--jp-color-border-default);
  font-style: italic;
}
.audit-row-sem-atendimento {
  background: rgba(168, 66, 63, 0.04);
}
.audit-row-abandonado {
  background: rgba(168, 66, 63, 0.1);
  border-left: 3px solid #a8423f;
}
.audit-row-abandonado.audit-row-urgente,
.audit-row-sem-atendimento.audit-row-urgente {
  background: rgba(184, 151, 42, 0.08);
}

/* Comparativo IA vs Humano lado a lado */
.audit-funil-comparado {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--jp-space-3);
}
@media (max-width: 700px) {
  .audit-funil-comparado { grid-template-columns: 1fr; }
}
.audit-funil-humano {
  border-color: var(--jp-color-gold-primary);
}
.audit-funil-humano .audit-funil-titulo {
  color: var(--jp-color-gold-primary);
}

/* Override controls na tabela de detalhe lead a lead */
.audit-override {
  height: 24px;
  padding: 0 18px 0 6px;
  font-size: 11px;
  background-position: right 6px center;
}
.audit-detalhe-hint {
  font-size: 11px;
  margin-bottom: 8px;
  font-style: italic;
}
.audit-export-link {
  font-size: 12px;
  color: var(--jp-color-gold-primary);
  text-decoration: none;
  font-weight: 500;
  margin-left: 8px;
}
.audit-export-link:hover { text-decoration: underline; }

/* Botao urgente (estrela) */
.audit-btn-urgente {
  background: transparent;
  border: 1px solid var(--jp-color-border-default);
  border-radius: var(--jp-radius-sm);
  width: 28px;
  height: 24px;
  padding: 0;
  font-size: 13px;
  cursor: pointer;
  color: var(--jp-color-text-secondary);
  line-height: 1;
}
.audit-btn-urgente:hover {
  border-color: var(--jp-color-gold-primary);
}
.audit-btn-urgente.on {
  background: rgba(184, 151, 42, 0.15);
  border-color: var(--jp-color-gold-primary);
  color: var(--jp-color-gold-primary);
}

/* Linha urgente — destaque dourado sutil */
.audit-row-urgente {
  background: rgba(184, 151, 42, 0.06);
}
.audit-row-urgente td:first-child {
  border-left: 3px solid var(--jp-color-gold-primary);
}

/* Botao ocultar — mesma forma do urgente, paleta neutra muted->cinza escuro
   quando ON (lead "fora do funil") */
.audit-btn-ocultar {
  background: transparent;
  border: 1px solid var(--jp-color-border-default);
  border-radius: var(--jp-radius-sm);
  width: 28px;
  height: 24px;
  padding: 0;
  font-size: 13px;
  cursor: pointer;
  color: var(--jp-color-text-muted);
  line-height: 1;
}
.audit-btn-ocultar:hover {
  border-color: var(--jp-color-text-secondary);
  color: var(--jp-color-text-secondary);
}
.audit-btn-ocultar.on {
  background: var(--jp-color-bg-panel);
  border-color: var(--jp-color-text-muted);
  color: var(--jp-color-text-primary);
}

/* Linha oculta — visual silenciado: opacity baixa + cinza, mostra que esta
   "neutralizado" sem sumir totalmente (usuario percebe que existe lead
   marcado pra ocultar antes do funil ser recalculado) */
.audit-row-oculto {
  opacity: 0.45;
  filter: grayscale(1);
}
.audit-row-oculto td:first-child {
  border-left: 3px dashed var(--jp-color-text-muted);
}

/* Sub-bloco "Leads ocultos" — colapsavel, mais discreto que detalhe principal */
.audit-ocultos-bloco {
  margin-top: var(--jp-space-5);
  padding: var(--jp-space-3) var(--jp-space-4);
  border: 1px dashed var(--jp-color-border-subtle);
  border-radius: var(--jp-radius-md);
  background: var(--jp-color-bg-panel);
}
.audit-ocultos-bloco summary {
  cursor: pointer;
  color: var(--jp-color-text-secondary);
}
.audit-row-oculto-bloco td {
  font-size: 12px;
  color: var(--jp-color-text-secondary);
}
.audit-btn-restaurar-oculto {
  font-size: 11px;
  padding: 4px 10px;
  background: transparent;
  border: 1px solid var(--jp-color-gold-secondary);
  color: var(--jp-color-gold-secondary);
  border-radius: var(--jp-radius-sm);
  cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}
.audit-btn-restaurar-oculto:hover {
  background: rgba(184, 151, 42, 0.1);
  color: var(--jp-color-gold-primary);
  border-color: var(--jp-color-gold-primary);
}

/* Coluna "resumo" do detalhe lead a lead.
   - Default: 1 linha truncada com ellipsis (hover mostra tooltip nativo via title)
   - Click: expande inline (texto quebra em multiplas linhas)
   - Click novamente: recolhe */
.audit-col-resumo {
  max-width: 280px;
  font-size: 11px;
  color: var(--jp-color-text-muted);
  cursor: pointer;
  vertical-align: middle;
}
.audit-col-resumo .audit-resumo-txt {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 120ms ease;
}
.audit-col-resumo.expandido {
  max-width: 320px;
  white-space: normal;
}
.audit-col-resumo.expandido .audit-resumo-txt {
  white-space: normal;
  word-wrap: break-word;
  color: var(--jp-color-text-primary);
}
.audit-col-resumo:hover .audit-resumo-txt {
  color: var(--jp-color-text-primary);
}

/* Apertar as colunas de badge/dropdown dentro da tabela detalhe lead a lead
   pra ganhar espaço lateral pro resumo. Outras tabelas (atendimentos, time
   lead) mantem padding default. */
.tabela-conversas-todas .audit-override {
  height: 22px;
  font-size: 10px;
  padding: 0 16px 0 5px;
}
.tabela-conversas-todas .badge-origem {
  padding: 1px 6px;
  font-size: 9px;
}
.audit-col-resumo + td,
.audit-col-resumo {
  padding: 4px 6px;
}


/* ---------- Relatorios Comerciais ---------- */

.modal-conteudo-grande {
  max-width: 1180px;
  width: 96vw;
  height: 92vh;
  max-height: 92vh;
}

.modal-titulo-input {
  background: transparent;
  border: 0;
  color: var(--jp-color-text-primary);
  font-family: inherit;
  font-size: var(--jp-font-size-body);
  font-weight: var(--jp-font-weight-semibold);
  width: 100%;
  padding: var(--jp-space-1) 0;
  border-bottom: 1px dashed transparent;
}
.modal-titulo-input:focus {
  outline: none;
  border-bottom-color: var(--jp-color-gold-primary);
}

.modal-meta-inline {
  font-size: 11px;
  color: var(--jp-color-text-muted);
  flex: 1;
  text-align: left;
}

.modal-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--jp-space-3);
  margin-bottom: var(--jp-space-3);
}
.modal-grid-2 label,
.modal-body > label {
  display: flex;
  flex-direction: column;
  gap: var(--jp-space-1);
  font-size: 12px;
  color: var(--jp-color-text-secondary);
  font-weight: 500;
}
.modal-grid-2 input,
.modal-body input[type=text],
.modal-body input[type=date] {
  background: var(--jp-color-bg-base);
  border: 1px solid var(--jp-color-border-default);
  color: var(--jp-color-text-primary);
  padding: 8px 12px;
  border-radius: var(--jp-radius-md);
  font-family: inherit;
  font-size: var(--jp-font-size-body-sm);
}
.modal-grid-2 input:focus,
.modal-body input:focus {
  outline: none;
  border-color: var(--jp-color-gold-primary);
  box-shadow: var(--jp-shadow-gold-focus);
}

.relatorio-preview-box {
  margin-top: var(--jp-space-3);
  padding: var(--jp-space-3);
  background: var(--jp-color-bg-base);
  border-radius: var(--jp-radius-md);
  border: 1px dashed var(--jp-color-border-default);
  font-size: 13px;
  color: var(--jp-color-text-secondary);
  min-height: 48px;
  line-height: 1.6;
}
.relatorio-preview-box strong {
  color: var(--jp-color-gold-secondary);
}

.relatorio-editor-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--jp-space-3);
  padding: var(--jp-space-3) var(--jp-space-4);
  flex: 1;
  overflow: hidden;
}
.relatorio-editor-coluna {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.relatorio-editor-label {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--jp-color-text-muted);
  font-weight: 600;
  margin-bottom: var(--jp-space-2);
}
#relatorio-edit-md {
  flex: 1;
  background: var(--jp-color-bg-base);
  border: 1px solid var(--jp-color-border-default);
  color: var(--jp-color-text-primary);
  padding: var(--jp-space-3);
  border-radius: var(--jp-radius-md);
  font-family: 'Courier New', Consolas, monospace;
  font-size: 12px;
  line-height: 1.6;
  resize: none;
  overflow-y: auto;
}
#relatorio-edit-md:focus {
  outline: none;
  border-color: var(--jp-color-gold-primary);
}
.relatorio-preview-render {
  flex: 1;
  background: var(--jp-color-bg-base);
  border: 1px solid var(--jp-color-border-subtle);
  padding: var(--jp-space-4);
  border-radius: var(--jp-radius-md);
  overflow-y: auto;
  font-size: 13px;
  line-height: 1.65;
  color: var(--jp-color-text-primary);
}
.relatorio-preview-render h1,
.relatorio-preview-render h2,
.relatorio-preview-render h3 {
  color: var(--jp-color-gold-secondary);
  margin-top: var(--jp-space-4);
  margin-bottom: var(--jp-space-2);
  font-weight: var(--jp-font-weight-semibold);
}
.relatorio-preview-render h1 { font-size: 18px; }
.relatorio-preview-render h2 { font-size: 15px; border-bottom: 1px solid var(--jp-color-border-subtle); padding-bottom: 4px; }
.relatorio-preview-render h3 { font-size: 13px; }
.relatorio-preview-render strong { color: var(--jp-color-text-primary); font-weight: 600; }
.relatorio-preview-render em { color: var(--jp-color-text-secondary); }
.relatorio-preview-render blockquote {
  border-left: 3px solid var(--jp-color-gold-primary);
  background: rgba(184,151,42,0.08);
  margin: var(--jp-space-2) 0;
  padding: var(--jp-space-2) var(--jp-space-3);
  color: var(--jp-color-text-secondary);
}
.relatorio-preview-render table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--jp-space-2) 0;
  font-size: 12px;
}
.relatorio-preview-render th,
.relatorio-preview-render td {
  border: 1px solid var(--jp-color-border-subtle);
  padding: 6px 10px;
  text-align: left;
}
.relatorio-preview-render th {
  background: rgba(184,151,42,0.10);
  color: var(--jp-color-gold-secondary);
}
.relatorio-preview-render ul,
.relatorio-preview-render ol {
  padding-left: 22px;
}
.relatorio-preview-render hr {
  border: none;
  border-top: 1px solid var(--jp-color-border-subtle);
  margin: var(--jp-space-3) 0;
}

.relatorios-lista {
  display: flex;
  flex-direction: column;
  gap: var(--jp-space-2);
}
.relatorio-card {
  background: var(--jp-color-bg-base);
  border: 1px solid var(--jp-color-border-subtle);
  border-radius: var(--jp-radius-md);
  padding: var(--jp-space-3) var(--jp-space-4);
  display: flex;
  align-items: center;
  gap: var(--jp-space-3);
  transition: border-color 0.15s;
  cursor: pointer;
}
.relatorio-card:hover {
  border-color: var(--jp-color-gold-primary);
}
.relatorio-card-corpo { flex: 1; min-width: 0; }
.relatorio-card-titulo {
  font-weight: var(--jp-font-weight-semibold);
  color: var(--jp-color-text-primary);
  font-size: var(--jp-font-size-body-sm);
  margin-bottom: var(--jp-space-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.relatorio-card-meta {
  font-size: 11px;
  color: var(--jp-color-text-muted);
  display: flex;
  gap: var(--jp-space-3);
}
.relatorio-card-meta strong { color: var(--jp-color-text-secondary); font-weight: 500; }
.relatorio-card-acoes {
  display: flex;
  gap: var(--jp-space-2);
}
.relatorio-card-acoes button {
  background: transparent;
  border: 1px solid var(--jp-color-border-default);
  color: var(--jp-color-text-secondary);
  padding: 4px 10px;
  border-radius: var(--jp-radius-sm);
  font-size: 11px;
  cursor: pointer;
}
.relatorio-card-acoes button:hover {
  border-color: var(--jp-color-gold-primary);
  color: var(--jp-color-gold-primary);
}
.relatorio-lista-vazia {
  text-align: center;
  padding: var(--jp-space-6);
  color: var(--jp-color-text-muted);
  font-size: 12px;
  font-style: italic;
}


/* Fix: atributo HTML  precisa vencer display:flex do .modal-overlay */
.modal-overlay[hidden] { display: none !important; }


/* Fix: atributo HTML hidden precisa vencer display:flex do .modal-overlay */
.modal-overlay[hidden] { display: none !important; }



/* Modal de objecao -> lista de leads */
.objecao-lead-item {
  display: flex;
  align-items: center;
  gap: var(--jp-space-3);
  padding: var(--jp-space-2) var(--jp-space-3);
  border-bottom: 1px solid var(--jp-color-border-subtle);
  font-size: 13px;
}
.objecao-lead-item:last-child { border-bottom: 0; }
.objecao-lead-corpo { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.objecao-lead-corpo strong { color: var(--jp-color-text-primary); font-weight: 600; }
.objecao-lead-tel { font-size: 11px; color: var(--jp-color-text-muted); font-family: 'Courier New', monospace; }
.objecao-lead-status {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: var(--jp-radius-sm);
  font-weight: 600;
}
.objecao-lead-status.quebrada { background: rgba(74,124,89,0.18); color: var(--jp-color-success); }
.objecao-lead-status.aberta { background: rgba(168,66,63,0.18); color: var(--jp-color-error); }
.objecao-lead-link {
  font-size: 12px;
  color: var(--jp-color-gold-primary);
  text-decoration: none;
  padding: 2px 8px;
  border: 1px solid var(--jp-color-border-default);
  border-radius: var(--jp-radius-sm);
}
.objecao-lead-link:hover { border-color: var(--jp-color-gold-primary); }



/* Diagnostico CRM x Funil */
.diagnostico-sumario {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--jp-space-2);
  margin-bottom: var(--jp-space-3);
}
.diagnostico-stat {
  background: var(--jp-color-bg-base);
  border: 1px solid var(--jp-color-border-subtle);
  border-radius: var(--jp-radius-md);
  padding: var(--jp-space-2) var(--jp-space-3);
}
.diagnostico-stat .lbl {
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--jp-color-text-muted);
  margin-bottom: 4px;
}
.diagnostico-stat .val {
  font-size: 22px;
  font-weight: 700;
  color: var(--jp-color-text-primary);
}
.diagnostico-stat.gold .val { color: var(--jp-color-gold-primary); }
.diagnostico-stat.err .val { color: var(--jp-color-error); }
.diagnostico-stat.warn .val { color: var(--jp-color-warning); }
.diagnostico-stat.ok .val { color: var(--jp-color-success); }
.diagnostico-tabela {
  background: var(--jp-color-bg-base);
  border: 1px solid var(--jp-color-border-subtle);
  border-radius: var(--jp-radius-md);
  overflow-y: auto;
  max-height: 60vh;
}
.diagnostico-tabela table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.diagnostico-tabela th, .diagnostico-tabela td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--jp-color-border-subtle);
  text-align: left;
  vertical-align: top;
}
.diagnostico-tabela th {
  background: var(--jp-color-bg-elevated);
  color: var(--jp-color-text-muted);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  position: sticky;
  top: 0;
}
.diagnostico-tabela tr.no-funil td { color: var(--jp-color-text-secondary); }
.diagnostico-tabela tr.excluido { background: rgba(168,66,63,0.05); }
.diagnostico-tabela tr.excluido td:first-child { border-left: 3px solid var(--jp-color-error); }
.diag-badge {
  display: inline-block;
  padding: 2px 6px;
  border-radius: var(--jp-radius-sm);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
}
.diag-badge.no-funil { background: rgba(74,124,89,0.18); color: var(--jp-color-success); }
.diag-badge.excluido { background: rgba(168,66,63,0.18); color: var(--jp-color-error); }
.diag-motivo { color: var(--jp-color-text-muted); font-size: 11px; max-width: 320px; }



/* Chip de origem ao lado dos titulos da Auditoria — somente leitura.
   Mesma intensidade visual do .audit-tag-ia (mais discreto). */
.audit-origem-chip {
  display: inline-block;
  background: rgba(184, 151, 42, 0.15);
  color: var(--jp-color-gold-primary);
  border: 1px solid rgba(184, 151, 42, 0.4);
  border-radius: var(--jp-radius-full, 9999px);
  padding: 1px 8px;
  margin-left: 4px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  vertical-align: middle;
}



/* Diagnostico - linhas clicaveis + icones de abrir */
.diagnostico-tabela tbody tr:hover { background: rgba(184,151,42,0.04); }
.diag-abrir, .diag-abrir-off {
  display: inline-block;
  font-size: 14px;
  padding: 0 4px;
}
.diag-abrir { color: var(--jp-color-gold-primary); }
.diag-abrir-off { color: var(--jp-color-text-muted); opacity: 0.5; }



/* Diagnostico - badges categorias */
.diag-badge.sem-conversa { background: rgba(201,168,76,0.18); color: var(--jp-color-gold-secondary); }
.diag-badge.fora-janela { background: rgba(138,138,134,0.18); color: var(--jp-color-text-muted); }
.diag-badge.oculto { background: rgba(138,138,134,0.10); color: var(--jp-color-text-muted); font-style: italic; }



/* Diagnostico - badges de origem detectada */
.diag-badge.orig-meta { background: rgba(24,119,242,0.18); color: #5a98e6; }
.diag-badge.orig-google { background: rgba(234,67,53,0.18); color: #ea7568; }
.diag-badge.orig-organico { background: rgba(74,124,89,0.18); color: var(--jp-color-success); }
.diag-badge.orig-desc { background: rgba(138,138,134,0.18); color: var(--jp-color-text-muted); font-style: italic; }
.diag-badge.orig-outras { background: rgba(201,168,76,0.10); color: var(--jp-color-text-secondary); }