/* [PAINEL-COM-V2] Painel Comercial: proporções, gráficos e detalhamento enxuto (22/10/2026)
   Mesmo conteúdo do painel; muda só a disposição e o acabamento. Escopo: #tela-comercial-v3-host. */
#tela-comercial-v3-host {
  --cv2-ac: var(--t-c97c5d, #4F46E5); --cv2-line: var(--border, #E6E8EF); --cv2-card: var(--bg-card, #fff); --cv2-mid: var(--text-mid, #5B6178);
  --font-mono: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
}
#tela-comercial-v3-host [hidden] { display:none !important; }

/* títulos de seção: um estilo só */
#tela-comercial-v3-host .cv3-secao { margin-bottom:22px; }
#tela-comercial-v3-host .cv3-secao-titulo { font-size:16px; font-weight:700; color:var(--text); text-transform:none; letter-spacing:-.2px; padding-left:0; border-left:0; margin:0 0 10px; }
#tela-comercial-v3-host .cv3-comparativo h3, #tela-comercial-v3-host .cv3-realmeta h3 { font-size:14px; font-style:normal; font-weight:700; color:var(--text); margin:0 0 8px; }

/* cartões: borda fina e raio 12 (sem filete colorido interno) */
#tela-comercial-v3-host .cv3-comparativo, #tela-comercial-v3-host .cv3-realmeta, #tela-comercial-v3-host .cv3-kpi, #tela-comercial-v3-host .cv3-painel,
#tela-comercial-v3-host .cv3-rank, #tela-comercial-v3-host .cv3-tabela-wrap {
  background:var(--cv2-card); border:1px solid var(--cv2-line) !important; border-radius:12px !important; box-shadow:0 1px 2px rgba(16,24,40,.04); }
html[data-tema="escuro"] #tela-comercial-v3-host .cv3-comparativo, html[data-tema="escuro"] #tela-comercial-v3-host .cv3-realmeta, html[data-tema="escuro"] #tela-comercial-v3-host .cv3-kpi,
html[data-tema="escuro"] #tela-comercial-v3-host .cv3-painel, html[data-tema="escuro"] #tela-comercial-v3-host .cv3-rank { box-shadow:none; }

/* 1. comparativo (2/3) + Real × Meta (1/3) */
#tela-comercial-v3-host .cv3-secao1-grid { grid-template-columns:minmax(0,2fr) minmax(280px,1fr); gap:12px; }
#tela-comercial-v3-host .cv3-comparativo { padding:14px 16px; }
#tela-comercial-v3-host .cv3-tabela-comp th { font-size:10.5px; letter-spacing:.8px; padding:6px 10px; }
#tela-comercial-v3-host .cv3-tabela-comp td { padding:7px 10px; }
#tela-comercial-v3-host .cv3-tabela-comp td.valor:nth-child(3) { font-size:15px; }
#tela-comercial-v3-host .cv3-sembase { color:var(--cv2-mid); cursor:help; }

/* 2. os 6 KPIs em uma linha */
#tela-comercial-v3-host .cv3-secao-receita { display:block; }
#tela-comercial-v3-host .cv3-kpis { display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:12px; margin-bottom:12px; }
#tela-comercial-v3-host .cv3-kpi { display:block; padding:12px 14px; min-height:96px; }
#tela-comercial-v3-host .cv3-kpi .icone { position:absolute; top:12px; right:12px; width:28px; height:28px; font-size:13px; }
#tela-comercial-v3-host .cv3-kpi .icone svg { width:15px; height:15px; }
#tela-comercial-v3-host .cv3-kpi .label { font-size:11.5px; padding-right:34px; }
#tela-comercial-v3-host .cv3-kpi .valor { font-size:20px; letter-spacing:-.4px; white-space:nowrap; margin-top:6px; }
#tela-comercial-v3-host .cv3-kpis .cv3-kpi:nth-child(n+4) .cv3-tip::after { left:auto; right:0; } /* balão das dicas não vaza a tela */
#tela-comercial-v3-host .cv3-kpi .cv3-kpi-ant { font-size:11px; margin-top:4px; flex-wrap:wrap; gap:2px 6px; }

/* 3. gráficos: faturamento e pedidos lado a lado; por vendedor em largura total */
#tela-comercial-v3-host .cv3-paineis { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; }
#tela-comercial-v3-host .cv3-paineis > .cv3-painel:nth-child(2) { grid-column:1 / -1; order:3; }
#tela-comercial-v3-host .cv3-painel { padding:14px 16px 12px; }
#tela-comercial-v3-host .cv3-painel h4 { text-align:left; font-size:13.5px; font-weight:700; color:var(--text); margin:0 0 6px; }
#tela-comercial-v3-host .cv3-painel canvas, #tela-comercial-v3-host .cv3-fat-geral canvas { height:260px !important; }
#tela-comercial-v3-host .cv3-painel.cv3-painel-vazio { display:flex; align-items:center; gap:14px; padding:12px 16px; }
#tela-comercial-v3-host .cv3-painel.cv3-painel-vazio h4 { margin:0; white-space:nowrap; }
#tela-comercial-v3-host .cv3-painel.cv3-painel-vazio .cv3-vazio { padding:0 !important; text-align:left; color:var(--cv2-mid); font-size:12.5px; }

/* 4. conversão: as mesmas 5 colunas, mais baixas */
#tela-comercial-v3-host .cv3-rank { padding:12px 14px; }
#tela-comercial-v3-host .cv3-rank h4 { font-style:normal; font-size:12.5px; font-weight:700; margin:0 0 8px; }
#tela-comercial-v3-host .cv3-rank-item { height:26px !important; margin:0 0 3px !important; font-size:12px; gap:8px; }
#tela-comercial-v3-host .cv3-rank-valor:has(small) { display:block !important; flex-shrink:0; }
#tela-comercial-v3-host .cv3-rank-valor small { display:inline !important; margin:0 0 0 5px !important; font-size:10.5px !important; }
#tela-comercial-v3-host .cv3-rank-mes { width:26px; font-size:11px; text-align:left; color:var(--cv2-mid); }
#tela-comercial-v3-host .cv3-rank-bar { height:10px; border-radius:3px; }
#tela-comercial-v3-host .cv3-rank-bar-fill { border-radius:3px; background:var(--cv2-ac); }
#tela-comercial-v3-host .cv3-rank-valor { font-size:12px; min-width:0; white-space:nowrap; }

/* 5. Análise de Arquitetos e "não voltaram": mesmo acabamento do painel */
#tela-comercial-v3-host .cv3-arq-bloco { margin:0 0 22px; border:1px solid var(--cv2-line); border-radius:12px; overflow:hidden; background:var(--cv2-card); }
#tela-comercial-v3-host .cv3-arq-header { background:none !important; border-bottom:1px solid var(--cv2-line); border-image:none; padding:14px 16px; }
#tela-comercial-v3-host .cv3-arq-title h2 { font-size:16px; letter-spacing:-.2px; }
#tela-comercial-v3-host .cv3-arq-title h2 .icsf-e { display:none; }
#tela-comercial-v3-host .cv3-arq-sub { text-transform:none; letter-spacing:0; font-size:12.5px; }
#tela-comercial-v3-host .cv3-arq-toggle { border-radius:8px; }
#tela-comercial-v3-host .cv3-arq-kpi { padding:12px 16px; gap:3px; }
#tela-comercial-v3-host .cv3-arq-kpi .lbl { text-transform:none; letter-spacing:0; font-size:11.5px; color:var(--cv2-mid); }
#tela-comercial-v3-host .cv3-arq-kpi .val { font-size:19px; }
#tela-comercial-v3-host .cv3-arq-rank-head h3 { text-transform:none; letter-spacing:0; font-size:13px; }
#tela-comercial-v3-host .cv3-arq-vertodos { border-radius:7px; text-transform:none; letter-spacing:0; font-size:11px; font-weight:600; }
#tela-comercial-v3-host .cv3-arq-item .bar { background:var(--cv2-ac); }
#tela-comercial-v3-host .cv3-arq-item .bar-wrap { border-radius:3px; }
#tela-comercial-v3-host .anv { margin-top:0; }
#tela-comercial-v3-host .anv-h h2 { font-size:16px; letter-spacing:-.2px; }

/* 6. detalhamento: um cartão com abas */
#tela-comercial-v3-host .cv3-det2-hd { display:flex; align-items:baseline; gap:10px; margin:0 0 10px; }
#tela-comercial-v3-host .cv3-det2-hd .cv3-secao-titulo { margin:0; }
#tela-comercial-v3-host .cv3-det2-hd span { color:var(--cv2-mid); font-size:12.5px; }
#tela-comercial-v3-host .cv3-det2-card { background:var(--cv2-card); border:1px solid var(--cv2-line); border-radius:12px; overflow:hidden; }
#tela-comercial-v3-host .cv3-det2-tabs { display:flex; align-items:center; gap:2px; flex-wrap:wrap; padding:0 12px; border-bottom:1px solid var(--cv2-line); }
#tela-comercial-v3-host .cv3-det2-tab { background:none; border:0; border-bottom:2px solid transparent; margin-bottom:-1px; padding:12px 12px 11px; font:inherit; font-size:13px; font-weight:600; color:var(--cv2-mid); cursor:pointer; display:inline-flex; align-items:center; gap:6px; }
#tela-comercial-v3-host .cv3-det2-tab b { font-size:11px; padding:1px 7px; border-radius:999px; background:color-mix(in srgb, var(--cv2-mid) 14%, transparent); }
#tela-comercial-v3-host .cv3-det2-tab small { font-size:11.5px; font-weight:500; color:var(--cv2-mid); }
#tela-comercial-v3-host .cv3-det2-tab.on { color:var(--cv2-ac); border-bottom-color:var(--cv2-ac); }
#tela-comercial-v3-host .cv3-det2-tab.on b { background:color-mix(in srgb, var(--cv2-ac) 14%, transparent); color:var(--cv2-ac); }
#tela-comercial-v3-host .cv3-det2-tab.on small { color:var(--cv2-ac); }
#tela-comercial-v3-host .cv3-det2-ferr { margin-left:auto; display:flex; gap:8px; align-items:center; padding:7px 0; }
#tela-comercial-v3-host .cv3-det2-ferr input, #tela-comercial-v3-host .cv3-det2-ferr select { height:32px; border:1px solid var(--cv2-line); border-radius:8px; background:var(--cv2-card); color:var(--text); padding:0 10px; font:inherit; font-size:12.5px; }
#tela-comercial-v3-host .cv3-det2-ferr input { width:230px; }
#tela-comercial-v3-host .cv3-det2-ferr select { max-width:200px; }
#tela-comercial-v3-host .cv3-det2-wrap { overflow-x:auto; padding:2px 14px 0; }
#tela-comercial-v3-host .cv3-det2-t { width:100%; border-collapse:collapse; font-size:12.5px; }
#tela-comercial-v3-host .cv3-det2-t th { text-align:left; font-size:10.5px; letter-spacing:.7px; text-transform:uppercase; color:var(--cv2-mid); font-weight:600; padding:9px 8px; border-bottom:1px solid var(--cv2-line); white-space:nowrap; cursor:pointer; user-select:none; }
#tela-comercial-v3-host .cv3-det2-t th.ord { color:var(--cv2-ac); }
#tela-comercial-v3-host .cv3-det2-t th.num, #tela-comercial-v3-host .cv3-det2-t td.num { text-align:right; }
#tela-comercial-v3-host .cv3-det2-t td { padding:8px; border-bottom:1px solid color-mix(in srgb, var(--cv2-line) 70%, transparent); white-space:nowrap; }
#tela-comercial-v3-host .cv3-det2-n, #tela-comercial-v3-host .cv3-det2-d { color:var(--cv2-mid); }
#tela-comercial-v3-host .cv3-det2-c { display:inline-flex; align-items:center; gap:7px; }
#tela-comercial-v3-host .cv3-det2-c i { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
#tela-comercial-v3-host .cv3-det2-a { white-space:normal !important; min-width:220px; }
#tela-comercial-v3-host .cv3-det2-a b { font-weight:600; }
#tela-comercial-v3-host .cv3-det2-a span { color:var(--cv2-mid); }
#tela-comercial-v3-host .cv3-det2-v { width:230px; }
#tela-comercial-v3-host .cv3-det2-v { display:table-cell; }
#tela-comercial-v3-host .cv3-det2-bar { display:inline-block; vertical-align:middle; width:110px; height:5px; border-radius:3px; background:color-mix(in srgb, var(--cv2-ac) 12%, transparent); margin-right:10px; overflow:hidden; }
#tela-comercial-v3-host .cv3-det2-bar i { display:block; height:100%; background:color-mix(in srgb, var(--cv2-ac) 45%, transparent); border-radius:3px; }
#tela-comercial-v3-host .cv3-det2-v b { display:inline-block; min-width:92px; font-weight:600; }
#tela-comercial-v3-host .cv3-det2-t tr.cv3-ped-click:hover td { background:color-mix(in srgb, var(--cv2-ac) 6%, transparent); }
#tela-comercial-v3-host .cv3-det2-tot td { font-weight:700; background:color-mix(in srgb, var(--cv2-ac) 6%, transparent); border-bottom:0; }
#tela-comercial-v3-host .cv3-det2-vazio { text-align:center; color:var(--cv2-mid); padding:22px 8px !important; }
#tela-comercial-v3-host .cv3-det2-pg { display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; padding:10px 14px 12px; color:var(--cv2-mid); font-size:12px; }
#tela-comercial-v3-host .cv3-det2-pgs { display:inline-flex; gap:4px; }
#tela-comercial-v3-host .cv3-det2-pgs button { min-width:30px; height:30px; border:1px solid var(--cv2-line); border-radius:8px; background:var(--cv2-card); color:var(--text); font:inherit; font-size:12px; cursor:pointer; }
#tela-comercial-v3-host .cv3-det2-pgs button.on { background:var(--cv2-ac); border-color:var(--cv2-ac); color:#fff; }
#tela-comercial-v3-host .cv3-det2-pgs button:disabled { opacity:.4; cursor:default; }
#tela-comercial-v3-host .cv3-det2-inat { padding:6px 14px 14px; }
#tela-comercial-v3-host .cv3-det2-inat .cv3-secao { margin:0; }
#tela-comercial-v3-host .cv3-det2-inat .cv3-secao-titulo { display:none; }
#tela-comercial-v3-host .cv3-det2-inat .cv3-tabela-wrap { box-shadow:none; }

@media (max-width: 1280px) {
  #tela-comercial-v3-host .cv3-kpis { grid-template-columns:repeat(3, minmax(0,1fr)); }
  #tela-comercial-v3-host .cv3-kpis .cv3-kpi .cv3-tip::after { left:0; right:auto; }
  #tela-comercial-v3-host .cv3-kpis .cv3-kpi:nth-child(3n) .cv3-tip::after { left:auto; right:0; }
}
@media (max-width: 1100px) {
  #tela-comercial-v3-host .cv3-paineis { grid-template-columns:minmax(0,1fr); }
  #tela-comercial-v3-host .cv3-secao1-grid { grid-template-columns:minmax(0,1fr); }
  #tela-comercial-v3-host .cv3-det2-ferr { margin-left:0; width:100%; flex-wrap:wrap; }
  #tela-comercial-v3-host .cv3-det2-ferr input { flex:1 1 160px; width:auto; }
}
@media (max-width: 700px) {
  #tela-comercial-v3-host .cv3-comparativo { overflow-x:auto !important; } /* a tabela rola dentro do cartão, não a página */
  #tela-comercial-v3-host .cv3-kpis { grid-template-columns:repeat(2, minmax(0,1fr)); }
  #tela-comercial-v3-host .cv3-kpis .cv3-kpi .cv3-tip::after { left:0; right:auto; width:200px; }
  #tela-comercial-v3-host .cv3-kpis .cv3-kpi:nth-child(even) .cv3-tip::after { left:auto; right:0; }
  #tela-comercial-v3-host .cv3-kpi .valor { font-size:17px; }
  #tela-comercial-v3-host .cv3-det2-bar { display:none; }
  #tela-comercial-v3-host .cv3-det2-v { width:auto; }
  #tela-comercial-v3-host .cv3-det2-v b { min-width:0; }
  #tela-comercial-v3-host .cv3-det2-tab small { display:none; }
}