/* =====================================================================
   PLATAFORMA BLUMEN — design system (camada final, 14/10/2026)
   Carregada DEPOIS do app.css e do packflow.css: troca os tokens (cores, raios, sombras, fontes) e o acabamento
   do menu, do cabeçalho e dos componentes compartilhados. Todas as telas usam essas mesmas classes e tokens,
   então mudam juntas sem alterar nenhuma regra de negócio. Para voltar ao visual anterior: tirar o <link> deste
   arquivo do index.html.

   Direção: SaaS corporativo, limpo e discreto — menu azul-marinho, superfícies claras, azul como cor de ação,
   Inter como única família, sombras e bordas leves, números tabulares.
   Referência de composição: docs/redesign/README.md (e a imagem "Dashboard Industrial de Embalagens").

   Sumário: 1 tokens · 2 base · 3 menu lateral · 4 barra superior · 5 cabeçalho da tela · 6 botões e campos ·
            7 cartões, indicadores e tabelas · 8 abas, selos e chips · 9 janelas e avisos · 10 estados ·
            11 telas (funil, QAP, PackFlow, fretes) · 12 responsivo
   ===================================================================== */

/* ---------------------------------------------------------------- 1. tokens */
:root {
    --pb-navy-950: #061a37;
    --pb-navy-900: #0a2142;
    --pb-navy-800: #0f2d5c;
    --pb-navy-700: #17407c;
    --pb-azul: #2563eb;
    --pb-azul-escuro: #1d4ed8;
    --pb-menu-largura: 264px;
    --pb-menu-largura-mini: 76px;
    --pb-topo-altura: 64px;
    --pb-margem: 32px;
    --pb-conteudo-max: 1680px;

    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-titulo: var(--font);


    --primary: #2563eb;
    --primary-texto: var(--primary);   /* azul para TEXTO e links (no tema escuro é mais claro que o azul dos botões) */
    --primary-rgb: 37, 99, 235;
    --primary-dark: #1d4ed8;
    --primary-deeper: #1e40af;
    --primary-light: #e4edfd;
    --primary-lighter: #e4edfd;
    --primary-glow: rgba(37, 99, 235, 0.18);
    --primary-glow-strong: rgba(37, 99, 235, 0.3);
    --info: #2563eb;
    --info-rgb: 37, 99, 235;
    --danger: #dc2626;
    --danger-rgb: 220, 38, 38;
    --focus-anel: 0 0 0 3px rgba(37, 99, 235, 0.28);
}

:root:not([data-theme="dark"]) {
    --bg-primary: #eef2f7;
    --bg-secondary: #ffffff;
    --bg-card: #ffffff;
    --bg-hover: #eef3f9;
    --bg-input: #ffffff;
    --text-primary: #0f1f38;
    --text-secondary: #45566e;
    --text-tertiary: #5b6c84;
    --border-color: #dde5ee;
    --border-strong: #c3cfdd;
    --shadow: 0 1px 2px rgba(10, 33, 66, 0.05);
    --shadow-sm: 0 1px 2px rgba(10, 33, 66, 0.05);
    --shadow-md: 0 2px 4px rgba(10, 33, 66, 0.05), 0 8px 20px rgba(10, 33, 66, 0.07);
    --shadow-lg: 0 4px 8px rgba(10, 33, 66, 0.06), 0 18px 36px rgba(10, 33, 66, 0.12);
    --modal-overlay: rgba(6, 26, 55, 0.5);
    --bg-sidebar: var(--pb-navy-900);
    --text-sidebar: #c6d4e8;
    --text-sidebar-active: #ffffff;
    --text-sidebar-muted: #8398b6;
    --border-sidebar: rgba(255, 255, 255, 0.09);
    --bg-sidebar-hover: rgba(255, 255, 255, 0.08);
    --bg-sidebar-active: var(--pb-azul);
    --success-light: #dcf5ea;
    --warning-light: #fdf0d3;
    --danger-light: #fde6e6;
}

[data-theme="dark"] {
    --bg-primary: #09121f;
    --bg-secondary: #101c2e;
    --bg-card: #101c2e;
    --bg-card-solid: #101c2e;
    --bg-card-hover: #17263d;
    --bg-hover: #17263d;
    --bg-input: #0c1626;
    --text-primary: #eaf0f8;
    --text-secondary: #b6c4d8;
    --text-tertiary: #8ea0b8;
    --border-color: #223550;
    --border-strong: #2f4666;
    --border-color-light: #2f4666;
    --modal-overlay: rgba(2, 8, 20, 0.66);
    --bg-sidebar: #07162b;
    --text-sidebar: #c6d4e8;
    --text-sidebar-active: #ffffff;
    --text-sidebar-muted: #7f93b0;
    --border-sidebar: rgba(255, 255, 255, 0.08);
    --bg-sidebar-hover: rgba(255, 255, 255, 0.07);
    --bg-sidebar-active: var(--pb-azul);
    --primary: #2f6fed;               /* fundo de botão: texto branco por cima passa de 4,5:1 */
    --primary-texto: #8db8ff;         /* azul de texto/links sobre o fundo escuro (≥ 7:1) */
    --primary-rgb: 47, 111, 237;
    --primary-light: rgba(47, 111, 237, 0.22);
    --primary-lighter: rgba(47, 111, 237, 0.22);
    --primary-dark: #2563eb;
}

/* ---------------------------------------------------------------- 2. base */
html { -webkit-text-size-adjust: 100%; }
button, input, select, textarea { font-family: inherit; }   /* botões e campos herdam a fonte (antes alguns caíam em Arial) */
body { font-family: var(--font); color: var(--text-primary); background: var(--bg-primary); font-feature-settings: 'cv11', 'ss01'; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { font-family: var(--font-titulo); letter-spacing: -0.012em; word-spacing: normal; }
table, .kpi-value, .pa-indicador-valor, .pe-valor, .pcp-card td, .frt-card b, .funnel-card { font-variant-numeric: tabular-nums; }
::selection { background: rgba(37, 99, 235, 0.22); }

/* foco visível em tudo que se alcança pelo teclado */
:where(a, button, [role="button"], summary, [tabindex]):focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: var(--radius-sm); }
:where(input, select, textarea):focus-visible { outline: none; }
.pular-conteudo { position: fixed; left: 12px; top: -48px; z-index: 5000; padding: 10px 16px; background: var(--pb-navy-900); color: #fff; border-radius: var(--radius); font: 600 var(--fs-sm) var(--font); text-decoration: none; transition: top .15s; }
.pular-conteudo:focus { top: 12px; outline: 2px solid #fff; }
:root { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }

/* ---------------------------------------------------------------- 3. menu lateral */
:root .sidebar {
    width: var(--pb-menu-largura); border-right: 0; box-shadow: none; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.2) transparent;
    background: linear-gradient(180deg, var(--bg-sidebar) 0%, color-mix(in srgb, var(--bg-sidebar) 86%, #000) 100%);
}
:root .sidebar-header { padding: 18px 20px 16px; border-bottom: 1px solid var(--border-sidebar); gap: 10px; }
.sidebar-marca { display: flex; align-items: center; gap: 12px; min-width: 0; }
.sidebar-marca img { width: 38px; height: 38px; flex: none; border-radius: var(--radius); box-shadow: 0 2px 8px rgba(0,0,0,.28); }
.sidebar-marca-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.sidebar-marca-txt small { margin-top: 3px; font: 500 var(--fs-3xs) var(--font); color: var(--text-sidebar-muted); letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:root:not([data-theme="dark"]) .sidebar-header h2, :root[data-theme="dark"] .sidebar-header h2, :root .sidebar-header h2 {
    margin: 0; font: 600 var(--fs-lg)/1.15 var(--font); letter-spacing: -0.015em; color: #fff;
}
:root .sidebar-header h2 span { background: none; -webkit-text-fill-color: #fff; color: #fff; font-weight: 500; }
:root .sidebar-nav { padding: 10px 0 12px; }
:root .nav-secao { padding: 18px 24px 6px; font: 600 var(--fs-3xs) var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--text-sidebar-muted); }
:root .sidebar-nav > .nav-secao:first-child { padding-top: 6px; }

:root .nav-item, :root .nav-breve { margin: 2px 12px; width: calc(100% - 24px); }
:root .nav-item { padding: 0 12px; min-height: 40px; gap: 12px; border-radius: var(--radius); font: 500 var(--fs-sm) var(--font); color: var(--text-sidebar); }
:root .nav-item .icon { width: 22px; font-size: var(--fs-lg); opacity: .85; color: inherit; }
:root .nav-item:hover { background: var(--bg-sidebar-hover); color: #fff; }
:root:not([data-theme="dark"]) .nav-item.active, :root[data-theme="dark"] .nav-item.active, :root .sidebar .nav-item.active {
    background: var(--bg-sidebar-active); color: #fff; box-shadow: 0 1px 0 rgba(255,255,255,.14) inset, 0 4px 12px rgba(6,26,55,.35);
}
:root .nav-item.active .icon, :root:not([data-theme="dark"]) .nav-item.active .icon, :root .nav-item:hover .icon { color: #fff; opacity: 1; }
/* setor aberto com uma tela ativa dentro: o botão do setor fica discreto e só a tela ativa fica em azul */
:root .nav-grupo:has(.nav-subitem.active) > .nav-item.active { background: rgba(255,255,255,.1); box-shadow: none; }
:root .nav-item .badge, :root:not([data-theme="dark"]) .nav-item .badge { margin-left: auto; padding: 1px 8px; border-radius: 999px; background: rgba(255,255,255,.14); color: #fff; font: 600 var(--fs-3xs) var(--font); }
:root .nav-item .badge.badge-alerta, :root:not([data-theme="dark"]) .nav-item .badge.badge-alerta { background: #ef4444; color: #fff; }
/* pendências a vencer (sem atrasado): âmbar; com atrasado vale o vermelho de badge-alerta */
:root .nav-item .badge.badge-aviso, :root:not([data-theme="dark"]) .nav-item .badge.badge-aviso, :root .nav-subitem .badge.badge-aviso, :root:not([data-theme="dark"]) .nav-subitem .badge.badge-aviso { background: #f59e0b; color: #1f2937; }
:root .nav-item.active .badge, :root:not([data-theme="dark"]) .nav-item.active .badge { background: rgba(255,255,255,.22); color: #fff; }
:root .nav-grupo > .nav-item { padding: 0 12px; font-size: var(--fs-sm); }
:root .nav-grupo > .nav-item > span:not(.icon):not(.badge) { line-height: 1.25; }
.main:focus { outline: none; }
:root .nav-grupo .nav-seta { font-size: var(--fs-3xs); opacity: .6; }
:root .nav-sub { margin: 2px 12px 8px 33px; padding-left: 10px; border-left: 1px solid rgba(255,255,255,.12); }
:root .nav-subitem { min-height: 34px; padding: 0 10px; gap: 10px; border-radius: 7px; font: 500 var(--fs-sm) var(--font); color: var(--text-sidebar); }
:root .nav-subitem i { opacity: .7; font-size: var(--fs-xs); }
:root .nav-subitem:hover { background: var(--bg-sidebar-hover); color: #fff; }
:root:not([data-theme="dark"]) .nav-subitem.active, :root[data-theme="dark"] .nav-subitem.active, :root .sidebar .nav-subitem.active {
    background: var(--bg-sidebar-active); color: #fff; font-weight: 600; box-shadow: 0 1px 0 rgba(255,255,255,.14) inset, 0 3px 10px rgba(6,26,55,.3);
}
:root .nav-subitem.active i { opacity: 1; color: #fff; }
:root .nav-subitem .badge { background: #ef4444; color: #fff; }
:root .nav-breve { padding: 0 12px; min-height: 36px; gap: 12px; color: var(--text-sidebar-muted); border-radius: var(--radius); opacity: .8; }
:root .nav-breve em { background: rgba(255,255,255,.1); color: var(--text-sidebar-muted); }
/* "em breve" dentro do grupo recolhido (RH, Operacional…): linhas apagadas, sem clique, alinhadas com as telas dos outros setores */
:root .nav-sub .nav-breve { margin: 0; width: auto; min-height: 32px; padding: 0 10px; gap: 10px; border-radius: 7px; font-size: var(--fs-sm); opacity: .9; }
:root .nav-sub .nav-breve .icon { width: 14px; font-size: var(--fs-xs); opacity: .7; }
:root .nav-sub .nav-breve > span:not(.icon) { line-height: 1.25; }
:root .sidebar-footer { padding: 12px; border-top: 1px solid var(--border-sidebar); }
:root .sidebar-atalho, :root:not([data-theme="dark"]) .sidebar-atalho {
    background: rgba(255,255,255,.07); color: var(--text-sidebar); border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius); min-height: 38px;
}
:root .sidebar-atalho:hover { background: rgba(255,255,255,.13); color: #fff; }
:root .sidebar-atalho kbd, :root:not([data-theme="dark"]) .sidebar-atalho kbd { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16); color: #dbe6f6; }
:root .theme-toggle, :root:not([data-theme="dark"]) .theme-toggle { background: rgba(255,255,255,.08); color: var(--text-sidebar); }

/* botão de recolher/expandir (na barra superior, só em telas largas) */
.sidebar-recolher { display: none; width: 38px; height: 38px; flex: none; align-items: center; justify-content: center; border: 1px solid var(--border-color); border-radius: var(--radius); background: var(--bg-card); color: var(--text-secondary); font-size: var(--fs-md); cursor: pointer; }
.sidebar-recolher:hover { background: var(--bg-hover); color: var(--primary); border-color: var(--border-strong); }
@media (min-width: 769px) { .sidebar-recolher { display: inline-flex; } }
body.sb-mini .sidebar-recolher i { transform: scaleX(-1); }

@media (min-width: 769px) {
    :root .main { margin-left: var(--pb-menu-largura); width: calc(100vw - var(--pb-menu-largura)); }
    :root .main.drawer-open { width: calc(100vw - var(--pb-menu-largura) - 380px); }
    /* modo estreito: só os ícones (cada item tem a dica com o nome; os leitores de tela continuam lendo o nome) */
    body.sb-mini .sidebar { width: var(--pb-menu-largura-mini); overflow-x: hidden; }
    body.sb-mini .main { margin-left: var(--pb-menu-largura-mini); width: calc(100vw - var(--pb-menu-largura-mini)); }
    body.sb-mini .main.drawer-open { width: calc(100vw - var(--pb-menu-largura-mini) - 380px); }
    body.sb-mini .sidebar-header { justify-content: center; padding: 18px 8px 14px; }
    body.sb-mini .sidebar-marca-txt,
    body.sb-mini .sidebar-header h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    body.sb-mini .nav-secao { height: 1px; padding: 0; margin: 12px 20px 10px; font-size: 0; background: var(--border-sidebar); }
    body.sb-mini .sidebar-nav > .nav-secao:first-child { margin-top: 4px; }
    body.sb-mini .nav-item, body.sb-mini .nav-breve { justify-content: center; margin: 3px 10px; width: calc(100% - 20px); padding: 0; position: relative; }
    body.sb-mini .nav-item > span:not(.icon):not(.badge), body.sb-mini .nav-breve > span:not(.icon), body.sb-mini .nav-breve em, body.sb-mini .nav-seta,
    body.sb-mini .sidebar-atalho span, body.sb-mini .sidebar-atalho kbd {
        position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; padding: 0; border: 0;
    }
    body.sb-mini .nav-item .badge { position: absolute; top: 4px; right: 6px; min-width: 9px; height: 9px; padding: 0; font-size: 0; border-radius: 50%; }
    body.sb-mini .nav-sub { display: none; }
    body.sb-mini .sidebar-footer { justify-content: center; padding: 12px 8px; }
    body.sb-mini .sidebar-atalho { width: 44px; justify-content: center; padding: 0; font-size: 0; gap: 0; }
    body.sb-mini .sidebar-atalho i { font-size: var(--fs-md); }
    body.sb-mini .theme-toggle { display: none; }
}

/* ---------------------------------------------------------------- 4. barra superior */
:root .topbar { height: var(--pb-topo-altura); padding: 0 var(--pb-margem); margin: -28px calc(-1 * var(--pb-margem)) 24px; background: var(--bg-card);
    border-bottom: 1px solid var(--border-color); box-shadow: 0 1px 2px rgba(10,33,66,.04); gap: 12px; }
:root .main { padding: 28px var(--pb-margem) 40px; background: var(--bg-primary); }
:root .topbar .search-global { max-width: 520px; height: 40px; border-radius: var(--radius); background: var(--bg-primary); border: 1px solid var(--border-color); box-shadow: none; }
:root .topbar .search-global:hover { border-color: var(--border-strong); }
:root .topbar .search-global:focus-within { background: var(--bg-card); border-color: var(--primary); box-shadow: var(--focus-anel); }
:root .search-global input { font: 400 var(--fs-sm) var(--font); }
:root .topbar .search-global kbd.atalho { background: var(--bg-card); border-radius: var(--radius-xs); }
:root .btn-topo-novo { height: 40px; }
.topbar-actions .btn-outline { height: 40px; }
:root .usuario-btn { padding: 4px 8px 4px 4px; border-radius: var(--radius); }
:root .usuario-btn:hover { background: var(--bg-hover); }
:root .usuario-avatar { background: var(--pb-navy-800); color: #fff; font: 600 var(--fs-sm) var(--font); width: 38px; height: 38px; }
:root .usuario-avatar::after { background: #22c55e; border-color: var(--bg-card); }
:root .usuario-txt strong { font: 600 var(--fs-sm) var(--font); }
:root .usuario-txt small { font: 500 var(--fs-2xs) var(--font); color: var(--text-tertiary); }
:root .usuario-pop { border-radius: var(--radius-lg); padding: 6px; box-shadow: var(--shadow-lg); }
:root .usuario-pop button { border-radius: var(--radius); min-height: 38px; }
:root .topbar .pf-sino { width: 40px; height: 40px; border-radius: var(--radius); color: var(--text-secondary); }

/* ---------------------------------------------------------------- 5. cabeçalho da tela */
.page-trilha { margin: 0 0 6px; font: 500 var(--fs-xs) var(--font); color: var(--text-tertiary); }
.page-trilha[hidden] { display: none; }
.page-trilha ol { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0; margin: 0; padding: 0; list-style: none; }
.page-trilha li + li::before { content: '\203A'; margin: 0 8px; color: var(--border-strong); font-size: var(--fs-md); line-height: 1; }
.page-trilha li[aria-current="page"] { color: var(--text-secondary); font-weight: 600; }
:root .page-header { margin: 0 0 22px; padding: 0; }
:root .page-header h1 { margin: 0; font: 700 var(--fs-2xl)/32px var(--font); letter-spacing: -0.02em; color: var(--text-primary); }
:root .page-header p { margin: 4px 0 0; font: 400 var(--fs-sm)/20px var(--font); color: var(--text-secondary); max-width: 880px; }
@media (min-width: 769px) {
    :root .page-header, :root .main > .view { max-width: var(--pb-conteudo-max); margin-left: auto; margin-right: auto; }
}

/* ---------------------------------------------------------------- 6. botões e campos */
:root .btn { min-height: 36px; padding: 0 16px; border-radius: var(--radius-campo); font: 600 var(--fs-sm)/1 var(--font); letter-spacing: 0; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    border: 1px solid transparent; transition: background .15s, border-color .15s, box-shadow .15s, color .15s; }
:root .btn:disabled { opacity: .55; cursor: not-allowed; }
:root .btn-sm { min-height: 30px; padding: 0 12px; font-size: var(--fs-xs); border-radius: 7px; }
:root .btn-primary { background: var(--primary); color: #fff; box-shadow: 0 1px 2px rgba(10,33,66,.18); }
:root .btn-primary::before { display: none; }
:root .btn-primary:hover:not(:disabled) { background: var(--primary-dark); transform: none; box-shadow: 0 2px 8px rgba(37,99,235,.35); }
:root .btn-success { background: #059669; color: #fff; }
:root .btn-success:hover:not(:disabled) { background: #047857; transform: none; box-shadow: 0 2px 8px rgba(5,150,105,.3); }
:root .btn-danger { background: var(--danger); color: #fff; }
:root .btn-danger:hover:not(:disabled) { background: #b91c1c; transform: none; box-shadow: 0 2px 8px rgba(220,38,38,.3); }
:root .btn-outline, :root .btn-secondary { background: var(--bg-card); color: var(--text-primary); border: 1px solid var(--border-strong); }
:root .btn-outline:hover:not(:disabled), :root .btn-secondary:hover:not(:disabled) { background: var(--bg-hover); border-color: var(--primary); color: var(--primary); }
:root .btn-icon { border-radius: var(--radius); border-color: var(--border-color); }
:root .btn:focus-visible { outline: none; box-shadow: var(--focus-anel); }

:root .form-group label, :root .form-label { font: 600 var(--fs-xs) var(--font); color: var(--text-secondary); letter-spacing: 0; }
:root .form-control, :root .form-group input, :root .form-group select, :root .form-group textarea,
:root .filter-bar input, :root .filter-bar select {
    border: 1px solid var(--border-strong); border-radius: var(--radius-campo); background: var(--bg-input); color: var(--text-primary); font: 400 var(--fs-sm) var(--font);
}
:root .form-group input, :root .form-group select, :root .form-group textarea { padding: 9px 12px; min-height: 38px; }
:root .form-control:hover, :root .form-group input:hover, :root .form-group select:hover, :root .form-group textarea:hover, :root .filter-bar input:hover, :root .filter-bar select:hover { border-color: var(--text-tertiary); }
:root .form-control:focus, :root .form-group input:focus, :root .form-group select:focus, :root .form-group textarea:focus, :root .filter-bar input:focus, :root .filter-bar select:focus {
    outline: none; border-color: var(--primary); box-shadow: var(--focus-anel); background: var(--bg-card);
}
:root .form-group input::placeholder, :root .form-group textarea::placeholder, :root .filter-bar input::placeholder { color: var(--text-tertiary); }
:root input:disabled, :root select:disabled, :root textarea:disabled { background: var(--bg-hover); color: var(--text-tertiary); cursor: not-allowed; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--primary); }
:root .filter-bar { padding: 10px 14px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
:root .filter-bar select, :root .filter-bar input { min-height: 34px; padding: 6px 12px; }
:root .filter-bar .filter-label { color: var(--text-tertiary); }
/* Oportunidades: título da etapa e total não se encostam; filtros numa linha só; botões Quadro/Lista legíveis */
:root .funnel-stage h4 { flex-wrap: wrap; gap: 2px 10px; align-items: baseline; }
:root .funnel-stage h4 .stage-total { margin-left: auto; white-space: nowrap; }
:root #view-opportunities > .flex-between { flex-wrap: wrap; gap: 12px; align-items: center; }
:root #view-opportunities > .flex-between > .filter-bar { flex: 1 1 520px; min-width: 0; flex-wrap: nowrap; }
:root #view-opportunities .filter-bar input { flex: 1 1 100px; min-width: 90px; }
:root #view-opportunities .filter-bar select { flex: 0 1 auto; width: auto; min-width: 0; max-width: 190px; text-overflow: ellipsis; }
@media (max-width: 1280px) { :root #view-opportunities > .flex-between > .filter-bar { flex-wrap: wrap; } }

/* barra de Relatórios: filtros e ações com a mesma altura (34px) e o seletor "Visões salvas" com o mesmo acabamento dos outros */
:root .rpt-toolbar .btn-sm { min-height: 34px; }
:root .rpt-actions select {
    min-height: 34px; padding: 6px 30px 6px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-campo); background-color: var(--bg-input); color: var(--text-primary); font: 400 var(--fs-sm) var(--font);
    appearance: none; -webkit-appearance: none; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 11px center; background-size: 12px;
}
:root .rpt-actions select:hover { border-color: var(--text-tertiary); }
:root .rpt-actions select:focus { outline: none; border-color: var(--primary); box-shadow: var(--focus-anel); background-color: var(--bg-card); }

/* ---------------------------------------------------------------- 7. cartões, indicadores e tabelas */
:root .card { padding: 20px 22px; border-radius: var(--radius-lg); border: 1px solid var(--border-color); background: var(--bg-card); box-shadow: var(--shadow-sm); }
:root .card:hover { box-shadow: var(--shadow-sm); border-color: var(--border-color); }
:root .card-header { margin-bottom: 16px; }
:root .card-header h3 { font: 600 var(--fs-md)/22px var(--font); letter-spacing: -0.01em; color: var(--text-primary); }
:root .card-header h3 > i { color: var(--primary); }

:root .kpi-card { padding: 16px 18px; border-radius: var(--radius-lg); border: 1px solid var(--border-color); box-shadow: var(--shadow-sm); }
:root .kpi-card:hover { transform: none; box-shadow: var(--shadow-md); }
:root .kpi-card::before, :root .kpi-card::after { display: none; }
:root .kpi-label { font: 600 var(--fs-xs) var(--font); text-transform: none; letter-spacing: 0; color: var(--text-secondary); }
:root .kpi-value { font: 700 26px/1.2 var(--font); letter-spacing: -0.02em; }
:root .kpi-icon { width: 44px; height: 44px; border-radius: var(--radius); background: var(--primary-light); color: var(--primary); }

:root .table-container { overflow-x: auto; }
:root table { font-size: var(--fs-sm); }
:root table th { padding: 10px 14px; background: color-mix(in srgb, var(--bg-hover) 70%, var(--bg-card)); color: var(--text-secondary); font: 600 var(--fs-2xs) var(--font); text-transform: uppercase; letter-spacing: .05em;
    border-bottom: 1px solid var(--border-color); white-space: nowrap; }
:root table th:first-child { border-top-left-radius: 8px; }
:root table th:last-child { border-top-right-radius: 8px; }
:root table td { padding: 11px 14px; border-bottom: 1px solid var(--border-color); color: var(--text-primary); }
:root table tbody tr:last-child td { border-bottom: 0; }
:root table tbody tr:hover td { background: color-mix(in srgb, var(--primary) 4%, var(--bg-card)); }
:root .th-ordenavel:hover, :root table th:hover { color: var(--primary); }

/* ---------------------------------------------------------------- 8. abas, selos e chips */
:root .painel-abas, :root .opp-modo, :root .pcp-dia-sel, :root .rpt-tabs, :root .pf-abas, :root .frt-tab-wrap, :root .dash-tab-wrap, :root .pped-tab-wrap {
    background: color-mix(in srgb, var(--text-primary) 7%, var(--bg-card)); border: 0; border-radius: var(--radius); padding: 3px; box-shadow: none; gap: 2px;
}
:root .painel-abas button, :root .opp-modo-btn, :root .pcp-dia-sel button, :root .rpt-tab, :root .pf-abas button {
    border-radius: var(--radius); font: 600 var(--fs-sm) var(--font); color: var(--text-secondary);
}
:root .painel-abas button.active, :root .opp-modo-btn.active, :root .opp-modo-btn.ativo, :root .pcp-dia-sel button.ativo, :root .rpt-tab.active, :root .rpt-tab.ativo, :root .pf-abas button.active {
    background: var(--bg-card); color: var(--primary); box-shadow: 0 1px 3px rgba(10,33,66,.14);
}
/* SELO — um só desenho (pílula) para todo estado ou etiqueta. Classe nova: .selo + um tom (.selo-ok, .selo-alerta, .selo-atraso, .selo-info; sem tom = neutro) e .selo-sm para cartões estreitos.
   As classes antigas (pf-selo, status-badge, perm-chip, rpt-badge, kchip, tag) ganham a mesma base; cada uma mantém seu tamanho e suas cores próprias. */
:root .selo, :root .pf-selo, :root .status-badge, :root .perm-chip, :root .rpt-badge, :root .kchip, :root .tag {
    display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; font-weight: 600; letter-spacing: 0; white-space: nowrap;
}
:root .kchip { gap: 3px; font-weight: 400; }
:root .selo { padding: 2px 9px; font-size: var(--fs-xs); line-height: 1.4; border: 1px solid var(--border-color); background: var(--bg-hover); color: var(--text-secondary); }
:root .selo-sm, :root .status-badge.selo-sm { padding: 1px 7px; font-size: var(--fs-2xs); }
:root .selo-xs, :root .status-badge.selo-xs { padding: 1px 6px; font-size: var(--fs-3xs); }
:root .selo-ok, :root .pf-selo.pf-ok { background: var(--success-light); color: var(--success-text); border-color: color-mix(in srgb, var(--success) 35%, transparent); }
:root .selo-alerta, :root .pf-selo.pf-alerta { background: var(--warning-light); color: var(--warning-text); border-color: color-mix(in srgb, var(--warning) 35%, transparent); }
:root .selo-atraso, :root .pf-selo.pf-atrasado { background: var(--danger-light); color: var(--danger-text); border-color: color-mix(in srgb, var(--danger) 35%, transparent); }
:root .selo-info, :root .pf-selo.pf-andamento, :root .pf-selo.pf-info { background: var(--primary-light); color: var(--primary-texto); border-color: color-mix(in srgb, var(--primary) 30%, transparent); }
:root .pf-selo.pf-neutro { background: var(--bg-hover); color: var(--text-secondary); border-color: var(--border-color); }
:root .status-badge { padding: 3px 10px; border-radius: 999px; font: 600 var(--fs-2xs) var(--font); letter-spacing: 0; }
:root .badge { border-radius: 999px; font: 600 var(--fs-3xs) var(--font); }
:root .pagination-controls button { border-radius: 7px; border-color: var(--border-strong); }

/* ---------------------------------------------------------------- 9. janelas e avisos */
:root .modal-overlay { backdrop-filter: blur(3px); }
:root .modal { border-radius: var(--radius-xl); box-shadow: 0 24px 64px rgba(6,26,55,.28); border: 1px solid var(--border-color); padding: 24px 26px; }
:root .modal-header { margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--border-color); }
:root .modal-header h2 { font: 700 var(--fs-xl)/26px var(--font); letter-spacing: -0.015em; }
:root .modal-close { width: 34px; height: 34px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius); color: var(--text-tertiary); }
:root .modal-close:hover { background: var(--bg-hover); color: var(--text-primary); box-shadow: none; }
:root .drawer { border-left: 1px solid var(--border-color); box-shadow: var(--shadow-lg); }
:root .drawer-header { padding: 16px 20px; }
:root .notification { padding: 12px 16px; border-radius: var(--radius); font: 500 var(--fs-sm) var(--font); box-shadow: var(--shadow-md); }
:root .notification.success { border-left-color: #059669; }
:root .notification.error { border-left-color: var(--danger); }
:root .notification.warning { border-left: 4px solid var(--warning); }
:root .spotlight-box { border-radius: var(--radius-xl); border: 1px solid var(--border-color); box-shadow: 0 24px 64px rgba(6,26,55,.3); }
:root .spotlight-overlay { backdrop-filter: blur(3px); }
:root .login-box { border-radius: var(--radius-xl); }

/* ---------------------------------------------------------------- 10. estados (carregando, vazio, erro, sucesso) */
:root .empty-state { padding: 40px 20px; color: var(--text-secondary); }
:root .empty-state .icon { width: 56px; height: 56px; margin: 0 auto 12px; border-radius: var(--radius-xl); background: var(--bg-hover); color: var(--text-tertiary); display: flex; align-items: center; justify-content: center; font-size: var(--fs-2xl); opacity: 1; }
:root .empty-state p { font-size: var(--fs-sm); opacity: 1; color: var(--text-secondary); }
.pb-esqueleto { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--bg-hover); min-height: 14px; }
.pb-esqueleto::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--bg-card) 70%, transparent), transparent); animation: pb-brilho 1.3s infinite; }
@keyframes pb-brilho { to { transform: translateX(100%); } }
.pb-aviso { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: var(--radius); font-size: var(--fs-sm); line-height: 1.5; border: 1px solid transparent; }
.pb-aviso > i { margin-top: 2px; }
.pb-aviso.info { background: var(--primary-light); color: var(--primary-deeper); border-color: color-mix(in srgb, var(--primary) 25%, transparent); }
.pb-aviso.sucesso { background: var(--success-light); color: var(--success-text); border-color: color-mix(in srgb, var(--success) 25%, transparent); }
.pb-aviso.atencao { background: var(--warning-light); color: var(--warning-text); border-color: color-mix(in srgb, var(--warning) 28%, transparent); }
.pb-aviso.erro { background: var(--danger-light); color: var(--danger-text); border-color: color-mix(in srgb, var(--danger) 25%, transparent); }
[data-theme="dark"] .pb-aviso.info { color: #bcd4ff; }

/* ---------------------------------------------------------------- 11. telas */
:root .funnel-card, :root .kanban-card { border-radius: var(--radius); border: 1px solid var(--border-color); box-shadow: var(--shadow-sm); }
:root .pcp-card, :root .frt-card, :root .frt-graf-card, :root .pf2, :root .pf-card { border-radius: var(--radius-lg); }

/* Painel comercial: etapas como cartões de indicador (ícone + nome + valor), sem mexer no HTML */
:root .painel-etapas { gap: 16px; }
:root .painel-etapa { display: grid; grid-template-columns: 52px 1fr; column-gap: 16px; row-gap: 2px; align-items: center; padding: 20px 22px; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
:root .painel-etapa::before { content: '\f080'; grid-row: 1 / span 2; width: 52px; height: 52px; border-radius: var(--radius-lg); text-align: center; font: 700 var(--fs-xl)/52px 'Font Awesome 6 Free'; background: var(--primary-light); color: var(--primary); }
:root .painel-etapa[data-painel-etapa="Orçamento"]::before { content: '\f1ec'; }
:root .painel-etapa[data-painel-etapa="Proposta"]::before { content: '\f573'; }
:root .painel-etapa[data-painel-etapa="Negociação"]::before { content: '\f2b5'; }
:root .painel-etapa:hover { transform: none; box-shadow: var(--shadow-md); }
:root .pe-nome { font: 600 var(--fs-sm) var(--font); text-transform: none; letter-spacing: 0; color: var(--text-secondary); }
:root .pe-valor { font: 700 28px/1.15 var(--font); letter-spacing: -0.02em; color: var(--text-primary); }

/* azul de TEXTO (links, aba ativa, "ver mais"): no tema escuro usa o tom claro, que tem contraste; nos botões vale --primary */
:root a:not([class]), :root .pa-link, :root .pa-numeros summary, :root .pa-botao-texto, :root .pa-como[open] summary { color: var(--primary-texto); }
:root .painel-abas button.active, :root .opp-modo-btn.active, :root .opp-modo-btn.ativo, :root .pcp-dia-sel button.ativo, :root .rpt-tab.active, :root .rpt-tab.ativo, :root .pf-abas button.active,
:root .btn-outline:hover:not(:disabled), :root .btn-secondary:hover:not(:disabled), :root .sidebar-recolher:hover, :root .pagination-controls button:hover:not(:disabled) { color: var(--primary-texto); }
:root .pa-indicador-icone, :root .card-header h3 > i, :root .pa-cartao-topo h2 i { color: var(--primary-texto); }
:root .pa-tom-atencao .pa-indicador-icone { color: var(--warning-text); }
:root .pa-tom-critico .pa-indicador-icone { color: var(--danger-text); }
:root .pa-tom-bom .pa-indicador-icone { color: var(--success-text); }

/* ---------------------------------------------------------------- 12. responsivo */
@media (min-width: 769px) and (max-width: 1100px) {
    :root { --pb-margem: 24px; }
    :root .topbar .search-global { max-width: 360px; }
    .usuario-txt { display: none; }
}
@media (max-width: 768px) {
    :root { --pb-margem: 16px; }
    :root .sidebar { width: 0; }
    :root .sidebar.open { width: 288px; box-shadow: 0 0 40px rgba(6,26,55,.5); }
    :root .main { padding: 12px var(--pb-margem) 84px; margin-left: 0; width: 100%; }
    :root .topbar { margin: -12px calc(-1 * var(--pb-margem)) 16px; padding: 0 var(--pb-margem); }
    :root .page-header h1 { font-size: var(--fs-xl); line-height: 28px; }
    .page-trilha { display: none; }
    :root .nav-inferior { border-top: 1px solid var(--border-color); background: var(--bg-card); }
    :root .nav-inferior button.ativo { color: var(--primary); }
}
@media (max-width: 560px) {
    :root .card { padding: 16px; }
    :root .modal { padding: 18px; }
}

/* ---------------------------------------------------------------- 13. login (mantém o visual escuro original; só o logo é novo) */
/* sem tremor na abertura: os brilhos de fundo ficam parados (desfoque animado repinta a tela toda) e o cartão já nasce na altura final do formulário */
#loginScreen::before, #loginScreen::after { animation: none; }
#loginScreen .login-box { min-height: 452px; display: flex; flex-direction: column; justify-content: flex-start; }
#loginScreen .login-box h2 { height: 34px; line-height: 34px; margin-bottom: 18px; overflow: visible; white-space: nowrap; }
#loginScreen .login-box > #loginInitMsg { padding: 0; }
.login-marca { display: block; width: 52px; height: 52px; margin: 0 auto 14px; border-radius: 13px; box-shadow: 0 6px 18px rgba(37, 99, 235, 0.35); }

/* ---------------------------------------------------------------- 14. ajustes de largura */
/* barra de filtros ao lado dos botões da tela: ocupa o espaço que sobra (os filtros cabem numa linha) */
@media (min-width: 769px) { :root .flex-between > .filter-bar { flex: 1 1 0; min-width: 320px; margin-bottom: 0; } }
@media (min-width: 769px) and (max-width: 1100px) {
    :root .flex-between { flex-wrap: wrap; }
    :root .flex-between > .filter-bar { flex: 1 1 340px; margin-bottom: 0; }
}
@media (max-width: 768px) {
    :root .sidebar:not(.open) { width: 0; min-width: 0; border: 0; box-shadow: none; }
}

/* filtro aplicado: só o texto do campo muda para verde (assets/js/crm/filtros-ativos.js); a lista aberta continua com a cor normal */
:root { --filtro-ativo: #15803d; }
[data-theme="dark"] { --filtro-ativo: #4ade80; }
:root select.filtro-ativo, :root input.filtro-ativo { color: var(--filtro-ativo); font-weight: 600; }
:root select.filtro-ativo option { color: var(--text-primary); font-weight: 400; }

/* bolinhas de carregamento: ficam numa camada própria da placa de vídeo, então continuam girando liso mesmo quando a página está ocupada montando a tela */
.login-spinner, .fa-spin { will-change: transform; backface-visibility: hidden; transform-origin: 50% 50%; }
/* "reduzir animações" (Windows, acesso remoto, economia de bateria): a regra geral da seção 1 põe toda animação em 0,01 ms. Para animação que repete (bolinha de carregamento) isso vira milhares de voltas por segundo = tremor. Aqui as bolinhas continuam girando, só mais devagar. */
@media (prefers-reduced-motion: reduce) { :root .login-spinner, :root .fa-spin, :root .fa-spinner.fa-spin { animation-duration: 1.4s !important; animation-iteration-count: infinite !important; } }

/* login: a bolinha de "Conectando" fica sozinha numa linha, no centro; antes ia ao lado do texto e deslizava quando a fonte terminava de carregar */
#loginInitMsg .login-spinner { display: block; width: 26px; height: 26px; margin: 0 auto 12px; }
#loginInitMsg { min-height: 108px; box-sizing: border-box; }

/* login leve: sem desfoque (backdrop-filter e filter: blur redesenham a tela inteira a cada quadro enquanto a bolinha gira, e em PC sem placa de vídeo forte isso faz tudo tremer). Mesmo visual, feito com degradê e cor translúcida. */
#loginScreen::before, #loginScreen::after { filter: none; opacity: 1; border-radius: 0; width: 700px; height: 700px; }
#loginScreen::before { top: -350px; right: -350px; background: radial-gradient(circle closest-side, rgba(59, 130, 246, 0.30), rgba(59, 130, 246, 0)); }
#loginScreen::after { bottom: -350px; left: -350px; background: radial-gradient(circle closest-side, rgba(16, 185, 129, 0.30), rgba(16, 185, 129, 0)); }
#loginScreen .login-box { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(35, 46, 64, 0.94); }

/* bolinha do login: anel de fundo visível no cartão escuro, arco mais grosso e giro mais calmo (antes: anel quase invisível e arco fino a 0,6 s, que parecia tremer) */
#loginInitMsg .login-spinner { width: 34px; height: 34px; border: 3px solid rgba(255, 255, 255, 0.18); border-top-color: #60a5fa; animation-duration: 1s; }
#loginInitMsg { color: #e2e8f0; }

/* Vendas do mês: ícone ao lado das 3 linhas (nome, valor e mês), como os cartões Proposta e Negociação */
:root .painel-vendas::before { content: '\f155'; grid-row: 1 / span 3; }
:root .painel-vendas .pe-sub { grid-column: 2; }

/* Menu: o submenu de cada grupo desliza ao abrir e fechar, com os itens entrando em cascata (antes aparecia e sumia de uma vez).
   O atributo [hidden] continua sendo o que o Portal usa para saber se o grupo está aberto; aqui ele só vira "altura 0, invisível e fora do teclado"
   em vez de display:none (o [hidden] global do app.css usa !important, por isso o !important abaixo). Fechado: visibility:hidden (sem foco e sem leitor
   de tela) depois que a animação termina. Menu só de ícones (sb-mini): sem animação. Quem pede menos movimento no sistema: só um fade curto, sem deslizar. */
:root { --menu-ease: cubic-bezier(.22, .61, .36, 1); }
:root .nav-sub { overflow: hidden; max-height: 320px; opacity: 1; transition: max-height .42s var(--menu-ease), opacity .3s ease, margin .42s var(--menu-ease); }   /* 320px: o maior submenu hoje tem 230px; teto próximo do real deixa o ritmo parelho */
:root .nav-sub[hidden] { display: flex !important; max-height: 0; opacity: 0; margin-top: 0; margin-bottom: 0; visibility: hidden; pointer-events: none;
    transition: max-height .3s var(--menu-ease), opacity .2s ease, margin .3s var(--menu-ease), visibility 0s linear .3s; }
/* Chrome e Edge atuais animam até a altura real do grupo (ritmo igual para grupos pequenos e grandes); sem esse suporte vale o teto de altura acima */
@supports (interpolate-size: allow-keywords) {
    :root { interpolate-size: allow-keywords; }
    :root .nav-sub { max-height: none; height: auto; transition: height .42s var(--menu-ease), opacity .3s ease, margin .42s var(--menu-ease); }
    :root .nav-sub[hidden] { max-height: none; height: 0; transition: height .3s var(--menu-ease), opacity .2s ease, margin .3s var(--menu-ease), visibility 0s linear .3s; }
}
/* itens em cascata: cada um entra um pouquinho depois do anterior e sai todo junto, rápido */
:root .nav-sub > * { opacity: 1; transform: none; transition: opacity .3s ease .06s, transform .4s var(--menu-ease) .06s, background-color .2s ease, color .2s ease; }
:root .nav-sub[hidden] > * { opacity: 0; transform: translateY(-8px); transition: opacity .14s ease, transform .2s ease; }
:root .nav-sub > :nth-child(2) { transition-delay: .1s, .1s, 0s, 0s; } :root .nav-sub > :nth-child(3) { transition-delay: .14s, .14s, 0s, 0s; }
:root .nav-sub > :nth-child(4) { transition-delay: .18s, .18s, 0s, 0s; } :root .nav-sub > :nth-child(5) { transition-delay: .22s, .22s, 0s, 0s; }
:root .nav-sub > :nth-child(6) { transition-delay: .26s, .26s, 0s, 0s; } :root .nav-sub > :nth-child(n+7) { transition-delay: .3s, .3s, 0s, 0s; }
:root .nav-sub[hidden] > * { transition-delay: 0s; }
:root .nav-grupo .nav-seta { transition: transform .35s var(--menu-ease); }
body.sb-mini .nav-sub, body.sb-mini .nav-sub[hidden], body.sb-mini .nav-sub > * { transition: none; }
@media (prefers-reduced-motion: reduce) {
    :root .nav-sub, :root .nav-sub[hidden] { transition: opacity .18s linear, visibility 0s linear .18s; }
    :root .nav-sub:not([hidden]) { transition: opacity .18s linear; }
    :root .nav-sub > *, :root .nav-sub[hidden] > * { transform: none; transition: background-color .2s ease, color .2s ease; }
    :root .nav-grupo .nav-seta { transition: none; }
}
/* se algum grupo passar de 320px de altura (muitos itens) e o navegador não tiver interpolate-size, aumente o max-height acima, senão o fim da lista fica cortado */

/* Configurações → Pessoas online (só administrador): bolinha verde pulsando para quem está online, cinza para quem não está */
:root .pres-resumo { margin: 0 0 10px; font-size: var(--fs-sm); color: var(--text-secondary); }
:root .pres-resumo b { color: var(--text-primary); font-size: var(--fs-lg); }
:root .pres-tab td small, :root .pres-tab td em { display: block; font-size: var(--fs-2xs); color: var(--text-secondary); font-style: normal; }
:root .pres-tab td strong + em { display: inline; margin-left: 4px; }
:root .pres-bolinha { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 8px; vertical-align: middle; background: var(--border-color); }
:root .pres-bolinha.on { background: var(--success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 25%, transparent); }
:root .pres-on { color: var(--success-text); }
:root .pres-off { color: var(--text-secondary); }
:root .pres-nota { margin: 10px 0 0; font-size: var(--fs-xs); }
@media (prefers-reduced-motion: no-preference) { :root .pres-bolinha.on { animation: pulse 2s infinite; } }

/* Busca rápida (caixa do topo e botão do menu): só para quem tem o setor Comercial; a classe vem de setores.js (setAplicarMenu) */
body.sem-comercial .search-global, body.sem-comercial .sidebar-atalho { display: none; }

/* botão Voltar do topo (celular): leva à tela anterior; só aparece quando há uma tela anterior no histórico do Portal (navegacao.js) */
.topo-voltar { display: none; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 8px 10px; border: 0; border-radius: var(--radius); background: none; color: var(--text-primary); font-size: var(--fs-xl); cursor: pointer; }
.topo-voltar:hover { background: var(--bg-hover); }
/* celular em pé, qualquer aparelho de toque (celular deitado, tablet) e o aplicativo instalado: o botão aparece quando há tela anterior */
@media (max-width: 768px), (pointer: coarse), (display-mode: standalone) { .topo-voltar:not([hidden]) { display: flex; } }

/* Voltar flutuante: botão grande, centralizado embaixo (acima da barra de baixo do celular), para voltar à tela anterior com um toque */
.voltar-flutuante { display: none; position: fixed; left: 50%; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 140; align-items: center; justify-content: center; gap: 8px;
    min-height: 48px; padding: 0 26px; border: 0; border-radius: 999px; background: #0a2142; color: #fff; font: 600 var(--fs-lg) var(--font, system-ui, sans-serif); box-shadow: 0 6px 22px rgba(0, 0, 0, .35); cursor: pointer; }
.voltar-flutuante:active { background: #3b82f6; }
@media (max-width: 768px), (pointer: coarse), (display-mode: standalone) { .voltar-flutuante:not([hidden]) { display: inline-flex; } }
@media print { .voltar-flutuante, .topo-voltar { display: none !important; } }

/* ---------------------------------------------------------------- 15. acabamento tipográfico e de superfície (só tela) */
/* Tipografia: Inter em tudo; escala 10·11·12·13·14·16·20·24; pesos 400 (texto) · 500 (apoio) · 600 (rótulo e título) · 700 (só título de página e número grande). */
:where(small) { font-size: var(--fs-xs); }
:root { text-rendering: optimizeLegibility; font-optical-sizing: auto; }
:root h1, :root h2 { letter-spacing: -0.02em; }
:root h3, :root h4 { letter-spacing: -0.01em; }

/* Rótulos de tabela, coluna, bloco e campo: caixa baixa e 12px (antes: CAIXA ALTA entre 10 e 11px, em famílias de peso e espaçamento diferentes) */
:root :is(table th, .pf2-tab th, .dash-tab th, .pcp-card th, .pcp-seq th, .pcp-tab-g th, .pf-est-tab th, .pf-app table th,
          .funnel-stage h4, .kanban-col-title, .pf-app .kanban-col-title, .seller-stat-label, .csv-stat-label, .drawer-section-title,
          .pf-app .drawer-section > h4, .pf-app .drawer-info-item .label, .form-bloco legend, .perm-setores legend, .ficha-resumo span,
          .rpt-grupo-nome, .dash-rot, .dash-filtros label, .pcp-prev-tit, .pf-bloco-tit, .pf-campo span, .pf-obs span, .frt-card span,
          .pf-app .card-title, .pf-app .kpi-label, .nav-secao, .timeline-type, .ini-kpi-rot, .pf-pd-info span, .pf-pd-campo > span,
          .pf-app .proj-section-title, .pf-app .resumo-sec h4, .pcp-agora span) {
    text-transform: none; letter-spacing: 0; font-size: var(--fs-xs); font-weight: 600;
}
:root .nav-secao { padding-top: 18px; }

/* Superfícies: topo translúcido (o conteúdo passa suave por trás), cabeçalho de tabela mais leve, linha com destaque discreto */
:root .topbar { background: color-mix(in srgb, var(--bg-card) 86%, transparent); -webkit-backdrop-filter: saturate(1.3) blur(10px); backdrop-filter: saturate(1.3) blur(10px); }
:root table th { background: color-mix(in srgb, var(--bg-hover) 45%, var(--bg-card)); }
:root table tbody tr:hover td { background: color-mix(in srgb, var(--primary) 3%, var(--bg-card)); }
:root table tbody tr td { transition: background-color .12s ease; }

/* Resposta ao clique: botões afundam 1px; campos e botões trocam de cor com suavidade */
:root .btn, :root .btn-icon, :root .form-control, :root .form-group input, :root .form-group select, :root .filter-bar select, :root .filter-bar input { transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease; }
:root .btn:active:not(:disabled) { transform: translateY(1px); box-shadow: none; }
:root .card, :root .kpi-card { border-color: color-mix(in srgb, var(--border-color) 85%, transparent); }
@media (prefers-reduced-motion: reduce) { :root .btn:active:not(:disabled) { transform: none; } :root table tbody tr td { transition: none; } }