:root {
  --cor-body: #F8F9FC;
  --cor-barralateral: #FFF;
  --cor-primaria: #7000F5;
  --cor-primaria-clara: #F3EAFF;
  --cor-primaria-alt: #E6E9F0;
  --cor-destaque-barra-lateral: #F7F1FF;
  --cor-ativa: #DDD;
  --text-color-primary: #121829;
  --text-color-secondary: #e5e5e5;
  --text-color: #667085;
  --text-color-terciario: #98A2B3;
  --text-color-alt: #7000F5;
  --color-alt: #8B32FF;
  --color-alt_fixed: #8B32FF;
  --cor-destaque: #fbd9d9;
  --cor-destaque-alt: #efd9fb;
  --cor-timer: #eaeff1;
  --azul-apoio: #356DF3;
  --tran-02: all 0.2s ease;
  --tran-03: all 0.3s ease;
  --tran-04: all 0.4s ease;
  --tran-05: all 0.5s ease;
  --box-shadow: 0 5px 40px rgba(24, 25, 26, 0.6);

  /* Mapeamento semântico usado pelo restante do CSS */
  --success: #08A657;
  --success-bg: #E3F7EC;
  --warning: #F59E0B;
  --warning-bg: #FEF3DD;
  --danger: #E63950;
  --radius: 14px;
  --radius-sm: 10px;
  --card-shadow: 0 1px 2px rgba(16, 24, 40, .025), 0 8px 24px rgba(16, 24, 40, .035);
  --card-shadow-hover: 0 4px 8px rgba(16, 24, 40, .04), 0 16px 32px rgba(16, 24, 40, .07);

  /* Tokens complementares usados pelo módulo de Prospecção (ver bloco no fim
     do arquivo). Aditivos — não alteram nenhum estilo já existente. */
  --cor-input-border: #E1E5EC;
  --cor-divider: #EEF0F5;
  --cor-hover-suave: #FAF7FF;

  /* Sobrescreve as variáveis do Bootstrap para usar a paleta do sistema
     (evita o azul padrão em focus rings, links, badges etc.) */
  --bs-primary: #7000F5;
  --bs-primary-rgb: 112, 0, 245;
  --bs-link-color: #7000F5;
  --bs-link-color-rgb: 112, 0, 245;
  --bs-link-hover-color: #8B32FF;
  --bs-link-hover-color-rgb: 139, 50, 255;
  --bs-focus-ring-color: rgba(112, 0, 245, .25);
}

* { box-sizing: border-box; }

/* Evita o "flash" branco entre navegações de página (MPA) */
@view-transition {
  navigation: auto;
}

html {
  background: var(--cor-body);
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background:
    radial-gradient(circle at 55% -10%, rgba(112, 0, 245, .045), transparent 38%),
    var(--cor-body);
  color: var(--text-color-primary);
  margin: 0;
}

/* Páginas de Prospecção: fundo branco puro (sem o brilho lilás do topo e sem o
   off-white acinzentado do --cor-body), pra ficar realmente branco. */
body.pagina-prospeccao { background: #FFF; }

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: .12s;
}

.app-wrapper { display: flex; min-height: 100vh; }

/* Sidebar */
.sidebar {
  width: 250px;
  background: var(--cor-barralateral);
  color: var(--text-color);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; bottom: 0; left: 0;
  z-index: 1030;
  box-shadow: 0 0 24px rgba(24, 25, 26, .06);
  transition: var(--tran-03);
}
.sidebar-brand {
  display: flex; align-items: center; gap: .6rem;
  padding: 1.6rem 1.5rem 1.75rem;
  font-weight: 700; font-size: 1.1rem;
  color: var(--text-color-primary);
  min-height: 84px;
}
.sidebar-brand img { max-height: 48px; width: auto; }
.sidebar-brand i { color: var(--cor-primaria); font-size: 1.4rem; }
.sidebar-label {
  font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .09em;
  color: var(--text-color-terciario);
  padding: .2rem 1rem .6rem;
  user-select: none;
}
.sidebar-nav { flex: 1; padding: .4rem 1rem 1rem; display: flex; flex-direction: column; gap: .35rem; }
.sidebar-nav a {
  position: relative;
  color: var(--text-color); text-decoration: none;
  padding: .8rem 1rem; border-radius: 10px;
  min-height: 46px;
  display: flex; align-items: center; gap: .75rem;
  font-size: .92rem; font-weight: 500;
  transition: var(--tran-02);
}
.sidebar-nav a i { font-size: 1.05rem; width: 1.2rem; text-align: center; }
.sidebar-nav a:hover { background: var(--cor-destaque-barra-lateral); color: var(--text-color-alt); }
.sidebar-nav a.active {
  background: linear-gradient(135deg, var(--cor-primaria) 0%, var(--color-alt) 100%);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 6px 16px rgba(112, 0, 245, .18);
}
.sidebar-footer { padding: 1rem 1rem 1.2rem; }
.user-card {
  display: flex; align-items: center; gap: .3rem;
  border-top: 1px solid var(--cor-primaria-alt);
  padding: 1.1rem .3rem .1rem .5rem;
}
.user-chip {
  display: flex; align-items: center; gap: .6rem;
  flex: 1; min-width: 0;
  border-radius: 8px;
  transition: var(--tran-02);
}
.user-info { min-width: 0; }
.user-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--cor-primaria);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; flex-shrink: 0;
}
.user-name {
  font-size: .85rem; font-weight: 600; color: var(--text-color-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.user-chip:hover .user-name { color: var(--cor-primaria); }
.user-role { font-size: .73rem; color: var(--text-color); }
.logout-btn {
  width: 32px; height: 32px; flex-shrink: 0;
  text-decoration: none;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px;
  color: var(--text-color);
  font-size: 1rem;
  transition: var(--tran-02);
}
.logout-btn:hover { background: var(--cor-destaque); color: var(--danger); }

/* Main content */
.main-content { margin-left: 250px; flex: 1; display: flex; flex-direction: column; min-width: 0; }
.topbar {
  background: transparent;
  padding: 1.3rem 2rem 0;
  min-height: 84px;
}
/* Linha fina embaixo do cabeçalho, sem tocar as bordas da tela (não é o
   border-bottom do .topbar, que iria de ponta a ponta). Margem de baixo
   propositalmente menor que o padding de cima do .topbar, pra não sobrar
   respiro maior embaixo do título do que em cima. */
.topbar-divisor {
  height: 1px;
  background: var(--cor-primaria-alt);
  margin: .85rem 2rem 0;
}
.topbar-left { display: flex; align-items: center; gap: .9rem; min-width: 0; }
.topbar-titulos { min-width: 0; }
.topbar-toggle {
  width: 36px; height: 36px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--cor-primaria-alt); border-radius: 10px;
  background: var(--cor-barralateral); color: var(--text-color-primary);
  font-size: 1.15rem;
  transition: var(--tran-02);
}
.topbar-toggle:hover { border-color: var(--cor-primaria); color: var(--cor-primaria); }
.page-title {
  font-size: 1.65rem; font-weight: 700; letter-spacing: -.02em;
  color: var(--text-color-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.page-subtitle {
  font-size: .85rem; font-weight: 400;
  margin-top: .15rem;
  color: var(--text-color-terciario);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topbar-date { text-align: right; white-space: nowrap; }
.topbar-date-dia {
  font-size: .67rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .09em;
  color: var(--text-color-terciario); line-height: 1.25;
}
.topbar-date-data {
  font-size: .87rem; font-weight: 600;
  color: var(--text-color-primary); line-height: 1.3;
}
.page-content { padding: 1.6rem; }

/* Cards */
.stat-card {
  background: var(--cor-barralateral); border-radius: var(--radius);
  padding: 1.1rem 1.3rem; border: 1px solid var(--cor-primaria-alt);
  box-shadow: var(--card-shadow);
  height: 100%;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--card-shadow-hover);
  border-color: #DADFE8;
}
.stat-card .stat-label {
  font-size: .78rem; color: var(--text-color); font-weight: 600; text-transform: uppercase; letter-spacing: .03em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-top: 1rem;
}
.stat-card .stat-value {
  font-size: clamp(1.35rem, 1.4vw + .9rem, 1.7rem); font-weight: 700; margin-top: .3rem;
  color: var(--text-color-primary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.stat-card .stat-icon {
  width: 38px; height: 38px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem; color: #fff;
}
.bg-icon-indigo { background: var(--cor-primaria); box-shadow: 0 6px 14px rgba(112, 0, 245, .22); }
.bg-icon-cyan { background: var(--azul-apoio); box-shadow: 0 6px 14px rgba(53, 109, 243, .2); }
.bg-icon-green { background: var(--success); box-shadow: 0 6px 14px rgba(8, 166, 87, .2); }
.bg-icon-orange { background: var(--warning); box-shadow: 0 6px 14px rgba(245, 158, 11, .22); }

/* Fundo decorativo bem sutil no card, na cor do próprio ícone — identificado
   pela classe de tom já usada no ícone (:has), sem precisar de atributo novo
   em cada card nem comparar o texto do título. */
.stat-card:has(.bg-icon-indigo) { background: radial-gradient(circle at 82% 12%, rgba(112, 0, 245, .06), transparent 38%), var(--cor-barralateral); }
.stat-card:has(.bg-icon-cyan) { background: radial-gradient(circle at 82% 12%, rgba(53, 109, 243, .06), transparent 38%), var(--cor-barralateral); }
.stat-card:has(.bg-icon-green) { background: radial-gradient(circle at 82% 12%, rgba(8, 166, 87, .06), transparent 38%), var(--cor-barralateral); }
.stat-card:has(.bg-icon-orange) { background: radial-gradient(circle at 82% 12%, rgba(245, 158, 11, .07), transparent 38%), var(--cor-barralateral); }

/* Central de capacidades (final do Painel da Automação IA): chip de ícone no
   cabeçalho de cada card. Reusa as cores globais .bg-icon-*, mas com dimensão
   própria porque .stat-icon só é dimensionado dentro de .stat-card. */
.ia-cap-icon {
  width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem; color: #fff;
}
.ia-capacidades-lista li { line-height: 1.4; }

.card-panel {
  background: var(--cor-barralateral); border-radius: var(--radius);
  border: 1px solid var(--cor-primaria-alt); padding: 1.2rem 1.3rem;
  box-shadow: var(--card-shadow);
}

/* Badges de status/estágio: pill, sem contraste pesado */
.badge-pill {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .32rem .7rem; border-radius: 999px;
  font-size: .74rem; font-weight: 600; line-height: 1;
  white-space: nowrap;
}
.badge-pill::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0;
}
.badge-status-pago { background: var(--success-bg); color: var(--success); }
.badge-status-apagar { background: var(--warning-bg); color: var(--warning); }

.badge-estagio-contato-inicial { background: var(--cor-primaria-alt); color: var(--text-color); }
.badge-estagio-reuniao-realizada { background: var(--cor-destaque-alt); color: var(--color-alt); }
.badge-estagio-proposta-apresentada { background: var(--cor-primaria-clara); color: var(--cor-primaria); }
.badge-estagio-aguardando-decisao { background: var(--warning-bg); color: var(--warning); }
.badge-estagio-perdido { background: var(--cor-destaque); color: var(--danger); }
.badge-estagio-ganho { background: var(--success-bg); color: var(--success); }

/* Badges de status do prospecto (módulo Prospecção) */
.badge-prospecto-nao-iniciado { background: var(--cor-primaria-alt); color: var(--text-color); }
.badge-prospecto-em-cadencia { background: var(--cor-primaria-clara); color: var(--cor-primaria); }
.badge-prospecto-respondeu { background: var(--cor-destaque-alt); color: var(--color-alt); }
.badge-prospecto-reuniao-marcada { background: var(--success-bg); color: var(--success); }
.badge-prospecto-proposta { background: var(--cor-primaria-clara); color: var(--cor-primaria); }
.badge-prospecto-convertido-em-lead { background: var(--success-bg); color: var(--success); }
.badge-prospecto-sem-interesse { background: var(--cor-destaque); color: var(--danger); }
.badge-prospecto-sem-resposta { background: var(--warning-bg); color: var(--warning); }
.badge-prospecto-numero-invalido { background: var(--cor-destaque); color: var(--danger); }
.badge-prospecto-arquivado { background: #EEF0F5; color: var(--text-color); }

.badge-prioridade-a { background: var(--warning-bg); color: var(--warning); }
.badge-prioridade-b { background: var(--cor-primaria-alt); color: var(--text-color); }

.badge-atrasado { background: var(--cor-destaque); color: var(--danger); }

/* Badge editável inline (dropdown "estilo Excel"): clica no badge, escolhe entre
   todas as opções no menu, sem precisar abrir o modal de edição completo. */
button.badge-pill.dropdown-toggle {
  border: none;
  font-family: inherit;
  cursor: pointer;
  transition: var(--tran-02);
}
button.badge-pill.dropdown-toggle:hover { filter: brightness(0.94); }
button.badge-pill.dropdown-toggle:focus,
button.badge-pill.dropdown-toggle:focus-visible,
button.badge-pill.dropdown-toggle.show {
  outline: none;
  box-shadow: none;
}
button.badge-pill.dropdown-toggle::after { margin-left: .15rem; vertical-align: .1em; }

/* Badge com uma data logo abaixo (status da comissão em Vendas: "Paga" +
   data do pagamento). O markup antigo era `.dropdown` seguido de `<br>`:
   como o .dropdown já é bloco e fecha a linha, o <br> abria uma linha vazia
   inteira e a data ficava flutuando longe do badge. */
.badge-com-data {
  display: inline-flex; flex-direction: column; align-items: flex-start;
  gap: .2rem; line-height: 1.15;
}
.badge-com-data-valor { line-height: 1.15; padding-top: 6px; }

.dropdown-menu-badges {
  min-width: 220px;
  padding: .5rem;
  margin-top: .5rem !important;
  border: 1px solid var(--cor-primaria-alt);
  border-radius: var(--radius);
  box-shadow: 0 16px 36px rgba(24, 25, 26, .16);
}
.dropdown-menu-badges li + li { margin-top: .15rem; }
.dropdown-menu-badges .badge-inline-opcao {
  border: none; background: transparent;
  padding: .5rem .6rem; border-radius: var(--radius-sm);
  display: flex; align-items: center; gap: .5rem;
  font-size: .85rem; cursor: pointer; width: 100%; text-align: left;
  transition: var(--tran-02);
}
.dropdown-menu-badges .badge-inline-opcao:hover { background: var(--cor-primaria-clara); }
.dropdown-menu-badges .badge-inline-opcao.active { background: var(--cor-primaria-clara); }
.dropdown-menu-badges .badge-inline-opcao.active::after {
  content: '\f633'; font-family: 'bootstrap-icons'; margin-left: auto; color: var(--cor-primaria); font-size: .8rem;
}

/* Dropdown dentro de tabela: .table-responsive é overflow-x/y auto (Bootstrap),
   ou seja, um contexto de RECORTE. Com poucas linhas a caixa é baixa e o menu
   do badge editável nascia cortado — a lista de estágios ficava inalcançável e
   parecia que "a mudança de status quebrou". Com muitas linhas o problema
   sumia sozinho, porque a tabela era alta o bastante.
   O JS (app.js) marca a caixa enquanto o menu está aberto; só nesse intervalo
   o recorte é suspenso, então a rolagem horizontal continua funcionando no
   resto do tempo. */
.table-responsive.dropdown-aberto { overflow: visible; }

/* Filtro de seleção múltipla na toolbar (estágios do Pipeline). */
.filtro-multi > .select-filtro {
  display: inline-flex; align-items: center; gap: .4rem;
  text-align: left; cursor: pointer;
}
.filtro-multi > .select-filtro::after { margin-left: .1rem; }
.filtro-multi.tem-selecao > .select-filtro {
  border-color: var(--cor-primaria); color: var(--cor-primaria); background: var(--cor-primaria-clara);
}
.dropdown-menu-filtro {
  min-width: 250px; max-height: 340px; overflow-y: auto;
  padding: .5rem; margin-top: .4rem !important;
  border: 1px solid var(--cor-primaria-alt); border-radius: var(--radius);
  box-shadow: 0 16px 36px rgba(24, 25, 26, .16);
}
.filtro-check {
  display: flex; align-items: center; gap: .55rem;
  padding: .4rem .5rem; border-radius: var(--radius-sm);
  cursor: pointer; transition: var(--tran-02);
}
.filtro-check:hover { background: var(--cor-hover-suave); }
.filtro-check input { width: 16px; height: 16px; accent-color: var(--cor-primaria); cursor: pointer; flex-shrink: 0; }
.filtro-multi-limpar {
  display: flex; align-items: center; gap: .4rem; width: 100%;
  margin-top: .35rem; padding: .45rem .5rem;
  border: none; border-top: 1px solid var(--cor-divider); background: transparent;
  color: var(--text-color-terciario); font-size: .8rem; cursor: pointer;
}
.filtro-multi-limpar:hover { color: var(--danger); }

/* Tabela reordenável por arrastar-e-soltar (Estágios do Pipeline). */
[data-ordenavel] tr { cursor: grab; }
[data-ordenavel] tr.arrastando { opacity: .45; background: var(--cor-primaria-clara); cursor: grabbing; }
[data-ordenavel].ordenando { opacity: .6; pointer-events: none; }
.arrastar-alca {
  color: var(--text-color-terciario); font-size: 1rem; line-height: 1;
  cursor: grab; user-select: none;
}
.arrastar-alca:hover { color: var(--cor-primaria); }
.coluna-alca { width: 34px; }

/* Seletor de cor da etiqueta do estágio: amostras clicáveis em vez de um
   campo de cor livre — a cor precisa ser escura o bastante para servir de
   TEXTO sobre a própria versão clara dela (ver estagio_badge_attrs). */
.cor-paleta { display: flex; flex-wrap: wrap; gap: .45rem; }
.cor-opcao { cursor: pointer; line-height: 0; }
.cor-opcao input { position: absolute; opacity: 0; pointer-events: none; }
.cor-opcao span {
  display: block; width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid transparent; box-shadow: inset 0 0 0 1px rgba(16, 24, 40, .08);
  transition: var(--tran-02);
}
.cor-opcao:hover span { transform: scale(1.08); }
.cor-opcao input:checked + span {
  border-color: var(--cor-barralateral);
  box-shadow: 0 0 0 2px var(--cor-primaria);
}
.cor-opcao input:focus-visible + span { box-shadow: 0 0 0 3px var(--bs-focus-ring-color); }

/* Timeline de tentativas (tela de detalhe do prospecto) */
.cadencia-timeline { display: flex; flex-direction: column; gap: 1rem; }
.cadencia-item {
  border: 1px solid var(--cor-primaria-alt); border-radius: var(--radius-sm);
  padding: 1rem 1.1rem; background: var(--cor-barralateral);
}
.cadencia-item.cadencia-atual { border-color: var(--cor-primaria); box-shadow: 0 0 0 .15rem rgba(112, 0, 245, .1); }
.cadencia-item-numero {
  width: 28px; height: 28px; border-radius: 50%; background: var(--cor-primaria-alt); color: var(--text-color);
  display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .85rem;
}
.cadencia-item.cadencia-atual .cadencia-item-numero { background: var(--cor-primaria); color: #fff; }

/* Tabelas: sem bordas pesadas, linhas discretas, mais respiro */
.table-clean { border-collapse: separate; border-spacing: 0; }
.table-clean thead th {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-color); font-weight: 700;
  border: none; border-bottom: 1px solid var(--cor-primaria-alt);
  padding: .5rem .9rem .7rem;
  background: transparent;
}
.table-clean tbody td {
  border: none; border-bottom: 1px solid var(--cor-body);
  padding: .8rem .9rem;
  vertical-align: middle;
}
/* Colunas numéricas (valores, comissão, tentativas) e de ações são alinhadas à
   direita e não devem quebrar linha — evita "R$" cair numa linha e o número na
   seguinte quando a coluna fica estreita. */
.table-clean tbody td.text-end,
.table-clean thead th.text-end { white-space: nowrap; }
.table-clean tbody tr:last-child td { border-bottom: none; }

/* Cabeçalhos ordenáveis (ordenação client-side em app.js). Estilo aplicado
   direto via CSS — sem JS — para o chevron já aparecer no primeiro paint,
   sem "tranco" de layout. Colunas com data-sort="off" ficam de fora. */
.table-clean thead th:not([data-sort='off']) { cursor: pointer; user-select: none; white-space: nowrap; transition: var(--tran-02); }
.table-clean thead th:not([data-sort='off']):hover { color: var(--cor-primaria); }
.table-clean thead th:not([data-sort='off'])::after {
  font-family: 'bootstrap-icons';
  content: '\f283'; /* bi-chevron-expand */
  font-size: .6rem;
  margin-left: .3rem;
  opacity: .4;
  display: inline-block;
}
.table-clean thead th[data-ordem] { color: var(--cor-primaria); }
.table-clean thead th[data-ordem='asc']::after { content: '\f286'; opacity: 1; } /* bi-chevron-up */
.table-clean thead th[data-ordem='desc']::after { content: '\f282'; opacity: 1; } /* bi-chevron-down */
.table-clean tbody tr { transition: var(--tran-02); }
.table-clean tbody tr:hover { background: var(--cor-primaria-clara); }

/* Hierarquia visual da tabela "Análise Mensal" (dashboard comercial): mês em
   destaque, quantidades/valores preenchidos em negrito e zeros esmaecidos. */
.dash-mes { font-weight: 600; color: var(--text-color-primary); }
.dash-num { color: var(--text-color-primary); font-variant-numeric: tabular-nums; }
.dash-valor { color: var(--text-color-primary); font-weight: 600; font-variant-numeric: tabular-nums; }
.dash-zero { color: var(--text-color-terciario); font-variant-numeric: tabular-nums; }

/* Seções recolhíveis do Pipeline ("Ganhos" e "Perdidos") — fechadas por padrão
   pra não ocupar a visão principal, que é o que está EM ABERTO: ver vários
   perdidos desanima, e os ganhos misturados inflam a leitura do que ainda dá
   trabalho. A contagem fica no cabeçalho, então nada some de vista. */
.pipeline-secao { margin-top: 1.25rem; }
.pipeline-secao > summary {
  list-style: none; cursor: pointer; user-select: none;
  display: flex; align-items: center; gap: .5rem;
  padding: .7rem 1rem; border-radius: var(--radius-sm);
  background: var(--cor-barralateral); border: 1px solid var(--cor-primaria-alt);
  color: var(--text-color); font-weight: 600; font-size: .9rem;
  transition: var(--tran-02);
}
.pipeline-secao > summary::-webkit-details-marker { display: none; }
.pipeline-secao > summary:hover { background: var(--cor-hover-suave); }
.pipeline-secao-count {
  font-size: .75rem; font-weight: 700; border-radius: 999px; padding: .1rem .5rem;
  background: var(--cor-primaria-alt); color: var(--text-color);
}
.pipeline-perdidos .pipeline-secao-count { background: var(--cor-destaque); color: var(--danger); }
.pipeline-ganhos .pipeline-secao-count { background: var(--success-bg); color: var(--success); }
.pipeline-perdidos > summary > .bi-x-circle { color: var(--danger); }
.pipeline-ganhos > summary > .bi-trophy { color: var(--success); }
.pipeline-secao-valor { font-size: .8rem; font-weight: 700; color: var(--success); font-variant-numeric: tabular-nums; }
.pipeline-secao-dica { font-size: .78rem; font-weight: 500; color: var(--text-color-terciario); }
.pipeline-secao-chevron { margin-left: auto; transition: transform .2s ease; }
.pipeline-secao[open] > summary .pipeline-secao-chevron { transform: rotate(180deg); }

/* Etiqueta de cobrança por hora (Pipeline e Vendas): o valor só existe depois
   do trabalho feito, então no lugar do número vai o motivo. */
.badge-cobranca-hora { background: #EEF1FB; color: #4353D9; }
.badge-valor-pendente { background: var(--warning-bg); color: var(--warning); }

/* Nota "por hora" logo abaixo do valor (Pipeline e Vendas). O relógio é
   acessório do texto, não um elemento à parte: fica menor que a letra e
   centrado nela. O alinhamento é por flex de propósito — o vertical-align do
   bootstrap-icons é calibrado para texto de tamanho normal e, dentro de um
   <small>, deixa o ícone pendurado acima da linha. */
.nota-hora { display: inline-flex; align-items: center; gap: .28rem; }
.nota-hora .bi { font-size: .78em; line-height: 1; }

/* Linha que esconde explicação no title (hoje: o corte da comissão por duração
   do contrato). Sem a sublinha pontilhada a dica seria invisível — ninguém
   passa o mouse por cima de um texto que não se oferece. */
.tem-dica { border-bottom: 1px dotted var(--text-color-terciario); cursor: help; }

/* Botões de ação nas linhas da tabela (Editar/Converter/Excluir etc.): quadrado
   fixo com fundo suave sempre visível (não só no hover) na cor da ação, sem a
   borda pesada do outline padrão. Tamanho fixo + nowrap evita quebrar linha
   numa coluna estreita com 2-3 ícones. */
.table-clean tbody td:last-child { white-space: nowrap; }
.table-clean tbody td .btn.btn-sm {
  width: 30px; height: 30px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: none;
  border-radius: 8px;
  box-shadow: none;
}
.table-clean tbody td .btn.btn-sm + .btn.btn-sm { margin-left: .3rem; }
/* Exceção: botão de linha COM RÓTULO (ex.: "Bloquear" na agenda, o "Salvar
   horário" dos formulários inline). A regra acima existe para os ícones da
   última coluna — sem esta, o texto fica espremido num quadrado de 30px e
   vaza por cima da célula. */
.table-clean tbody td .btn.btn-sm.btn-rotulo {
  width: auto; height: auto;
  padding: .3rem .7rem;
  gap: .35rem;
  font-size: .82rem;
}
.table-clean tbody td .btn-outline-secondary {
  --bs-btn-color: var(--text-color);
  --bs-btn-bg: var(--cor-primaria-alt);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--cor-primaria);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--cor-primaria);
}
.table-clean tbody td .btn-outline-success {
  --bs-btn-color: var(--success);
  --bs-btn-bg: var(--success-bg);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--success);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--success);
}
.table-clean tbody td .btn-outline-danger {
  --bs-btn-color: var(--danger);
  --bs-btn-bg: var(--cor-destaque);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--danger);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--danger);
}
.table-clean tbody td .btn-outline-warning {
  --bs-btn-color: var(--warning);
  --bs-btn-bg: var(--warning-bg);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--warning);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--warning);
}

table.table td, table.table th { vertical-align: middle; }

/* Barra de filtros no topo das listagens */
.toolbar {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: .75rem;
  margin-bottom: 1rem;
}
/* Filtros SEMPRE numa linha só (Pipeline, Vendas): com wrap, a busca somava
   260px aos selects de 160px e jogava o último filtro para uma segunda linha,
   deixando um buraco à direita. Agora ninguém quebra — os campos encolhem
   juntos (min-width: 0 é o que libera o encolhimento de item flex). */
.toolbar-filters {
  display: flex; gap: .6rem; flex-wrap: nowrap; align-items: center;
  flex: 1 1 auto; min-width: 0;
}
.toolbar-filters > * { min-width: 0; }
.toolbar-filters .select-filtro { min-width: 0; flex: 0 1 auto; text-overflow: ellipsis; }
/* Campo de busca ao vivo dentro da toolbar. Reaproveita a caixa .prosp-search
   da Prospecção, só ajustando a altura para alinhar com os .select-filtro. */
.toolbar-filters .prosp-search { flex: 1 1 220px; max-width: 300px; min-width: 130px; }
.toolbar-filters .prosp-search input { height: 38px; font-size: .85rem; padding: 0 2.2rem; }
/* Só em tela estreita a linha única deixa de fazer sentido (3 controles não
   cabem legíveis num celular): aí sim volta a quebrar. */
@media (max-width: 575.98px) {
  .toolbar-filters { flex-wrap: wrap; }
  .toolbar-filters .prosp-search { flex: 1 1 100%; max-width: none; }
}
/* Enquanto a resposta da busca não chega, a lupa esmaece de leve: dá sinal de
   que algo está acontecendo sem trocar o layout nem piscar a tabela. Precisa
   ser :has() — o ícone vem ANTES do input no markup, então nenhum seletor de
   irmão posterior alcançaria ele. */
.prosp-search-icon { transition: opacity .15s ease; }
.prosp-search:has(input.buscando) .prosp-search-icon { opacity: .4; }
.select-filtro {
  appearance: none; -webkit-appearance: none;
  background: var(--cor-barralateral) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23707070' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") no-repeat right .9rem center;
  border: 1px solid var(--cor-primaria-alt);
  color: var(--text-color-primary);
  border-radius: var(--radius-sm);
  padding: .5rem 2.2rem .5rem .9rem;
  font-size: .85rem; font-weight: 500;
  min-width: 160px;
  transition: var(--tran-02);
  cursor: pointer;
}
.select-filtro:hover { border-color: var(--cor-primaria); }
.select-filtro:focus {
  outline: none; border-color: var(--cor-primaria);
  box-shadow: 0 0 0 .15rem rgba(112, 0, 245, .12);
}
.select-filtro option { color: var(--text-color-primary); }

/* Popups (janelas modais do Bootstrap): usadas em todo o sistema, tanto para
   os formulários de cadastro (appModal, em includes/layout_footer.php) quanto
   para avisos pontuais como o Resumo da Prospecção. Estilo único aplicado nas
   classes padrão do Bootstrap para valer em qualquer modal novo automaticamente. */
.modal-content {
  border: none;
  border-radius: 16px;
  box-shadow: 0 16px 40px rgba(36, 35, 33, .18);
  overflow: hidden;
}
.modal-header {
  padding: 1.1rem 1.4rem;
  border-bottom: 1px solid var(--cor-primaria-alt);
}
.modal-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-color-primary);
  display: flex;
  align-items: center;
  gap: .55rem;
}
.modal-title i { color: var(--cor-primaria); font-size: 1.1rem; }
.modal-body { padding: 1.4rem; }
/* O modal-content já tem aparência de cartão (fundo branco, cantos arredondados,
   sombra) — o .card-panel de cada formulário (usado também fora do modal, na
   versão em página cheia) fica "achatado" aqui pra não duplicar borda/sombra. */
.modal-body .card-panel {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}
.modal-footer {
  padding: .9rem 1.4rem;
  border-top: 1px solid var(--cor-primaria-alt);
}
.btn-close {
  width: 1.6rem; height: 1.6rem;
  border-radius: 50%;
  opacity: .55;
  transition: var(--tran-02);
}
.btn-close:hover { opacity: 1; background-color: var(--cor-primaria-alt); }
.btn-close:focus { box-shadow: 0 0 0 .15rem rgba(112, 0, 245, .12); }

/* Lista de números em destaque dentro de um popup (ex.: Resumo da Prospecção):
   cada linha é um dado, não um parágrafo corrido — mais fácil de escanear. */
.modal-resumo-lista { display: flex; flex-direction: column; gap: .1rem; }
.modal-resumo-item {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: .7rem 0;
  border-bottom: 1px solid var(--cor-body);
}
.modal-resumo-item:last-child { border-bottom: none; }
.modal-resumo-item-label {
  display: flex; align-items: center; gap: .6rem;
  font-size: .88rem; font-weight: 500; color: var(--text-color);
}
.modal-resumo-item-label i { font-size: 1rem; width: 1.2rem; text-align: center; color: var(--cor-primaria); }
.modal-resumo-item-valor { font-size: 1.05rem; font-weight: 700; color: var(--text-color-primary); flex-shrink: 0; }
.modal-resumo-item-valor.text-danger-forte { color: var(--danger); }
.modal-resumo-nota {
  font-size: .8rem; color: var(--text-color);
  background: var(--cor-primaria-clara);
  border-radius: var(--radius-sm);
  padding: .6rem .8rem;
  margin-top: .9rem;
}

/* Barra de período do Dashboard: ano, mês e vendedor como campos com caixa
   visível (ícone de calendário à esquerda, seta à direita), compartilhados
   entre as abas Comercial e Administrativo. */
.filtro-periodo-wrap { padding: 0; }
.filtro-periodo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
}
.filtro-periodo-acoes {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .75rem;
  margin-left: auto;
}

.filtro-campo {
  appearance: none; -webkit-appearance: none;
  height: 46px;
  background-color: #fff;
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 12 8'%3E%3Cpath fill='%23667085' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  border: 1px solid #E1E5EC;
  border-radius: 12px;
  padding: 0 2.1rem 0 1rem;
  color: #273047;
  font-size: .88rem; font-weight: 600;
  cursor: pointer;
  transition: var(--tran-02);
}
.filtro-campo:hover { border-color: #CDB1FF; background-color: #FCFAFF; }
.filtro-campo:focus {
  outline: none; border-color: var(--cor-primaria);
  box-shadow: 0 0 0 3px rgba(112, 0, 245, .10);
}
.filtro-campo option { color: var(--text-color-primary); font-weight: 400; }

.filtro-privacidade {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  padding: 0;
  background: #fff;
  border: 1px solid #E1E5EC;
  border-radius: 12px;
  color: var(--cor-primaria);
  font-size: 1.05rem;
  cursor: pointer;
  transition: var(--tran-02);
}
.filtro-privacidade:hover { border-color: #CDB1FF; background-color: #FCFAFF; }
.filtro-privacidade:disabled { opacity: .55; cursor: wait; }
.filtro-privacidade:focus-visible {
  outline: none;
  border-color: var(--cor-primaria);
  box-shadow: 0 0 0 3px rgba(112, 0, 245, .10);
}
.filtro-privacidade.is-active { background: var(--cor-primaria-clara); }

.filtro-campo-ano, .filtro-campo-mes {
  width: 158px;
  padding-left: 2.6rem;
  background-position: left 14px center, right 14px center;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%238B32FF' d='M4 1a.5.5 0 0 1 .5.5V2h7v-.5a.5.5 0 0 1 1 0V2h1a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h1v-.5A.5.5 0 0 1 4 1zM2 5v8a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V5H2z'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 12 8'%3E%3Cpath fill='%23667085' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
}
.filtro-campo-vendedor {
  width: 226px;
  padding-left: 2.5rem;
  background-position: left 14px center, right 14px center;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 16 16'%3E%3Cpath fill='%238B32FF' d='M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm2 1H6a4 4 0 0 0-4 4 1 1 0 0 0 1 1h10a1 1 0 0 0 1-1 4 4 0 0 0-4-4Z'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 12 8'%3E%3Cpath fill='%23667085' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
}

@media (max-width: 767px) {
  .filtro-periodo { flex-direction: column; align-items: stretch; }
  .filtro-periodo-acoes { width: 100%; margin-left: 0; }
  .filtro-periodo-vendedor { flex: 1 1 auto; min-width: 0; }
  .filtro-campo-ano, .filtro-campo-mes, .filtro-campo-vendedor { width: 100%; }
}

/* Modo de privacidade do Dashboard. Os textos preservam moeda e pontuação
   (ex.: R$ **.***,**); gráficos são cobertos porque seu desenho revela valores. */
#dashboardDados.valores-ocultos .chart-box > * {
  visibility: hidden !important;
}
#dashboardDados.valores-ocultos .chart-box::after {
  content: 'Valores ocultos';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-color-primary);
  font-size: 1.1rem;
  font-weight: 700;
}
#dashboardDados.valores-ocultos .meta-barra-full-fill,
#dashboardDados.valores-ocultos .bonus-faixa-barra-fill { visibility: hidden !important; }

/* Abas do Dashboard (Comercial/Administrativo): a linha ativa acompanha só a
   largura do texto (::after centralizado), não a célula do link inteira. */
.dashboard-tabs { border-bottom: 1px solid var(--cor-primaria-alt); gap: 1.5rem; }
.dashboard-tabs .nav-link {
  position: relative;
  border: none;
  color: var(--text-color); font-weight: 500; font-size: .92rem;
  padding: .6rem .1rem; margin-right: 0;
  background: transparent; border-radius: 0;
  transition: var(--tran-02);
}
.dashboard-tabs .nav-link:hover { color: var(--cor-primaria); }
.dashboard-tabs .nav-link.active {
  color: var(--cor-primaria); background: transparent; font-weight: 600;
}
.dashboard-tabs .nav-link.active::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px; margin: 0 auto;
  width: 100%;
  border-radius: 999px;
  background: var(--cor-primaria);
}

/* Gráficos: altura contida, visual mais enxuto */
.chart-box { position: relative; width: 100%; }
.chart-box canvas { max-width: 100%; }
.chart-box-sm { height: 190px; }
.chart-box-md { height: 220px; }

/* Donut com legenda detalhada (nome, valor e percentual por categoria) lado
   a lado dentro do mesmo card. Sem divisor entre gráfico e legenda; as duas
   categorias da legenda é que ficam separadas por uma linha fina. */
/* Donut + legenda centralizados como um bloco único no meio do card (não
   colados nas bordas). A legenda é compacta: nome, valor e percentual ficam
   próximos, sem esticar até o canto. */
.donut-com-legenda { display: flex; align-items: center; justify-content: center; gap: 1.5rem; min-height: 160px; }
/* Donut fluido: 160px em telas comuns, encolhe até 135px em cards mais estreitos
   pra nunca espremer a legenda ao lado. */
.donut-centralizado { flex: 0 0 auto; width: clamp(135px, 42%, 160px); }
.chart-box-donut { width: 100%; aspect-ratio: 1 / 1; }
.legenda-detalhada { flex: 0 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.legenda-detalhada-item { display: flex; align-items: center; gap: .65rem; padding: .7rem 0; }
.legenda-detalhada-item + .legenda-detalhada-item { border-top: 1px solid var(--cor-primaria-alt); }
.legenda-detalhada-ponto { width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; }
/* Colunas de largura fixa para nome/valor/percentual alinharem entre as duas
   linhas, com o percentual logo ao lado do valor (não jogado na ponta). */
.legenda-detalhada-nome { font-size: .8rem; color: #475467; flex: 0 0 auto; min-width: 4.5rem; }
.legenda-detalhada-valor {
  font-size: .82rem; font-weight: 700; color: var(--text-color-primary);
  white-space: nowrap; font-variant-numeric: tabular-nums;
  flex: 0 0 auto; min-width: 5rem; text-align: right;
}
.legenda-detalhada-percentual {
  font-size: .74rem; color: var(--text-color-terciario);
  flex: 0 0 auto; min-width: 2.5rem; text-align: right;
}

@media (max-width: 420px) {
  .donut-com-legenda { flex-direction: column; align-items: stretch; }
  .donut-centralizado { align-self: center; }
}

/* Comparativo "vs mês anterior" nos cards de indicador. Só o percentual
   (.stat-comp-var) recebe cor de tendência (verde/vermelho/cinza); o texto
   "vs mês anterior" (.stat-comp-label) é sempre cinza. Cards de estado atual
   (Pipeline, Comissão Potencial) usam .stat-comp-label sozinho como nota. */
.stat-comparativo {
  font-size: .74rem; font-weight: 600; margin-top: .5rem;
  display: flex; align-items: center; gap: .3rem; min-height: 1.1rem;
}
.stat-comparativo i { font-size: .78rem; }
.stat-comp-var { display: inline-flex; align-items: center; gap: .2rem; }
.stat-comp-var.tendencia-up { color: var(--success); }
.stat-comp-var.tendencia-down { color: var(--danger); }
.stat-comp-var.tendencia-flat { color: var(--text-color-terciario); }
.stat-comp-label { color: var(--text-color-terciario); font-weight: 500; }

/* Estado vazio de um gráfico (nenhum dado no período) — nunca usado quando o
   valor real é zero, só quando não há nenhuma categoria/registro. */
.chart-empty-state {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 0 1rem; gap: .35rem;
}
.chart-empty-state i {
  width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--cor-primaria-clara); color: #B8A1DD;
  font-size: 1.2rem; margin-bottom: .3rem;
}
.chart-empty-title { font-size: .85rem; font-weight: 600; color: #475467; margin: 0; }
.chart-empty-texto { font-size: .76rem; color: var(--text-color-terciario); margin: 0; max-width: 220px; }

/* Título de seção dentro de formulários (ex.: Venda / Pagamento / Comissão) */
.form-secao {
  font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-color);
  border-bottom: 1px solid var(--cor-primaria-alt);
  padding-bottom: .45rem;
  margin: 1.5rem 0 1rem;
}

/* Formulários e botões usando a cor primária */
.form-control:focus, .form-select:focus {
  border-color: var(--cor-primaria);
  box-shadow: 0 0 0 .2rem rgba(112, 0, 245, .12);
}

/*
  O Bootstrap 5.3 define .btn-primary/.btn-outline-primary com valores de cor
  já fixos (compilados a partir do azul padrão) em variáveis locais do próprio
  componente (--bs-btn-bg, --bs-btn-hover-bg, --bs-btn-focus-shadow-rgb, etc.).
  Sobrescrever só --bs-primary/--bs-primary-rgb no :root não alcança essas
  variáveis locais — por isso o anel de foco/clique continuava azul. A forma
  correta é sobrescrever as próprias variáveis --bs-btn-* do componente.
*/
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--cor-primaria);
  --bs-btn-border-color: var(--cor-primaria);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--color-alt);
  --bs-btn-hover-border-color: var(--color-alt);
  --bs-btn-focus-shadow-rgb: 112, 0, 245;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--color-alt);
  --bs-btn-active-border-color: var(--color-alt);
  --bs-btn-disabled-bg: var(--cor-primaria);
  --bs-btn-disabled-border-color: var(--cor-primaria);
}
.btn-outline-primary {
  --bs-btn-color: var(--cor-primaria);
  --bs-btn-border-color: var(--cor-primaria);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--cor-primaria);
  --bs-btn-hover-border-color: var(--cor-primaria);
  --bs-btn-focus-shadow-rgb: 112, 0, 245;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--cor-primaria);
  --bs-btn-active-border-color: var(--cor-primaria);
}
/* Demais botões (outline-secondary/success/danger) só precisam do anel de
   foco alinhado à paleta — mantêm suas próprias cores de fundo/borda. */
.btn-outline-secondary, .btn-outline-danger, .btn-outline-success, .btn-link {
  --bs-btn-focus-shadow-rgb: 112, 0, 245;
}

a { color: var(--cor-primaria); }

.login-wrapper {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--cor-primaria), var(--color-alt));
  padding: 1rem;
}
.login-card {
  background: var(--cor-barralateral); border-radius: 16px; padding: 2.4rem;
  width: 100%; max-width: 400px; box-shadow: 0 20px 50px rgba(24, 25, 26, .25);
}
.login-brand { text-align: center; margin-bottom: 1.6rem; }
.login-brand img { max-height: 56px; width: auto; }
.login-brand i { font-size: 2.2rem; color: var(--cor-primaria); }
.login-brand h1 { font-size: 1.3rem; font-weight: 700; margin: .4rem 0 0; color: var(--text-color-primary); }

.progress { border-radius: 999px; background: var(--cor-timer); }
.progress-bar { background: var(--cor-primaria); }

/* Barra de progresso da meta, de ponta a ponta — mesmo componente usado nas
   duas abas do Dashboard (Comercial e Administrativo). */
.meta-barra-full {
  width: 100%; height: 9px;
  background: #E9EDF2;
  border-radius: 999px;
  overflow: hidden;
}
.meta-barra-full-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--cor-primaria), var(--color-alt));
  border-radius: 999px;
  transition: width .4s ease;
}

/* Cada faixa de bônus acompanha, de forma independente, o valor vendido no
   período. A barra fica propositalmente discreta para não competir com a meta
   principal do card. */
.bonus-faixas {
  display: grid;
  grid-template-columns: max-content minmax(42px, 1fr) max-content;
  align-items: center;
  gap: .45rem .55rem;
}
.bonus-faixa {
  display: contents;
}
.bonus-faixa-meta,
.bonus-faixa-valor { white-space: nowrap; }
.bonus-faixa-valor { text-align: right; }
.bonus-faixa-barra {
  position: relative;
  width: 100%;
  height: 4px;
  overflow: visible;
  background: #E9EDF2;
  border-radius: 999px;
}
.bonus-faixa-barra-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--cor-primaria), var(--color-alt));
  border-radius: inherit;
  transition: width .4s ease;
}
.bonus-faixa-selecione {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 0 .4rem;
  color: var(--text-color);
  background: var(--cor-barralateral);
  font-size: 8px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .18em;
  white-space: nowrap;
}

/* Card "Progresso da Meta do Mês": conteúdo à esquerda e o troféu numa coluna
   própria à direita. A luz NÃO é um círculo atrás do troféu — é um brilho que
   nasce no canto inferior direito do card e sobe/espalha até ~45% dele. */
.meta-card { position: relative; overflow: hidden; }
.meta-card::after {
  content: '';
  position: absolute;
  right: 0; bottom: 0;
  width: 50%; height: 88%;
  background: radial-gradient(ellipse at bottom right,
    rgba(112, 0, 245, .26) 0%, rgba(139, 50, 255, .11) 44%, transparent 76%);
  z-index: 0;
  pointer-events: none;
}
.meta-card-body { display: flex; align-items: center; gap: .75rem; position: relative; z-index: 1; }
/* Textos ocupam ~65% do card (crescem, sem encolher abaixo do próprio conteúdo,
   pra a linha "fechado / Meta" nunca quebrar). Fonte no tamanho normal. */
.meta-card-conteudo { flex: 1 0 auto; min-width: 0; }
/* Cada linha "rótulo … valor" mantém um espaço mínimo entre as duas colunas,
   pra nunca colarem quando o bloco encolhe ao tamanho do conteúdo. */
.meta-card-conteudo .justify-content-between { gap: 1.25rem; }
/* Troféu ~35% do card, encostado à direita (não centralizado numa área larga,
   que deixava um vão à esquerda dele). Encolhe nas telas mais estreitas para não
   forçar o texto a quebrar. Imagem limitada a 190px, alinhada à direita. */
.meta-card-trofeu {
  flex: 0 1 35%;
  min-width: 0;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.meta-card-trofeu img {
  width: 100%;
  max-width: 190px;
  filter: drop-shadow(0 14px 22px rgba(112, 0, 245, .32));
}
/* Faixa de larguras onde o card fica estreito demais (col-lg-5 entre 992 e
   1199px): esconde o troféu para o texto respirar. */
@media (min-width: 992px) and (max-width: 1199px) {
  .meta-card-trofeu { display: none; }
  .meta-card::after { display: none; }
  .meta-card-conteudo { flex: 1 1 auto; } /* sem troféu, o texto pode encolher/ocupar tudo */
}
@media (max-width: 479px) {
  .meta-card-trofeu { display: none; }
  .meta-card::after { display: none; }
}

@media (max-width: 991px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.show { transform: translateX(0); }
  .main-content { margin-left: 0; }
}

/* Entrada suave dos cards do Dashboard — aplicada via JS (ver dashboard.js)
   uma única vez no primeiro carregamento da página, nunca a cada troca de
   filtro/aba (só o toggle de .pagina-carregada no <body> revela os elementos
   já marcados com .entra-suave). */
.entra-suave {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .4s cubic-bezier(.22, 1, .36, 1), transform .4s cubic-bezier(.22, 1, .36, 1);
}
.pagina-carregada .entra-suave { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Skeleton leve enquanto o 1º fetch do Dashboard não retorna (ver .carregando
   no container principal, removida assim que os dados chegam). */
.carregando .stat-value, .carregando .chart-box canvas {
  position: relative;
  color: transparent !important;
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, #EEF0F5 25%, #F7F8FA 50%, #EEF0F5 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}
@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ============================================================================
   MÓDULO PROSPECÇÃO — componentes visuais compartilhados
   Bloco 100% aditivo. Reaproveita o design system já definido acima
   (.card-panel, .stat-card, .badge-pill, .table-clean, .meta-barra-full,
   .select-filtro, .dashboard-tabs, .btn-primary) e só acrescenta o que é
   específico das telas Hoje / Prospectos / Dashboard / Importações /
   Ausências / Configurações. Nenhuma regra anterior é modificada.
   ============================================================================ */

/* Entrada suave — CSS puro, roda uma vez por navegação (MPA). Diferente do
   dashboard raiz, que usa .entra-suave + .pagina-carregada via dashboard.js;
   aqui não há JS. Aplicada só a blocos/containers, nunca a linhas de tabela. */
@keyframes prospEntra {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.prosp-enter { animation: prospEntra .45s cubic-bezier(.22, 1, .36, 1) both; }
.prosp-stagger > * { animation: prospEntra .45s cubic-bezier(.22, 1, .36, 1) both; }
.prosp-stagger > *:nth-child(1)  { animation-delay: .02s; }
.prosp-stagger > *:nth-child(2)  { animation-delay: .06s; }
.prosp-stagger > *:nth-child(3)  { animation-delay: .10s; }
.prosp-stagger > *:nth-child(4)  { animation-delay: .14s; }
.prosp-stagger > *:nth-child(5)  { animation-delay: .18s; }
.prosp-stagger > *:nth-child(6)  { animation-delay: .22s; }
.prosp-stagger > *:nth-child(7)  { animation-delay: .26s; }
.prosp-stagger > *:nth-child(8)  { animation-delay: .30s; }
.prosp-stagger > *:nth-child(9)  { animation-delay: .34s; }
.prosp-stagger > *:nth-child(10) { animation-delay: .38s; }
.prosp-stagger > *:nth-child(n+11) { animation-delay: .40s; }

/* Navegação interna do módulo: rola na horizontal no mobile em vez de quebrar. */
.prosp-subnav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.prosp-subnav::-webkit-scrollbar { display: none; }
.prosp-subnav .nav-link { white-space: nowrap; display: inline-flex; align-items: center; gap: .4rem; }

/* Cabeçalho de seção (título + contador + ação à direita) */
.prosp-section-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem;
}
.prosp-section-title {
  font-size: 1.02rem; font-weight: 700; color: var(--text-color-primary);
  margin: 0; display: flex; align-items: center; gap: .5rem;
}
.prosp-section-sub { font-size: .82rem; color: var(--text-color-terciario); margin: .15rem 0 0; }

.prosp-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.4rem; height: 1.4rem; padding: 0 .45rem; border-radius: 999px;
  background: var(--cor-primaria-clara); color: var(--cor-primaria);
  font-size: .75rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.prosp-count-neutro { background: #EEF0F5; color: var(--text-color); }
.prosp-count-danger { background: var(--cor-destaque); color: var(--danger); }
.prosp-count-warning { background: var(--warning-bg); color: var(--warning); }

/* Ícone do cabeçalho de um card (fundo suave + ícone colorido) */
.prosp-card-head { display: flex; align-items: center; gap: .65rem; margin-bottom: 1rem; }
.prosp-card-head .prosp-card-titulo { font-size: .95rem; font-weight: 700; color: var(--text-color-primary); margin: 0; flex: 1 1 auto; }
.prosp-card-icon {
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center; font-size: 1rem;
}
.prosp-icon-purple  { background: var(--cor-primaria-clara); color: var(--cor-primaria); }
.prosp-icon-blue    { background: #EAF2FF; color: var(--azul-apoio); }
.prosp-icon-green   { background: var(--success-bg); color: var(--success); }
.prosp-icon-orange  { background: var(--warning-bg); color: var(--warning); }
.prosp-icon-red     { background: var(--cor-destaque); color: var(--danger); }
.prosp-icon-neutral { background: #EEF0F5; color: var(--text-color); }

/* Cores de texto semânticas (tabular pra números) */
.prosp-text-success { color: var(--success); }
.prosp-text-danger  { color: var(--danger); }
.prosp-text-warning { color: var(--warning); }
.prosp-text-muted   { color: var(--text-color-terciario); }
.prosp-num { font-variant-numeric: tabular-nums; }

/* --- Botão CTA em degradê (usado só nas ações-herói, ex.: "Começar rotina") --- */
.btn-cta {
  /* Alimenta as próprias variáveis do Bootstrap para que TODOS os estados do .btn
     (:hover, :focus, :active, :first-child:active) mantenham o texto branco. Sem
     isso o Bootstrap cai na cor escura padrão do .btn base nos estados de clique/foco
     (regras de especificidade maior), deixando o texto preto ao clicar. */
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;
  --bs-btn-disabled-color: #fff;
  background: linear-gradient(135deg, var(--cor-primaria), var(--color-alt));
  color: #fff; border: none; font-weight: 600;
  box-shadow: 0 6px 16px rgba(112, 0, 245, .18);
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.btn-cta:hover,
.btn-cta:focus,
.btn-cta:active,
.btn-cta:focus-visible,
.btn-cta:first-child:active { color: #fff; }
.btn-cta:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(112, 0, 245, .24); filter: brightness(1.03); }
.btn-cta:active { transform: translateY(0); }
.btn-cta:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(112, 0, 245, .25); }

/* --- Meta diária (tela Hoje) --- */
.prosp-meta { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .6rem 1.4rem; }
.prosp-meta-info { flex: 1 1 240px; min-width: 0; }
.prosp-meta-eyebrow {
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-color); display: flex; align-items: center; gap: .4rem;
}
.prosp-meta-value {
  font-size: 1.9rem; font-weight: 700; color: var(--text-color-primary);
  font-variant-numeric: tabular-nums; line-height: 1.15; margin-top: .3rem;
}
.prosp-meta-value small { font-size: .9rem; font-weight: 600; color: var(--text-color); }
.prosp-meta-sub { font-size: .82rem; color: var(--text-color-terciario); margin-top: .1rem; }
.prosp-meta-pct { flex: 0 0 auto; text-align: right; }
.prosp-meta-pct-num { font-size: 1.7rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; }
.prosp-meta-pct small { display: block; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-color-terciario); margin-top: .2rem; }
.prosp-meta-bar-wrap { flex: 1 1 100%; }
.prosp-meta-msg { font-size: .85rem; margin-top: .25rem; display: flex; align-items: center; gap: .4rem; }
.prosp-meta-actions { flex: 1 1 100%; display: flex; margin-top: .2rem; }
.meta-barra-full-fill.is-sucesso { background: linear-gradient(90deg, var(--success), #35C978); }

/* --- Fila de trabalho / listas (Hoje) --- */
.prosp-list { display: flex; flex-direction: column; }
.prosp-list-item {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  min-height: 56px; padding: .6rem; border-radius: 8px;
  border-bottom: 1px solid var(--cor-divider);
  text-decoration: none; color: inherit;
  transition: background .16s ease;
}
.prosp-list-item:last-child { border-bottom: none; }
.prosp-list-item:hover { background: var(--cor-hover-suave); }
/* Itens de "Respostas e oportunidades": separados como pequenos cards (sem o
   divisor colado; espaço entre eles e um leve fundo). */
.prosp-list-item--accent {
  border-left: 3px solid var(--cor-primaria);
  padding-left: .75rem;
  border-bottom: none;
  background: var(--cor-hover-suave);
  margin-bottom: .5rem;
}
.prosp-list-item--accent:last-child { margin-bottom: 0; }
.prosp-list-item--accent:hover { background: var(--cor-primaria-clara); }
/* Linha que combina o link do prospecto com um botão de ação rápida ao lado
   (ex.: "Sem interesse" na lista de Respostas aguardando ação). */
.prosp-list-row { display: flex; align-items: center; gap: .5rem; }
.prosp-list-row.prosp-list-item--accent { padding: .1rem .6rem .1rem .75rem; border-radius: 8px; }
.prosp-list-row .prosp-list-item { flex: 1 1 auto; min-width: 0; border-bottom: none; background: transparent; }
.prosp-list-row .prosp-list-item:hover { background: transparent; }
.prosp-list-row.prosp-list-item--accent:hover { background: var(--cor-primaria-clara); }
.prosp-quick-desinteresse { white-space: nowrap; }
.prosp-list-main { min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.prosp-list-name {
  font-size: .9rem; font-weight: 600; color: var(--text-color-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.prosp-list-item:hover .prosp-list-name { color: var(--cor-primaria); }
.prosp-list-sub { font-size: .78rem; color: var(--text-color-terciario); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prosp-list-meta { flex: 0 0 auto; display: flex; align-items: center; gap: .55rem; }
.prosp-list-tent { font-size: .78rem; color: var(--text-color); white-space: nowrap; font-variant-numeric: tabular-nums; }
.prosp-list-more {
  display: inline-flex; align-items: center; gap: .35rem; margin-top: .75rem;
  font-size: .82rem; font-weight: 600; color: var(--cor-primaria); text-decoration: none;
}
.prosp-list-more:hover { color: var(--color-alt); text-decoration: underline; }

/* --- Estado vazio compartilhado --- */
.prosp-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .3rem; padding: 1.4rem 1rem; }
.prosp-empty-icon {
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #F7F1FF; color: #B8A1DD; font-size: 1.2rem; margin-bottom: .2rem;
}
.prosp-empty-icon.is-ok { background: var(--success-bg); color: var(--success); }
.prosp-empty-title { font-size: .9rem; font-weight: 600; color: #475467; margin: 0; }
.prosp-empty-text { font-size: .8rem; color: var(--text-color-terciario); margin: 0; max-width: 300px; }
.prosp-empty--sm { padding: .9rem 1rem; }
.prosp-empty--sm .prosp-empty-icon { width: 36px; height: 36px; font-size: 1rem; }

/* --- Toolbar / busca / filtros (Prospectos) --- */
.prosp-toolbar { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: 1rem; }
.prosp-toolbar-spacer { flex: 1 1 auto; }

.prosp-search { position: relative; flex: 1 1 320px; max-width: 420px; }
.prosp-search-icon { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); color: var(--text-color-terciario); pointer-events: none; font-size: .95rem; }
.prosp-search input {
  width: 100%; height: 42px; padding: 0 2.4rem;
  border: 1px solid var(--cor-input-border); border-radius: 10px;
  background: #fff; color: #344054; font-size: .9rem; transition: var(--tran-02);
}
.prosp-search input::placeholder { color: var(--text-color-terciario); }
.prosp-search input:hover { border-color: #CDB1FF; }
.prosp-search input:focus { outline: none; border-color: var(--color-alt); box-shadow: 0 0 0 3px rgba(112, 0, 245, .10); }
.prosp-search-clear {
  position: absolute; right: .5rem; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; border: none; background: transparent; cursor: pointer;
  border-radius: 6px; color: var(--text-color-terciario);
  display: flex; align-items: center; justify-content: center;
}
.prosp-search-clear:hover { background: var(--cor-primaria-alt); color: var(--text-color-primary); }

.prosp-filters { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin-bottom: 1rem; }

/* Barra de topo agrupada num card branco (busca + botão Filtros + ações),
   pra a página não ficar só sobre o fundo lilás. */
.prosp-toolbar-card { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: 1rem; }
.prosp-toolbar-periodo { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; }
/* Intervalo de datas na direita da toolbar do Dashboard de prospecção — filtra
   direto (fora do popup de filtros). */
.prosp-datas { display: inline-flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.prosp-datas .select-filtro { min-width: 0; }
.prosp-datas-sep { color: var(--text-color-terciario); }

/* Botão "Filtros" que abre o popup, com contador de filtros ativos */
.btn-filtros {
  display: inline-flex; align-items: center; gap: .5rem;
  border: 1px solid var(--cor-primaria-alt); background: var(--cor-barralateral);
  color: var(--text-color-primary); font-weight: 600; font-size: .85rem;
  border-radius: var(--radius-sm); padding: .5rem .9rem; cursor: pointer;
  transition: var(--tran-02); white-space: nowrap;
}
.btn-filtros:hover { border-color: var(--cor-primaria); color: var(--cor-primaria); }
.btn-filtros i { font-size: .95rem; }
.btn-filtros-badge {
  background: var(--cor-primaria); color: #fff; font-size: .7rem; font-weight: 700;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
}

/* Grade de campos dentro do popup de filtros */
.filtros-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.1rem; }
.filtros-campo { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.filtros-campo > label { font-size: .78rem; font-weight: 600; color: var(--text-color); }
.filtros-campo .select-filtro,
.filtros-campo input.select-filtro { width: 100%; min-width: 0; }
@media (max-width: 575px) { .filtros-grid { grid-template-columns: 1fr; } }

/* Chips de filtros ativos */
.prosp-chips { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: 1rem; }
.prosp-chip {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .35rem .35rem .35rem .65rem; border-radius: 999px;
  background: var(--cor-primaria-clara); color: var(--cor-primaria);
  font-size: .76rem; font-weight: 600; line-height: 1;
}
.prosp-chip-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%; color: inherit; text-decoration: none;
  opacity: .75; transition: var(--tran-02); font-size: .7rem;
}
.prosp-chip-x:hover { opacity: 1; background: rgba(112, 0, 245, .12); color: var(--cor-primaria); }
.prosp-chip-clear { font-size: .78rem; font-weight: 600; color: var(--text-color); text-decoration: none; padding: .2rem .4rem; }
.prosp-chip-clear:hover { color: var(--danger); }

/* Contador de resultados */
.prosp-results { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .75rem; }
.prosp-results-count { font-size: .85rem; color: var(--text-color); font-weight: 500; }
.prosp-results-count strong { color: var(--text-color-primary); font-weight: 700; font-variant-numeric: tabular-nums; }

/* --- Células da tabela de prospectos --- */
a.prosp-empresa-link { color: var(--text-color-primary); font-weight: 600; text-decoration: none; }
a.prosp-empresa-link:hover { color: var(--cor-primaria); }
.prosp-cell-sub { display: block; font-size: .74rem; color: var(--text-color-terciario); font-weight: 400; margin-top: .05rem; }
/* Telefone com figuras proporcionais (não tabulares) pra ficar "juntinho" como
   texto normal — tabular-nums deixava cada dígito com a mesma largura, dando um
   aspecto esparramado. */
.prosp-cell-contato { white-space: nowrap; color: #344054; display: inline-flex; align-items: center; gap: .4rem; font-variant-numeric: proportional-nums; }
.prosp-cell-contato i { color: var(--success); }
.prosp-cell-origem { max-width: 180px; }
.prosp-origem-label { font-size: .82rem; color: var(--text-color); }
.prosp-origem-arquivo { display: block; font-size: .72rem; color: var(--text-color-terciario); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
.prosp-data-atraso { color: var(--danger); font-weight: 600; white-space: nowrap; }
.prosp-data-hoje { color: var(--warning); font-weight: 600; white-space: nowrap; }

/* Badge de prioridade com rótulo semântico + ponto (reaproveita .badge-pill) */

/* --- Lista em cards (mobile) --- */
.prosp-mobile-list { display: none; flex-direction: column; gap: .75rem; }
.prosp-mcard { border: 1px solid var(--cor-primaria-alt); border-radius: 12px; padding: 1rem; background: #fff; box-shadow: var(--card-shadow); }
.prosp-mcard-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; }
.prosp-mcard-name { font-weight: 600; color: var(--text-color-primary); text-decoration: none; }
.prosp-mcard-name:hover { color: var(--cor-primaria); }
.prosp-mcard-sub { font-size: .78rem; color: var(--text-color-terciario); margin-top: .1rem; }
.prosp-mcard-grid { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; margin-top: .75rem; }
.prosp-mcard-field { min-width: 0; }
.prosp-mcard-label { display: block; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--text-color-terciario); margin-bottom: .15rem; }
.prosp-mcard-value { font-size: .85rem; color: #344054; }
.prosp-mcard-actions { display: flex; gap: .4rem; margin-top: .9rem; }
.prosp-mcard-actions .btn { flex: 0 0 auto; }

/* --- Badges de status de importação --- */
.badge-import-concluido  { background: var(--success-bg); color: var(--success); }
.badge-import-processando { background: #EAF2FF; color: var(--azul-apoio); }
.badge-import-erros      { background: var(--warning-bg); color: var(--warning); }
.badge-import-falhou     { background: var(--cor-destaque); color: var(--danger); }

/* --- Tons de ícone extras para os cards do Dashboard --- */
.bg-icon-neutral { background: #98A2B3; box-shadow: 0 6px 14px rgba(152, 162, 179, .22); }
.bg-icon-red { background: var(--danger); box-shadow: 0 6px 14px rgba(230, 57, 80, .2); }
.stat-card:has(.bg-icon-neutral) { background: radial-gradient(circle at 82% 12%, rgba(152, 162, 179, .06), transparent 38%), var(--cor-barralateral); }
.stat-card:has(.bg-icon-red) { background: radial-gradient(circle at 82% 12%, rgba(230, 57, 80, .06), transparent 38%), var(--cor-barralateral); }

/* Contexto abaixo do valor de um card (ex.: "10 respostas de 79 prospectos") */
.prosp-metric-context { font-size: .74rem; color: var(--text-color-terciario); margin-top: .35rem; min-height: 1rem; }

/* Card de métrica compacto (seção "Saúde da operação") */
.stat-card.prosp-metric-sm { padding: .95rem 1rem; }
.stat-card.prosp-metric-sm .stat-label { margin-top: .7rem; }

/* Mini-barra de proporção nas tabelas de desempenho do Dashboard */
.prosp-bar { height: 6px; min-width: 54px; border-radius: 999px; background: var(--cor-primaria-clara); overflow: hidden; }
.prosp-bar > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--cor-primaria), var(--color-alt)); }

/* --- Descrição de seção nas Configurações --- */
.prosp-settings-desc { font-size: .82rem; color: var(--text-color-terciario); margin: -.15rem 0 1rem; }

/* --- Paginação alinhada à paleta (vale pra todas as listagens) --- */
.pagination {
  --bs-pagination-color: var(--text-color);
  --bs-pagination-border-color: var(--cor-input-border);
  --bs-pagination-border-radius: 8px;
  --bs-pagination-hover-color: var(--cor-primaria);
  --bs-pagination-hover-bg: var(--cor-primaria-clara);
  --bs-pagination-hover-border-color: var(--cor-primaria-alt);
  --bs-pagination-focus-color: var(--cor-primaria);
  --bs-pagination-focus-box-shadow: 0 0 0 .2rem rgba(112, 0, 245, .15);
  --bs-pagination-active-bg: var(--cor-primaria);
  --bs-pagination-active-border-color: var(--cor-primaria);
}

/* Alterna tabela (desktop) e cards (mobile) na lista de prospectos */
@media (max-width: 991px) {
  .prosp-table-desktop { display: none; }
  .prosp-mobile-list { display: flex; }
}

/* --- Automação IA: faixa de estado no card de controle de emergência --- */
.ia-estado-banner {
  display: flex; align-items: center; gap: .7rem;
  padding: .7rem .9rem; border-radius: 12px;
}
.ia-estado-banner i { font-size: 1.35rem; line-height: 1; }
.ia-estado-success { background: var(--success-bg); color: var(--success); }
.ia-estado-danger { background: #FDE7EA; color: var(--danger); }
.ia-estado-secondary { background: var(--cor-primaria-alt); color: var(--text-color); }

/* --- Automação IA: cards de instância do WhatsApp --- */
.min-w-0 { min-width: 0; }
.ia-inst-card {
  border: 1px solid var(--cor-primaria-alt); border-radius: var(--radius);
  padding: 1rem 1.1rem; height: 100%;
  background: var(--cor-barralateral);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.ia-inst-card:hover { border-color: #DADFE8; box-shadow: var(--card-shadow); }
.ia-inst-inativa { opacity: .68; }
.ia-inst-status {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .28rem .6rem; border-radius: 999px;
  font-size: .72rem; font-weight: 600; white-space: nowrap; flex-shrink: 0;
}
.ia-inst-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.ia-inst-status.text-bg-success .ia-inst-dot { animation: ia-pulse 1.6s ease-in-out infinite; }
@keyframes ia-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.ia-inst-meta > div { display: flex; align-items: center; gap: .4rem; line-height: 1.7; }
.ia-inst-status-icon {
  width: 54px; height: 54px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 1.8rem;
}
@media (prefers-reduced-motion: reduce) { .ia-inst-status.text-bg-success .ia-inst-dot { animation: none; } }

/* --- Automação IA: transcript da conversa --- */
.ia-bolha-row { display: flex; }
.ia-bolha-row.ia-bolha-in { justify-content: flex-start; }
.ia-bolha-row.ia-bolha-out { justify-content: flex-end; }
.ia-bolha { max-width: 80%; border-radius: 14px; padding: .5rem .75rem .35rem; box-shadow: 0 1px 1px rgba(16, 24, 40, .05); }
.ia-bolha-user { background: #fff; border: 1px solid #E6E9F0; border-bottom-left-radius: 4px; }
.ia-bolha-ia { background: #E7F9EF; border: 1px solid #C9EED9; border-bottom-right-radius: 4px; }
.ia-bolha-admin { background: #EAF0FF; border: 1px solid #D3E0FF; border-bottom-right-radius: 4px; }
.ia-bolha-topo { font-size: .66rem; font-weight: 700; color: var(--text-color-terciario); margin-bottom: .12rem; text-transform: uppercase; letter-spacing: .03em; }
.ia-bolha-texto { font-size: .9rem; color: var(--text-color-primary); white-space: pre-wrap; word-break: break-word; line-height: 1.42; }
.ia-bolha-hora { font-size: .64rem; color: var(--text-color-terciario); text-align: right; margin-top: .15rem; }
.ia-bolha-check-lida { color: #34B7F1; }
.ia-bolha-erro { font-size: .7rem; color: var(--danger); margin-top: .2rem; }

/* Mídia recebida dentro da bolha: ver a foto e ouvir o áudio sem sair daqui */
.ia-midia-foto { display: block; margin-bottom: .35rem; }
.ia-midia-foto img {
  display: block; max-width: 100%; max-height: 320px;
  border-radius: 10px; object-fit: cover;
}
/* O player nativo é largo demais para a bolha; 260px cabe sem espremer os controles. */
.ia-midia-audio { display: block; width: 100%; min-width: 260px; max-width: 320px; height: 38px; margin-bottom: .35rem; }
.ia-midia-video { display: block; max-width: 100%; max-height: 320px; border-radius: 10px; margin-bottom: .35rem; }
.ia-midia-arquivo {
  display: flex; align-items: center; gap: .45rem; margin-bottom: .35rem;
  padding: .45rem .6rem; border-radius: 10px; text-decoration: none;
  background: rgba(16, 24, 40, .04); border: 1px solid rgba(16, 24, 40, .08);
  color: var(--text-color-primary); font-size: .82rem;
}
.ia-midia-arquivo:hover { background: rgba(16, 24, 40, .07); }
.ia-midia-arquivo span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ia-midia-arquivo small { margin-left: auto; color: var(--text-color-terciario); font-size: .7rem; white-space: nowrap; }
.ia-midia-aviso { font-size: .72rem; color: var(--text-color-terciario); margin-bottom: .3rem; }

/* Evento (ferramenta da IA / sistema): linha central, não é bolha */
.ia-evento { display: flex; align-items: center; gap: .6rem; margin: .2rem 0; }
.ia-evento-linha { flex: 1; height: 1px; background: var(--cor-primaria-alt); }
.ia-evento-chip {
  font-size: .71rem; color: var(--text-color-terciario);
  background: var(--cor-barralateral); border: 1px solid var(--cor-primaria-alt);
  border-radius: 999px; padding: .18rem .7rem; white-space: nowrap; text-align: center;
}
.ia-evento-chip i { color: var(--cor-primaria); margin-right: .15rem; }

/* --- Automação IA: painel de ações da conversa --- */
.ia-acoes-grupo-label { font-size: .66rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-color-terciario); font-weight: 700; margin: .9rem 0 .45rem; }
.ia-acoes-grupo-label:first-of-type { margin-top: 0; }
.ia-acoes-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; }
.ia-acao-btn {
  display: flex; align-items: center; gap: .45rem; justify-content: flex-start;
  width: 100%; padding: .5rem .65rem; border: 1px solid var(--cor-primaria-alt);
  border-radius: 10px; background: var(--cor-barralateral);
  font-size: .82rem; font-weight: 500; color: var(--text-color-primary);
  cursor: pointer; transition: all .15s ease; text-align: left; line-height: 1.2;
}
.ia-acao-btn:hover { border-color: var(--cor-primaria); color: var(--cor-primaria); background: var(--cor-primaria-clara); }
.ia-acao-btn:disabled { opacity: .55; cursor: default; }
.ia-acao-btn i { font-size: .95rem; flex-shrink: 0; }
.ia-acao-btn.full { grid-column: 1 / -1; }
.ia-acao-btn.is-danger { color: var(--danger); }
.ia-acao-btn.is-danger:hover { border-color: var(--danger); background: #FDE7EA; color: var(--danger); }

/* --- Automação IA: cards da fila de aprovação --- */
.ia-aprov-card {
  border: 1px solid var(--cor-primaria-alt); border-radius: var(--radius);
  background: var(--cor-barralateral); padding: 1.1rem 1.2rem; height: 100%;
  box-shadow: var(--card-shadow); display: flex; flex-direction: column;
}
.ia-aprov-head { display: flex; justify-content: space-between; align-items: flex-start; gap: .75rem; margin-bottom: .55rem; }
.ia-aprov-empresa { font-weight: 700; font-size: 1rem; color: var(--text-color-primary); }
.ia-aprov-meta { display: flex; flex-wrap: wrap; gap: .35rem .9rem; font-size: .76rem; color: var(--text-color-terciario); margin-bottom: .7rem; }
.ia-aprov-motivo { font-size: .8rem; color: var(--text-color); background: var(--cor-primaria-clara); border-radius: 10px; padding: .55rem .7rem; margin-bottom: .6rem; }
.ia-aprov-alerta { font-size: .78rem; color: #9A6700; background: var(--warning-bg); border-radius: 10px; padding: .5rem .7rem; margin-bottom: .6rem; }
.ia-aprov-msg-wrap { margin-bottom: .8rem; }
.ia-aprov-label { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--text-color-terciario); }
.ia-aprov-bolha {
  background: #E7F9EF; border: 1px solid #C9EED9; border-radius: 12px; border-bottom-right-radius: 4px;
  padding: .65rem .8rem; font-size: .9rem; line-height: 1.45; color: var(--text-color-primary);
  white-space: pre-wrap; word-break: break-word;
}
.ia-aprov-acoes { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-top: auto; padding-top: .3rem; }
.ia-aprov-acoes-sep { flex: 1 1 auto; }

/* --- Automação IA: caixa de resposta manual (estilo chat) --- */
.ia-composer {
  display: flex; align-items: flex-end; gap: .5rem;
  border: 1px solid var(--cor-input-border); border-radius: 16px;
  padding: .35rem .35rem .35rem .9rem; background: var(--cor-barralateral);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.ia-composer:focus-within { border-color: var(--cor-primaria); box-shadow: 0 0 0 3px rgba(112, 0, 245, .1); }
.ia-composer-input {
  flex: 1; border: none; background: transparent; resize: none; outline: none;
  font-size: .9rem; line-height: 1.4; padding: .5rem 0; max-height: 140px;
  color: var(--text-color-primary); font-family: inherit;
}
.ia-composer-input::placeholder { color: var(--text-color-terciario); }
.ia-composer-send {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; border: none;
  background: var(--cor-primaria); color: #fff; font-size: 1rem;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background .15s ease, transform .1s ease;
}
.ia-composer-send:hover { background: var(--color-alt); }
.ia-composer-send:active { transform: scale(.94); }

/* --- Automação IA: seleção de provedor de IA --- */
.ia-prov-opcao {
  display: block; width: 100%; cursor: pointer; text-align: center;
  border: 1.5px solid var(--cor-primaria-alt); border-radius: 12px;
  padding: .7rem .5rem; transition: border-color .15s ease, background .15s ease;
}
.ia-prov-opcao:hover { border-color: var(--cor-primaria); }
.ia-prov-opcao.is-ativo { border-color: var(--cor-primaria); background: var(--cor-primaria-clara); }
.ia-modelos-titulo { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--text-color-terciario); margin: .2rem 0 .4rem; }

/* --- Playbook de Vendas: planos, objeções e fluxo de conversa --- */

/* Faixa de negociação do plano (valor ideal / piso). Só é renderizada para
   quem tem a permissão 'planos.ver_piso' — o destaque visual existe para
   deixar claro que é informação interna, não algo para mostrar ao cliente. */
.plano-faixa {
  border: 1px dashed var(--cor-input-border); border-radius: var(--radius-sm);
  padding: .6rem .75rem; background: var(--cor-hover-suave);
  display: flex; flex-direction: column; gap: .25rem;
}

.objecao-item { padding: .85rem 0; border-bottom: 1px solid var(--cor-divider); }
.objecao-item:first-of-type { padding-top: 0; }
.objecao-item:last-of-type { border-bottom: none; padding-bottom: 0; }

.objecao-dica {
  border-left: 3px solid var(--warning); background: var(--warning-bg);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: .5rem .7rem; color: var(--text-color-primary);
}

.playbook-exemplo {
  border-left: 3px solid var(--cor-primaria); background: var(--cor-primaria-clara);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: .6rem .8rem; font-style: italic;
}

/* ===========================================================================
   Relatórios — fechamento mensal (public/relatorios/)

   Três estados da MESMA marcação, sem duplicar HTML:
     1. tela — navegação normal dentro do app;
     2. .rel-apresentacao — sem o cromo do app, uma seção por tela, para
        projetar na reunião;
     3. impressão — o JS liga .rel-apresentacao no beforeprint, então o
        @media print daqui cuida SÓ do que é específico do papel (quebra de
        página, cor, altura de gráfico). Sem essa reutilização seriam dois
        conjuntos de regras "esconde a sidebar" para manter em sincronia.

   Bloco inteiramente aditivo — nenhuma regra existente é alterada.
   =========================================================================== */

.rel-secao { margin-bottom: 2.5rem; scroll-margin-top: 1rem; }
.rel-secao:last-child { margin-bottom: 0; }
.rel-secao-head { margin-bottom: 1rem; }
.rel-secao-sub { font-size: .85rem; color: var(--text-color-terciario); margin: .15rem 0 0; }

.rel-titulo-painel {
  font-size: .92rem; font-weight: 600; color: var(--text-color-primary);
  margin: 0 0 1rem; display: flex; align-items: center; gap: .45rem;
}
.rel-titulo-painel i { color: var(--cor-primaria); font-size: 1rem; }

.rel-nota { font-size: .78rem; color: var(--text-color-terciario); margin: .4rem 0 0; line-height: 1.45; }
.rel-nota-inline { font-weight: 400; color: var(--text-color-terciario); }
.rel-unidade { font-size: .55em; font-weight: 500; color: var(--text-color-terciario); margin-left: .15rem; }
.rel-valor-md { font-size: 1.15rem; }
.rel-divisor { border-color: var(--cor-divider); opacity: 1; margin: 1.25rem 0; }
.rel-aviso { border-radius: var(--radius-sm); font-size: .85rem; }

/* Destaques do resumo executivo */
.rel-destaques { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.rel-destaque {
  display: flex; align-items: flex-start; gap: .6rem; font-size: .88rem;
  color: var(--text-color-primary); padding: .6rem .8rem;
  border-radius: var(--radius-sm); background: var(--cor-hover-suave);
  border-left: 3px solid var(--cor-primaria);
}
.rel-destaque i { font-size: 1rem; line-height: 1.4; color: var(--cor-primaria); }
.rel-destaque.is-ok { background: var(--success-bg); border-left-color: var(--success); }
.rel-destaque.is-ok i { color: var(--success); }
.rel-destaque.is-atencao { background: var(--warning-bg); border-left-color: var(--warning); }
.rel-destaque.is-atencao i { color: var(--warning); }
.rel-destaque.is-alerta { background: #FDECEE; border-left-color: var(--danger); }
.rel-destaque.is-alerta i { color: var(--danger); }

/* Meta: barra de progresso e faixas de bônus */
.rel-meta-topo { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-bottom: .75rem; }
.rel-barra { height: 10px; border-radius: 99px; background: var(--cor-divider); overflow: hidden; }
.rel-barra-preenchida { height: 100%; border-radius: 99px; background: var(--cor-primaria); transition: var(--tran-05); }
.rel-barra-preenchida.is-ok { background: var(--success); }
.rel-barra-legenda { font-size: .82rem; color: var(--text-color); margin: .5rem 0 0; }

.rel-faixas { margin-top: 1.25rem; }
.rel-faixa {
  display: flex; align-items: center; gap: .5rem; font-size: .82rem;
  color: var(--text-color); padding: .35rem 0; border-bottom: 1px solid var(--cor-divider);
}
.rel-faixa:last-of-type { border-bottom: none; }
.rel-faixa i { color: var(--text-color-terciario); }
.rel-faixa.is-ok { color: var(--text-color-primary); }
.rel-faixa.is-ok i { color: var(--success); }
.rel-faixa-total {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: .5rem; padding-top: .6rem; border-top: 2px solid var(--cor-divider);
  font-size: .85rem; color: var(--text-color-primary);
}

/* Taxas de conversão lado a lado (turma do mês x período) */
.rel-taxa { display: flex; align-items: flex-start; gap: .9rem; padding: .7rem 0; border-bottom: 1px solid var(--cor-divider); }
.rel-taxa:last-of-type { border-bottom: none; }
.rel-taxa-valor {
  font-size: 1.5rem; font-weight: 700; color: var(--cor-primaria);
  font-variant-numeric: tabular-nums; min-width: 4.2rem;
}
.rel-taxa-valor.is-secundaria { color: var(--text-color-terciario); }
.rel-taxa-info { display: flex; flex-direction: column; gap: .1rem; }
.rel-taxa-info strong { font-size: .85rem; color: var(--text-color-primary); }
.rel-taxa-info span { font-size: .78rem; color: var(--text-color-terciario); line-height: 1.45; }

/* O donut do relatório fica sozinho no painel, com a legenda embaixo (gerada
   pelo Chart.js) — não ao lado, como no dashboard. Sem um teto de largura,
   .chart-box-donut assume 100% da coluna e o aspect-ratio 1:1 o transforma
   num círculo gigante que empurra o resto da seção para fora da tela. */
.rel-donut { max-width: 220px; margin: 0 auto; }

.rel-acumulado-topo { display: flex; flex-wrap: wrap; gap: 2rem; }
.rel-cac-comparativo { display: flex; flex-wrap: wrap; gap: 2.5rem; }

/* Painel de um indicador que ainda não é mensurável: visualmente distinto
   para ninguém confundir "não temos o dado" com "o dado é zero". */
.rel-painel-pendente { border: 1px dashed var(--cor-input-border); box-shadow: none; }

/* Ranking anonimizado (usuário com escopo de visão próprio) */
.rel-linha-eu { background: var(--cor-primaria-clara) !important; }
.rel-linha-anonima td { color: var(--text-color-terciario); }
.rel-anonimo { display: flex; align-items: center; gap: .6rem; font-size: .85rem; }
.rel-anonimo-barra { flex: 0 0 120px; height: 6px; border-radius: 99px; background: var(--cor-divider); overflow: hidden; }
.rel-anonimo-barra span { display: block; height: 100%; border-radius: 99px; background: var(--text-color-terciario); }

/* --- Modo apresentação --------------------------------------------------- */
body.rel-apresentacao .sidebar,
body.rel-apresentacao .topbar,
body.rel-apresentacao .topbar-divisor,
body.rel-apresentacao .rel-so-tela,
body.rel-apresentacao .alert-dismissible { display: none !important; }
body.rel-apresentacao .main-content { margin-left: 0; }
body.rel-apresentacao .page-content { padding: 0; max-width: none; }
body.rel-apresentacao .rel-secao {
  min-height: 100vh; padding: 2rem clamp(1rem, 3vw, 3rem);
  margin-bottom: 0; display: flex; flex-direction: column;
  scroll-margin-top: 0;
  /* `safe center` centraliza a seção na tela SÓ enquanto ela couber. Um
     `center` puro faz uma seção mais alta que a viewport transbordar pelos
     DOIS lados — e o topo dela fica inalcançável por scroll, cortando os
     primeiros cards. O fallback flex-start vem antes para navegadores que
     ignoram a palavra-chave `safe`. */
  justify-content: flex-start;
  justify-content: safe center;
}
body.rel-apresentacao .prosp-section-title { font-size: clamp(1.3rem, 2vw, 1.75rem); }
/* Valores um pouco menores que antes e sem quebra: "R$ 199.178,00" a 2.4rem
   não cabia numa coluna estreita e partia no meio do número. */
body.rel-apresentacao .stat-value { font-size: clamp(1.3rem, 1.7vw, 2rem); white-space: nowrap; }
body.rel-apresentacao .rel-valor-md { font-size: clamp(1rem, 1.25vw, 1.4rem); }
body.rel-apresentacao .rel-taxa-valor { font-size: clamp(1.25rem, 1.5vw, 1.6rem); }
/* Notas e legendas encolhem junto: em apresentação elas são apoio, não leitura. */
body.rel-apresentacao .rel-nota { font-size: .74rem; }
body.rel-apresentacao .card-panel { padding: 1rem 1.15rem; }
body.rel-apresentacao .rel-secao-head { margin-bottom: .6rem; }
body.rel-apresentacao .row.g-3 { --bs-gutter-y: .6rem; }
body.rel-apresentacao .chart-box-sm,
body.rel-apresentacao .chart-box-md { height: 180px; }
body.rel-apresentacao .stat-card:hover { transform: none; box-shadow: var(--card-shadow); }
body.rel-apresentacao .table-clean tbody tr:hover { background: transparent; }

/* --- Impressão / PDF ----------------------------------------------------- */
@media print {
  @page { size: A4 portrait; margin: 12mm 10mm; }

  html, body { background: #FFF !important; }
  /* Sem isto o navegador descarta os fundos dos .stat-icon e das faixas de
     bônus, e o relatório sai todo em cinza. */
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }

  /* Rede de segurança: se o beforeprint não disparar (acontece em alguns
     navegadores ao imprimir pelo menu), o cromo ainda assim não vai ao papel. */
  .sidebar, .topbar, .topbar-divisor, .rel-so-tela,
  .modal, .toast-container, .alert-dismissible { display: none !important; }
  .main-content { margin-left: 0 !important; }
  .page-content { padding: 0 !important; }

  .rel-secao {
    min-height: 0 !important; padding: 0 0 .5rem !important;
    display: block !important; break-before: page; margin-bottom: 0;
  }
  .rel-secao:first-child { break-before: auto; }

  .card-panel, .stat-card, .table, .rel-destaque { break-inside: avoid; }
  .card-panel, .stat-card { box-shadow: none !important; border: 1px solid var(--cor-divider) !important; }

  /* Gráficos mais baixos no papel: na altura de tela ocupariam meia folha e
     empurrariam as tabelas para a página seguinte. */
  .chart-box-sm, .chart-box-md { height: 150px !important; }
  .chart-box-donut { max-width: 190px; margin: 0 auto; }

  a[href]::after { content: '' !important; }
  .table-responsive { overflow: visible !important; }
}