/* ════════════════════════════════════════════════════════════════
 *  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-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-tabela-comp {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.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: 14px 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-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-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); }

.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;
}

.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;
}