/* =============================================================================================
   klip-ui.css — VISUAL NOVO do Klip (redesign de out/2026), Fase 1: cores, fonte e componentes base.

   Carregado por includes/sidebar_menu.php SÓ quando a chave está ligada (hoje: admin + cookie
   klip_ui=2), que também põe a classe "klip-ui2" no <html>. Vem depois de style.css, theme.css e
   painel_padrao.css: toda regra aqui começa por html.klip-ui2 para vencer as antigas sem
   depender de ordem. Desligar a chave = volta ao visual antigo na hora.

   O que NÃO muda daqui: cores escritas dentro de style="..." de cada tela (essas entram tela a
   tela, Fase 4). Referência visual: proposta de redesign (canvas) e docs/PADROES_UI.md.
   ============================================================================================= */

/* ---------- 1. Cores e fontes (tema escuro, padrão) ---------- */
html.klip-ui2 {
  --primary:        #6D4AFF;
  --primary-dark:   #5A39F0;
  --primary-light:  #B3A1FF;
  --success:        #3DD68C;
  --warning:        #F5B544;
  --danger:         #FF6B6B;
  --info:           #4EA8FF;
  --dark:           #0C0D12;   /* fundo da página */
  --card-bg:        #14151C;   /* superfície (cards, modais) */
  --card-hover:     #1A1C24;
  --text:           #ECEDF3;
  --text-muted:     #8A8EA3;
  --border:         #23252F;
  --input-bg:       #111218;

  /* tokens novos (prefixo k-) */
  --k-sidebar:      #0F1016;
  --k-surface-2:    #181A22;   /* botão secundário, campo destacado */
  --k-text-2:       #A1A4B5;   /* texto de apoio, mais claro que o muted */
  --k-line:         #1C1E26;   /* divisória de linha de tabela */
  --k-border-forte: #2E313D;
  --k-hover:        #16171E;
  --k-ativo:        #1C1E27;
  --k-seg:          #111218;   /* fundo do seletor de período */
  --k-seg-on:       #262936;   /* opção escolhida no seletor */
  --k-foco:         rgba(109, 74, 255, .28);
  --k-font:         'Geist', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --k-mono:         'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --k-raio:         12px;
  --k-raio-sm:      8px;
}

/* ---------- 1b. Tema claro ---------- */
html.klip-ui2.tema-claro {
  --primary:        #5B3BE8;
  --primary-dark:   #4A2BD6;
  --primary-light:  #5B3BE8;
  --success:        #15803D;
  --warning:        #B45309;
  --danger:         #DC2626;
  --info:           #2563EB;
  --dark:           #F5F6F8;
  --card-bg:        #FFFFFF;
  --card-hover:     #F6F7F9;
  --text:           #15161C;
  --text-muted:     #5E6275;
  --border:         #E3E5EA;
  --input-bg:       #F6F7F9;

  --k-sidebar:      #FFFFFF;
  --k-surface-2:    #FFFFFF;
  --k-text-2:       #4A4E5E;
  --k-line:         #EEF0F3;
  --k-border-forte: #D3D6DD;
  --k-hover:        #F3F4F7;
  --k-ativo:        #EEEFF3;
  --k-seg:          #EEF0F3;
  --k-seg-on:       #FFFFFF;
  --k-foco:         rgba(91, 59, 232, .22);
}

/* ---------- 2. Base ---------- */
html.klip-ui2 body {
  font-family: var(--k-font);
  background: var(--dark);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Números com largura fixa: colunas e indicadores alinham e não "pulam" ao atualizar */
html.klip-ui2 .kpi-value,
html.klip-ui2 .kpi-card-val,
html.klip-ui2 .metric-val,
html.klip-ui2 .analise-kpi-val,
html.klip-ui2 .bk-duo-val,
html.klip-ui2 .financeiro-card b,
html.klip-ui2 td.td-num {
  /* Geist com algarismos de largura igual: alinha como a mono, sem o espaçamento largo de código */
  font-family: var(--k-font);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
html.klip-ui2 .tabela-padrao td,
html.klip-ui2 table td,
html.klip-ui2 .summary-dates { font-variant-numeric: tabular-nums; }
html.klip-ui2 .summary-dates { white-space: nowrap; font-weight: 600; }

/* ---------- 3. Menu lateral ---------- */
html.klip-ui2 .sidebar {
  background: var(--k-sidebar);
  border-right: 1px solid var(--border);
  box-shadow: none;
}
html.klip-ui2 .sidebar-logo { border-bottom-color: var(--border); }
html.klip-ui2 .sidebar-section {
  text-transform: none;
  letter-spacing: 0;
  font-size: .76rem;
  font-weight: 500;
  color: var(--text-muted);
  padding: .9rem 1.4rem .3rem;
  margin-top: .25rem;
}
html.klip-ui2 .sidebar-link {
  margin: 1px .6rem;
  padding: .5rem .75rem;
  border-left: 0;
  border-radius: var(--k-raio-sm);
  font-size: .875rem;
  font-weight: 500;
  color: var(--k-text-2);
}
html.klip-ui2 .sidebar-link:hover {
  color: var(--text);
  background: var(--k-hover);
}
html.klip-ui2 .sidebar-link.active {
  color: var(--text);
  background: var(--k-ativo);
}
html.klip-ui2 .sidebar-link i.ti { opacity: .9; }
/* Subitens (Performance, Processos, Minha conta): o menu define cor/borda com !important */
html.klip-ui2 .sidebar-sublink {
  border-left: 0 !important;
  border-radius: var(--k-raio-sm);
  margin: 1px .6rem 1px .9rem;
  font-weight: 500;
}
html.klip-ui2 .sidebar-sublink:hover,
html.klip-ui2 .sidebar-sublink.active {
  color: var(--text) !important;
  background: var(--k-ativo) !important;
}
html.klip-ui2 body.sidebar-collapsed .sidebar-link { margin: 1px .5rem; }
html.klip-ui2 .sidebar-footer { border-top-color: var(--border); }
html.klip-ui2 .sidebar-toggle { background: var(--card-bg); border-color: var(--border); box-shadow: none; }

/* Seletor "Loja atual" */
html.klip-ui2 .sidebar-project { border-bottom-color: var(--border); }
html.klip-ui2 .sidebar-project label {
  text-transform: none;
  letter-spacing: 0;
  font-size: .76rem;
  font-weight: 500;
  color: var(--text-muted);
}
html.klip-ui2 .sidebar-project select {
  background: var(--card-bg);
  border-color: var(--border);
  border-radius: 10px;
  font-weight: 500;
  font-size: .875rem;
  padding: .6rem .7rem;
}

/* ---------- 4. Cabeçalho da página ---------- */
html.klip-ui2 .page-title {
  font-size: 1.65rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}
html.klip-ui2 .breadcrumb { color: var(--text-muted); }
html.klip-ui2 .breadcrumb a { color: var(--k-text-2); }
html.klip-ui2 .breadcrumb a:hover { color: var(--text); }

/* Abas de Performance (o estilo vem inline do performance_nav.php) */
html.klip-ui2 .page-tabs { border-bottom-color: var(--border) !important; }
html.klip-ui2 .page-tabs .page-tab-link { font-weight: 500 !important; font-size: .9rem !important; }

/* ---------- 5. Cards e indicadores ---------- */
html.klip-ui2 .card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--k-raio);
  box-shadow: none;
}
html.klip-ui2.tema-claro .card { box-shadow: 0 1px 2px rgba(16, 24, 40, .04); }
html.klip-ui2 .card-header { border-bottom-color: var(--border); }
html.klip-ui2 .card-title { font-weight: 600; letter-spacing: -0.01em; }
html.klip-ui2 .card-subtitle { color: var(--text-muted); }

html.klip-ui2 .kpi-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--k-raio);
  transition: border-color .15s;
}
html.klip-ui2 .kpi-card:hover { transform: none; border-color: var(--k-border-forte); }
html.klip-ui2 .kpi-label,
html.klip-ui2 .kpi-card-lbl {
  text-transform: none;
  letter-spacing: 0;
  font-size: .8rem;
  font-weight: 500;
  color: var(--text-muted);
}
html.klip-ui2 .kpi-value,
html.klip-ui2 .kpi-card-val { font-weight: 600; color: var(--text); }
html.klip-ui2 .kpi-sub { color: var(--text-muted); }
html.klip-ui2 .kpi-badge { border-radius: 999px; font-weight: 500; padding: 2px 8px; }

/* ---------- 6. Tabelas ---------- */
/* !important porque o tema claro antigo força o fundo do cabeçalho com !important */
html.klip-ui2 table thead th,
html.klip-ui2 .user-table th {
  background: transparent !important;
  color: var(--text-muted);
  text-transform: none;
  letter-spacing: 0;
  font-size: .78rem;
  font-weight: 500;
  border-bottom: 1px solid var(--border);
}
html.klip-ui2 table tbody tr { border-bottom-color: var(--k-line); }
html.klip-ui2 table tbody tr:nth-child(even) { background: transparent; }
html.klip-ui2 table tbody tr:hover { background: var(--k-hover); }
html.klip-ui2 td { color: var(--text); }
html.klip-ui2 td.td-muted { color: var(--text-muted); }

/* ---------- 7. Formulários ---------- */
html.klip-ui2 label { color: var(--k-text-2); font-weight: 500; }
html.klip-ui2 input[type="text"],
html.klip-ui2 input[type="email"],
html.klip-ui2 input[type="password"],
html.klip-ui2 input[type="tel"],
html.klip-ui2 input[type="number"],
html.klip-ui2 input[type="search"],
html.klip-ui2 input[type="date"],
html.klip-ui2 select,
html.klip-ui2 textarea {
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: var(--k-raio-sm);
  color: var(--text);
}
/* O tema claro antigo usa !important em todo input; aqui repete a força para valer o novo */
html.klip-ui2.tema-claro input,
html.klip-ui2.tema-claro select,
html.klip-ui2.tema-claro textarea {
  background: var(--input-bg) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}
html.klip-ui2.tema-claro input[type="checkbox"],
html.klip-ui2.tema-claro input[type="radio"] { background: transparent !important; }
html.klip-ui2 input:focus,
html.klip-ui2 select:focus,
html.klip-ui2 textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--k-foco);
}
html.klip-ui2 input::placeholder,
html.klip-ui2 textarea::placeholder { color: var(--text-muted); opacity: .8; }
html.klip-ui2 select option { background: var(--card-bg); color: var(--text); }

/* ---------- 8. Botões ---------- */
html.klip-ui2 .btn {
  border-radius: var(--k-raio-sm);
  font-weight: 500;
  font-size: .86rem;
  padding: .6rem 1.1rem;
}
html.klip-ui2 .btn-sm { padding: .4rem .8rem; font-size: .8rem; }
html.klip-ui2 .btn-lg { padding: .8rem 1.6rem; font-size: .95rem; }
html.klip-ui2 .btn-primary { background: var(--primary); color: #fff; }
html.klip-ui2 .btn-primary:hover:not(:disabled) { background: var(--primary-dark); color: #fff; }
html.klip-ui2 .btn-outline {
  background: var(--k-surface-2);
  border: 1px solid var(--k-border-forte);
  color: var(--text);
}
html.klip-ui2 .btn-outline:hover:not(:disabled) {
  background: var(--k-hover);
  border-color: var(--text-muted);
  color: var(--text);
}
html.klip-ui2 .btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--k-foco); }

/* ---------- 9. Etiquetas e avisos ---------- */
html.klip-ui2 .badge { border-radius: 999px; font-weight: 500; padding: 2px 9px; font-size: .72rem; }
html.klip-ui2 .badge-muted { background: var(--k-ativo); color: var(--k-text-2); }

html.klip-ui2 .alert {
  border-radius: 10px;
  border: 1px solid transparent;
  border-left-width: 1px;
}
html.klip-ui2 .alert-danger  { background: rgba(255, 107, 107, .08); border-color: rgba(255, 107, 107, .3); color: #FFB0B0; }
html.klip-ui2 .alert-success { background: rgba(61, 214, 140, .08);  border-color: rgba(61, 214, 140, .3);  color: #8FEABF; }
html.klip-ui2 .alert-warning { background: rgba(245, 181, 68, .08);  border-color: rgba(245, 181, 68, .3);  color: #F7C566; }
html.klip-ui2 .alert-info    { background: rgba(78, 168, 255, .08);  border-color: rgba(78, 168, 255, .3);  color: #9CCBFF; }
html.klip-ui2.tema-claro .alert-danger  { color: #991B1B; }
html.klip-ui2.tema-claro .alert-success { color: #14532D; }
html.klip-ui2.tema-claro .alert-warning { color: #78350F; }
html.klip-ui2.tema-claro .alert-info    { color: #1E3A8A; }

/* ---------- 10. Barra de período, indicadores e tabelas das telas de Performance (painel_padrao.css) ---------- */
html.klip-ui2 .filter-card,
html.klip-ui2.tema-claro .filter-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--k-raio);
}
html.klip-ui2 .filter-summary-item,
html.klip-ui2.tema-claro .filter-summary-item { background: var(--k-seg); }
html.klip-ui2 .filter-select,
html.klip-ui2 .filter-input,
html.klip-ui2.tema-claro .filter-select,
html.klip-ui2.tema-claro .filter-input {
  background: var(--k-surface-2);
  border: 1px solid var(--k-border-forte);
  color: var(--text);
  font-weight: 500;
}
/* A barra não quebra linha (painel_padrao.css): os controles não podem encolher até sumir o texto */
html.klip-ui2 .filter-card .filter-select,
html.klip-ui2 .filter-card .quick-buttons,
html.klip-ui2 .filter-card .btn-limpar,
html.klip-ui2 .filter-card .btn-atualizar { flex-shrink: 0; }
html.klip-ui2 .filter-card .filter-select { width: auto; }
html.klip-ui2 .quick-buttons {
  background: var(--k-seg);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 3px;
  gap: 2px;
}
html.klip-ui2 .quick-btn { font-weight: 500; color: var(--k-text-2); border-radius: 6px; }
html.klip-ui2 .quick-btn:hover,
html.klip-ui2.tema-claro .quick-btn:hover { background: var(--k-hover); color: var(--text); }
html.klip-ui2 .quick-btn.active,
html.klip-ui2 .quick-btn.ativo { background: var(--k-seg-on); color: var(--text); }
html.klip-ui2.tema-claro .quick-btn.active,
html.klip-ui2.tema-claro .quick-btn.ativo { box-shadow: 0 1px 2px rgba(16, 24, 40, .1); }

html.klip-ui2 .btn-limpar,
html.klip-ui2.tema-claro .btn-limpar {
  background: var(--k-surface-2);
  border: 1px solid var(--k-border-forte);
  color: var(--text);
  font-weight: 500;
}
html.klip-ui2 .btn-limpar:hover,
html.klip-ui2.tema-claro .btn-limpar:hover { background: var(--k-hover); }
html.klip-ui2 .btn-atualizar { background: var(--primary); border-color: var(--primary); font-weight: 500; }
html.klip-ui2 .btn-atualizar:hover { background: var(--primary-dark); }

html.klip-ui2 .kpi-cards .kpi-card,
html.klip-ui2.tema-claro .kpi-card { background: var(--card-bg); border-color: var(--border); }

html.klip-ui2 .painel-card,
html.klip-ui2 .tabela-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--k-raio);
}
html.klip-ui2 .painel-card-titulo { font-weight: 600; letter-spacing: -0.01em; }
/* Título das tabelas: sai a barra roxa, fica um título simples como nos cards */
html.klip-ui2 .tabela-card-header {
  background: transparent;
  color: var(--text);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -0.01em;
  padding: 1.1rem 1.5rem .4rem;
}
html.klip-ui2 .tabela-card-header .tc-col-btn,
html.klip-ui2.tema-claro .tabela-card-header .tc-col-btn {
  background: var(--k-surface-2);
  border: 1px solid var(--k-border-forte);
  color: var(--text);
}
html.klip-ui2 .tabela-card-header .tc-col-btn:hover,
html.klip-ui2.tema-claro .tabela-card-header .tc-col-btn:hover { background: var(--k-hover); }

html.klip-ui2 .tabela-padrao { font-size: .8rem; }
html.klip-ui2 .tabela-padrao th,
html.klip-ui2.tema-claro .tabela-padrao th {
  background: transparent;
  text-transform: none;
  letter-spacing: 0;
  font-size: .75rem;
  font-weight: 500;
  color: var(--text-muted);
}
html.klip-ui2 .tabela-padrao td,
html.klip-ui2.tema-claro .tabela-padrao td { border-bottom-color: var(--k-line); }
html.klip-ui2 .tabela-padrao tr:hover td { background: var(--k-hover); }
html.klip-ui2 .tabela-padrao tfoot td { border-top-color: var(--k-border-forte); }

html.klip-ui2 .tc-col-dropdown,
html.klip-ui2.tema-claro .tc-col-dropdown {
  background: var(--card-bg);
  border-color: var(--border);
  border-radius: 10px;
}

html.klip-ui2 .warning-config {
  background: rgba(245, 181, 68, .08);
  border-color: rgba(245, 181, 68, .3);
  border-radius: 10px;
}

/* ---------- 11. Barra de rolagem ---------- */
html.klip-ui2 ::-webkit-scrollbar-track { background: var(--dark); }
html.klip-ui2 ::-webkit-scrollbar-thumb { background: var(--k-border-forte); border-radius: 4px; }
html.klip-ui2 ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* =============================================================================================
   FASE 2 — peças compartilhadas
   ============================================================================================= */

/* Ícones que o klip-ui.js põe no lugar dos emojis */
html.klip-ui2 .k-ico { font-size: 1.08em; line-height: 1; vertical-align: -0.14em; opacity: .9; margin-right: .1em; }
html.klip-ui2 .page-title .k-ico { color: var(--text-muted); font-size: .8em; vertical-align: .02em; margin-right: .2em; }
html.klip-ui2 .page-tab-link .k-ico,
html.klip-ui2 .btn-limpar .k-ico { opacity: .75; }
html.klip-ui2 .k-ponto { display: inline-block; width: .55em; height: .55em; border-radius: 50%; vertical-align: .08em; margin-right: .15em; }

/* Abas de Performance: linha ativa mais fina */
html.klip-ui2 .page-tabs .page-tab-link.active { border-bottom-width: 2px !important; }

/* Botões de subtela (performance_nav.php): pílulas; a ativa fica clara em vez de roxa.
   O estilo vem inline, por isso o !important. */
html.klip-ui2 .page-tabs + div > a.btn-limpar {
  border-radius: 999px !important;
  padding: .4rem .9rem !important;
  font-size: .84rem !important;
  font-weight: 500 !important;
  background: transparent !important;
  border: 1px solid var(--border) !important;
  color: var(--k-text-2) !important;
}
html.klip-ui2 .page-tabs + div > a.btn-limpar:hover { color: var(--text) !important; border-color: var(--k-border-forte) !important; }
html.klip-ui2 .page-tabs + div > a.btn-limpar[style*="background:var(--primary)"] {
  background: var(--text) !important;
  border-color: var(--text) !important;
  color: var(--dark) !important;
}

/* Ícone "i" de explicação e botão de log das colunas */
html.klip-ui2 .info-tooltip { background: var(--k-ativo); }
html.klip-ui2 .info-tooltip::after { background: var(--k-ativo); border-color: var(--k-border-forte); color: var(--text); border-radius: 8px; }
html.klip-ui2.tema-claro .info-tooltip::after { background: #15161C; color: #ECEDF3; }
html.klip-ui2 .btn-log {
  background: var(--k-surface-2);
  border: 1px solid var(--k-border-forte);
  color: var(--k-text-2);
  font-weight: 500;
  border-radius: var(--k-raio-sm);
}
html.klip-ui2 .btn-log:hover { background: var(--k-hover); color: var(--text); }

/* Modais das telas de Performance (.modal) e o padrão .modal-box */
html.klip-ui2 .modal-content,
html.klip-ui2 .modal-box {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
}
html.klip-ui2 .modal-header { border-bottom-color: var(--border); }
html.klip-ui2 .modal-title { color: var(--text); font-weight: 600; }

/* Tabelas de campanha / detalhe */
html.klip-ui2 .campaign-table th,
html.klip-ui2 .cd-table th {
  background: transparent;
  text-transform: none;
  letter-spacing: 0;
  font-size: .75rem;
  font-weight: 500;
  border-bottom-color: var(--border);
}
html.klip-ui2 .campaign-table td,
html.klip-ui2 .cd-table td { color: var(--text); border-bottom-color: var(--k-line); }
html.klip-ui2 .campaign-table tr:hover td,
html.klip-ui2 .cd-table tr:hover td { background: var(--k-hover); }

/* =============================================================================================
   FASE 3 — tela piloto: Dados do E-commerce (e a Visão Geral, que usa as mesmas classes)
   ============================================================================================= */
html.klip-ui2 {
  /* variáveis próprias de performance.php / performance_ecommerce.php */
  --card-glass: var(--card-bg);
  --border-glass: var(--border);
  --text-val-color: var(--text);
}
html.klip-ui2 .column-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html.klip-ui2 .column-header { border-bottom-color: var(--border); }
html.klip-ui2 .column-title { color: var(--text); font-weight: 600; letter-spacing: -0.01em; }
html.klip-ui2 .metric-box {
  background: var(--k-seg);
  border: 1px solid var(--k-line);
  border-radius: 10px;
}
/* Dupla Receita | Investimento: um bloco só, arredondado, com divisória no meio. A tela zera o
   raio só da 1ª caixa (.metrics-duo .metric-box:first-child), o que deixava uma reta e outra redonda. */
html.klip-ui2 .metrics-duo {
  background: var(--k-seg);
  border: 1px solid var(--k-line);
  border-radius: 10px;
  overflow: hidden;
}
html.klip-ui2 .metrics-duo .metric-box,
html.klip-ui2 .metrics-duo .metric-box:first-child {
  background: transparent;
  border: 0;
  border-radius: 0;
}
html.klip-ui2 .metrics-duo .metric-box:first-child { border-right: 1px solid var(--border); }
/* Rótulos: sem caixa-alta; o tamanho mínimo evita os .58rem inline ficarem ilegíveis sem caixa-alta */
html.klip-ui2 .metric-lbl {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  font-size: .74rem !important;
  color: var(--text-muted);
}
html.klip-ui2 .metric-val { font-weight: 600; color: var(--text); }
html.klip-ui2 .metric-sub { color: var(--text-muted); }
html.klip-ui2 .metric-change { font-weight: 500; }
html.klip-ui2 .split-box { background: var(--k-seg); border: 1px solid var(--k-line); border-radius: 10px; }
html.klip-ui2 .split-divider { background: var(--border); }
html.klip-ui2 .ret-box,
html.klip-ui2.tema-claro .ret-box { background: var(--k-seg); border: 1px solid var(--k-line); }

/* Funil: cores chapadas, sem o efeito 3D de sombra interna */
html.klip-ui2 .funil-vendas-card { border-radius: var(--k-raio); }
html.klip-ui2 .funil-vendas-title { font-weight: 600; letter-spacing: -0.01em; }
html.klip-ui2 .funil-etapa-fundo { box-shadow: none; border-radius: 12px; }
html.klip-ui2 #funil-shape-1 .funil-etapa-fundo { background: #6D4AFF; }
html.klip-ui2 #funil-shape-2 .funil-etapa-fundo { background: #5E3FE6; }
html.klip-ui2 #funil-shape-3 .funil-etapa-fundo { background: #5034CC; }
html.klip-ui2 #funil-shape-4 .funil-etapa-fundo { background: #422AB3; }
html.klip-ui2 #funil-shape-5 .funil-etapa-fundo { background: #1F9D63; }
html.klip-ui2 .funil-metrica-label { text-transform: none; letter-spacing: 0; font-weight: 500; font-size: .74rem; }

/* =============================================================================================
   FASE 4 — tela a tela
   Levantamento das regras antigas: rótulos e cabeçalhos em caixa-alta de 8–10 px e fundos no
   azul-marinho antigo. Sem caixa-alta, esses rótulos sobem para ~11 px para continuar legíveis.
   Etiquetas pequenas (status, "Beta", tags) continuam em caixa-alta de propósito.
   ============================================================================================= */

/* ---- Cabeçalhos de tabela de cada tela ---- */
html.klip-ui2 .pp-table th, html.klip-ui2 .pp-risco-thead, html.klip-ui2 .bk-canais-tabela th,
html.klip-ui2 .daily-table th, html.klip-ui2 .p1-monthly-table th, html.klip-ui2 .aa-table th,
html.klip-ui2 .aa-comp th, html.klip-ui2 .cr-tabela th, html.klip-ui2 .table-mini th,
html.klip-ui2 .dk-table th, html.klip-ui2 .db-tb th, html.klip-ui2 .est th,
html.klip-ui2 .historico-tabela th, html.klip-ui2 .crm-table th, html.klip-ui2 .widget-table th,
html.klip-ui2 .meeting-tasks th, html.klip-ui2 .seo-tabela th, html.klip-ui2 .afiliado-tabela th {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  font-size: .75rem;
  color: var(--text-muted);
}

/* ---- Rótulos de indicador e de campo ---- */
html.klip-ui2 .pp-kpi-label, html.klip-ui2 .ma-kpi-label, html.klip-ui2 .ma-metric-lbl,
html.klip-ui2 .ped-kpi-lbl, html.klip-ui2 .det-kpi-lbl, html.klip-ui2 .aa-kpi-label,
html.klip-ui2 .p1-monthly-kpi-label, html.klip-ui2 .db-kpi-l, html.klip-ui2 .seo-kpi small,
html.klip-ui2 .dash-label, html.klip-ui2 .score-label, html.klip-ui2 .est .k-label,
html.klip-ui2 .rg-macro-metrica-label, html.klip-ui2 .comparison-meta-label,
html.klip-ui2 .bk-card-venda .bk-label, html.klip-ui2 .bk-card-mini .bk-label, html.klip-ui2 .bk-duo-sub,
html.klip-ui2 .bk-tend-col .sub, html.klip-ui2 .financeiro-card span, html.klip-ui2 .crm-stat span,
html.klip-ui2 .form-group label, html.klip-ui2 .lead-form-grid label, html.klip-ui2 .modal-tarefa-field label,
html.klip-ui2 .cr-campo label, html.klip-ui2 .of-campo label, html.klip-ui2 .dk-field label,
html.klip-ui2 .dk-detail-field .dk-detail-label, html.klip-ui2 .config-label, html.klip-ui2 .filter-label,
html.klip-ui2 .db-filters .lbl, html.klip-ui2 .cc-row-lbl, html.klip-ui2 .cc-incluir-lbl,
html.klip-ui2 .client-label, html.klip-ui2 .of-card-sub, html.klip-ui2 .funil-etapa-label {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  font-size: .74rem;
}
html.klip-ui2 .financeiro-card .financeiro-fonte { text-transform: none; letter-spacing: 0; font-size: .7rem; }

/* ---- Títulos de seção que estavam em caixa-alta ---- */
html.klip-ui2 .ma-cat-ad-head, html.klip-ui2 .ma-prob-title, html.klip-ui2 .ma-varpop-title,
html.klip-ui2 .ma-varpop-section, html.klip-ui2 .rg-macro-title, html.klip-ui2 .arq-historico-head,
html.klip-ui2 .column-config-title, html.klip-ui2 .checkbox-popover-title, html.klip-ui2 .subitems-title,
html.klip-ui2 .est .cad-block h4, html.klip-ui2 .db-cmp h4, html.klip-ui2 .db-lev-h,
html.klip-ui2 .of-res-titulo, html.klip-ui2 .timeline-title, html.klip-ui2 .chart-type-grid .chart-type-section-label,
html.klip-ui2 .scenario-banner, html.klip-ui2 .sidebar-excel-banner {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
  font-size: .8rem;
}

/* ---- Fundos e campos que ainda usavam o azul-marinho antigo ---- */
html.klip-ui2 select.form-control,
html.klip-ui2 input.form-control,
html.klip-ui2 textarea.form-control,
html.klip-ui2 .scenario-input,
html.klip-ui2 .scenario-input-real,
html.klip-ui2 .cr-per-bar select,
html.klip-ui2 .of-per-bar select,
html.klip-ui2 .modal-tarefa-field input,
html.klip-ui2 .modal-tarefa-field textarea,
html.klip-ui2 .modal-tarefa-field select {
  background: var(--input-bg);
  color: var(--text);
  border-color: var(--border);
}
html.klip-ui2 .td-estado-sticky,
html.klip-ui2 tr:hover .td-estado-sticky { background: var(--card-bg); }
html.klip-ui2 .db-modal-box { background: var(--card-bg); border-color: var(--border); }

/* ---- Pílulas de filtro (grupos, segmentos): a escolhida fica clara, como na proposta ---- */
html.klip-ui2 .grupo-chip,
html.klip-ui2 .bk-chip { font-weight: 500; color: var(--k-text-2); border-color: var(--border); }
html.klip-ui2 .grupo-chip:hover,
html.klip-ui2 .bk-chip:hover { color: var(--text); border-color: var(--k-border-forte); }
html.klip-ui2 .grupo-chip.ativo,
html.klip-ui2 .bk-chip.ativo { background: var(--text); border-color: var(--text); color: var(--dark); }
html.klip-ui2 .bk-tab.ativo { color: var(--text); background: var(--k-ativo); border-color: var(--k-border-forte); }
html.klip-ui2 .bk-quick-buttons { background: var(--k-seg); border-color: var(--border); }
html.klip-ui2 .bk-quick-btn { font-weight: 500; color: var(--k-text-2); }
html.klip-ui2 .bk-quick-btn.ativo { background: var(--k-seg-on); color: var(--text); }

/* ---- Lojas (projetos.php) ---- */
html.klip-ui2 .projeto-card { border-radius: var(--k-raio); padding: 1.1rem; }
html.klip-ui2 .projeto-card:hover { border-color: var(--k-border-forte); }
html.klip-ui2 .projeto-logo { background: rgba(109, 74, 255, .16); border: 0; color: var(--primary-light); font-weight: 600; }
html.klip-ui2 .projeto-title { font-weight: 600; letter-spacing: -0.01em; }
html.klip-ui2 .financeiro-card { background: var(--k-seg); border-color: var(--k-line); border-radius: 10px; }
html.klip-ui2 .financeiro-card b { font-weight: 500; }
html.klip-ui2 .financeiro-card-queda { background: rgba(255, 107, 107, .08); border-color: rgba(255, 107, 107, .3); }
html.klip-ui2 .saude-midia-badge { border-radius: 999px; font-weight: 500; }
html.klip-ui2 .tag { font-weight: 500; }

/* ---- Benchmark ---- */
html.klip-ui2 .bk-filtros-card { border-radius: var(--k-raio); }
html.klip-ui2 .bk-escopo-btn.ativo { background: var(--k-ativo); }
html.klip-ui2 .bk-vendas-box { background: transparent; border: 0; padding: 0; }
html.klip-ui2 .bk-card-venda,
html.klip-ui2 .bk-card-mini { border-radius: var(--k-raio); }
html.klip-ui2 .bk-duo-val { font-weight: 500; }
html.klip-ui2 .bk-duo-val.loja { color: var(--primary-light); }