/* ==========================================================================
   Modulo Inteligencia — Design System NIT (design-system/guia-visual-nit.html)
   Escopo isolado: todo token/classe aqui vive sob `.intel-module` e usa o
   prefixo `intel-`, para nao colidir com public/css/global.css nem com o
   resto do sistema, que ainda segue a identidade visual antiga. Ver
   design-system/padrao-visual.md para a justificativa de cada padrao.
   ========================================================================== */

.intel-module {
  /* Cores — copiadas literalmente de design-system/guia-visual-nit.html:13-24 */
  --intel-marca-50: #fdf2f2;
  --intel-marca-100: #fde8e8;
  --intel-marca-200: #f9c9ca;
  --intel-marca-300: #f0989a;
  --intel-marca-400: #e06669;
  --intel-marca-500: #d33f42;
  --intel-marca-600: #c0272d;
  --intel-marca-700: #a01f24;
  --intel-marca-800: #7d171b;
  --intel-marca-900: #5c1114;
  --intel-neutro-50: #f5f5f5;
  --intel-neutro-100: #ececec;
  --intel-neutro-200: #e0e0e0;
  --intel-neutro-300: #c9c9c9;
  --intel-neutro-400: #9e9e9e;
  --intel-neutro-500: #6b6b6b;
  --intel-neutro-600: #575757;
  --intel-neutro-700: #333333;
  --intel-neutro-800: #262626;
  --intel-neutro-900: #1a1a1a;
  --intel-sucesso-50: #e8f5e9;
  --intel-sucesso-200: #a5d6a7;
  --intel-sucesso-600: #2e7d32;
  --intel-sucesso-700: #1b5e20;
  --intel-atencao-50: #fff3e0;
  --intel-atencao-200: #ffcc99;
  --intel-atencao-600: #c24400;
  --intel-atencao-700: #8f3400;
  --intel-erro-50: #fde8e8;
  --intel-erro-200: #f0989a;
  --intel-erro-600: #c0272d;
  --intel-erro-700: #a01f24;
  --intel-info-50: #e3f2fd;
  --intel-info-200: #90caf9;
  --intel-info-600: #1565c0;
  --intel-info-700: #0d47a1;

  /* Tipografia */
  --intel-font-sans: 'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --intel-font-mono: 'JetBrains Mono', monospace;

  /* Espacamento (padrao-visual.md #4.3) */
  --intel-space-1: 4px;
  --intel-space-2: 8px;
  --intel-space-3: 12px;
  --intel-space-4: 16px;
  --intel-space-5: 24px;
  --intel-space-6: 32px;

  /* Raio (padrao-visual.md #4.4) */
  --intel-radius-sm: 8px;
  --intel-radius-md: 12px;
  --intel-radius-lg: 16px;
  --intel-radius-xl: 20px;

  /* Sombra em 3 niveis — mesmos valores usados pelo proprio guia */
  --intel-shadow-sutil: 0 1px 2px rgba(0, 0, 0, 0.04);
  --intel-shadow-media: 0 4px 12px rgba(0, 0, 0, 0.06);
  --intel-shadow-elevada: 0 20px 25px rgba(0, 0, 0, 0.08);

  /* Tokens extras para fidelidade visual com o protótipo React/Tailwind
     (painel-crm-visão-anual-comparativa) — radius/sombra de card diferem
     ligeiramente da escala padrão do guia, por isso ficam a parte. */
  --intel-radius-card: 10px;
  --intel-radius-pill: 6px;
  --intel-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.04);
  --intel-sucesso-800: #0a6634;
  --intel-table-head-bg: #f9fafb;

  --intel-header-h: 52px;

  padding: 24px 32px 32px;
  background: var(--intel-neutro-50);
  font-family: var(--intel-font-sans);
  color: var(--intel-neutro-900);
}

.intel-module * { box-sizing: border-box; }

/* Icones (design-system/guia-visual-nit.html:422-423) */
.intel-icon {
  width: 16px;
  height: 16px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -3px;
}

.intel-icon.sm { width: 12px; height: 12px; }

/* Botoes (design-system/guia-visual-nit.html:109-122) -------------------- */

.intel-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--intel-space-2);
  font-family: var(--intel-font-sans);
  font-weight: 500;
  border-radius: var(--intel-radius-sm);
  border: 1px solid transparent;
  padding: 0 var(--intel-space-4);
  height: 40px;
  font-size: 14px;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s, opacity .15s;
  white-space: nowrap;
}

.intel-btn.sm { height: 32px; padding: 0 var(--intel-space-3); font-size: 12px; }
.intel-btn:disabled { opacity: .55; pointer-events: none; cursor: not-allowed; }

.intel-btn.primary { background: var(--intel-marca-600); color: #fff; }
.intel-btn.primary:hover { background: var(--intel-marca-700); }

.intel-btn.secondary { border-color: var(--intel-marca-600); color: var(--intel-marca-600); background: transparent; }
.intel-btn.secondary:hover { background: var(--intel-marca-50); }

.intel-btn.tertiary { color: var(--intel-marca-600); background: transparent; }
.intel-btn.tertiary:hover { text-decoration: underline; text-underline-offset: 4px; }

.intel-btn:focus-visible {
  outline: 2px solid var(--intel-marca-400);
  outline-offset: 2px;
}

.intel-btn.is-loading .intel-icon { animation: intel-spin .9s linear infinite; }

@keyframes intel-spin { to { transform: rotate(360deg); } }

/* Filtros ----------------------------------------------------------------- */

.intel-filter-bar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--intel-neutro-200);
  border-radius: var(--intel-radius-md);
  box-shadow: var(--intel-shadow-sutil);
}

.intel-filter-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px 16px;
}

.intel-filter-group {
  display: flex;
  flex: 1 1 160px;
  min-width: 148px;
  max-width: 220px;
  flex-direction: column;
  gap: 5px;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.intel-filter-group[hidden] { display: none; }

.intel-filter-group label,
.intel-filter-group > span:first-child {
  color: var(--intel-neutro-600);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Multiselect (Unidade/Vendedor) -------------------------------------------- */

.intel-multiselect {
  position: relative;
}

.intel-multiselect-trigger {
  display: flex;
  align-items: center;
  gap: var(--intel-space-2);
  width: 100%;
  min-height: 36px;
  border: 1px solid var(--intel-neutro-300);
  border-radius: var(--intel-radius-sm);
  background: #fff;
  color: var(--intel-neutro-900);
  font-family: var(--intel-font-sans);
  font-size: 0.82rem;
  font-weight: 500;
  padding: 0 var(--intel-space-3);
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}

.intel-multiselect-trigger span { flex: 1; text-align: left; }

.intel-multiselect-trigger:hover { border-color: var(--intel-neutro-400); }

.intel-multiselect-trigger:focus-visible {
  outline: none;
  border-color: var(--intel-marca-400);
  box-shadow: 0 0 0 3px rgba(192, 39, 45, 0.12);
}

.intel-multiselect-trigger.has-selected {
  border-color: var(--intel-marca-400);
  color: var(--intel-marca-700);
}

.intel-multiselect-chevron {
  color: var(--intel-neutro-500);
  transition: transform .15s;
  flex-shrink: 0;
}

.intel-multiselect-trigger.is-open .intel-multiselect-chevron { transform: rotate(180deg); }

.intel-multiselect-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 100;
  max-height: 240px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--intel-neutro-200);
  border-radius: var(--intel-radius-sm);
  box-shadow: var(--intel-shadow-media);
  padding: 4px;
  display: none;
}

.intel-multiselect-dropdown.is-open { display: block; }

.intel-multiselect-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.8rem;
  color: var(--intel-neutro-800);
  user-select: none;
}

.intel-multiselect-option:hover { background: var(--intel-neutro-100); }

.intel-multiselect-option-check {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 2px solid var(--intel-neutro-300);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.intel-multiselect-option.is-active .intel-multiselect-option-check {
  border-color: var(--intel-marca-600);
  background: var(--intel-marca-600);
}

.intel-multiselect-option-check svg { display: none; width: 10px; height: 10px; color: #fff; }
.intel-multiselect-option.is-active .intel-multiselect-option-check svg { display: block; }

.intel-multiselect-empty {
  padding: 10px 8px;
  font-size: 0.78rem;
  color: var(--intel-neutro-500);
}

.intel-filter-group select {
  min-height: 36px;
  border: 1px solid var(--intel-neutro-300);
  border-radius: var(--intel-radius-sm);
  background-color: #fff;
  color: var(--intel-neutro-900);
  font-family: var(--intel-font-sans);
  font-size: 0.82rem;
  font-weight: 500;
  padding: 0 var(--intel-space-3);
  transition: border-color .15s, box-shadow .15s;
}

.intel-filter-group select:focus-visible {
  outline: none;
  border-color: var(--intel-marca-400);
  box-shadow: 0 0 0 3px rgba(192, 39, 45, 0.12);
}

/* Filtros ativos e limpeza (design-system/guia-visual-nit.html:1055-1095) */

.intel-chips-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--intel-space-3);
  padding-top: 10px;
  margin-top: 2px;
  border-top: 1px solid var(--intel-neutro-100);
}

.intel-chips-bar[hidden] { display: none; }

.intel-chips-bar > .intel-btn { flex: 0 0 auto; }

.intel-chips-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--intel-space-2);
}

.intel-chips-label {
  color: var(--intel-neutro-500);
  font-size: 0.72rem;
  font-weight: 700;
}

.intel-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  background: var(--intel-marca-50);
  color: var(--intel-marca-700);
  border: 1px solid var(--intel-marca-200);
  border-radius: var(--intel-radius-sm);
  padding: 4px 8px;
}

.intel-chip button {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  color: var(--intel-marca-600);
  border: none;
  background: none;
  padding: 0;
}

.intel-chip button:hover { color: var(--intel-marca-800); }

.intel-chip button:focus-visible {
  outline: 2px solid var(--intel-marca-400);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Abas (design-system/guia-visual-nit.html:318-320) — role=tablist real --- */

.intel-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: var(--intel-space-4);
  border-bottom: 1px solid var(--intel-neutro-200);
}

.intel-tab {
  border: none;
  background: none;
  font-family: var(--intel-font-sans);
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--intel-neutro-600);
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s, border-color .15s;
}

.intel-tab:hover { color: var(--intel-neutro-900); background: var(--intel-neutro-50); border-radius: var(--intel-radius-pill) var(--intel-radius-pill) 0 0; }

.intel-tab.is-active,
.intel-tab[aria-selected="true"] {
  color: var(--intel-marca-700);
  border-bottom-color: var(--intel-marca-600);
  font-weight: 700;
  background: var(--intel-marca-50);
  border-radius: var(--intel-radius-pill) var(--intel-radius-pill) 0 0;
}

.intel-tab:focus-visible {
  outline: 2px solid var(--intel-marca-400);
  outline-offset: -2px;
  border-radius: 4px 4px 0 0;
}

.intel-tab-panel { display: none; }
.intel-tab-panel.is-active {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* Sub-abas (2o nivel de role=tablist, dentro de um <intel-tab-panel>) -------
   No protótipo o nav principal e' underline-style (Header.tsx) mas os
   seletores internos (sub-secao, metrica) sao pill/segmented — mesma receita
   visual de .intel-metric-toggle, unificada aqui. */

/* Quando um grupo de sub-abas vive dentro de um .intel-card (nao de um
   .intel-tab-panel, que ja tem gap proprio), precisa de respiro manual antes
   do painel de conteudo. */
.intel-card > .intel-tabs--sub { margin-bottom: var(--intel-space-4); }

.intel-tabs--sub {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin-top: 0;
  margin-bottom: 0;
  padding: 3px;
  border: 1px solid var(--intel-neutro-200);
  border-bottom: 1px solid var(--intel-neutro-200);
  border-radius: var(--intel-radius-md);
  background: var(--intel-neutro-50);
  width: fit-content;
}

.intel-tabs--sub .intel-tab {
  padding: 7px 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--intel-neutro-600);
  border-bottom: none;
  border-radius: calc(var(--intel-radius-md) - 3px);
}

.intel-tabs--sub .intel-tab:hover { background: var(--intel-neutro-100); }

.intel-tabs--sub .intel-tab.is-active,
.intel-tabs--sub .intel-tab[aria-selected="true"] {
  background: #fff;
  color: var(--intel-marca-700);
  font-weight: 700;
  box-shadow: var(--intel-shadow-sutil);
}

.intel-subtab-panel { display: none; }
.intel-subtab-panel.is-active {
  display: flex;
  flex-direction: column;
  gap: var(--intel-space-5);
}

/* "Janela" da secao ativa — agrupa visualmente todos os cards/graficos de uma
   mesma aba (ou sub-aba) num unico bloco com moldura propria, para nao ficarem
   soltos direto no fundo cinza do modulo: rolando a pagina, a borda deixa claro
   ate onde vai o conteudo daquela secao. So se aplica ao 1o/2o nivel de
   navegacao da pagina (abas principais e as sub-abas de "Visão geral") — nao
   as sub-abas que ja vivem dentro de um unico card (ex.: Diagnóstico de
   perdas), que ja tem o proprio card como moldura. Tambem exclui "relatorio"
   (Relatorio Mensal) pelo mesmo motivo de "geral": esse painel ja e' o
   `.intel-rel`, com moldura/fundo proprios — aplicar essa regra genérica por
   cima (maior especificidade CSS que `.intel-rel` sozinho) vazava um segundo
   cinza mais escuro (--intel-neutro-100) atras do fundo claro que o design
   system da aba define, alem de duplicar padding/borda (bug encontrado e
   corrigido a pedido do usuario, setembro/2026). */
.intel-tab-panel.is-active:not([data-tab-panel="geral"]):not([data-tab-panel="relatorio"]),
.intel-subtab-panel.is-active[data-subtab-group="geral"] {
  padding: var(--intel-space-5);
  border: 1px solid var(--intel-neutro-200);
  border-radius: var(--intel-radius-lg);
  background: var(--intel-neutro-100);
  box-shadow: var(--intel-shadow-sutil);
}

@media (max-width: 640px) {
  .intel-tab-panel.is-active:not([data-tab-panel="geral"]):not([data-tab-panel="relatorio"]),
  .intel-subtab-panel.is-active[data-subtab-group="geral"] {
    padding: var(--intel-space-3);
  }
}

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

.intel-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--intel-space-4);
}

.intel-kpi-card {
  min-width: 0;
  padding: var(--intel-space-4);
  border: 1px solid var(--intel-neutro-200);
  border-radius: var(--intel-radius-card);
  background: #fff;
  box-shadow: var(--intel-shadow-card);
  transition: box-shadow .15s;
}

.intel-kpi-card:hover { box-shadow: var(--intel-shadow-media); }

.intel-kpi-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--intel-space-2);
  margin-bottom: 2px;
}

.intel-kpi-icon { color: var(--intel-neutro-400); }

.intel-kpi-label {
  display: block;
  color: var(--intel-neutro-500);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.intel-kpi-value {
  display: block;
  margin-top: 6px;
  overflow-wrap: anywhere;
  color: var(--intel-neutro-900);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.2;
}

.intel-kpi-value--positive { color: var(--intel-sucesso-800); }
.intel-kpi-value--negative { color: var(--intel-marca-600); }

.intel-kpi-sub {
  display: block;
  color: var(--intel-neutro-600);
  font-size: 0.72rem;
  font-weight: 500;
}

.intel-kpi-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--intel-space-2);
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--intel-neutro-100);
}

/* Comparativo anual: benchmark cards (ano atual vs anterior), toggle de metrica
   do grafico, cards trimestrais e comparador head-to-head de consultoras ------ */

.intel-benchmark-card .intel-kpi-value { display: inline-block; }

.intel-benchmark-anterior {
  display: block;
  margin-top: 2px;
  color: var(--intel-neutro-500);
  font-size: 0.72rem;
}

.intel-metric-toggle {
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: var(--intel-radius-md);
  background: var(--intel-neutro-50);
  border: 1px solid var(--intel-neutro-200);
}

.intel-metric-toggle button {
  border: none;
  background: none;
  padding: 6px 10px;
  border-radius: calc(var(--intel-radius-md) - 3px);
  font-family: var(--intel-font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--intel-neutro-600);
  cursor: pointer;
  white-space: nowrap;
}

.intel-metric-toggle button.is-active {
  background: #fff;
  color: var(--intel-marca-700);
  box-shadow: var(--intel-shadow-sutil);
}

.intel-quarter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--intel-space-4);
}

.intel-quarter-card {
  padding: var(--intel-space-4);
  border: 1px solid var(--intel-neutro-200);
  border-radius: 8px;
  background: var(--intel-neutro-50);
}

.intel-quarter-card b {
  display: block;
  color: var(--intel-neutro-500);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.intel-quarter-card strong {
  display: block;
  margin-top: 6px;
  color: var(--intel-neutro-900);
  font-size: 1.15rem;
  font-weight: 700;
}

.intel-quarter-card small {
  display: block;
  margin-top: 4px;
  color: var(--intel-neutro-600);
  font-size: 0.72rem;
}

/* Comparacao entre consultoras (grafico agrupado + tabela) reaproveita
   .intel-chip-toggle-row/.intel-chip-toggle (definidas mais abaixo) para a
   selecao multipla e .intel-chart-canvas-wrap para o grafico — sem CSS proprio. */

/* Cards (design-system/guia-visual-nit.html:1539-1577) --------------------- */

.intel-card {
  min-width: 0;
  padding: var(--intel-space-5);
  border: 1px solid var(--intel-neutro-200);
  border-radius: var(--intel-radius-card);
  background: #fff;
  box-shadow: var(--intel-shadow-card);
  transition: border-color .15s;
}

.intel-card-wide { grid-column: 1 / -1; }

.intel-card-header {
  display: flex;
  gap: var(--intel-space-3);
  align-items: flex-start;
  justify-content: space-between;
  padding-bottom: var(--intel-space-3);
  margin-bottom: var(--intel-space-4);
  border-bottom: 1px solid var(--intel-neutro-100);
}

.intel-card-header h2 {
  margin: 0;
  color: var(--intel-neutro-900);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.intel-card-header p {
  margin: 4px 0 0;
  color: var(--intel-neutro-600);
  font-size: 0.75rem;
}

.intel-card-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--intel-neutro-100);
  color: var(--intel-neutro-700);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Mesmo código de cor de .intel-equip-line-card[data-linha] (leve=azul,
   pesada=vermelho) — reaproveitado aqui pra manter a associação visual entre
   as duas abas que representam a mesma dimensão (linha de equipamento). */
.intel-card-badge--leve { background: var(--intel-info-50); color: var(--intel-info-700); }
.intel-card-badge--pesada { background: var(--intel-marca-50); color: var(--intel-marca-700); }

.intel-analysis-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--intel-space-5);
}

/* Par de mini-graficos dentro do mesmo card (ex.: linha leve/pesada) — o
   card so tem um h2 compartilhado, entao cada metade precisa do proprio
   rotulo pra nao ficar ambiguo qual grafico e qual. */
.intel-chart-mini {
  display: flex;
  flex-direction: column;
  gap: var(--intel-space-2);
}

.intel-chart-mini .intel-card-badge {
  align-self: flex-start;
}

@media (min-width: 1180px) {
  .intel-analysis-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Grafico real (Chart.js) — container com altura fixa exigido pelo Chart.js
   para calcular o canvas responsivo (maintainAspectRatio:false). ------------ */

.intel-chart-canvas-wrap {
  position: relative;
  height: 220px;
}

.intel-chart-canvas-wrap canvas {
  width: 100% !important;
  height: 100% !important;
}

.intel-chart-canvas-wrap [data-chart-empty] {
  position: absolute;
  inset: 0;
}

/* Botao "mostrar valores" injetado automaticamente em todo grafico por
   window.NITCRM.chart.render() (public/js/shared/charts.js) — canto superior
   direito do wrap, nao disputa espaco com a legenda (que fica embaixo). */
.intel-chart-labels-toggle {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--intel-neutro-200);
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(4px);
  color: var(--intel-neutro-600, #575757);
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .12s;
}
.intel-rel .intel-chart-labels-toggle {
  border-color: var(--rel-border);
  color: var(--rel-ink-soft);
  background: rgba(255,255,255,0.94);
}
.intel-rel .intel-chart-labels-toggle:hover { background: var(--rel-surface-2); border-color: var(--rel-border); }
.intel-rel .intel-chart-labels-toggle.is-active { background: var(--rel-accent); border-color: var(--rel-accent); color: #fff; }

.intel-chart-labels-toggle:hover {
  background: var(--intel-neutro-100);
  transform: scale(1.04);
}

.intel-chart-labels-toggle.is-active {
  background: var(--intel-marca-600);
  border-color: var(--intel-marca-600);
  color: #ffffff;
}
.intel-chart-labels-toggle:active { transform: scale(0.96); }

/* Grafico simples de barras em div/CSS (legado — em migracao para Chart.js,
   remover quando todos os call-sites de renderChart() usarem canvas) ------- */

.intel-chart {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 140px;
  padding: var(--intel-space-2) 4px 0;
  border-bottom: 1px solid var(--intel-neutro-200);
}

.intel-chart-bar {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
  height: 100%;
  gap: 6px;
}

.intel-chart-fill {
  width: 100%;
  min-height: 2px;
  border-radius: 4px 4px 0 0;
  background: var(--intel-marca-600);
  transition: height .35s ease;
}

.intel-chart-fill.is-secondary { background: var(--intel-neutro-400); }

.intel-chart-label {
  color: var(--intel-neutro-500);
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
}

/* Listas (unidade, ranking, funil, perdas, origem) ------------------------- */

.intel-unidade-list,
.intel-ranking-list,
.intel-funnel-list,
.intel-loss-list,
.intel-origem-list {
  display: grid;
  gap: var(--intel-space-2);
  margin-bottom: var(--intel-space-3);
}

.intel-unidade-list { grid-template-columns: 1fr; }

@media (min-width: 760px) {
  .intel-unidade-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1180px) {
  .intel-unidade-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Performance por unidade — grade sempre 2 colunas (2x2 pras 4 unidades
   tipicas), independente do breakpoint padrao de 3 colunas das demais listas */
.intel-unidade-list-2col {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--intel-space-4);
}

.intel-unit-card,
.intel-rank-row,
.intel-funnel-row,
.intel-loss-row,
.intel-origem-row {
  min-width: 0;
  padding: var(--intel-space-3);
  border: 1px solid var(--intel-neutro-200);
  border-radius: var(--intel-radius-md);
  background: #fff;
  transition: box-shadow .15s;
}

.intel-unit-card:hover,
.intel-rank-row:hover,
.intel-funnel-row:hover,
.intel-loss-row:hover,
.intel-origem-row:hover {
  box-shadow: var(--intel-shadow-media);
}

/* Refinamento proprio do card "Performance por unidade": destaque de cor na
   borda esquerda + sombra leve, pra combinar com o resto do bloco (tabela +
   resumo) recem-movido pro topo da secao. */
.intel-unit-card {
  border-left: 4px solid var(--intel-marca-300);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

/* Legenda das 3 situacoes que a barra empilhada do card de unidade representa
   — aberto/ganha/perdida — mesmas cores em toda a secao, uma vez so acima da
   grade (nao repetida em cada card). */
.intel-progress-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--intel-space-4);
  margin-bottom: var(--intel-space-3);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--intel-neutro-600);
}

.intel-progress-legend span { display: inline-flex; align-items: center; }

.intel-progress-legend-bottom {
  justify-content: center;
  margin-top: var(--intel-space-4);
  margin-bottom: 0;
}

/* Barra de progresso empilhada (aberto x ganha x perdida) — cada segmento
   proporcional ao valor sobre o total negociado da unidade (pipeline +
   fechado + perdido), nao so o pipeline isolado como na barra simples. */
.intel-progress-split {
  display: flex;
  height: 8px;
  overflow: hidden;
  margin-top: var(--intel-space-3);
  border-radius: 999px;
  background: var(--intel-neutro-100);
}

.intel-progress-split span { height: 100%; }
.intel-progress-split .is-aberta { background: var(--intel-info-600); }
.intel-progress-split .is-ganha { background: var(--intel-sucesso-600); }
.intel-progress-split .is-perdida { background: var(--intel-marca-500); }

.intel-unit-breakdown {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--intel-space-2);
  margin-top: var(--intel-space-2);
  text-align: center;
}

.intel-unit-breakdown b {
  display: block;
  font-size: 0.72rem;
  color: var(--intel-neutro-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.intel-unit-breakdown span {
  display: block;
  margin-top: 2px;
  font-size: 0.6rem;
  color: var(--intel-neutro-500);
}

/* Numero de destaque do card de unidade — precisa de rotulo explicito
   (Faturamento = valor ja ganho) pra nao virar "numero solto" sem contexto;
   a soma aberto+ganho+perdido, mais dificil de interpretar de cara, fica
   so no detalhamento (barra + breakdown) logo abaixo. */
.intel-unit-headline {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex: none;
}

.intel-unit-headline-label {
  margin-top: 2px;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--intel-neutro-500);
}

/* Insight de performance potencial — so aparece quando ha perda no periodo.
   Responde direto "se nao tivesse perdido, teria feito quanto": faturamento
   real + perdido, com o ganho percentual que isso representaria. */
.intel-unit-potential {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--intel-space-2);
  margin-top: var(--intel-space-3);
  padding-top: var(--intel-space-3);
  border-top: 1px dashed var(--intel-neutro-200);
  font-size: 0.68rem;
  color: var(--intel-neutro-600);
}

.intel-unit-potential-value {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  font-weight: 700;
  color: var(--intel-neutro-900);
  white-space: nowrap;
}

.intel-unit-potential-delta {
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--intel-marca-700);
  background: var(--intel-marca-50);
  border: 1px solid var(--intel-marca-200);
  border-radius: 999px;
  padding: 1px 6px;
}

.intel-row-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--intel-space-2);
}

.intel-row-name {
  overflow: hidden;
  margin: 0;
  color: var(--intel-neutro-900);
  font-size: 0.82rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.intel-row-meta {
  margin: 3px 0 0;
  color: var(--intel-neutro-600);
  font-size: 0.68rem;
}

.intel-row-money {
  flex: 0 0 auto;
  color: var(--intel-neutro-900);
  font-size: 0.85rem;
  font-weight: 700;
  white-space: nowrap;
}

.intel-progress {
  height: 6px;
  overflow: hidden;
  margin-top: var(--intel-space-3);
  border-radius: 999px;
  background: var(--intel-neutro-100);
}

.intel-progress-fill {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--intel-marca-600);
  transition: width .45s ease;
}

.intel-row-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--intel-space-2);
  margin-top: var(--intel-space-2);
  color: var(--intel-neutro-600);
  font-size: 0.68rem;
}

/* Rótulo de subseção — separa blocos dentro de um mesmo card (ex.: tabela x resumo) */

.intel-subsection-label {
  margin: 0 0 var(--intel-space-2);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--intel-neutro-500);
}

.intel-subsection-label-spaced { margin-top: var(--intel-space-5); }

/* Mini-cards por linha de equipamento (renderEquipamentos) ------------------ */

.intel-equip-line-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--intel-space-4);
}

.intel-equip-line-card {
  position: relative;
  padding: var(--intel-space-4) var(--intel-space-4) var(--intel-space-4) calc(var(--intel-space-4) + 4px);
  border: 1px solid var(--intel-neutro-200);
  border-left: 4px solid var(--intel-neutro-300);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.intel-equip-line-card[data-linha="PESADA"] { border-left-color: var(--intel-marca-600); }
.intel-equip-line-card[data-linha="LEVE"] { border-left-color: var(--intel-info-600); }

.intel-equip-line-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--intel-space-2);
}

.intel-equip-line-card-name {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--intel-neutro-500);
}

.intel-equip-line-card-value {
  margin-top: 6px;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--intel-sucesso-800);
}

.intel-equip-line-card-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--intel-space-2);
  margin-top: var(--intel-space-3);
  padding-top: var(--intel-space-3);
  border-top: 1px solid var(--intel-neutro-100);
  text-align: center;
}

.intel-equip-line-card-stats b { display: block; font-size: 0.85rem; color: var(--intel-neutro-900); }
.intel-equip-line-card-stats span { display: block; margin-top: 2px; font-size: 0.6rem; color: var(--intel-neutro-500); text-transform: uppercase; letter-spacing: 0.02em; }

/* Quarter-grid compacto (resumo de atividades) — mesma receita, 4 colunas --- */

.intel-quarter-grid--compact { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }

/* Avatar circular e bolinha de cor por consultora --------------------------- */

.intel-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: #fff;
  font-weight: 700;
  font-size: 0.7rem;
}

.intel-dot {
  display: inline-block;
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}

.intel-rank-card-head {
  display: flex;
  align-items: center;
  gap: var(--intel-space-2);
}

/* Chips de filtro de consultora (liga/desliga linha do grafico) ------------ */

.intel-chip-toggle-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--intel-space-2);
  margin-bottom: var(--intel-space-3);
}

.intel-chip-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px 8px;
  border: 1px solid var(--intel-neutro-200);
  border-radius: var(--intel-radius-pill);
  background: var(--intel-neutro-50);
  color: var(--intel-neutro-500);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s, opacity .15s;
}

.intel-chip-toggle:hover { border-color: var(--intel-neutro-300); }

.intel-chip-toggle.is-active {
  background: #fff;
  color: var(--intel-neutro-900);
  border-color: currentColor;
  box-shadow: var(--intel-shadow-sutil);
}

.intel-chip-toggle:not(.is-active) { opacity: 0.55; }

/* Podio — top 3 consultoras por faturamento --------------------------------- */

.intel-podium {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: end;
  gap: var(--intel-space-3);
}

.intel-podium-card {
  min-width: 0;
  padding: var(--intel-space-4);
  border: 1px solid var(--intel-neutro-200);
  border-radius: var(--intel-radius-card);
  background: #fff;
  text-align: center;
}

.intel-podium-card[data-place="1"] {
  order: 2;
  padding-top: var(--intel-space-5);
  border-color: var(--intel-atencao-200);
  background: color-mix(in srgb, var(--intel-atencao-600) 5%, white);
  box-shadow: var(--intel-shadow-media);
}

.intel-podium-card[data-place="2"] { order: 1; }
.intel-podium-card[data-place="3"] { order: 3; }

/* Icone do podio: avatar + medalha sobreposta no canto, como um unico bloco
   empilhado acima do nome (em vez de medalha e avatar lado a lado). */
.intel-podium-icon {
  position: relative;
  display: inline-flex;
  margin: 0 auto 8px;
}

.intel-podium-avatar { margin: 0; }

.intel-podium-medal {
  position: absolute;
  top: -4px;
  right: -6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 2px solid #fff;
  border-radius: 50%;
  font-size: 0.62rem;
  font-weight: 800;
  color: #fff;
  box-shadow: var(--intel-shadow-sutil);
}

.intel-podium-card[data-place="1"] .intel-podium-medal { background: #d4a017; width: 26px; height: 26px; font-size: 0.68rem; }
.intel-podium-card[data-place="2"] .intel-podium-medal { background: #9aa5b1; }
.intel-podium-card[data-place="3"] .intel-podium-medal { background: #b3702f; }

.intel-podium-name {
  margin: 0;
  color: var(--intel-neutro-900);
  font-size: 0.82rem;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.intel-podium-value {
  margin-top: 2px;
  color: var(--intel-sucesso-800);
  font-size: 1.1rem;
  font-weight: 800;
}

.intel-podium-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 8px;
  margin-top: var(--intel-space-3);
  padding-top: var(--intel-space-3);
  border-top: 1px solid var(--intel-neutro-100);
  text-align: left;
}

.intel-podium-stats div { min-width: 0; }
.intel-podium-stats b { display: block; font-size: 0.78rem; color: var(--intel-neutro-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.intel-podium-stats span { display: block; font-size: 0.58rem; color: var(--intel-neutro-500); text-transform: uppercase; letter-spacing: .02em; }

@media (max-width: 760px) {
  .intel-podium { grid-template-columns: 1fr; }
  .intel-podium-card[data-place="1"],
  .intel-podium-card[data-place="2"],
  .intel-podium-card[data-place="3"] { order: initial; }
}

/* Badges (design-system/guia-visual-nit.html:162-171) ---------------------- */

.intel-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 6px;
  border: 1px solid;
  padding: 3px 9px;
  white-space: nowrap;
}

.intel-badge.success { background: var(--intel-sucesso-50); color: var(--intel-sucesso-700); border-color: var(--intel-sucesso-200); }
.intel-badge.warning { background: var(--intel-atencao-50); color: var(--intel-atencao-700); border-color: var(--intel-atencao-200); }
.intel-badge.danger  { background: var(--intel-erro-50);    color: var(--intel-erro-700);    border-color: var(--intel-erro-200); }
.intel-badge.info    { background: var(--intel-info-50);    color: var(--intel-info-700);    border-color: var(--intel-info-200); }
.intel-badge.neutral { background: var(--intel-neutro-100); color: var(--intel-neutro-700);  border-color: var(--intel-neutro-200); }

/* Tabelas (design-system/guia-visual-nit.html:1580-1640) ------------------- */

.intel-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--intel-neutro-200);
  border-radius: var(--intel-radius-md);
}

.intel-table-wrap-compact { margin-top: 4px; }

.intel-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: 0.8125rem;
}

.intel-table th,
.intel-table td {
  padding: 10px var(--intel-space-4);
  border-bottom: 1px solid var(--intel-neutro-100);
  text-align: left;
  vertical-align: middle;
}

.intel-table th {
  background: var(--intel-table-head-bg);
  color: var(--intel-neutro-600);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.intel-table td {
  color: var(--intel-neutro-800);
  max-width: 260px;
}

.intel-table th.num,
.intel-table td.num { text-align: right; }

.intel-table tbody tr:hover td { background: var(--intel-neutro-50); }
.intel-table tbody tr:last-child td { border-bottom: none; }

/* Cabecalho ordenavel (window.NITCRM.tableSort) — seta indica coluna/direcao ativa */

.intel-table th.is-sortable {
  cursor: pointer;
  user-select: none;
  transition: background .15s, color .15s;
}

.intel-table th.is-sortable:hover {
  color: var(--intel-marca-600);
  background: var(--intel-table-head-bg);
}

.intel-table th.is-sortable::after {
  content: '\2195';
  margin-left: 4px;
  opacity: 0.35;
}

.intel-table th.is-sorted-asc,
.intel-table th.is-sorted-desc {
  background: #f0f4ff;
  color: var(--intel-neutro-900);
}

.intel-table th.is-sorted-asc::after { content: '\2191'; opacity: 1; color: var(--intel-marca-600); }
.intel-table th.is-sorted-desc::after { content: '\2193'; opacity: 1; color: var(--intel-marca-600); }

.intel-money {
  color: var(--intel-neutro-900);
  font-weight: 700;
  white-space: nowrap;
}

/* Badge de posição — reaproveita as cores do pódio (ouro/prata/bronze) para o top 3 */

.intel-rank-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--intel-neutro-100);
  color: var(--intel-neutro-600);
  font-size: 0.7rem;
  font-weight: 700;
}

.intel-rank-badge[data-tier="1"] { background: #d4a017; color: #fff; }
.intel-rank-badge[data-tier="2"] { background: #9aa5b1; color: #fff; }
.intel-rank-badge[data-tier="3"] { background: #b3702f; color: #fff; }

.intel-table-ranked th:first-child,
.intel-table-ranked td:first-child { width: 1%; text-align: center; }

/* Rodapé de tabela — botão "Expandir/Recolher" alinhado no canto inferior direito */

.intel-table-foot {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--intel-space-2);
}

.intel-table-expand {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: none;
  background: transparent;
  color: var(--intel-marca-600);
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  padding: 4px 2px;
}

/* `display` explicito acima vence o `[hidden]{display:none}` padrao do
   navegador (regra de autor sempre bate a folha UA) — reforca aqui. */
.intel-table-expand[hidden] { display: none; }

.intel-table-expand:hover { color: var(--intel-marca-700); text-decoration: underline; }

.intel-table-expand svg { transition: transform .15s; }
.intel-table-expand.is-expanded svg { transform: rotate(180deg); }

.intel-muted { color: var(--intel-neutro-600); }

/* Tooltip de truncamento (design-system/guia-visual-nit.html:285-288) ------ */

.intel-tt {
  position: relative;
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
  border-bottom: 1px dotted var(--intel-neutro-500);
  cursor: help;
}

.intel-tt::after {
  content: attr(data-tt);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  background: var(--intel-neutro-800);
  color: #fff;
  font-size: 12px;
  font-family: var(--intel-font-sans);
  white-space: nowrap;
  padding: 6px 10px;
  border-radius: 6px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s;
  z-index: 20;
}

.intel-tt:hover::after,
.intel-tt:focus-visible::after {
  opacity: 1;
}

/* Estados: carregando, vazio, erro (design-system/guia-visual-nit.html:1642-1665) */

.intel-skel-line {
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--intel-neutro-100) 25%, var(--intel-neutro-200) 37%, var(--intel-neutro-100) 63%);
  background-size: 400% 100%;
  animation: intel-skel-shimmer 1.4s ease infinite;
}

@keyframes intel-skel-shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

.intel-skel-group {
  display: flex;
  flex-direction: column;
  gap: var(--intel-space-3);
  padding: var(--intel-space-2) 0;
}

.intel-empty {
  border: 1px dashed var(--intel-neutro-300);
  background: var(--intel-neutro-50);
  border-radius: var(--intel-radius-md);
  padding: var(--intel-space-5);
  text-align: center;
}

.intel-empty .intel-empty-icon {
  width: 36px;
  height: 36px;
  margin: 0 auto var(--intel-space-2);
  border-radius: var(--intel-radius-sm);
  background: var(--intel-marca-50);
  color: var(--intel-marca-600);
  display: flex;
  align-items: center;
  justify-content: center;
}

.intel-empty.is-error .intel-empty-icon {
  background: var(--intel-erro-50);
  color: var(--intel-erro-600);
}

.intel-empty b {
  display: block;
  color: var(--intel-neutro-800);
  margin-bottom: 2px;
  font-size: 0.85rem;
}

.intel-empty p {
  margin: 0 0 var(--intel-space-3);
  color: var(--intel-neutro-600);
  font-size: 0.78rem;
}

.intel-empty .intel-btn { margin: 0 auto; }

/* ============================================================
   RELATORIO MENSAL — PAINEL_CRM_MENSAL.docx (setembro/2026)
   Design sytem PROPRIO, isolado sob .intel-rel (tokens --rel-*,
   classes .intel-rel-*) — nao reaproveita .intel-card/.intel-kpi-*
   de proposito: a aba "Comparativo anual" continua com a
   identidade visual antiga do Inteligencia, sem qualquer mudanca;
   so esta aba (Relatorio Mensal, layout aprovado em mockup) usa
   esta paleta mais quieta/neutra com acentos semanticos.
   ============================================================ */
.intel-rel {
  --rel-bg: #f7f5f4;
  --rel-surface: #ffffff;
  --rel-surface-2: #fbf9f8;
  --rel-border: #e7e1df;
  --rel-border-soft: #f0ebe9;
  --rel-ink: #1e1917;
  /* Escurecidos (setembro/2026, feedback de contraste) — os tons originais
     (#6b6260 / #a39a97) ficavam claros demais pra texto de rotulo/legenda
     lido rapido num dashboard; valores atuais miram >=4.5:1 (~7.7:1) e
     ~3.7:1 (ink-faint, usado so em texto pequeno/decorativo) sobre branco. */
  --rel-ink-soft: #5a514f;
  --rel-ink-faint: #8a8077;

  --rel-accent: #c0272d;
  --rel-accent-ink: #7d171b;
  --rel-accent-soft: #fdf2f2;
  --rel-accent-soft-border: #f5d3d4;

  --rel-success: #1b7a3d;
  --rel-success-soft: #eaf6ee;
  --rel-info: #1565c0;
  --rel-info-soft: #eaf2fb;
  --rel-warn: #a15a06;
  --rel-warn-soft: #fbf0e2;
  --rel-violet: #6a3fa0;
  --rel-violet-soft: #f2ecf9;
  --rel-gold: #8a6a12;
  --rel-gold-soft: #f7f1e0;

  --rel-radius-sm: 8px;
  --rel-radius-md: 10px;
  --rel-radius-lg: 14px;
  --rel-shadow-card: 0 1px 3px rgba(30, 25, 23, 0.06), 0 1px 2px rgba(30, 25, 23, 0.04);
  --rel-shadow-hover: 0 3px 10px rgba(30, 25, 23, 0.08);
  --rel-shadow-pop: 0 12px 32px rgba(30, 25, 23, 0.14);
  --rel-border-hover: #d9cfcc;

  background: var(--rel-bg);
  /* Sem margem negativa no topo: a barra de abas (.intel-tabs) ja reserva
     margin-bottom de 16px antes do painel — herdar esse respiro em vez de
     cancela-lo (como a versao anterior fazia, com -24px) da a mesma divisao
     clara que a aba "Comparativo anual" tem abaixo das abas. */
  margin: 0 -32px 0;
  padding: 20px 32px 40px;
  border-radius: var(--intel-radius-xl);
}
.intel-rel * { box-sizing: border-box; }

/* Divisor de secao (1 / 2 do relatorio) — SEM margin propria: .intel-rel e'
   um flex column com gap:22px (herdado de .intel-tab-panel.is-active, a
   mesma classe do elemento raiz desta aba) que ja espaca todo filho direto
   (divider, block). Ter margin aqui EM CIMA do gap duplicava o respiro
   (chegava a ~80px entre secoes) e deixava o fundo cinza aparecendo demais
   entre os blocos — sensacao de "desordem" reportada pelo usuario
   (setembro/2026). So padding-top + border-top continuam, pro friso visual
   acima do titulo da secao. */
.intel-rel-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 20px;
  border-top: 1px solid var(--rel-border);
}
.intel-rel-divider-first { padding-top: 0; border-top: none; }

/* Divisor "1. Painel Geral do CRM" que tambem carrega os filtros globais
   (Mes/Ano/Unidade) na mesma linha — pedido do usuario para reduzir o
   espaco vertical que a barra de filtros ocupava sozinha acima do titulo.
   margin-left:auto no filtro empurra os balões para a ponta direita da
   mesma linha do titulo; flex-wrap deixa cair pra linha de baixo so quando
   a largura realmente nao cabe (mobile, ver media query). */
.intel-rel-divider-with-filters { flex-wrap: wrap; row-gap: 10px; }
.intel-rel-divider-with-filters .intel-rel-filter-bar { margin-left: auto; }
/* Selector escopado como filho direto (>) — a partir de setembro/2026 o
   .intel-rel-filter-bar (com os spans internos dos balões de filtro) passou
   a viver dentro do divisor (.intel-rel-divider-with-filters), e um seletor
   descendente generico aqui capturava esses spans tambem, transformando os
   balões de filtro no mesmo badge numerado vermelho — bug encontrado nesta
   mudanca. */
.intel-rel-divider > span {
  flex: none;
  width: 26px; height: 26px;
  border-radius: 8px;
  background: var(--rel-accent);
  color: #fff;
  font-family: var(--intel-font-mono);
  font-weight: 700;
  font-size: 0.82rem;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 2px rgba(192,39,45,.25);
}
.intel-rel-divider h2 { margin: 0; font-size: 1.15rem; font-weight: 800; letter-spacing: -0.015em; color: var(--rel-ink); font-family: var(--intel-font-sans); }

/* Bloco de secao numerada — sem margin-bottom propria, pelo mesmo motivo
   do .intel-rel-divider acima (ja espacado pelo gap do flex pai). */
.intel-rel-block { }
.intel-rel-block-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.intel-rel-eyebrow {
  font-family: var(--intel-font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--rel-accent);
  background: var(--rel-accent-soft);
  border: 1px solid var(--rel-accent-soft-border);
  padding: 3px 7px;
  border-radius: 6px;
  flex: none;
  line-height: 1;
  margin-top: 2px;
}
.intel-rel-block-head-text { display: flex; flex-direction: column; }
.intel-rel-block-head-text h3 { margin: 0; font-size: 1.05rem; font-weight: 700; letter-spacing: -0.005em; color: var(--rel-ink); font-family: var(--intel-font-sans); }
.intel-rel-block-head-text p { margin: 2px 0 0; font-size: 0.8rem; color: var(--rel-ink-soft); }

/* Card base */
.intel-rel-card {
  background: var(--rel-surface);
  border: 1px solid var(--rel-border);
  border-radius: var(--rel-radius-lg);
  box-shadow: var(--rel-shadow-card);
  padding: 18px 20px;
  color: var(--rel-ink);
  transition: box-shadow .15s, border-color .15s;
}
.intel-rel-card:hover { border-color: var(--rel-border-hover); box-shadow: var(--rel-shadow-hover); }

/* KPI strip (1.1) */
.intel-rel-kpi-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.intel-rel-kpi-card {
  background: var(--rel-surface);
  border: 1px solid var(--rel-border);
  border-radius: var(--rel-radius-md);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.intel-rel-kpi-card:hover { border-color: var(--rel-border-hover); box-shadow: var(--rel-shadow-hover); transform: translateY(-1px); }
/* Icone + titulo na mesma linha no topo do card; valor/sub formam um bloco
   centralizado abaixo — pedido do usuario (setembro/2026) pra dar mais peso
   visual ao numero principal sem perder o titulo colado no icone. */
.intel-rel-kpi-top { display: flex; align-items: center; gap: 9px; }
.intel-rel-kpi-body { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 5px; width: 100%; }
.intel-rel-kpi-label { font-size: 0.85rem; font-weight: 700; color: var(--rel-ink); letter-spacing: -0.005em; }
.intel-rel-kpi-icon {
  width: 34px; height: 34px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center; flex: none;
  border: 1px solid transparent;
}
.intel-rel-kpi-icon svg { width: 17px; height: 17px; }
.intel-rel-kpi-value { display: block; font-family: var(--intel-font-mono); font-size: 1.9rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.015em; color: var(--rel-ink); line-height: 1.1; }
.intel-rel-kpi-sub { display: block; font-size: 0.74rem; color: var(--rel-ink-soft); font-weight: 500; }

.intel-rel-tone-neutral .intel-rel-kpi-icon { background: var(--rel-info-soft); color: var(--rel-info); border-color: #d6e6f5; }
.intel-rel-tone-success .intel-rel-kpi-icon { background: var(--rel-success-soft); color: var(--rel-success); border-color: #d3eadc; }
.intel-rel-tone-danger  .intel-rel-kpi-icon { background: var(--rel-accent-soft); color: var(--rel-accent); border-color: #f5d3d4; }
.intel-rel-tone-violet  .intel-rel-kpi-icon { background: var(--rel-violet-soft); color: var(--rel-violet); border-color: #e3d7f0; }
.intel-rel-tone-gold    .intel-rel-kpi-icon { background: var(--rel-gold-soft); color: var(--rel-gold); border-color: #f0e6c8; }
/* Tom "warn" (laranja) — usado pelos mini-kpi de "Pendentes" (1.7); nao
   existia entre os 5 tons originais (setembro/2026). */
.intel-rel-tone-warn    .intel-rel-kpi-icon { background: var(--rel-warn-soft); color: var(--rel-warn); border-color: #ecd9b8; }
/* Cor do valor segue o tom do card em todos os casos — antes so
   success/danger ganhavam cor, o resto ficava no cinza-escuro padrao. */
.intel-rel-tone-neutral .intel-rel-kpi-value { color: var(--rel-info); }
.intel-rel-tone-success .intel-rel-kpi-value { color: var(--rel-success); }
.intel-rel-tone-danger  .intel-rel-kpi-value { color: var(--rel-accent); }
.intel-rel-tone-violet  .intel-rel-kpi-value { color: var(--rel-violet); }
.intel-rel-tone-gold    .intel-rel-kpi-value { color: var(--rel-gold); }
.intel-rel-tone-warn    .intel-rel-kpi-value { color: var(--rel-warn); }

/* Grids utilitarios */
.intel-rel-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
/* Tabela + grafico lado a lado (2.2) — borda arredondada visivel nos dois
   (antes .intel-rel-table-wrap ja tinha border-radius mas sem borda/fundo
   proprios pra mostrar o arredondado; o chart-box nao tinha nenhum). Pedido
   do usuario, setembro/2026 — so aqui, nao em todo .intel-rel-table-wrap/
   .intel-rel-chart-box do sistema (por isso escopado com .intel-rel-split-panel). */
.intel-rel-split-panel > .intel-rel-table-wrap,
.intel-rel-split-panel > .intel-rel-chart-box {
  border: 1px solid var(--rel-border);
  border-radius: var(--rel-radius-md);
  overflow: hidden;
}
.intel-rel-split-panel > .intel-rel-chart-box { padding: 14px; }
.intel-rel-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

/* Tabela */
.intel-rel-table-wrap { overflow-x: auto; border-radius: var(--rel-radius-sm); }
.intel-rel-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.intel-rel-table thead th {
  text-align: left;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.035em;
  color: var(--rel-ink-soft);
  padding: 10px 12px 9px;
  border-bottom: 2px solid var(--rel-border);
  background: linear-gradient(to bottom, var(--rel-surface) 0%, var(--rel-surface-2) 100%);
  white-space: nowrap;
  position: relative;
}
.intel-rel-table thead th.num, .intel-rel-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.intel-rel-table tbody td { padding: 11px 12px; border-bottom: 1px solid var(--rel-border-soft); color: var(--rel-ink); line-height: 1.35; }
.intel-rel-table tbody tr:last-child td { border-bottom: none; }
.intel-rel-table tbody tr:hover td { background: #fdfbfb; }
.intel-rel-table td.money, .intel-rel-table th.money { font-family: var(--intel-font-mono); font-size: 0.8rem; }
.intel-rel-table tfoot td { padding: 11px 12px; border-top: 1px solid var(--rel-border); color: var(--rel-ink); font-size: 0.8rem; font-weight: 600; background: var(--rel-surface-2); }

.intel-rel-hint {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.7rem; font-weight: 500; color: var(--rel-ink-soft); margin-top: 12px;
  background: var(--rel-surface-2); border: 1px solid var(--rel-border-soft);
  padding: 6px 10px; border-radius: 999px;
}
.intel-rel-hint svg { width: 12px; height: 12px; flex: none; color: var(--rel-ink-faint); }

/* .intel-rel-rank-badge e .intel-rank-badge (desenhado pelo helper
   compartilhado rankBadge()) sao o mesmo componente visual — regra unica
   pros dois seletores, sem duplicar a receita. */
.intel-rel-rank-badge,
.intel-rel .intel-rank-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 6px;
  font-family: var(--intel-font-mono); font-size: 0.68rem; font-weight: 600;
  background: var(--rel-surface-2); color: var(--rel-ink-soft);
}
.intel-rel-rank-badge[data-tier="1"],
.intel-rel .intel-rank-badge[data-tier="1"] { background: var(--rel-gold-soft); color: var(--rel-gold); }
.intel-rel-rank-badge[data-tier="2"],
.intel-rel .intel-rank-badge[data-tier="2"] { background: var(--rel-surface-2); color: var(--rel-ink-soft); }
.intel-rel-rank-badge[data-tier="3"],
.intel-rel .intel-rank-badge[data-tier="3"] { background: var(--rel-warn-soft); color: var(--rel-warn); }
.intel-rel .intel-tt { color: inherit; }
.intel-rel [data-tab-error], .intel-rel .intel-empty { color: var(--rel-ink); }

/* Reordenacao de colunas (column-reorder.js) — reaproveita o componente
   compartilhado, so estilizado com os tokens --rel-*. */
.intel-rel-table .intel-th-reorderable { padding-right: 22px !important; }
.intel-rel-table .intel-colreorder-trigger {
  position: absolute; top: 50%; right: 2px; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border: none; background: transparent;
  color: var(--rel-ink-faint); cursor: pointer; border-radius: 4px;
}
.intel-rel-table .intel-colreorder-trigger:hover { background: var(--rel-surface-2); color: var(--rel-ink); }
.intel-rel-table .intel-colreorder-popover {
  display: none; position: absolute; top: 100%; right: 0; z-index: 20;
  margin-top: 4px; min-width: 168px; background: var(--rel-surface);
  border: 1px solid var(--rel-border); border-radius: var(--rel-radius-sm);
  box-shadow: var(--rel-shadow-pop); padding: 4px;
}
.intel-rel-table .intel-colreorder-popover.is-open { display: block; }
.intel-rel-table .intel-colreorder-popover button {
  display: block; width: 100%; text-align: left; padding: 7px 8px; border: none;
  background: transparent; color: var(--rel-ink-soft); font-size: 0.75rem;
  font-weight: 500; border-radius: 4px; cursor: pointer; text-transform: none; letter-spacing: normal;
  font-family: var(--intel-font-sans);
}
.intel-rel-table .intel-colreorder-popover button:hover { background: var(--rel-surface-2); }

/* Combo chart (1.3) + seletor compacto */
.intel-rel-combo-controls { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.intel-rel-combo-select { position: relative; flex: 1 1 260px; max-width: 360px; }
.intel-rel-combo-select input {
  width: 100%; font-family: var(--intel-font-sans); font-size: 0.8rem; padding: 9px 12px;
  border: 1px solid var(--rel-border); border-radius: var(--rel-radius-sm);
  background: var(--rel-surface); color: var(--rel-ink);
  box-shadow: 0 1px 2px rgba(30,25,23,.04);
  transition: border-color .15s, box-shadow .15s;
}
.intel-rel-combo-select input::placeholder { color: var(--rel-ink-faint); }
.intel-rel-combo-select input:focus { outline: none; border-color: var(--rel-accent); box-shadow: 0 0 0 3px rgba(192,39,45,.10); }
.intel-rel-combo-dropdown {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 20;
  background: var(--rel-surface); border: 1px solid var(--rel-border); border-radius: var(--rel-radius-sm);
  box-shadow: var(--rel-shadow-pop); max-height: 220px; overflow-y: auto; display: none;
}
.intel-rel-combo-dropdown.is-open { display: block; }
.intel-rel-combo-dropdown button {
  display: block; width: 100%; text-align: left; border: none; background: transparent;
  padding: 8px 10px; font-size: 0.78rem; color: var(--rel-ink); cursor: pointer; font-family: var(--intel-font-sans);
}
.intel-rel-combo-dropdown button:hover { background: var(--rel-surface-2); }
.intel-rel-selected-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.intel-rel-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--rel-accent-soft); border: 1px solid var(--rel-accent-soft-border); color: var(--rel-accent-ink);
  font-size: 0.72rem; font-weight: 600; padding: 5px 6px 5px 10px; border-radius: 999px;
  box-shadow: 0 1px 2px rgba(192,39,45,.08);
}
.intel-rel-chip button { border: none; background: transparent; color: inherit; cursor: pointer; display: flex; padding: 2px; }
.intel-rel-chip button svg { width: 10px; height: 10px; }

/* Filtro de equipamentos na tabela 1.3 — baloes + checkbox (usa tokens --rel-*) */
/* Linha com os botoes de filtro (Equipamento / Motivo) lado a lado — cada
   um encolhido pro proprio conteudo (nao mais 100%/380px esticado), pra nao
   ocupar mais espaco do que um controle de filtro precisa (pedido do
   usuario, setembro/2026). */
.intel-rel-filters-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.intel-rel-equip-filter { position: relative; }
.intel-rel-equip-trigger {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 30px; padding: 0 8px 0 10px; max-width: 220px;
  background: var(--rel-surface); border: 1px solid var(--rel-border); border-radius: var(--rel-radius-sm);
  color: var(--rel-ink); font-family: var(--intel-font-sans); font-size: 0.76rem; font-weight: 600;
  cursor: pointer; transition: border-color .15s, box-shadow .15s, background .15s;
}
.intel-rel-equip-trigger span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.intel-rel-equip-trigger:hover { border-color: var(--rel-accent); }
.intel-rel-equip-trigger.is-open { border-color: var(--rel-accent); box-shadow: 0 0 0 3px rgba(192,39,45,.10); }
.intel-rel-equip-trigger.has-selected { border-color: var(--rel-accent-soft-border); color: var(--rel-accent-ink); background: var(--rel-accent-soft); }
.intel-rel-equip-trigger svg:last-child { transition: transform .15s; }
.intel-rel-equip-trigger.is-open svg:last-child { transform: rotate(180deg); }
.intel-rel-equip-dropdown {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 20;
  /* min-width proprio (o botao que abre ficou compacto/encolhido pro
     conteudo — sem isso o dropdown herdava a mesma largura estreita). */
  min-width: 240px; max-width: 320px;
  background: var(--rel-surface); border: 1px solid var(--rel-border); border-radius: var(--rel-radius-sm);
  box-shadow: var(--rel-shadow-pop); max-height: 260px; overflow-y: auto; padding: 6px; display: none;
}
.intel-rel-equip-dropdown.is-open { display: block; }
.intel-rel-equip-dropdown-actions {
  display: flex; gap: 6px; padding: 4px 2px 8px; border-bottom: 1px solid var(--rel-border-soft); margin-bottom: 4px;
}
.intel-rel-equip-dropdown-actions button {
  flex: 1; font-size: 0.7rem; font-weight: 700; padding: 6px 8px;
  border: 1px solid var(--rel-border); border-radius: 6px; background: var(--rel-surface-2); color: var(--rel-ink-soft); cursor: pointer;
}
.intel-rel-equip-dropdown-actions button:hover { background: var(--rel-surface); color: var(--rel-ink); border-color: var(--rel-accent); }
.intel-rel-equip-option {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 8px; border-radius: 6px; cursor: pointer; user-select: none;
  font-size: 0.8rem; color: var(--rel-ink);
}
.intel-rel-equip-option:hover { background: var(--rel-surface-2); }
.intel-rel-equip-option input { width: 16px; height: 16px; accent-color: var(--rel-accent); flex: none; }
.intel-rel-equip-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.intel-rel-equip-chips:empty { display: none; }

.intel-rel-chart-box { position: relative; height: 240px; }
.intel-rel-chart-box--tall { height: 300px; }
.intel-rel-chart-box--pie { height: 220px; max-width: 340px; margin: 0 auto; }
.intel-rel-chart-box--donut-sm { height: 110px; width: 110px; flex: none; position: relative; }
.intel-rel-donut-center {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  pointer-events: none; text-align: center;
}
.intel-rel-donut-center strong { display: block; font-family: var(--intel-font-mono); font-size: 1.05rem; color: var(--rel-ink); }
.intel-rel-donut-center span { display: block; font-size: 0.58rem; color: var(--rel-ink-faint); text-transform: uppercase; letter-spacing: 0.04em; }

/* Canal/Fonte de campanha (1.5) — as duas pizzas juntas num card so, com uma
   legenda propria compartilhada embaixo (2 colunas, uma por dimensao) no
   lugar da legenda padrao do Chart.js embaixo de cada grafico separado —
   pedido do usuario (setembro/2026): destacar um canal e uma fonte ao
   mesmo tempo, num unico lugar. Reaproveita .intel-rel-legend-row/-dot
   (mesmo componente da legenda do donut de consultoras em 2.1). */
.intel-rel-origem-card { display: flex; flex-direction: column; gap: 18px; }
/* Linha pontilhada vertical separando Canal | Fonte — os dois contextos vivem
   juntos no mesmo card agora, entao precisam de uma fronteira visual propria
   (pedido do usuario, setembro/2026). Sem gap no grid: a divisoria fica
   exatamente no meio, com padding igual dos dois lados. */
.intel-rel-origem-pies { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.intel-rel-origem-pie { display: flex; flex-direction: column; align-items: center; padding: 0 20px; }
.intel-rel-origem-pie:first-child { border-right: 1px dashed var(--rel-border-soft); padding-left: 0; }
.intel-rel-origem-pie:last-child { padding-right: 0; }
.intel-rel-origem-pie .intel-rel-subhead { align-self: flex-start; }
.intel-rel-origem-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding-top: 16px; border-top: 1px dashed var(--rel-border-soft); }
.intel-rel-origem-legend-group { display: flex; flex-direction: column; gap: 2px; padding: 0 20px; }
.intel-rel-origem-legend-group:first-child { border-right: 1px dashed var(--rel-border-soft); padding-left: 0; }
.intel-rel-origem-legend-group:last-child { padding-right: 0; }
.intel-rel-origem-legend-title { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--rel-ink-soft); margin-bottom: 4px; }

/* Cards de equipamento por linha (1.6) */
.intel-rel-line-card {
  background: var(--rel-surface);
  border: 1px solid var(--rel-border);
  border-left: 3px solid var(--rel-line-color, var(--rel-accent));
  border-radius: var(--rel-radius-md);
  padding: 16px;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
/* border-color na ordem top/right/bottom/left: so os 3 lados neutros mudam no
   hover — a listra colorida da esquerda (identidade da linha) e' mantida, sem
   isso o shorthand sobrescrevia border-left-color pro cinza generico do hover
   (bug encontrado durante o refino visual, setembro/2026). */
.intel-rel-line-card:hover { border-color: var(--rel-border-hover) var(--rel-border-hover) var(--rel-border-hover) var(--rel-line-color, var(--rel-accent)); box-shadow: var(--rel-shadow-hover); transform: translateY(-1px); }
.intel-rel-line-card-top { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.intel-rel-line-card-icon {
  width: 34px; height: 34px; border-radius: 9px; flex: none;
  background: color-mix(in srgb, var(--rel-line-color, var(--rel-accent)) 14%, var(--rel-surface));
  color: var(--rel-line-color, var(--rel-accent));
  display: flex; align-items: center; justify-content: center;
  border: 1px solid color-mix(in srgb, var(--rel-line-color, var(--rel-accent)) 22%, transparent);
}
.intel-rel-line-card-icon svg { width: 18px; height: 18px; }
.intel-rel-line-card-name { font-weight: 700; font-size: 0.88rem; color: var(--rel-ink); letter-spacing: -0.01em; }
.intel-rel-line-card-desc { font-size: 0.7rem; color: var(--rel-ink-soft); margin-top: 1px; }
.intel-rel-line-card-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding-top: 12px; border-top: 1px solid var(--rel-border-soft); }
.intel-rel-line-card-stats div { display: flex; flex-direction: column; gap: 3px; text-align: center; }
/* Divisoria fina entre as 3 colunas (Negociados/Vendidos/Perdidos) — antes era
   so espaço em branco, ficava dificil separar onde uma coluna termina e a
   outra comeca (pedido do usuario, setembro/2026: "mais estilo/organização"). */
.intel-rel-line-card-stats div:not(:last-child) { border-right: 1px solid var(--rel-border-soft); }
.intel-rel-line-card-stats b { font-family: var(--intel-font-mono); font-size: 1.05rem; font-variant-numeric: tabular-nums; color: var(--rel-ink); }
/* --rel-ink-faint (usado antes aqui) fica abaixo do minimo de contraste
   confortavel pra texto pequeno — trocado por ink-soft (mesmo ajuste ja
   aplicado nos outros blocos desta aba). */
.intel-rel-line-card-stats span { font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--rel-ink-soft); font-weight: 700; }
.intel-rel-line-card-stats .money { font-size: 0.66rem; color: var(--rel-ink-soft); font-family: var(--intel-font-mono); font-weight: 500; }

/* Progress */
.intel-rel-progress { height: 5px; border-radius: 999px; background: var(--rel-surface-2); overflow: hidden; }
.intel-rel-progress > span { display: block; height: 100%; background: var(--rel-success); border-radius: 999px; }

/* Controle de tarefas (1.7) */
.intel-rel-tarefas-top { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; margin-bottom: 18px; padding: 14px; background: var(--rel-surface-2); border: 1px solid var(--rel-border-soft); border-radius: var(--rel-radius-sm); }
.intel-rel-super-kpis--flex { flex: 1; min-width: 280px; margin-bottom: 0; }
.intel-rel-tarefa-taxa { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.intel-rel-tarefa-taxa span { font-family: var(--intel-font-mono); font-size: 0.76rem; font-weight: 600; min-width: 36px; text-align: right; }
.intel-rel-tarefa-taxa .intel-rel-progress { width: 56px; }

/* Rosca com fotos das consultoras (2.1) — grid de 2 colunas em vez de flex:
   a 1a coluna (1fr) absorve todo o espaco sobrando e centraliza a rosca
   dentro dele; a 2a (auto) encolhe pro tamanho da legenda e fica sempre
   encostada na borda direita do card. Pedido do usuario, setembro/2026. */
/* 2a coluna agora em % (nao "auto") — a legenda estava encolhendo pro
   tamanho minimo do conteudo (~400px, so um pouco mais larga que os nomes),
   sobrando area vazia entre ela e o centro do card. Com minmax ela ocupa uma
   fatia real da largura do card (pedido do usuario, setembro/2026). */
.intel-rel-donut-people-wrap { display: grid; grid-template-columns: 1fr minmax(320px, 48%); align-items: center; gap: 24px; }
.intel-rel-donut-people-svg { width: min(400px, 46vw); height: min(400px, 46vw); flex: none; justify-self: center; }
.intel-rel-donut-slice { cursor: pointer; transition: transform .2s ease, opacity .2s ease; transform-box: fill-box; transform-origin: center; }
.intel-rel-donut-slice:hover, .intel-rel-donut-slice:focus-visible { transform: scale(1.045); outline: none; }
.intel-rel-donut-slice:hover .intel-rel-donut-photo, .intel-rel-donut-slice:focus-visible .intel-rel-donut-photo { transform: scale(1.32); }
.intel-rel-donut-photo { transform-box: fill-box; transform-origin: center; transition: transform .15s; }
.intel-rel-donut-slice.is-selected path { stroke: var(--rel-accent); stroke-width: 3; }
/* Destaque de selecao (pedido do usuario, setembro/2026): com uma consultora
   selecionada, a fatia dela "sobe" e cresce (translateY negativo + scale), as
   demais descem um pouco e esmaecem — reforca visualmente qual fatia esta
   filtrando a secao. .has-selection e' alternada via JS (renderConsultoraDonut)
   porque so JS sabe se ha selecao ativa (nao da pra inferir isso so com CSS
   de forma confiavel aqui). */
.intel-rel-donut-people-wrap.has-selection .intel-rel-donut-slice { opacity: .4; transform: translateY(4px) scale(0.96); }
.intel-rel-donut-people-wrap.has-selection .intel-rel-donut-slice.is-selected { opacity: 1; transform: translateY(-10px) scale(1.12); }
.intel-rel-donut-people-wrap.has-selection .intel-rel-donut-slice.is-selected:hover { transform: translateY(-10px) scale(1.16); }
/* Legenda acompanha o mesmo destaque — o nome/percentual selecionado ja
   ganhava fundo+negrito (.is-selected, regra generica), aqui so os outros
   esmaecem. */
.intel-rel-donut-people-wrap.has-selection .intel-rel-legend-row:not(.is-selected) { opacity: .45; }
/* Largura fixa (nao flex:1) — antes a legenda esticava pra preencher todo o
   espaco sobrando ao lado da rosca, afastando muito o nome do percentual e
   deixando a propria rosca pequena. Agora sobra espaco pra rosca crescer
   (ver .intel-rel-donut-people-svg) e a lista fica mais compacta (pedido do
   usuario, setembro/2026). */
.intel-rel-donut-people-legend { display: flex; flex-direction: column; gap: 1px; width: 100%; }
.intel-rel-donut-people-legend .intel-rel-legend-row { padding: 4px 8px; font-size: 0.75rem; }
.intel-rel-legend-row {
  display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: var(--rel-radius-sm);
  font-size: 0.78rem; cursor: pointer; border: 1px solid transparent; background: transparent;
  width: 100%; text-align: left; color: var(--rel-ink); font-family: var(--intel-font-sans);
  transition: background .12s, border-color .12s;
}
.intel-rel-legend-row:hover { background: var(--rel-surface-2); }
.intel-rel-legend-row.is-selected { background: var(--rel-accent-soft); border-color: var(--rel-accent-soft-border); font-weight: 700; }
.intel-rel-legend-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; box-shadow: 0 0 0 2px #fff; }
.intel-rel-legend-row b { margin-left: auto; font-family: var(--intel-font-mono); font-weight: 600; font-size: 0.78rem; color: var(--rel-ink-soft); }

/* Avatar / celula de consultora */
.intel-rel-person-cell { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.intel-rel-avatar { width: 24px; height: 24px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; font-size: 0.6rem; font-weight: 700; color: #fff; }
.intel-rel-avatar-photo { width: 24px; height: 24px; border-radius: 50%; flex: none; object-fit: cover; }

/* Super card (2.2/2.3) — mini-kpi e o card-pai (.intel-rel-tarefas-top
   segue o mesmo padrao) usam --rel-surface-2/--rel-border-soft de proposito:
   e a variante "recuada" pra elemento aninhado DENTRO de um .intel-rel-card,
   nao um card de primeiro nivel — por isso nao usa --rel-surface/--rel-border
   nem o hover com sombra/translateY dos cards de primeiro nivel. */
.intel-rel-super-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
.intel-rel-mini-kpi { display: flex; align-items: center; gap: 10px; background: var(--rel-surface-2); border: 1px solid var(--rel-border-soft); border-radius: var(--rel-radius-sm); padding: 10px 14px; transition: border-color .12s; }
.intel-rel-mini-kpi:hover { border-color: var(--rel-border); }
.intel-rel-mini-kpi span { font-size: 0.66rem; font-weight: 700; color: var(--rel-ink-soft); display: block; margin-bottom: 2px; text-transform: uppercase; letter-spacing: 0.03em; }
.intel-rel-mini-kpi b { font-family: var(--intel-font-mono); font-size: 1.12rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--rel-ink); letter-spacing: -0.01em; }
.intel-rel-mini-kpi small { display: block; margin-top: 1px; font-size: 0.66rem; color: var(--rel-ink-faint); font-weight: 600; }
/* Icone do mini-kpi (1.7, "Controle de tarefas") — pedido do usuario,
   setembro/2026: antes era so rotulo+numero, sem nenhum apoio visual. */
.intel-rel-mini-kpi-icon { width: 28px; height: 28px; border-radius: 8px; flex: none; display: flex; align-items: center; justify-content: center; }
.intel-rel-mini-kpi-icon svg { width: 14px; height: 14px; }
.intel-rel-mini-kpi--info .intel-rel-mini-kpi-icon { background: var(--rel-info-soft); color: var(--rel-info); }
.intel-rel-mini-kpi--warn .intel-rel-mini-kpi-icon { background: var(--rel-warn-soft); color: var(--rel-warn); }
.intel-rel-mini-kpi--success .intel-rel-mini-kpi-icon { background: var(--rel-success-soft); color: var(--rel-success); }

/* Icone por tipo de atividade (1.7, coluna "Tipo" da tabela) — selo circular
   azul (identidade unica, nao muda por linha), seguindo a referencia do
   documento (PAINEL_CRM_MENSAL.docx) mostrada pelo usuario, setembro/2026. */
.intel-rel-tipo-atividade { display: inline-flex; align-items: center; gap: 9px; }
.intel-rel-tipo-atividade-icon {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--rel-info-soft); color: var(--rel-info);
}
.intel-rel-tipo-atividade-icon svg { width: 13px; height: 13px; }

.intel-rel-bars-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--rel-border-soft); }
.intel-rel-bars-item h5 { margin: 0 0 10px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.035em; color: var(--rel-ink-soft); display: flex; align-items: center; gap: 6px; }
.intel-rel-bars-item h5::before { content: ''; width: 3px; height: 10px; border-radius: 2px; background: var(--rel-border); flex: none; }
.intel-rel-bars-item:nth-child(1) h5::before { background: var(--rel-info); }
.intel-rel-bars-item:nth-child(2) h5::before { background: var(--rel-success); }
.intel-rel-bars-item:nth-child(3) h5::before { background: var(--rel-accent); }
.intel-rel-bars-item .intel-rel-chart-box { height: 168px; }

/* Matriz tarefas (2.4) — celula com quantidade + badge de % (quanto aquele
   tipo representa do total da consultora daquela coluna), cabecalho com
   avatar+nome+total por consultora — seguindo referencia visual do usuario
   (setembro/2026). */
.intel-rel-matrix-cell { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.intel-rel-matrix-pill { font-family: var(--intel-font-mono); font-size: 0.66rem; font-weight: 700; padding: 2px 7px; border-radius: 999px; white-space: nowrap; }
.intel-rel-matrix-head-cell { display: flex; align-items: center; gap: 8px; text-transform: none; letter-spacing: 0; font-weight: 400; }
.intel-rel-matrix-head-avatar {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.62rem; font-weight: 700; color: #fff; overflow: hidden;
}
.intel-rel-matrix-head-avatar img { width: 100%; height: 100%; object-fit: cover; }
.intel-rel-matrix-head-cell b { display: block; font-size: 0.76rem; font-weight: 700; white-space: nowrap; }
.intel-rel-matrix-head-cell small { display: block; font-size: 0.64rem; color: var(--rel-ink-soft); font-weight: 600; text-transform: none; }
/* Linha pontilhada separando os dados de cada consultora (coluna) — pedido
   do usuario, setembro/2026. So nao no ultimo th/td (Total geral), que ja
   fica destacado por outro motivo (borda solida ver .intel-rel-table
   tfoot/thead padrao). */
[data-tabela-tarefas-matriz] th:not(:last-child),
[data-tabela-tarefas-matriz] td:not(:last-child) {
  border-right: 1px dashed var(--rel-border-soft);
}

/* Equipamentos por consultora (2.5) — mesmo conceito do 2.4: icone colorido
   no cabecalho de cada coluna (identidade de linha, igual ao 1.6) e a linha
   de total no rodape com fundo destacado. */
.intel-rel-equip-consultora-head { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; }
.intel-rel-equip-consultora-head-icon { display: inline-flex; width: 18px; height: 18px; flex: none; }
.intel-rel-equip-consultora-head-icon svg { width: 100%; height: 100%; }
/* Especificidade maior que ".intel-rel-table tfoot td" (regra generica do
   sistema, que senao vence e sobrescreve o fundo aqui). */
/* "Muito simples" (feedback do usuario) — aumenta o peso visual geral da
   tabela (fonte/celulas/avatar maiores) e separa cada coluna com linha
   pontilhada, igual ao 2.4. Escopado so nesta tabela (.intel-rel-equip-
   consultora-table), nao no .intel-rel-table generico do sistema. */
.intel-rel-equip-consultora-table { font-size: 0.9rem; }
.intel-rel-equip-consultora-table thead th { font-size: 0.72rem; padding: 12px 14px; }
.intel-rel-equip-consultora-table tbody td { padding: 13px 14px; }
.intel-rel-equip-consultora-table .intel-rel-avatar { width: 30px; height: 30px; font-size: 0.7rem; }
.intel-rel-equip-consultora-table .intel-rel-matrix-pill { font-size: 0.7rem; padding: 3px 8px; }
.intel-rel-equip-consultora-table th:not(:last-child),
.intel-rel-equip-consultora-table td:not(:last-child) {
  border-right: 1px dashed var(--rel-border-soft);
}

.intel-rel-subhead { font-size: 0.76rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--rel-ink-soft); margin: 0 0 12px; }

/* Barra de filtros — Relatorio Mensal (Mes/Ano/Unidade, nessa ordem). Sem
   card (setembro/2026, pedido do usuario): nada de fundo/borda/friso lateral
   — so os controles ("balões") em si, sem titulo visivel acima de cada um
   (nome do filtro vira so `aria-label`, pra manter acessibilidade sem texto
   na tela). Vive na mesma linha do titulo "1. Painel Geral do CRM"
   (.intel-rel-divider-with-filters empurra ela pra ponta direita), em vez de
   ocupar uma linha propria acima do titulo. */
.intel-rel-filter-bar {
  display: flex;
  max-width: 100%;
}

.intel-rel-filter-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.intel-rel-filter-group {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

.intel-rel-filter-group select {
  min-height: 38px;
  border: 1px solid var(--rel-border);
  border-radius: 999px;
  background-color: var(--rel-surface);
  color: var(--rel-ink);
  font-family: var(--intel-font-sans);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0 14px;
  transition: border-color .15s, box-shadow .15s;
}

.intel-rel-filter-group select:focus-visible,
.intel-rel-multiselect .intel-multiselect-trigger:focus-visible {
  outline: none;
  border-color: var(--rel-accent);
  box-shadow: 0 0 0 3px rgba(192, 39, 45, 0.14);
}

/* Reaproveita .intel-multiselect-trigger/-dropdown/-option genericos — so
   restilizando cor/peso dentro do escopo da barra nova, sem duplicar a
   estrutura do componente. */
.intel-rel-multiselect .intel-multiselect-trigger {
  min-height: 38px;
  border: 1px solid var(--rel-border);
  background: var(--rel-surface);
  color: var(--rel-ink);
  font-family: var(--intel-font-sans);
  font-weight: 600;
  border-radius: 999px;
}

.intel-rel-multiselect .intel-multiselect-trigger.has-selected {
  border-color: var(--rel-accent);
  color: var(--rel-accent-ink);
  background: var(--rel-accent-soft);
}

.intel-rel-multiselect .intel-multiselect-dropdown {
  border: 1px solid var(--rel-border);
  box-shadow: var(--rel-shadow-pop);
  border-radius: var(--rel-radius-sm);
}

.intel-rel-multiselect .intel-multiselect-option.is-active .intel-multiselect-option-check {
  border-color: var(--rel-accent);
  background: var(--rel-accent);
}

.intel-rel-chips-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: -4px;
}

.intel-rel-chips-bar[hidden] { display: none; }

.intel-rel-chips-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.intel-rel-chips-row .intel-chip {
  background: var(--rel-accent-soft);
  color: var(--rel-accent-ink);
  border: 1px solid var(--rel-accent-soft-border);
}

@media (max-width: 980px) {
  .intel-rel-kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .intel-rel-grid-2, .intel-rel-grid-3, .intel-rel-bars-row, .intel-rel-super-kpis { grid-template-columns: 1fr; }
  .intel-rel-line-card-stats { grid-template-columns: 1fr; }
  .intel-rel-filter-controls { justify-content: flex-start; }
  .intel-rel-donut-people-wrap { grid-template-columns: 1fr; justify-items: center; }
  .intel-rel-donut-people-legend { max-width: none; width: 100%; }
}

@media (max-width: 760px) {
  .intel-module { padding: 18px; }
  .intel-card { padding: 18px; }
  .intel-card-header { flex-direction: column; }
  .intel-table { min-width: 560px; }
  .intel-filter-group { flex: 1 1 100%; }
}