/* =====================================================================
   PLATAFORMA BLUMEN — layout v2 (camada de tela, carregada DEPOIS do plataforma.css)
   Direção: papel branco, linhas finas no lugar de sombras e caixas, azul só onde há ação, status em ponto
   (sem pílula colorida), funil sem molduras cinza. O menu lateral continua escuro.
   Assinatura: a onda do microondulado, só sob o título da página.
   Liga/desliga: atributo data-ui="2" no <html> do index.html. Para voltar ao visual anterior: tirar o atributo
   (ou o <link> deste arquivo). Não afeta a impressão (media="screen").
   Sumário: 1 cores · 2 página e topo · 3 cartões · 4 filtros e botões · 5 tabelas e status · 6 funil · 7 menu "Novo" · 8 PackFlow, pedidos e estados vazios · 9 Financeiro (Fretes e Custo de facas) no padrão
   ===================================================================== */

/* ---------------------------------------------------------------- 1. cores (tema claro; o escuro mantém as suas) */
:root[data-ui="2"]:not([data-theme="dark"]) {
    --bg-primary: #f8f9fb;
    --bg-hover: #f2f4f7;
    --bg-input: #ffffff;
    --text-primary: #111827;
    --text-secondary: #4b5563;
    --text-tertiary: #6b7280;
    --border-color: #e7eaf0;
    --border-strong: #d5dbe4;
    --shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
    --shadow-sm: 0 0 0 rgba(16, 24, 40, 0);
    --shadow-md: 0 4px 12px rgba(16, 24, 40, 0.07);
    --shadow-lg: 0 8px 24px rgba(16, 24, 40, 0.10);
    --lane: #eef1f5;   /* fundo das pistas do funil e do quadro do PackFlow */
}
:root[data-ui="2"][data-theme="dark"] { --lane: color-mix(in srgb, #ffffff 4%, var(--bg-card)); }

/* ---------------------------------------------------------------- 2. página e topo */
:root[data-ui="2"] .topbar { box-shadow: none; border-bottom-color: var(--border-color); }
:root[data-ui="2"] .topbar .search-global { background: var(--bg-hover); border-color: transparent; }
:root[data-ui="2"] .topbar .search-global:hover { border-color: var(--border-strong); }
:root[data-ui="2"] .page-header { margin-bottom: 20px; }
:root[data-ui="2"] .page-header h1 { font-weight: 600; letter-spacing: -0.02em; }
/* a onda do microondulado: 44px, sob o título */
:root[data-ui="2"] .page-header h1::after {
    content: ''; display: block; width: 44px; height: 6px; margin-top: 8px; background: var(--primary);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='6' viewBox='0 0 22 6'%3E%3Cpath d='M0 3 Q5.5 -1.5 11 3 T22 3' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x left center / 22px 6px;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='6' viewBox='0 0 22 6'%3E%3Cpath d='M0 3 Q5.5 -1.5 11 3 T22 3' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x left center / 22px 6px;
}
:root[data-ui="2"] .page-header p { color: var(--text-tertiary); margin-top: 6px; }

/* ---------------------------------------------------------------- 3. cartões: linha fina, sem sombra */
:root[data-ui="2"] .card, :root[data-ui="2"] .kpi-card { box-shadow: none; border-color: var(--border-color); }
:root[data-ui="2"] .kpi-card:hover { box-shadow: none; border-color: var(--border-strong); }
/* o funil não precisa de duas caixas em volta: as colunas ficam direto sobre o fundo da página */
:root[data-ui="2"] #oppQuadroCard, :root[data-ui="2"] #kanbanBoard { background: transparent; border: 0; box-shadow: none; padding: 0 !important; }

/* ---------------------------------------------------------------- 4. filtros e botões */
:root[data-ui="2"] .filter-bar { background: transparent; border: 0; box-shadow: none; padding: 0; }
:root[data-ui="2"] .filter-bar .filter-label { display: none; }
:root[data-ui="2"] .btn-outline, :root[data-ui="2"] .btn-secondary { border-color: var(--border-strong); }
:root[data-ui="2"] .btn-primary, :root[data-ui="2"] .btn-primary:hover:not(:disabled) { box-shadow: none; }
:root[data-ui="2"] .btn-primary:hover:not(:disabled) { background: var(--primary-dark); }

/* ---------------------------------------------------------------- 5. tabelas e status */
:root[data-ui="2"] table th { background: transparent; border-bottom: 1px solid var(--border-strong); color: var(--text-tertiary); border-radius: 0; }
:root[data-ui="2"] table td { padding-top: 13px; padding-bottom: 13px; }
:root[data-ui="2"] table tbody tr:hover td { background: var(--bg-hover); }
/* status = ponto colorido + texto (a cor vem da própria classe do status; só o fundo some) */
:root[data-ui="2"] .status-badge, :root[data-ui="2"] .status-badge.selo-xs { background: transparent; padding: 0; gap: 6px; font-weight: 500; border: 0; }
:root[data-ui="2"] .status-badge::before { content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ---------------------------------------------------------------- 6. funil */
/* Cada etapa é uma pista suave (fundo levemente mais escuro que a página) com cabeçalho claro: ponto na cor da etapa, nome, quantidade e total */
:root[data-ui="2"] .funnel { gap: 12px; align-items: stretch; }
:root[data-ui="2"] .funnel-stage { --etapa: #94a3b8; background: var(--lane); border: 0; border-radius: var(--radius-lg); padding: 12px; min-width: 196px; }
:root[data-ui="2"] .funnel-stage.drag-over { background: color-mix(in srgb, var(--primary) 9%, var(--lane)); box-shadow: inset 0 0 0 2px var(--primary); }
:root[data-ui="2"] .funnel-stage[data-stage="Contato Inicial"] { --etapa: #94a3b8; }
:root[data-ui="2"] .funnel-stage[data-stage="Prospecção"] { --etapa: #7aa7f0; }
:root[data-ui="2"] .funnel-stage[data-stage="Orçamento"] { --etapa: #4f86eb; }
:root[data-ui="2"] .funnel-stage[data-stage="Proposta"] { --etapa: #2f6fed; }
:root[data-ui="2"] .funnel-stage[data-stage="Negociação"] { --etapa: #5b3fd6; }
:root[data-ui="2"] .funnel-stage[data-stage="Fechado"] { --etapa: var(--success); }
:root[data-ui="2"] .funnel-stage[data-stage="Perdido"] { --etapa: var(--danger); }
:root[data-ui="2"] .funnel-stage h4 { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 8px; margin: 0 0 12px; padding: 0 2px; text-transform: none; letter-spacing: 0; }
:root[data-ui="2"] .funnel-stage h4 .stage-nome { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: var(--fs-sm); font-weight: 600; color: var(--text-primary); }
:root[data-ui="2"] .funnel-stage h4 .stage-nome::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--etapa); }
:root[data-ui="2"] .funnel-stage h4 .stage-qtd { min-width: 22px; padding: 1px 8px; border-radius: 999px; background: var(--bg-card); color: var(--text-secondary); font-size: var(--fs-xs); font-weight: 600; text-align: center; }
:root[data-ui="2"] .funnel-stage h4 .stage-total { grid-column: 1 / -1; padding-left: 16px; color: var(--text-tertiary); font-size: var(--fs-xs); font-weight: 500; white-space: nowrap; }

/* cartão do negócio: valor e empresa em destaque; o resto, em uma linha de apoio */
:root[data-ui="2"] .funnel-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius); box-shadow: none; padding: 12px 14px; margin-bottom: 8px; }
:root[data-ui="2"] .funnel-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); transform: none; }
:root[data-ui="2"] .funnel-card .funnel-value { font-size: var(--fs-lg); font-weight: 600; letter-spacing: -0.01em; color: var(--text-primary); padding-right: 0; }
:root[data-ui="2"] .funnel-card .funnel-company { font-size: var(--fs-sm); color: var(--text-secondary); margin-top: 2px; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:root[data-ui="2"] .funnel-card .kcard-status { margin-top: 8px; font-size: var(--fs-xs); }
:root[data-ui="2"] .funnel-card .kchips { display: flex; flex-wrap: nowrap; gap: 4px; margin-top: 8px; }
:root[data-ui="2"] .funnel-card .kchip { background: transparent; border: 1px solid var(--border-color); color: var(--text-tertiary); padding: 1px 7px; font-weight: 500; }
:root[data-ui="2"] .funnel-card .kchip:hover { color: var(--text-primary); border-color: var(--border-strong); filter: none; }
:root[data-ui="2"] .funnel-card .kchip-lig:hover { color: #7c3aed; }
:root[data-ui="2"] .funnel-card .kchip-wpp:hover { color: #15803d; }
:root[data-ui="2"] .funnel-card .kchip-eml:hover { color: #b45309; }
:root[data-ui="2"] .funnel-card .kcard-vendedor { color: var(--text-secondary); font-size: var(--fs-xs); margin-top: 8px; }
:root[data-ui="2"] .funnel-card .kcard-vendedor i { color: var(--text-tertiary); }
:root[data-ui="2"] .funnel-card .funnel-time { opacity: 1; color: var(--text-tertiary); font-size: var(--fs-2xs); margin-top: 4px; }
/* ações do cartão (projeto, IA, excluir): só aparecem ao passar o mouse ou ao focar; em tela de toque ficam sempre à mostra */
:root[data-ui="2"] .funnel-card .kcard-acoes { opacity: 0; background: var(--bg-card); padding: 0 0 0 6px; transition: opacity .12s ease; }
:root[data-ui="2"] .funnel-card:hover .kcard-acoes, :root[data-ui="2"] .funnel-card:focus-within .kcard-acoes { opacity: 1; }
@media (hover: none) { :root[data-ui="2"] .funnel-card .kcard-acoes { opacity: 1; } }
:root[data-ui="2"] body.densidade-compacta .funnel-card { padding: 6px 10px; margin-bottom: 4px; }
/* Quadro/Lista: sem a faixa cinza de ponta a ponta */
:root[data-ui="2"] .opp-modo { background: transparent; padding: 0; gap: 0; }
/* alertas de prazo e de tempo parado: só texto colorido, sem fundo */
:root[data-ui="2"] .funnel-card .opp-prazo, :root[data-ui="2"] .funnel-card .kcard-idade { background: transparent; padding: 0; margin: 6px 0 0; font-weight: 500; }

/* ---------------------------------------------------------------- 7. menu "Novo" do topo (substitui o botão fixo "Nova oportunidade") */
.novo-menu { position: relative; }
.novo-menu .btn-topo-novo .novo-seta { font-size: var(--fs-3xs); opacity: .8; margin-left: 2px; }
.novo-pop { position: absolute; right: 0; top: calc(100% + 6px); min-width: 200px; padding: 6px; z-index: 60; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.novo-pop[hidden] { display: none; }
.novo-pop button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; background: none; border-radius: var(--radius); color: var(--text-primary); font: 500 var(--fs-sm) var(--font); text-align: left; cursor: pointer; }
.novo-pop button:hover, .novo-pop button:focus-visible { background: var(--bg-hover); outline: none; }
.novo-pop button i { width: 16px; text-align: center; color: var(--text-secondary); }

/* ---------------------------------------------------------------- 8. PackFlow, pedidos e estados vazios */
/* quadro do PackFlow: mesmo desenho do funil (colunas sem moldura cinza, faixa no topo; o ponto colorido de cada etapa continua) */
:root[data-ui="2"] #projKanbanSection { background: transparent; border: 0; box-shadow: none; padding: 0 !important; }
:root[data-ui="2"] .pf-app .kanban-col { background: var(--lane); border: 0; border-radius: var(--radius-lg); padding: 12px; }
:root[data-ui="2"] .pf-app .kanban-col.drag-over { background: color-mix(in srgb, var(--primary) 9%, var(--lane)); box-shadow: inset 0 0 0 2px var(--primary); }
:root[data-ui="2"] .pf-app .kanban-col-title { color: var(--text-primary); font-size: var(--fs-sm); }
:root[data-ui="2"] .pf-app .kanban-col-header { margin-bottom: 12px; }
/* cartão que só serve de caixa para uma barra de filtros: some a caixa, fica a barra */
:root[data-ui="2"] .card:has(> .filter-bar:only-child), :root[data-ui="2"] .card:has(> .filter-row:only-child) { background: transparent; border: 0; box-shadow: none; padding: 0 !important; }
/* chip de situação ativo (Pedidos) no azul de ação, como o resto do sistema (antes: turquesa) */
:root[data-ui="2"] .pped-sits button.ativo { background: var(--primary); border-color: var(--primary); }
/* mensagens de lista vazia: tamanho e cor de apoio, centralizadas (antes caíam em 16px sem estilo) */
:root[data-ui="2"] .pf2-vazio { margin: 0; padding: 28px 8px; text-align: center; font-size: var(--fs-md); color: var(--text-tertiary); }

/* ---------------------------------------------------------------- 9. escala e respiro (só em tela larga; no celular valem os ajustes do plataforma.css) */
@media (min-width: 1025px) {
    :root[data-ui="2"] { --pb-margem: 40px; }
    :root[data-ui="2"] .page-header { margin-bottom: 26px; }
    :root[data-ui="2"] .page-header h1 { font-size: 28px; line-height: 36px; }
    :root[data-ui="2"] .page-header p { font-size: var(--fs-md); line-height: 22px; }
    :root[data-ui="2"] .card { border-radius: var(--radius-xl); padding: 24px 26px; }
    :root[data-ui="2"] .table-container table { font-size: var(--fs-md); }
    :root[data-ui="2"] .table-container table th { padding: 12px 16px; }
    :root[data-ui="2"] .table-container table td { padding: 14px 16px; }
}
/* "Desempenho" no topo: botão discreto, sem borda (a ação principal é o "Novo") */
:root[data-ui="2"] .topbar .mobile-drawer-btn { border-color: transparent; background: transparent; color: var(--text-secondary); }
:root[data-ui="2"] .topbar .mobile-drawer-btn:hover { background: var(--bg-hover); color: var(--text-primary); }

/* ---------------------------------------------------------------- 10. ação principal na linha do título (navegacao.js move os botões marcados com data-acao-principal) */
@media (min-width: 769px) {
    :root[data-ui="2"] .page-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; align-items: start; }
    :root[data-ui="2"] .page-header .page-trilha { grid-column: 1 / -1; }
    :root[data-ui="2"] .page-header h1, :root[data-ui="2"] .page-header p { grid-column: 1; }
    :root[data-ui="2"] .page-header .page-acoes { grid-column: 2; grid-row: 2 / span 2; align-self: center; display: flex; align-items: center; gap: 8px; padding-top: 4px; }
    :root[data-ui="2"] .page-header .page-acoes:empty { display: none; }
    :root[data-ui="2"] .page-acoes .btn-primary { order: 2; }
}
@media (max-width: 768px) { :root[data-ui="2"] .page-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } }

/* ---------------------------------------------------------------- 11. menu lateral: item ativo leve (fundo translúcido + barra de acento), sem o azul sólido */
:root[data-ui="2"] .sidebar .nav-item.active, :root[data-ui="2"] .sidebar .nav-subitem.active {
    background: rgba(255, 255, 255, 0.09); color: #fff; font-weight: 600; box-shadow: inset 3px 0 0 #6ea8ff;
}
:root[data-ui="2"] .sidebar .nav-item.active .icon, :root[data-ui="2"] .sidebar .nav-subitem.active i { color: #9cc2ff; opacity: 1; }
:root[data-ui="2"] .sidebar .nav-grupo:has(.nav-subitem.active) > .nav-item.active { background: transparent; box-shadow: none; }
:root[data-ui="2"] .sidebar .nav-item:hover:not(.active), :root[data-ui="2"] .sidebar .nav-subitem:hover:not(.active) { background: rgba(255, 255, 255, 0.05); }
:root[data-ui="2"] .sidebar .nav-secao { letter-spacing: 0; color: var(--text-sidebar-muted); }

/* ---------------------------------------------------------------- 12. indicadores em faixa única (Relatórios e Painel): um quadro só, com divisórias, no lugar de caixinhas soltas */
:root[data-ui="2"] .rpt-kpis, :root[data-ui="2"] .pa-grade, :root[data-ui="2"] .dash-kpis {
    display: flex; flex-wrap: wrap; gap: 0; border: 1px solid var(--border-color); border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-card);
}
:root[data-ui="2"] .rpt-kpi, :root[data-ui="2"] .pa-indicador, :root[data-ui="2"] .dash-kpi {
    flex: 1 1 200px; min-width: 0; margin: 0 -1px -1px 0; border: 0; border-radius: 0; background: transparent; padding: 16px 18px;
    box-shadow: 1px 0 0 var(--border-color), 0 1px 0 var(--border-color);
}
:root[data-ui="2"] .rpt-kpi.clicavel:hover, :root[data-ui="2"] .rpt-kpi.clicavel:focus-visible { background: var(--bg-hover); border: 0; }
:root[data-ui="2"] .rpt-kpi.ativo { background: color-mix(in srgb, var(--primary) 7%, var(--bg-card)); box-shadow: 1px 0 0 var(--border-color), 0 1px 0 var(--border-color), inset 0 -2px 0 var(--primary); }
:root[data-ui="2"] .rpt-kpi-valor { font-weight: 600; letter-spacing: -0.02em; }
:root[data-ui="2"] .pa-indicador-icone { width: 36px; height: 36px; border-radius: var(--radius); font-size: var(--fs-md); }
:root[data-ui="2"] .dash-val { font-weight: 600; letter-spacing: -0.02em; }
:root[data-ui="2"] .dash-rot { text-transform: none; letter-spacing: 0; font-size: var(--fs-xs); font-weight: 500; color: var(--text-tertiary); }
/* cartões das etapas do Painel: ícone menor e valor sem quebra de linha ("R$ 125.000" não parte mais em dois) */
:root[data-ui="2"] .painel-etapa { grid-template-columns: 36px minmax(0, 1fr); column-gap: 12px; padding: 16px 16px; min-width: 0; }
:root[data-ui="2"] .painel-etapa::before { width: 36px; height: 36px; font-size: var(--fs-sm); line-height: 36px; }
:root[data-ui="2"] .pe-valor { font-size: 24px; white-space: nowrap; letter-spacing: -0.02em; }
:root[data-ui="2"] .pe-nome { text-transform: none; letter-spacing: 0; font-size: var(--fs-sm); }

/* ---------------------------------------------------------------- 9. Financeiro (Fretes e Custo de facas) no mesmo padrão das outras telas
   Antes: moldura própria (.pf2) com os filtros dentro, cartão dentro de cartão, status em pílula, classificação em caixa alta e textos de 10 px.
   Agora: filtros soltos de 34 px (como em Contatos), cada bloco (tabela, gráfico, resumo) é UM cartão, status em ponto + texto e nada abaixo de 11 px.
   Escopo: só dentro de .frt (as duas telas); a ação principal vai para o cabeçalho (portalAcaoDinamica). */
:root[data-ui="2"] .pf2.frt { margin-top: 0; padding: 0; background: transparent; border: 0; border-radius: 0; }
:root[data-ui="2"] .frt .frt-filtros { margin: 0 0 14px; gap: 8px; }
:root[data-ui="2"] .frt .frt-filtros .form-control { height: 34px; padding: 6px 12px; font-size: var(--fs-sm); }
:root[data-ui="2"] .frt .frt-filtros .btn { height: 34px; }
/* lista de escolha com a mesma setinha dos filtros de Contatos */
:root[data-ui="2"] .frt .frt-filtros select.form-control { -webkit-appearance: menulist; appearance: auto; padding-right: 8px; }
:root[data-ui="2"] .frt .frt-filtros-dir { align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--text-secondary); }
:root[data-ui="2"] .frt .frt-filtros-dir input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--primary); }
:root[data-ui="2"] .frt .pped-tab-wrap, :root[data-ui="2"] .frt .frt-graf-card, :root[data-ui="2"] .frt .frt-numeros { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-xl); box-shadow: none; }
:root[data-ui="2"] .frt .pped-tab-wrap { padding: 4px 16px 6px; }
:root[data-ui="2"] .frt .frt-graf-card { padding: 18px 20px 14px; }
:root[data-ui="2"] .frt .frt-numeros { padding: 14px 20px 6px; }
:root[data-ui="2"] .frt .frt-numeros .pped-tab-wrap { background: transparent; border: 0; border-radius: 0; padding: 0; }
/* Custo de facas › Orçado × pago: um cartão por bloco (Por mês, Por orçamento), título e nota dentro dele */
:root[data-ui="2"] .frt .pped-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-xl); box-shadow: none; padding: 14px 20px 8px; margin: 0 0 14px; }
:root[data-ui="2"] .frt .pped-card h3 { margin: 0 0 4px; font-size: var(--fs-lg); }
:root[data-ui="2"] .frt .pped-card > small { display: inline-block; margin: 0 8px 10px 0; color: var(--text-secondary); font-size: var(--fs-xs); }
:root[data-ui="2"] .frt .pped-card .pped-tab-wrap { background: transparent; border: 0; border-radius: 0; padding: 0; }
:root[data-ui="2"] .frt .pped-card select.form-control { height: 34px; width: auto; margin-bottom: 10px; }
/* indicadores: mesma linha fina dos cartões, nada abaixo de 11 px; a barra colorida vira um ponto */
:root[data-ui="2"] .frt .frt-card { box-shadow: none; }
:root[data-ui="2"] .frt .frt-cards .frt-card span, :root[data-ui="2"] .frt .frt-cards .frt-card small { font-size: var(--fs-2xs); }
:root[data-ui="2"] .frt .frt-card-desp, :root[data-ui="2"] .frt .frt-card-conf { border-left-width: 1px; border-left-color: var(--border-color); }
:root[data-ui="2"] .frt .frt-card-desp > span::before, :root[data-ui="2"] .frt .frt-card-conf > span::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; vertical-align: middle; }
:root[data-ui="2"] .frt .frt-card-desp > span::before { background: var(--danger); }
:root[data-ui="2"] .frt .frt-card-conf > span::before { background: var(--warning); }
/* status = ponto + texto (igual a Contatos); a cor é só do texto e do ponto */
:root[data-ui="2"] .frt .pped-st { display: inline-flex; align-items: center; gap: 6px; padding: 0; border-radius: 0; background: transparent; font-size: var(--fs-sm); font-weight: 500; }
:root[data-ui="2"] .frt .pped-st::before { content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
:root[data-ui="2"] .frt .frt-st-ok, :root[data-ui="2"] .frt .st-verde { color: var(--success-text); }
:root[data-ui="2"] .frt .frt-st-acima { color: var(--danger-text); }
:root[data-ui="2"] .frt .frt-st-conferir, :root[data-ui="2"] .frt .st-ambar { color: var(--warning-text); }
:root[data-ui="2"] .frt .frt-st-vinculo, :root[data-ui="2"] .frt .st-azul { color: var(--primary); }
:root[data-ui="2"] .frt .frt-st-sem, :root[data-ui="2"] .frt .st-cinza { color: var(--text-secondary); }
:root[data-ui="2"][data-theme="dark"] .frt .frt-st-ok, :root[data-ui="2"][data-theme="dark"] .frt .st-verde { color: #34d399; }
:root[data-ui="2"][data-theme="dark"] .frt .frt-st-acima { color: #f87171; }
:root[data-ui="2"][data-theme="dark"] .frt .frt-st-conferir, :root[data-ui="2"][data-theme="dark"] .frt .st-ambar { color: #fbbf24; }
:root[data-ui="2"][data-theme="dark"] .frt .frt-st-vinculo, :root[data-ui="2"][data-theme="dark"] .frt .st-azul { color: #7aa7f0; }
/* classificação em texto normal ("Venda"), não em caixa alta; contador das abas sem itálico */
:root[data-ui="2"] .frt .frt-classif { font-size: var(--fs-sm); font-weight: 500; text-transform: lowercase; }
:root[data-ui="2"] .frt .frt-classif::first-letter { text-transform: uppercase; }
:root[data-ui="2"] .painel-abas button em { margin-left: 4px; font-style: normal; font-weight: 500; opacity: .75; font-variant-numeric: tabular-nums; }