/* ════════════════════════════════════════════════════════════════
 *  ExcFlow CRM v44.7.0 — Painel Comercial v3 (CSS)
 * ════════════════════════════════════════════════════════════════
 *
 *  Tema: Terracota/laranja escuro (consistência com Reativação)
 *  Layout: 4 seções verticais numa página única scrollável
 *
 *  Estrutura:
 *    1. RESET + container principal
 *    2. HEADER (título + ações)
 *    3. FILTROS (linha de selects)
 *    4. SEÇÃO 1 — Análise Comparativa X vs Y (tabela)
 *    5. SEÇÃO 2 — KPIs grandes + Gráfico Faturamento Geral + Ranking + Vendedores
 *    6. SEÇÃO 3 — Conversão Orçamento → Pedido (4 colunas)
 *    7. SEÇÃO 4 — Tabela completa por vendedor
 *    8. Modal compartilhar
 *    9. Responsivo
 *
 * ════════════════════════════════════════════════════════════════ */


/* ─── 1. RESET + CONTAINER ──────────────────────────────────── */

#tela-comercial-v3 {
  padding: 16px 20px;
  max-width: 1700px;
  margin: 0 auto;
  color: var(--text, #f5f2ed);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}


/* ─── 2. HEADER ──────────────────────────────────────────────── */

.cv3-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--accent, #c97c5d);
}

.cv3-header h1 {
  margin: 0;
  font-size: 24px;
  color: var(--text, #f5f2ed);
  display: flex;
  align-items: center;
  gap: 8px;
}

.cv3-header h1 small {
  font-size: 13px;
  color: #888;
  font-weight: normal;
  margin-left: 12px;
}

.cv3-acoes {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.cv3-acoes button {
  background-color: var(--bg-input, #1a1a1a) !important;
  color: var(--text, #f5f2ed) !important;
  border: 1px solid #555 !important;
  padding: 6px 14px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  transition: all 0.15s;
}
.cv3-acoes button:hover {
  background-color: var(--accent, #c97c5d) !important;
  color: #fff !important;
  border-color: var(--accent, #c97c5d) !important;
}


/* ─── 3. FILTROS ─────────────────────────────────────────────── */

.cv3-filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
  padding: 12px;
  background: var(--bg-card, #2a1f1a);
  border: 1px solid #3a2820;
  border-radius: 8px;
  align-items: center;
}

.cv3-filtros label {
  font-size: 12px;
  color: #aaa;
  display: flex;
  align-items: center;
  gap: 6px;
}

.cv3-filtros select,
.cv3-filtros input[type="month"],
.cv3-filtros input[type="date"] {
  background: #1a1a1a;
  color: #f5f2ed;
  border: 1px solid #444;
  padding: 5px 8px;
  border-radius: 4px;
  font-size: 13px;
}
.cv3-filtros select option {
  background: #1a1a1a;
  color: #f5f2ed;
}

.cv3-filtros button.cv3-aplicar {
  background: var(--accent, #c97c5d);
  color: #fff;
  border: none;
  padding: 6px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
}
.cv3-filtros button.cv3-aplicar:hover { opacity: 0.9; }

.cv3-filtros .info-periodo {
  font-size: 12px;
  color: #888;
  margin-left: auto;
}


/* ─── SEÇÕES (header de cada seção) ─────────────────────────── */

/* CV3-FILTROS-ATIVOS */
.cv3-filtros-ativos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  background: var(--bg-card, #2a1f1a);
  border: 1px solid #3a2820;
  border-left: 3px solid var(--accent, #c97c5d);
  border-radius: 0 8px 8px 0;
  padding: 10px 14px;
  margin-bottom: 16px;
}

.cv3-fa-tit {
  font-size: 11px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #8a8078;
  margin-right: 2px;
}

.cv3-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(201, 124, 93, 0.14);
  border: 1px solid #4a3528;
  border-radius: 20px;
  padding: 4px 11px;
  font-size: 12px;
  color: var(--text, #f5f2ed);
}
.cv3-chip b { color: #8a8078; font-weight: 400; }
.cv3-chip i { color: #8a8078; font-style: normal; font-size: 11px; }
.cv3-chip-vend { border-color: var(--accent, #c97c5d); }
.cv3-chip a {
  color: var(--accent, #c97c5d);
  text-decoration: none;
  font-size: 14px;
  line-height: 1;
  padding-left: 2px;
}
.cv3-chip a:hover { color: #e89878; }

.cv3-fa-limpar {
  font-size: 12px;
  color: var(--accent, #c97c5d);
  text-decoration: none;
  margin-left: 4px;
}
.cv3-fa-limpar:hover { text-decoration: underline; }

.cv3-fa-aviso {
  flex-basis: 100%;
  font-size: 12px;
  line-height: 1.45;
  color: #f1c40f;
  background: rgba(241, 196, 15, 0.08);
  border: 1px solid rgba(241, 196, 15, 0.28);
  border-radius: 6px;
  padding: 8px 10px;
  margin-top: 2px;
}

.cv3-secao {
  margin-bottom: 24px;
}

.cv3-secao-titulo {
  font-size: 13px;
  color: var(--accent, #c97c5d);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin: 0 0 10px 0;
  padding-left: 8px;
  border-left: 3px solid var(--accent, #c97c5d);
}


/* ─── 4. SEÇÃO 1: ANÁLISE COMPARATIVA X vs Y ─────────────────── */

.cv3-comparativo {
  background: var(--bg-card, #2a1f1a);
  border: 1px solid #3a2820;
  border-radius: 8px;
  padding: 16px;
  overflow-x: auto;
}

.cv3-comparativo h3 {
  margin: 0 0 12px 0;
  font-size: 16px;
  color: var(--accent, #c97c5d);
  font-style: italic;
}

/* CV3-REALMETA */
/* Secao 1 em duas colunas: comparativo + Real x Meta */
.cv3-secao1-grid {
  display: grid;
  grid-template-columns: minmax(0, 940px) minmax(300px, 1fr);
  gap: 16px;
  align-items: stretch; /* /* CV3-ALTURA-PAR */ as colunas dividem a mesma altura */
}
@media (max-width: 1200px) {
  .cv3-secao1-grid { grid-template-columns: minmax(0, 1fr); }
}

/* faixa lateral marcando o inicio de cada bloco */
.cv3-comparativo,
.cv3-realmeta {
  border-left: 3px solid var(--accent, #c97c5d);
  border-radius: 0 8px 8px 0;
}

.cv3-realmeta {
  background: var(--bg-card, #2a1f1a);
  border: 1px solid #3a2820;
  border-left: 3px solid var(--accent, #c97c5d);
  padding: 16px;
}
.cv3-realmeta h3 {
  margin: 0 0 14px 0;
  font-size: 16px;
  color: var(--accent, #c97c5d);
  font-style: italic;
}

/* CV3-REALMETA-V2 */
.rm-topo { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }

/* distancia ate a meta: o numero que manda no bloco */
.rm-gap {
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}
.rm-gap-mini {
  font-size: 12px;
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* pulsacao suave: chama atencao sem virar estrobo na tela aberta o dia todo */
@keyframes cv3Pulsa {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}
.cv3-realmeta .pulsa { animation: cv3Pulsa 1.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .cv3-realmeta .pulsa { animation: none; }
}

/* duas linhas por vendedor: nome e receita em cima, indicadores embaixo */
.cv3-realmeta .rm-item { display: block; }
.rm-l1 { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.rm-receita {
  font-size: 12px;
  color: var(--text, #f5f2ed);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.rm-l2 { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 8px; margin-top: 4px; }
/* CV3-REALMETA-V3 */
/* participacao na receita: primeira coluna, para dar para escanear a
   equipe inteira lendo so a esquerda */
.rm-part {
  font-size: 15px;
  font-weight: 700;
  color: var(--accent, #c97c5d);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  min-width: 46px;
  flex-shrink: 0;
}

/* nome ocupa o meio e encolhe antes dos numeros */
.rm-l1 .rm-nome { flex: 1; min-width: 0; }

/* a linha de baixo perdeu uma coluna */
.rm-l2 { grid-template-columns: 1fr auto; }

.rm-titulo-lista span { color: #6b5c52; text-transform: none; letter-spacing: 0; }

/* neste bloco a leitura e binaria: bateu a meta ou nao */
.cv3-realmeta .status-baixo { color: #e74c3c; }
.cv3-realmeta .rm-fill.status-baixo,
.cv3-realmeta .rm-bar-fill.status-baixo { background: #e74c3c; }
.rm-pct {
  font-size: 30px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.rm-sub { font-size: 13px; color: var(--text, #f5f2ed); font-variant-numeric: tabular-nums; }
.rm-sub span { color: #8a8078; }

.rm-barra {
  position: relative;
  height: 10px;
  background: #1d1512;
  border-radius: 5px;
  overflow: hidden;
  margin: 12px 0 4px;
}
.rm-fill { height: 100%; border-radius: 5px; transition: width .35s ease; }
.rm-marca {
  position: absolute;
  top: 0;
  right: 0;
  width: 2px;
  height: 100%;
  background: rgba(245, 242, 237, 0.35);
}

.rm-titulo-lista {
  margin: 16px 0 8px;
  font-size: 11px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #8a8078;
  border-top: 1px solid #3a2820;
  padding-top: 12px;
}
/* CV3-ALTURA-PAR */
.cv3-rm-wrap {
  position: relative;
  min-height: 100%;
}
.cv3-secao1-grid > .cv3-rm-wrap > .cv3-realmeta {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* a lista e a unica parte que rola; o topo com o total fica sempre fixo */
.rm-lista {
  display: flex;
  flex-direction: column;
  gap: 13px;
  overflow-y: auto;
  min-height: 0;
  flex: 1;
  padding-right: 6px;
}

/* barra de rolagem na paleta do painel, em vez do cinza do sistema */
.rm-lista::-webkit-scrollbar { width: 6px; }
.rm-lista::-webkit-scrollbar-track { background: #1d1512; border-radius: 3px; }
.rm-lista::-webkit-scrollbar-thumb { background: #6b5c52; border-radius: 3px; }
.rm-lista::-webkit-scrollbar-thumb:hover { background: var(--accent, #c97c5d); }
.rm-lista { scrollbar-width: thin; scrollbar-color: #6b5c52 #1d1512; }

/* empilhado nao tem par para alinhar: volta ao fluxo normal */
@media (max-width: 1200px) {
  .cv3-rm-wrap { position: static; min-height: 0; }
  .cv3-secao1-grid > .cv3-rm-wrap > .cv3-realmeta {
    position: static;
    display: block;
    overflow: visible;
  }
  .rm-lista { overflow-y: visible; padding-right: 0; }
}
.rm-item { display: block; } /* /* CV3-REALMETA-V2 */ virou duas linhas */
.rm-nome {
  font-size: 12px;
  color: var(--text, #f5f2ed);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rm-bar { height: 6px; background: #1d1512; border-radius: 3px; overflow: hidden; }
.rm-bar-fill { height: 100%; border-radius: 3px; }
.rm-val { font-size: 12px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.rm-vazio { font-size: 12px; color: #8a8078; padding: 10px 0; }

/* status reaproveitando as cores ja usadas nos KPIs */
.cv3-realmeta .status-ok { color: #2ecc71; }
.cv3-realmeta .status-alerta { color: #f1c40f; }
.cv3-realmeta .status-critico { color: #e74c3c; }
.cv3-realmeta .status-neutro { color: #8a8078; }
.cv3-realmeta .rm-fill.status-ok,
.cv3-realmeta .rm-bar-fill.status-ok { background: #2ecc71; }
.cv3-realmeta .rm-fill.status-alerta,
.cv3-realmeta .rm-bar-fill.status-alerta { background: #f1c40f; }
.cv3-realmeta .rm-fill.status-critico,
.cv3-realmeta .rm-bar-fill.status-critico { background: #e74c3c; }
.cv3-realmeta .rm-fill.status-neutro,
.cv3-realmeta .rm-bar-fill.status-neutro { background: #6b5c52; }

/* CV3-COMP-LAYOUT */
.cv3-tabela-comp {
  width: 100%;
  /* sem o teto a tabela estica na tela toda e afasta numero do rotulo */
  max-width: 100%; /* /* CV3-REALMETA */ o grid ja limita a coluna */
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 14px;
}

.cv3-tabela-comp th:nth-child(1) { width: 30%; }
.cv3-tabela-comp th:nth-child(2) { width: 19%; }
.cv3-tabela-comp th:nth-child(3) { width: 19%; }
.cv3-tabela-comp th:nth-child(4) { width: 18%; }
.cv3-tabela-comp th:nth-child(5) { width: 14%; }

/* hierarquia: periodo anterior e contexto, periodo atual e o assunto */
.cv3-tabela-comp td.valor:nth-child(2) {
  font-size: 14px;
  font-weight: 500;
  color: #a89c93;
}
.cv3-tabela-comp td.valor:nth-child(3) {
  font-size: 18px;
  color: var(--text, #f5f2ed);
}

.cv3-tabela-comp th,
.cv3-tabela-comp td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cv3-tabela-comp th {
  text-align: right;
  font-size: 12px;
  color: var(--accent, #c97c5d);
  padding: 10px 12px;
  font-style: italic;
  font-weight: 600;
  letter-spacing: 0.5px;
  border-bottom: 1px solid #3a2820;
}

.cv3-tabela-comp th:first-child { text-align: left; }

.cv3-tabela-comp td {
  padding: 12px 12px;
  font-variant-numeric: tabular-nums;
}

.cv3-tabela-comp td.metrica {
  font-weight: 600;
  color: var(--text, #f5f2ed);
  font-size: 14px;
}

.cv3-tabela-comp td.valor {
  text-align: right;
  font-size: 18px;
  font-weight: 600;
}

.cv3-tabela-comp td.delta {
  text-align: right;
  font-size: 14px;
  font-weight: 600;
}
.cv3-tabela-comp td.delta.positivo { color: #2ecc71; }
.cv3-tabela-comp td.delta.negativo { color: #e74c3c; }
.cv3-tabela-comp td.delta.neutro   { color: #888; }

.cv3-tabela-comp td.delta-pct { text-align: right; font-size: 13px; color: #c97c5d; font-weight: 600; }


/* ─── 5. SEÇÃO 2: ANÁLISE RECEITA (KPIs + Gráficos) ─────────── */

.cv3-secao-receita {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 16px;
}

@media (max-width: 1100px) {
  .cv3-secao-receita { grid-template-columns: 1fr; }
}

/* KPIs grandes (lado esquerdo - igual print 2) */
/* CV3-MESES-V1 */
.cv3-ms-ano {
  font-size: 11px;
  color: #8a8078;
  letter-spacing: 0.5px;
  padding: 2px 4px 6px;
}
#cv3-meses-pop { min-width: 150px; }

/* CV3-MULTIVEND-V1 */
.cv3-ms {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.cv3-ms-cap { color: #aaa; font-size: 13px; }
.cv3-ms-btn {
  background: var(--bg-card, #2a1f1a);
  border: 1px solid #4a3528;
  border-radius: 6px;
  color: var(--text, #f5f2ed);
  padding: 6px 10px;
  font-size: 13px;
  cursor: pointer;
}
.cv3-ms-btn:hover { border-color: var(--accent, #c97c5d); }
.cv3-ms-pop {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 60;
  margin-top: 4px;
  min-width: 220px;
  max-height: 320px;
  overflow-y: auto;
  background: #1d1512;
  border: 1px solid #4a3528;
  border-radius: 8px;
  padding: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
.cv3-ms-acoes {
  border-bottom: 1px solid #3a2820;
  padding-bottom: 6px;
  margin-bottom: 6px;
}
.cv3-ms-acoes a { color: var(--accent, #c97c5d); font-size: 12px; text-decoration: none; }
.cv3-ms-acoes a:hover { text-decoration: underline; }
.cv3-ms-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 4px;
  font-size: 13px;
  color: var(--text, #f5f2ed);
  cursor: pointer;
  border-radius: 4px;
}
.cv3-ms-item:hover { background: rgba(201, 124, 93, 0.12); }

.cv3-kpis {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cv3-kpi {
  background: var(--bg-card, #2a1f1a);
  border: 1px solid #4a3528;
  border-radius: 10px;
  padding: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  transition: border-color 0.15s;
}
.cv3-kpi:hover { border-color: var(--accent, #c97c5d); }

.cv3-kpi .icone {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(201, 124, 93, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.cv3-kpi .conteudo {
  flex: 1;
  min-width: 0;
}

/* CV3-TIPS */
/* balao proprio: o title nativo demora a abrir e nao quebra linha */
.cv3-tip {
  position: relative;
  cursor: help;
  border-bottom: 1px dotted #6b5c52;
}
.cv3-tip::after {
  content: attr(data-tip);
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  z-index: 80;
  width: 260px;
  padding: 10px 12px;
  background: #140e0b;
  color: #e8e8e8;
  border: 1px solid var(--accent, #c97c5d);
  border-radius: 6px;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
  white-space: normal;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity .15s ease;
  pointer-events: none;
}
.cv3-tip::before {
  content: "";
  position: absolute;
  left: 14px;
  top: calc(100% + 3px);
  z-index: 81;
  border: 5px solid transparent;
  border-bottom-color: var(--accent, #c97c5d);
  opacity: 0;
  visibility: hidden;
  transition: opacity .15s ease;
  pointer-events: none;
}
.cv3-tip:hover::after,
.cv3-tip:hover::before,
.cv3-tip:focus::after,
.cv3-tip:focus::before {
  opacity: 1;
  visibility: visible;
}

/* o balao precisa escapar do card, senao fica cortado */
.cv3-kpi { overflow: visible; }
.cv3-comparativo { overflow-x: visible; }

/* nas ultimas colunas o balao abre para a esquerda para nao sair da tela */
.cv3-tabela-comp td.metrica .cv3-tip::after { width: 300px; }

.cv3-kpi .label {
  font-size: 12px;
  color: #aaa;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.cv3-kpi .valor {
  font-size: 22px;
  font-weight: 700;
  color: var(--text, #f5f2ed);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

/* Cores especiais por KPI */
.cv3-kpi.kpi-meta .icone { background: rgba(241, 196, 15, 0.15); }
.cv3-kpi.kpi-ating-rs .icone { background: rgba(46, 204, 113, 0.15); }
.cv3-kpi.kpi-ating-pct .icone { background: rgba(231, 76, 60, 0.15); }
.cv3-kpi.kpi-pedidos .icone { background: rgba(52, 152, 219, 0.15); }
.cv3-kpi.kpi-ticket .icone { background: rgba(155, 89, 182, 0.15); }

/* KPI-ANOANT-V1 */
.cv3-kpi .cv3-kpi-ant {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}
.cv3-kpi .cv3-kpi-ant .ant-base { color: #8a8078; }
.cv3-kpi .cv3-kpi-ant .ant-var { font-weight: 600; }
.cv3-kpi .cv3-kpi-ant .ant-var.sobe { color: #2ecc71; }
.cv3-kpi .cv3-kpi-ant .ant-var.desce { color: #e74c3c; }
.cv3-kpi .cv3-kpi-ant .ant-var.igual { color: #8a8078; font-weight: 400; }

.cv3-kpi.positivo .valor { color: #2ecc71; }
.cv3-kpi.negativo .valor { color: #e74c3c; }
.cv3-kpi.status-ok .valor { color: #2ecc71; }
.cv3-kpi.status-alerta .valor { color: #f1c40f; }
.cv3-kpi.status-critico .valor { color: #e74c3c; }


/* Painel de gráficos (lado direito) */
.cv3-paineis {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cv3-painel {
  background: var(--bg-card, #2a1f1a);
  border: 1px solid #3a2820;
  border-radius: 8px;
  padding: 14px;
}

.cv3-painel h4 {
  margin: 0 0 10px 0;
  font-size: 14px;
  color: #ddd;
  font-weight: 600;
  text-align: center;
}

.cv3-painel canvas {
  width: 100% !important;
  height: 220px !important;
}


/* Painel de Faturamento Geral - destaque */
.cv3-fat-geral {
  border-color: rgba(201, 124, 93, 0.4);
}
.cv3-fat-geral canvas {
  height: 250px !important;
}


/* ─── 6. SEÇÃO 3: CONVERSÃO ORÇAMENTO → PEDIDO ───────────────── */

.cv3-conversao-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

@media (max-width: 900px) {
  .cv3-conversao-grid { grid-template-columns: repeat(2, 1fr); }
}

.cv3-rank {
  background: var(--bg-card, #2a1f1a);
  border: 1px solid #3a2820;
  border-radius: 8px;
  padding: 14px;
}

.cv3-rank h4 {
  margin: 0 0 12px 0;
  font-size: 14px;
  color: var(--accent, #c97c5d);
  font-style: italic;
  text-align: center;
}

/* BLOCO-DESCONTOS-V1-1 */
/* o bloco de descontos tem rotulos longos: nome de vendedor nao cabe
   nos 50px herdados do bloco de conversao */
.cv3-desc-grid { grid-template-columns: repeat(2, 1fr); }

.cv3-desc-rank .cv3-rank-mes {
  width: 132px;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* mes sem cobertura: presente na lista, mas sem competir por atencao */
.cv3-rank-item.sem-dado .cv3-rank-mes,
.cv3-rank-item.sem-dado .cv3-rank-valor { color: #6b5c52; }
.cv3-rank-item.sem-dado .cv3-rank-bar { opacity: 0.45; }

.cv3-rank-item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 13px;
}

.cv3-rank-mes {
  width: 50px;
  font-size: 12px;
  color: #aaa;
  flex-shrink: 0;
  text-align: right;
}

.cv3-rank-bar {
  flex: 1;
  height: 22px;
  background: rgba(201, 124, 93, 0.2);
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}

.cv3-rank-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #c97c5d 0%, #e89878 100%);
  border-radius: 4px;
  transition: width 0.3s;
}

.cv3-rank-valor {
  font-size: 13px;
  font-weight: 600;
  color: var(--text, #f5f2ed);
  min-width: 60px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}


/* ─── 7. SEÇÃO 4: TABELA POR VENDEDOR ────────────────────────── */

.cv3-tabela-wrap {
  background: var(--bg-card, #2a1f1a);
  border: 1px solid #3a2820;
  border-radius: 8px;
  padding: 14px;
  overflow-x: auto;
}

.cv3-tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.cv3-tabela th {
  background: #3a2820;
  padding: 8px;
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  color: #ddd;
  letter-spacing: 0.5px;
}

.cv3-tabela td {
  padding: 8px;
  border-bottom: 1px solid #3a2820;
  font-variant-numeric: tabular-nums;
}

.cv3-tabela tr:hover { background: rgba(255,255,255,0.03); }

.cv3-tabela tr.linha-total {
  background: rgba(201, 124, 93, 0.12);
  font-weight: 600;
}

.cv3-tabela td.num { text-align: right; }
.cv3-tabela td.center { text-align: center; }

.cv3-tabela .pct-meta { font-weight: 600; }
.cv3-tabela .pct-meta.cor-ok      { color: #2ecc71; }
.cv3-tabela .pct-meta.cor-alerta  { color: #f1c40f; }
.cv3-tabela .pct-meta.cor-critico { color: #e74c3c; }
.cv3-tabela .pct-meta.cor-neutro  { color: #aaa; }

.cv3-tabela .variacao.subiu { color: #2ecc71; }
.cv3-tabela .variacao.caiu  { color: #e74c3c; }
.cv3-tabela .variacao.igual { color: #888; }
.cv3-tabela .variacao.novo  { color: var(--accent, #c97c5d); }

.cv3-tabela .ating-rs.positivo { color: #2ecc71; }
.cv3-tabela .ating-rs.negativo { color: #e74c3c; }


/* ─── 8. MODAL ───────────────────────────────────────────────── */

.cv3-modal-link {
  background: #1a1410;
  border: 1px solid #555;
  border-radius: 4px;
  padding: 8px;
  font-family: monospace;
  font-size: 11px;
  word-break: break-all;
  color: #aaa;
  margin-top: 8px;
}

.cv3-modal-link.copiado {
  border-color: #2ecc71;
  color: #2ecc71;
}


/* ─── Loading / vazio ────────────────────────────────────────── */

.cv3-loading {
  text-align: center;
  padding: 40px;
  color: #888;
  font-size: 14px;
}

.cv3-loading::after {
  content: '...';
  animation: cv3dots 1.5s infinite;
}
@keyframes cv3dots {
  0%, 20% { content: '.'; }
  40% { content: '..'; }
  60%, 100% { content: '...'; }
}

.cv3-vazio {
  text-align: center;
  padding: 30px;
  color: #888;
}


/* ─── 9. RESPONSIVO ──────────────────────────────────────────── */

@media (max-width: 768px) {
  .cv3-tabela { font-size: 11px; }
  .cv3-tabela th, .cv3-tabela td { padding: 5px; }
  .cv3-kpi .valor { font-size: 18px; }
  .cv3-kpi .icone { width: 40px; height: 40px; }
}


/* PATCH-V3.2 #LEGADO-3: esconde item de menu antigo "Comercial" da topbar.
   O app.js v44 hardcoda esse botão. Como temos stub que redireciona pra v3,
   esconder via CSS é seguro e zero-risco. */
#nav-comercial,
button#nav-comercial,
.nav-btn[id="nav-comercial"] {
  display: none !important;
}


/* PATCH-V3.3: inputs de range custom */
.cv3-filtros #cv3-lbl-range-ini input,
.cv3-filtros #cv3-lbl-range-fim input {
  background: #1a1a1a;
  color: #f5f2ed;
  border: 1px solid #444;
  padding: 5px 8px;
  border-radius: 4px;
  font-size: 13px;
}






/* PATCH-ARQ-V3: aplicada — Bloco Análise de Arquitetos (v3 dark/tech) */
.cv3-arq-bloco {
  margin: 32px 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
}
.cv3-arq-header {
  background: var(--bg-0);
  background-image: var(--grad-glow);
  padding: 22px 26px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid transparent;
  border-image: var(--grad-fire) 1;
  flex-wrap: wrap;
  gap: 16px;
}
.cv3-arq-title h2 {
  margin: 0 0 4px 0;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.3px;
}
.cv3-arq-sub {
  font-size: 11px;
  color: var(--text-mid);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.cv3-arq-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  font-size: 12px;
  color: var(--text);
  padding: 8px 12px;
  border: 1px solid var(--border);
  background: var(--bg-2);
  transition: border-color 0.15s, background 0.15s;
  letter-spacing: 0.3px;
}
.cv3-arq-toggle:hover { border-color: var(--terracota); background: var(--bg-3); }
.cv3-arq-toggle input { cursor: pointer; accent-color: var(--terracota); }

/* RESUMO */
.cv3-arq-resumo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px;
  background: var(--border);
  padding: 1px;
  border-bottom: 1px solid var(--border);
}
.cv3-arq-kpi {
  background: var(--bg-1);
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cv3-arq-kpi .lbl {
  font-size: 10px;
  color: var(--text-low);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-weight: 600;
}
.cv3-arq-kpi .val {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.5px;
}

/* GRID DE RANKINGS */
.cv3-arq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 1px;
  background: var(--border);
  padding: 1px;
}
.cv3-arq-rank {
  background: var(--bg-1);
  padding: 16px 18px;
  min-width: 0;
}
.cv3-arq-rank-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.cv3-arq-rank-head h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: var(--text);
  font-weight: 700;
}
.cv3-arq-vertodos {
  background: transparent;
  border: 1px solid var(--terracota);
  color: var(--terracota);
  padding: 4px 10px;
  cursor: pointer;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-family: inherit;
  transition: all 0.15s;
}
.cv3-arq-vertodos:hover { background: var(--terracota); color: var(--text); }

/* LISTA DE ARQUITETOS */
.cv3-arq-lista { list-style: none; padding: 0; margin: 0; }
.cv3-arq-item {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
}
.cv3-arq-item:last-child { border-bottom: none; }
.cv3-arq-item .pos {
  font-family: var(--font-mono);
  color: var(--mostarda);
  font-weight: 700;
  font-size: 12px;
  padding-top: 2px;
}
.cv3-arq-item .info { min-width: 0; }
.cv3-arq-item .row-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 5px;
}
.cv3-arq-item .nome {
  font-size: 12px;
  color: var(--text);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.cv3-arq-item .valor {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--terracota);
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}
.cv3-arq-item .row-bar {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items: center;
}
.cv3-arq-item .bar-wrap {
  height: 5px;
  background: var(--bg-3);
  overflow: hidden;
  min-width: 60px;
}
.cv3-arq-item .bar {
  height: 100%;
  background: var(--grad-fire);
}
.cv3-arq-item .pct {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-mid);
  white-space: nowrap;
  min-width: 38px;
  text-align: right;
}
.cv3-arq-item .conv {
  font-size: 10px;
  color: var(--text-low);
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.cv3-arq-item .conv strong {
  color: var(--mostarda);
  font-family: var(--font-mono);
  font-weight: 700;
}
.cv3-arq-vazio {
  color: var(--text-low);
  font-style: italic;
  text-align: center;
  padding: 20px 0;
  font-size: 12px;
}
.cv3-arq-loading {
  color: var(--text-mid);
  padding: 32px;
  font-style: italic;
  text-align: center;
}
.cv3-arq-erro {
  color: var(--vermelho);
  background: rgba(248, 113, 113, 0.08);
  border-left: 3px solid var(--vermelho);
  padding: 12px 16px;
  font-size: 13px;
  margin: 12px;
}

/* MODAL */
.cv3-arq-modal-bg {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(10, 10, 11, 0.85);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
}
.cv3-arq-modal {
  background: var(--bg-card);
  max-width: 1200px;
  width: 100%;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-hi);
}
.cv3-arq-modal-head {
  background: var(--bg-0);
  background-image: var(--grad-glow);
  padding: 16px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid transparent;
  border-image: var(--grad-fire) 1;
}
.cv3-arq-modal-head h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.2px;
}
.cv3-arq-modal-fechar {
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  padding: 0 8px;
  transition: color 0.15s;
}
.cv3-arq-modal-fechar:hover { color: var(--terracota); }
.cv3-arq-modal-body {
  overflow-y: auto;
  flex: 1;
  background: var(--bg-1);
}
.cv3-arq-tab {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  color: var(--text);
}
.cv3-arq-tab th, .cv3-arq-tab td {
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.cv3-arq-tab th {
  background: var(--bg-2);
  color: var(--mostarda);
  position: sticky;
  top: 0;
  font-family: var(--font-display);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-weight: 700;
}
.cv3-arq-tab td.num, .cv3-arq-tab th.num {
  text-align: right;
  font-family: var(--font-mono);
}
.cv3-arq-tab tr:hover td { background: var(--bg-2); }
.cv3-arq-tab em { color: var(--text-low); font-style: normal; font-size: 10px; }

/* FILTROS AVANÇADO COLAPSÁVEL */
.cv3-avancado {
  display: inline-block;
}
.cv3-avancado summary {
  cursor: pointer;
  padding: 8px 12px;
  border: 1px solid var(--border);
  background: var(--bg-2);
  color: var(--text-mid);
  font-size: 12px;
  letter-spacing: 0.3px;
  transition: all 0.15s;
  list-style: none;
  user-select: none;
}
.cv3-avancado summary::-webkit-details-marker { display: none; }
.cv3-avancado summary:hover { border-color: var(--terracota); color: var(--text); }
.cv3-avancado[open] summary {
  border-color: var(--terracota);
  color: var(--terracota);
  background: var(--bg-3);
}
.cv3-avancado-inner {
  display: inline-flex;
  gap: 12px;
  padding: 10px 0 0 4px;
  flex-wrap: wrap;
  align-items: center;
}
/* PATCH-ARQ-V3: fim CSS */