/* ================================================================================
   SISTEMA DE DESIGN MARKETFLOW — tokens --mkf-*
   ================================================================================
   TRÊS TEMAS derivados do MESMO conjunto de nomes (2026-09-23): Aço (steel, PADRÃO), Papel
   (paper) e Grafite (graphite), escolhidos no rodapé da sidebar. Ver o bloco de cada um logo
   abaixo.

   O princípio que faz isso funcionar: NENHUM componente sabe em que tema está. Ele pede
   --mkf-surface e recebe #ffffff ou #151b24. Por isso QUALQUER hex literal em componente é
   bug — vai ficar errado em algum tema.

   As famílias de cor e o SIGNIFICADO de cada token são idênticos nos três temas; só o hex
   muda. As semânticas mudam de valor de propósito: #3fb950 (win) e #d29922 (warn) têm
   contraste ~2:1 sobre branco, ilegíveis como texto — nos temas de fundo claro cada uma desce
   pra uma versão com >= 4.5:1.

   Estes hex são a MESMA fonte de verdade que Theme/MarketFlowTheme.cs (uma palette por tema)
   — os dois têm que mudar juntos. MudTheme cobre o que os componentes nativos do
   MudBlazor leem via --mud-palette-*; os tokens aqui cobrem tudo que o MudTheme não tem slot
   pra (superfícies extras, --mkf-win/lose/stock/idle, tipografia/espaçamento/forma). */

/* ---- O que NÃO muda entre temas: tipografia, espaçamento, forma ---- */
:root {
    /* Tipografia — texto em IBM Plex Sans, todo número em IBM Plex Mono tabular. Peso 450
       pedido pra "célula de tabela" não existe nesta família no Google Fonts (só 400/500/600,
       ver comentário em Components/App.razor) — usa 400. */
    --mkf-font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    --mkf-font-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Code', Consolas, monospace;

    --mkf-mono-numeric-family: var(--mkf-font-mono);
    --mkf-mono-numeric-size: 0.8125rem;   /* 13px — v2 (2026-09-08, Defeito 2 da rodada 2):
                                              12px era pequeno demais num monitor real. */
    --mkf-mono-numeric-weight: 400;
    --mkf-mono-numeric-variant: tabular-nums;
    --mkf-mono-numeric-tracking: -0.01em;

    /* Escala tipográfica (papel: tamanho/peso/tracking) — v2 (2026-09-08, Defeito 2 da rodada
       2 do Sistema de Design): usuário testou no monitor real e reportou "letras muito
       pequenas" — todos os tamanhos abaixo foram revisados pra cima (ver print). */
    --mkf-type-display-size: 1.375rem;    /* 22px (era 21px) — título de página */
    --mkf-type-display-weight: 600;
    --mkf-type-display-tracking: -0.015em;
    --mkf-type-section-size: 1rem;        /* 16px — título de card/seção/modal (sem mudança) */
    --mkf-type-section-weight: 600;
    --mkf-type-body-size: 0.84375rem;     /* 13.5px (era 13px) — texto normal */
    --mkf-type-cell-size: 0.84375rem;     /* 13.5px (era 12.5px) — célula de tabela (peso 450
                                              não existe na família no Google Fonts, usa 400) */
    --mkf-type-label-size: 0.71875rem;    /* 11.5px (era 11px) — rótulo de campo/meta */
    --mkf-type-header-size: 0.65625rem;   /* 10.5px (era 10px) — cabeçalho de coluna, eyebrow */
    --mkf-type-header-weight: 600;
    --mkf-type-header-tracking: 0.07em;   /* era .075em */

    /* Espaçamento (escala 4px) */
    --mkf-space-1: 4px;
    --mkf-space-2: 8px;
    --mkf-space-3: 12px;
    --mkf-space-4: 16px;
    --mkf-space-6: 24px;
    --mkf-space-8: 32px;

    /* Forma */
    --mkf-radius-control: 6px;
    --mkf-radius-panel: 8px;
    --mkf-control-height: 34px;   /* era 32px (Defeito 2, rodada 2) */
    --mkf-row-height: 40px;       /* era 38px */
    --mkf-thead-height: 36px;     /* era 34px */

    /* Linha "inativa" que continua na tabela só como registro (pergunta excluída, 2026-09-18).
       Opacidade e não cor de texto: a linha inteira recua junto, nos dois temas, sem hex novo. */
    --mkf-opacity-inativo: 0.55;

    /* Branco puro sobre uma cor semântica cheia (ex.: texto do botão destrutivo no hover) —
       é branco nos DOIS temas, mas existe como token pra não sobrar um "#ffffff" solto no
       meio de um componente (a varredura de hex literais não distingue "esse é de propósito"
       de "esse é bug"). */
    --mkf-text-on-semantic: #ffffff;

    /* Amostras do seletor de tema (rodapé da sidebar, 2026-09-23): a cor de FUNDO de cada
       tema, IGUAL nos três — é a identidade do tema, não uma cor de interface. */
    --mkf-amostra-steel: #d5e2f1;
    --mkf-amostra-paper: #f4f5f7;
    --mkf-amostra-graphite: #0c1016;
}

/* ================================================================================
   TRÊS TEMAS (2026-09-23) — Aço (steel, PADRÃO), Papel (paper), Grafite (graphite)
   ================================================================================
   Substitui o par Claro/Escuro de 2026-09-08. Ids antigos migrados em theme.js e no <script>
   do <head>: light -> steel, dark -> graphite. Nome de tema é SÓ Aço/Papel/Grafite — nunca
   "claro", "escuro", "olist" ou "outlook" em id, classe ou variável.

   Princípio de cor revisado junto: cor onde IDENTIFICA ou onde EXIGE AÇÃO. Os tokens novos
   desta rodada servem a isso: --mkf-ch-* (ícone de canal na sidebar), --mkf-select/
   --mkf-select-line (contador selecionado), --mkf-lose-row (linha "perdendo" no Buy Box).
   --mkf-nav-on-* / --mkf-avatar-* / --mkf-thead-bg / --mkf-radius-pill existem porque cada
   tema desenha item ativo, avatar, cabeçalho de tabela e raio de botão de um jeito — com
   token, o componente continua sem saber em que tema está.

   Estes hex são a MESMA fonte de verdade que Theme/MarketFlowTheme.cs (uma palette por tema)
   — os dois mudam juntos. */

/* ---- Aço — PADRÃO. Vale também sem atributo (o <script> do <head> sempre estampa um, mas
   sem JS a tela continua no padrão). Cartões brancos sobre tela azul, menu mais azul. ---- */
:root,
:root[data-theme="steel"] {
    /* Diz ao NAVEGADOR em que tema ele está: sem isto, barra de rolagem, campos nativos e
       autofill continuam desenhados no esquema errado — é o navegador pintando, não nós. */
    color-scheme: light;

    --mkf-bg: #d5e2f1;
    --mkf-shell: #c4d7ec;
    --mkf-surface: #ffffff;
    --mkf-surface-2: #f2f6fb;
    --mkf-surface-3: #e2ecf7;
    --mkf-line: #c3d3e6;
    --mkf-line-soft: #e6edf5;
    --mkf-row-alt: #f5f8fc;

    --mkf-text: #14202f;
    --mkf-text-2: #4a5a6e;
    --mkf-text-3: #7d8b9d;
    --mkf-text-on-brand: #1a0d03;

    --mkf-brand: #cf6416;
    --mkf-brand-hover: #b9570f;
    --mkf-brand-dim: #e9b78f;
    --mkf-brand-soft: #fdebdc;

    --mkf-select: #e8f1fb;
    --mkf-select-line: #9dbde6;
    --mkf-lose-row: #fdf1f0;
    --mkf-lose-row-hover: #fbe4e2;

    --mkf-win: #1f8a3b;
    --mkf-win-soft: #e3f5e8;
    --mkf-fight: #1a63c7;
    --mkf-fight-soft: #e3eefb;
    --mkf-lose: #d3302c;
    --mkf-lose-soft: #fbe4e3;
    --mkf-warn: #a56a00;
    --mkf-warn-soft: #fbf0d9;
    --mkf-stock: #7a45d6;
    --mkf-stock-soft: #efe7fb;
    --mkf-idle: #6b7684;
    --mkf-idle-soft: #eef1f5;

    /* Cor do CANAL — só o ícone do item em "Canais" na sidebar. --mkf-ch-olist é o canal
       Olist/Tiny, não um tema. Shopee não estava na tabela do pedido (2026-09-23): coral
       próprio, longe do laranja da marca e do vermelho de "perdendo". */
    --mkf-ch-ml: #c9a300;
    --mkf-ch-vonder: #1f8a3b;
    --mkf-ch-olist: #1a63c7;
    --mkf-ch-li: #7a45d6;
    --mkf-ch-shopee: #c23b16; /* 2026-09-27: #d9461f dava 2,95:1 contra o --mkf-shell do Aço; escurecido pra 3,6:1 */

    /* Sidebar: texto secundário um passo mais escuro que o geral, porque o menu é mais azul
       que a tela e o --mkf-text-2 perdia contraste sobre ele. */
    --mkf-shell-text-2: #3f5169;
    --mkf-shell-border: var(--mkf-line);
    --mkf-nav-on-bg: var(--mkf-surface);
    --mkf-nav-on-ring: var(--mkf-line);
    --mkf-nav-on-text: var(--mkf-text);
    --mkf-nav-on-icon: var(--mkf-brand);
    --mkf-nav-on-stripe: var(--mkf-brand);
    --mkf-avatar-bg: #e3eefb;
    --mkf-avatar-text: #1a63c7;

    /* Cabeçalho e rodapé da tabela na superfície do card (branco), não um degrau abaixo. */
    --mkf-thead-bg: var(--mkf-surface);
    --mkf-radius-pill: var(--mkf-radius-control);
    --mkf-sombra-fixa: rgba(15, 23, 42, 0.22);

    /* Categoria (badge de ícone por integração — .c-*). NÃO é escala semântica: aqui a cor só
       distingue "de qual integração é esta tela", nunca "isto exige ação". */
    --mkf-cat-slate: #4b5a6e;
    --mkf-cat-blue: #1a63c7;
    --mkf-cat-amber: #a56a00;
    --mkf-cat-purple: #6b3fc4;
    --mkf-cat-green: #1f8a3b;
    --mkf-cat-red: #d3302c;
    --mkf-cat-teal: #0f766e;
    --mkf-cat-indigo: #4746c4;
    --mkf-cat-soft: #eef2f7;
}

/* ---- Papel — chão cinza-neutro, cartões e menu brancos, acento AZUL-ROYAL, pílulas.
   O laranja do MarketFlow fica só no glifo do logo (o SVG é fixo nos três temas). ---- */
:root[data-theme="paper"] {
    color-scheme: light;

    --mkf-bg: #f4f5f7;
    --mkf-shell: #ffffff;
    --mkf-surface: #ffffff;
    --mkf-surface-2: #f4f6f9;
    --mkf-surface-3: #e9edf3;
    --mkf-line: #e2e6ec;
    --mkf-line-soft: #eef1f5;
    --mkf-row-alt: #f8f9fb;

    --mkf-text: #1f2733;
    --mkf-text-2: #5b6573;
    --mkf-text-3: #8e97a3;
    /* Texto BRANCO sobre o azul — botão primário marrom-escuro aqui = token não usado. */
    --mkf-text-on-brand: #ffffff;

    --mkf-brand: #1e5eff;
    --mkf-brand-hover: #1750e0;
    --mkf-brand-dim: #b9cbff;
    --mkf-brand-soft: #e8efff;

    --mkf-select: #e8efff;
    --mkf-select-line: #b9cbff;
    --mkf-lose-row: #fdf1f0;
    --mkf-lose-row-hover: #fbe4e2;

    --mkf-win: #1f8a3b;
    --mkf-win-soft: #e3f5e8;
    /* TEAL, não azul — "Concorrendo" não pode ter a cor do botão Sincronizar. */
    --mkf-fight: #0a7ea4;
    --mkf-fight-soft: #e0f2f8;
    --mkf-lose: #d3302c;
    --mkf-lose-soft: #fbe4e3;
    --mkf-warn: #a56a00;
    --mkf-warn-soft: #fbf0d9;
    --mkf-stock: #7a45d6;
    --mkf-stock-soft: #efe7fb;
    --mkf-idle: #6b7684;
    --mkf-idle-soft: #eef1f5;

    --mkf-ch-ml: #c9a300;
    --mkf-ch-vonder: #1f8a3b;
    --mkf-ch-olist: #1e5eff;
    --mkf-ch-li: #7a45d6;
    --mkf-ch-shopee: #d9461f;

    --mkf-shell-text-2: var(--mkf-text-2);
    --mkf-shell-border: var(--mkf-line);
    /* Item ativo: azul-pálido, texto e ícone azuis, SEM faixa lateral. */
    --mkf-nav-on-bg: var(--mkf-brand-soft);
    --mkf-nav-on-ring: transparent;
    --mkf-nav-on-text: var(--mkf-brand);
    --mkf-nav-on-icon: var(--mkf-brand);
    --mkf-nav-on-stripe: transparent;
    --mkf-avatar-bg: var(--mkf-brand);
    --mkf-avatar-text: var(--mkf-text-on-brand);

    --mkf-thead-bg: var(--mkf-surface);
    /* Pílula em botão/chip/busca — exceção à regra "raio máximo 8px", SÓ neste tema. Card,
       tabela e popover continuam em --mkf-radius-panel. */
    --mkf-radius-pill: 999px;
    --mkf-sombra-fixa: rgba(15, 23, 42, 0.16);

    --mkf-cat-slate: #4b5a6e;
    --mkf-cat-blue: #1a63c7;
    --mkf-cat-amber: #a56a00;
    --mkf-cat-purple: #6b3fc4;
    --mkf-cat-green: #1f8a3b;
    --mkf-cat-red: #d3302c;
    --mkf-cat-teal: #0f766e;
    --mkf-cat-indigo: #4746c4;
    --mkf-cat-soft: #eef2f7;
}

/* ---- Grafite — escuro (valores do antigo tema escuro + os tokens novos). ---- */
:root[data-theme="graphite"] {
    color-scheme: dark;

    --mkf-bg: #0c1016;
    --mkf-shell: #0f141b;
    --mkf-surface: #151b24;
    --mkf-surface-2: #1b2330;
    --mkf-surface-3: #212b3a;
    --mkf-line: #222b38;
    --mkf-line-soft: #1a2029;
    --mkf-row-alt: #181f2a;

    --mkf-text: #e7edf4;
    --mkf-text-2: #94a3b4;
    --mkf-text-3: #5a6675;
    --mkf-text-on-brand: #1a0d03;

    --mkf-brand: #e8833a;
    --mkf-brand-hover: #f0913f;
    --mkf-brand-dim: #8a4c1f;
    --mkf-brand-soft: #2a1a0c;

    /* --mkf-select-line fica só de reserva: aqui a borda do contador selecionado continua na
       cor semântica do próprio contador (regra de .mkf-counter-active deste tema). */
    --mkf-select: #212b3a;
    --mkf-select-line: #212b3a;
    --mkf-lose-row: #241417;
    --mkf-lose-row-hover: #2e1a1d;

    --mkf-win: #3fb950;
    --mkf-win-soft: #12261a;
    --mkf-fight: #58a6ff;
    --mkf-fight-soft: #12233a;
    --mkf-lose: #f85149;
    --mkf-lose-soft: #2e1618;
    --mkf-warn: #d29922;
    --mkf-warn-soft: #2b2110;
    --mkf-stock: #a371f7;
    --mkf-stock-soft: #231a3a;
    --mkf-idle: #6b7684;
    --mkf-idle-soft: #1b2029;

    --mkf-ch-ml: #d4b83a;
    --mkf-ch-vonder: #3fb950;
    --mkf-ch-olist: #58a6ff;
    --mkf-ch-li: #a371f7;
    --mkf-ch-shopee: #ee6a4d;

    --mkf-shell-text-2: var(--mkf-text-2);
    --mkf-shell-border: transparent;
    --mkf-nav-on-bg: var(--mkf-surface-2);
    --mkf-nav-on-ring: transparent;
    --mkf-nav-on-text: var(--mkf-text);
    --mkf-nav-on-icon: var(--mkf-brand);
    --mkf-nav-on-stripe: var(--mkf-brand);
    --mkf-avatar-bg: var(--mkf-surface-3);
    --mkf-avatar-text: var(--mkf-text-2);

    --mkf-thead-bg: var(--mkf-surface-2);
    --mkf-radius-pill: var(--mkf-radius-control);
    --mkf-sombra-fixa: rgba(0, 0, 0, 0.7);

    --mkf-cat-slate: #94a3b8;
    --mkf-cat-blue: #3b82f6;
    --mkf-cat-amber: #f59e0b;
    --mkf-cat-purple: #a78bfa;
    --mkf-cat-green: #22c55e;
    --mkf-cat-red: #ef4444;
    --mkf-cat-teal: #14b8a6;
    --mkf-cat-indigo: #6366f1;
    --mkf-cat-soft: #1b2330;
}

/* Célula numérica de qualquer tabela/formulário do app — preço, SKU, estoque, percentual,
   horário, timestamp, contador, código, ID. Ver --mkf-mono-numeric-* acima; um único lugar
   de verdade pra nunca mais um canto do app divergir do resto (já aconteceu 2x nesta base:
   Buy Box vs. Precificação, ver memória do projeto). */
.mono-numeric {
    font-family: var(--mkf-mono-numeric-family);
    font-size: var(--mkf-mono-numeric-size);
    font-weight: var(--mkf-mono-numeric-weight);
    font-variant-numeric: var(--mkf-mono-numeric-variant);
    letter-spacing: var(--mkf-mono-numeric-tracking);
}

/* ---- Tokens que não dependem de tema: camadas (z-index) e apelidos da sidebar. Os valores
   por tema da sidebar (--mkf-shell, --mkf-nav-on-*, --mkf-avatar-*) estão nos blocos acima. ---- */
:root {
    /* ---- Escala de camadas (2026-09-17) — TODO z-index da aplicação sai daqui. ----
       Menu "Sincronizar" aparecia ATRÁS da barra Buy Box Auto/Filtros/Colunas: os âncoras
       dos painéis próprios ficavam SEMPRE em 1201, empatados com o .mud-popover do MudBlazor
       (calc(--mud-zindex-popover + 1)), e o <MudPopoverProvider> vem ANTES da página no
       MainLayout — no empate, a barra ganhava por ordem do DOM. As camadas de popover são
       amarradas aos tokens do MudBlazor pra nunca mais divergirem dele.
       Camadas de tabela: só valem dentro da própria tabela (sticky), nunca competem com menu. */
    --mkf-z-tabela-corpo-fixo: 1;        /* célula sticky do corpo (Ações, 1ª coluna) */
    --mkf-z-tabela-cabecalho: 2;         /* thead sticky */
    --mkf-z-tabela-canto: 3;             /* cabeçalho de coluna fixa (cruzamento) */
    --mkf-z-pagina-fixa: 4;              /* cabeçalho/barra de ações sticky da página (Integrações) */
    --mkf-z-dropdown-fundo: var(--mud-zindex-popover, 1200);          /* camada transparente de "clique fora" */
    --mkf-z-dropdown: calc(var(--mud-zindex-popover, 1200) + 1);      /* menu/painel aberto (= .mud-popover) */
    --mkf-z-tooltip: var(--mud-zindex-tooltip, 1600);

    --mkf-sidebar-text: var(--mkf-text-2);
    --mkf-sidebar-text-hover: var(--mkf-text);
    --mkf-sidebar-flyout-bg: var(--mkf-surface-3);
    --mkf-sidebar-accent: var(--mkf-brand);
    /* --mkf-sidebar-hover-bg e --mkf-sidebar-divider saíram (2026-09-08, "acabamento"): a
       lista de nível 1 virou markup próprio e usa --mkf-surface/--mkf-surface-2 e
       --mkf-line-soft diretamente. Tokens que ninguém lê são pior que nenhum token — dão a
       impressão de que existe um ponto único de mudança que na verdade não muda nada. */
}

html, body {
    font-family: var(--mkf-font-sans);
    /* !important MEDIDO como necessário (2026-09-08): o MudBlazor declara
       `body{background-color:var(--mud-palette-background);color:var(--mud-palette-text-primary)}`
       — MESMA especificidade da nossa regra, e MudBlazor.min.css é linkado DEPOIS de app.css,
       então ele ganhava por ordem. Consequência real, capturada frame a frame: quem escolhia o
       tema escuro via 3 frames CLAROS antes do Blazor iniciar e sincronizar o IsDarkMode —
       exatamente o flash que o pedido manda não existir. A casca tem que sair do token, nunca
       da palette do MudBlazor, porque o token já está resolvido no primeiro paint. */
    background-color: var(--mkf-bg) !important;
    color: var(--mkf-text) !important;
    /* Só o FUNDO transiciona na troca de tema — texto e borda mudam secos, senão a tela
       inteira borra por 150ms e parece defeito de renderização. */
    transition: background-color 0.15s ease;
}

/* ---- Sem sombra em nenhuma superfície elevada — elevação vem da superfície (surface ->
   surface-2 -> surface-3), nunca de box-shadow. Cobre qualquer MudPaper/MudCard/MudMenu/
   MudPopover que ainda tenha Elevation>0 num Razor não revisado, sem precisar caçar cada
   parâmetro Elevation um por um. ---- */
.mud-paper,
.mud-card,
.mud-menu .mud-paper,
.mud-popover,
.mud-dialog {
    box-shadow: none !important;
}

/* ---- Forma — raio de controle (botão/input/chip) 6px, raio de painel (card/tabela/modal)
   8px (já vem do DefaultBorderRadius do tema, ver Theme/MarketFlowTheme.cs). Nada acima de
   8px em nenhum dos dois. ---- */
.mud-button-root,
.mud-input-control .mud-input-outlined,
.mud-input-control .mud-input-filled,
.mud-chip {
    border-radius: var(--mkf-radius-control) !important;
}

/* Pílula SÓ no Papel (2026-09-23): --mkf-radius-pill é 999px lá e igual ao raio de controle
   no Aço e no Grafite. Botão com texto, chip, botões da barra (Filtros/Colunas) e o campo de
   busca — nunca card, tabela ou popover. O botão só-ícone (logo abaixo) continua quadrado. */
.mud-button-root,
.mud-chip,
.mkf-toolbar .mud-input-control.mkf-busca-field .mud-input-outlined,
.mkf-toolbar .mud-input-control.mkf-busca-field .mud-input-outlined-border {
    border-radius: var(--mkf-radius-pill) !important;
}

.mud-button-root.mud-icon-button {
    width: 34px;    /* era 32px (Defeito 2, rodada 2) */
    height: 34px;
    border-radius: var(--mkf-radius-control) !important;
}

/* ---- scrollbar fina em qualquer contêiner com rolagem própria — não deve cobrir conteúdo. */
* {
    scrollbar-width: thin;
}

/* ---- Área de conteúdo principal (MudMainContent, Class="mkf-main-content" no
   MainLayout) ---- MudBlazor reserva por padrão um padding-top igual à altura de um
   AppBar, mesmo quando não existe nenhum MudAppBar na página (não é o caso deste app —
   a sidebar já tem seu próprio cabeçalho). Essa regra só pode viver aqui (CSS global) e
   não no MainLayout.razor.css: o markup de nível superior do MainLayout é só tags de
   componente filho (MudLayout, MudMainContent...), sem nenhum elemento HTML puro
   envolvendo tudo — não existe ancestral pra carregar o atributo de escopo, então nem
   ::deep alcançaria esse elemento. */
.mkf-main-content {
    background-color: var(--mkf-bg);
    min-height: 100vh;
    padding-top: 0 !important;
}

/* ---- Transição suave ao alternar "Fixar menu" (MainLayout.razor, v1.20) ---- Mesmo
   motivo do bloco acima pra viver em CSS global: .mkf-sidebar é a classe passada direto
   pro Class do MudDrawer, ou seja, é a raiz do próprio componente (renderizada pelo
   MudBlazor), não um elemento HTML escrito no MainLayout.razor — CSS isolado não alcança
   com garantia. O MudMainContent ao lado (área de conteúdo) já reflui/redimensiona
   sozinho porque MudLayout usa flexbox entre o drawer "Persistent" e o main content —
   não precisa de nenhuma margem calculada manualmente aqui. */
.mkf-sidebar {
    transition: width 160ms ease, background-color 0.15s ease;
    /* Idem html/body: amarrado ao token, não ao --mud-palette-drawer-background, pra a
       sidebar já nascer na cor certa antes de o Blazor iniciar. */
    background-color: var(--mkf-shell) !important;
    /* Três temas (2026-09-23): borda direita no Aço e no Papel (transparente no Grafite), e o
       texto secundário da sidebar pode ser mais escuro que o da tela (Aço: menu mais azul). */
    border-right: 1px solid var(--mkf-shell-border);
    --mkf-text-2: var(--mkf-shell-text-2);
}

/* ---- Linha clicável da tabela de anúncios (ColocacaoCatalogo.razor, v1.2) — clicar em
   qualquer lugar da linha (fora do botão "Atualizar", que usa stopPropagation) abre o modal
   de detalhes/edição. ---- */
.mkf-clickable-row {
    cursor: pointer;
}

/* ---- Cards de KPI clicáveis do dashboard (Home.razor, v1.13) — mesmo affordance visual
   de uma linha de tabela clicável, mas em card. ---- */
.mkf-kpi-card {
    cursor: pointer;
    transition: border-color 0.15s ease;
}

.mkf-kpi-card:hover {
    border-color: var(--mud-palette-primary) !important;
}

/* ---- Cabeçalho da página (ícone + h1), reutilizável qualquer página que queira o mesmo
   badge da sidebar ao lado do título (ColocacaoCatalogo.razor, v1.14). ---- */
.mkf-page-title-row {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* v1.39 — página inteira do "Monitor de Buy Box" (ColocacaoCatalogo.razor) vira um flex
   column de altura travada em vez de rolar naturalmente com o resto da página — é o que
   permite .mkf-table-flex-wrapper (flex:1, mais abaixo — v1.42 corrigiu de qual elemento
   exatamente recebe o flex:1, ver comentário lá) crescer/encolher sozinho pra preencher
   exatamente o espaço vertical disponível, sem precisar calibrar um max-height fixo à mão
   (a v1.32/v1.34 tentaram isso e não escalavam entre resoluções diferentes — usuário
   confirmou sobra de espaço vazio numa tela maior que a testada). 46px = padding vertical de
   .mkf-content (22px + 24px, ver regra .mkf-content mais abaixo) — não é uma estimativa da
   altura de elementos de CONTEÚDO da página (título/cards/busca, que variam e foram
   exatamente o que dava errado antes); é só descontar o padding do próprio shell, que a
   gente já controla e não muda com a resolução. min-height:0 é necessário — sem isso um
   filho flex:1 dentro de uma coluna às vezes não encolhe direito e quebra o scroll interno
   (mesmo aviso do próprio pedido). */
.mkf-page-flex {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 46px);
    min-height: 0;
}

/* v1.42 — CORRIGE v1.39: o flex:1 tinha ido direto em .mkf-catalogo-table, que é a raiz do
   próprio MudTable e JÁ TEM um height:100% inline (do parâmetro Height="100%" no Razor,
   necessário pro FixedHeader funcionar). Um item flex com "height" próprio usa esse valor
   como flex-basis ANTES do flex-grow — a tabela pedia no mínimo 100% da altura do
   .mkf-page-flex (não "o que sobrar depois dos irmãos") e ainda tentava crescer além disso,
   sobrando 0px pra paginação (irmã dela, vindo logo depois no markup) — daí a paginação e a
   barra de rolagem horizontal terem sumido depois da v1.39.
   Fix: quem recebe flex:1/min-height:0 agora é um WRAPPER PRÓPRIO em volta do <MudTable>
   (.mkf-table-flex-wrapper, ver ColocacaoCatalogo.razor) — sem nenhum height inline nele
   mesmo, então sem conflito de flex-basis nenhum. display:flex mantém pra o
   Height="100%" do MudTable (agora um filho comum, não mais o próprio item flex) ter uma
   referência de altura definida e válida pra resolver o "100%" contra — sem isso, um
   height:100% num filho normal (não-flex) de um container com altura calculada só funciona
   se o container também for display:flex ou grid (bloco comum com altura "auto" não conta
   como referência válida pra % mesmo tendo altura visualmente definida via flex-grow). */
.mkf-table-flex-wrapper {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

/* v1.50 — CAUSA REAL de v1.42 nunca ter funcionado (confirmado com Playwright contra
   produção, inspecionando o DOM/computed style ao vivo, não só lendo o CSS): faltava
   esticar o PRÓPRIO <div class="mud-table ... mkf-catalogo-table"> (raiz renderizada pelo
   MudTable) dentro do .mkf-table-flex-wrapper. Sem flex/min-height aqui, esse div é filho
   de um flex-column (.mkf-table-flex-wrapper) mas fica com flex-basis:auto/flex-grow:0
   (valores default) — ou seja, NÃO é esticado pelo wrapper, e cresce pelo próprio
   conteúdo (2516px medidos, altura de TODAS as linhas da página). O Height="100%" do
   MudTable vira um height:100% inline só no .mud-table-container (filho deste div) — que
   só significa alguma coisa se ESTE div (o pai direto) já tiver uma altura definida
   (resolvida via flex), não "auto". Sem essa altura definida aqui, os 100% não resolvem
   contra nada útil, o navegador trata como auto, e a tabela inteira (com overflow visível,
   sem clip) vaza pra fora do .mkf-page-flex — é isso que faz a PÁGINA (documento) ficar
   mais alta que o viewport e precisar de scroll vertical pra alcançar a barra horizontal,
   exatamente o sintoma reportado. Fix: mesma dupla flex:1/min-height:0 já usada no
   wrapper, agora também aqui — assim este div fica com altura definida (a que sobra do
   wrapper), o height:100% do .mud-table-container finalmente resolve contra ela de
   verdade, e o overflow (vertical E horizontal) passa a acontecer DENTRO dessa caixa, com
   a barra horizontal ancorada na borda inferior dela — sempre dentro do viewport, sem
   precisar rolar a página. Escopado por .mkf-table-flex-wrapper (não só .mkf-catalogo-table
   sozinho) por clareza — é o único lugar onde essa classe aparece como filho direto de um
   flex container, mas a regra fica explícita sobre em qual contexto ela se aplica. */
/* 2026-09-13 — "> .mud-table" estende a mesma regra à Prateleira da Vonder (VonderPrateleira.razor),
   que entrou no mesmo layout; o MudTable raiz é sempre filho direto do wrapper. */
.mkf-table-flex-wrapper .mkf-catalogo-table,
.mkf-table-flex-wrapper > .mud-table {
    flex: 1;
    min-height: 0;
}

/* .mkf-page-header-row (v1.37) foi REMOVIDA em 2026-09-08: o cabeçalho do Monitor de Buy Box
   — seu único usuário — virou .mkf-page-head (fim deste arquivo), que resolve o mesmo
   problema (título e ações na mesma linha) e ainda alinha a meta de sincronização pela
   linha-base do título, coisa que `align-items: center` não permitia. */

/* v1.37 — segunda linha ("Última execução: ...") dentro de cada MudMenuItem do dropdown
   "Sincronizar" — as 3 linhas de horário que antes ficavam sempre visíveis abaixo do botão
   viraram subtexto de cada opção, só aparecem ao abrir o menu (nenhuma informação perdida,
   só deixou de ocupar espaço permanente no cabeçalho). Tamanho/cor de legenda, mesmo
   espírito de MudText Typo="Typo.caption" Class="mud-text-secondary" já usado em outras
   legendas da tela, só que aqui é span puro (dentro de um MudMenuItem, não MudText) —
   var(--mud-palette-text-secondary) é o mesmo token por trás de "mud-text-secondary". */
.mkf-menu-item-subtext {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

/* v1.38 — os 3 itens do dropdown "Sincronizar" (ColocacaoCatalogo.razor) apareciam lado a
   lado em vez de empilhados. .mkf-sync-menu-list vai no parâmetro ListClass do MudMenu (hook
   oficial pro CONTAINER da lista de itens, confirmado no XML de docs do MudBlazor — distinto
   de Class, que estiliza o botão ativador) — força flex-direction:column no nível certo
   (a lista dos 3 itens entre si), sem interferir no flex interno de CADA item (rótulo +
   "Última execução" empilhados um dentro do outro, ver .mkf-menu-item-subtext acima, que é
   um nível totalmente diferente). !important por garantia: não ficou claro por inspeção do
   MudBlazor.min.css do próprio pacote qual regra interna estava causando o layout horizontal
   (nenhuma classe candidata óbvia tinha display:flex sem flex-direction — o problema pode vir
   de uma combinação/versão específica não coberta pela inspeção estática), então força
   incondicionalmente em vez de arriscar outra rodada de "não bateu com a causa real". */
.mkf-sync-menu-list {
    display: flex !important;
    flex-direction: column !important;
}

/* Papel "Display" da escala tipográfica (título de página) — todo título de página é um
   <h1> puro (não MudText), sem CssBaseline no app pra estilizar a tag globalmente; aplica
   aqui em vez de repetir em cada Razor. */
h1 {
    font-size: var(--mkf-type-display-size);
    font-weight: var(--mkf-type-display-weight);
    letter-spacing: var(--mkf-type-display-tracking);
    line-height: 1.3;
}

.mkf-page-title-row h1 {
    margin: 0;
}

/* Alerta de progresso da verificação em massa, abaixo dos botões "Sincronizar anúncios"/
   "Verificar todos" (ColocacaoCatalogo.razor, v1.15) — só existe enquanto uma rodada está
   rodando (_progresso), largura limitada pra não esticar a linha inteira. */
.mkf-progresso-verificacao {
    max-width: 360px;
    width: 100%;
}

/* Ícone ⓘ de explicação ao lado do texto dos botões do topo (ColocacaoCatalogo.razor, v1.16)
   — separado do botão em si, só abre o Tooltip no hover; cursor "help" reforça que não é
   clicável (mesmo padrão visual do "ⓘ" já usado pelo próprio Mercado Livre). */
.mkf-info-icon {
    cursor: help;
    opacity: .6;
    /* v1.17 — sobe alguns px em relação ao centro vertical do botão ao lado (ajuste puramente
       visual, pedido depois de ver o resultado renderizado; não mexe no alinhamento do texto/
       ícone dentro do próprio MudButton). */
    position: relative;
    top: -5px;
}

.mkf-info-icon:hover {
    opacity: 1;
}

/* v1.29 (2026-09-10) — .mkf-th-info-row e a regra de padding que existia logo abaixo FORAM
   REMOVIDAS junto com o ⓘ do cabeçalho das colunas de venda. Histórico, porque o mesmo erro é
   fácil de repetir: a rodada anterior tratou o ícone "colado/órfão" como problema de gap e
   depois de padding, e mediu larguras (104/112px) pra acomodar rótulo + seta + ícone. O print
   do usuário mostrou o desfecho real — em 74-86px o conjunto simplesmente não cabe, e o ⓘ de
   "7 DIAS" era desenhado POR CIMA do rótulo "30 DIAS". A correção não é mais largura nem mais
   padding: é o ícone sair e o próprio cabeçalho virar o alvo do tooltip (.mkf-th-explicavel). */

/* ---- Contadores de topo (ColocacaoCatalogo.razor e telas equivalentes, v2 2026-09-08) ----
   SUBSTITUEM os cards com gradiente dominante (v1.14–v1.27, ver comentário removido — cor
   cobrindo 75% do card, decisão travada em 2026-09-02/06 e agora revertida por pedido
   explícito do usuário). São também o filtro da tela: clicáveis, superfície neutra
   (--mkf-surface-2) igual em todos, a cor semântica vira só um PONTO de 6px + uma barra de
   proporção de 2px — nunca o fundo inteiro. O selecionado ganha elevação (--mkf-surface-3) e
   borda na cor semântica; "Sincronizados" (o total) não é clicável, fica só informativo. */
.mkf-counter-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mkf-space-3);
}

.mkf-counter {
    display: flex;
    flex-direction: column;
    gap: var(--mkf-space-2);
    padding: var(--mkf-space-3) var(--mkf-space-4);
    border-radius: var(--mkf-radius-panel);
    min-width: 140px;
    flex: 1 1 140px;
    background-color: var(--mkf-surface-2);
    border: 1px solid var(--mkf-line);
    color: var(--mkf-text);
}

.mkf-counter:not(.mkf-counter-static) {
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.mkf-counter:not(.mkf-counter-static):hover {
    border-color: var(--mkf-text-3);
}

.mkf-counter-active {
    background-color: var(--mkf-select) !important;
    border-color: var(--mkf-select-line) !important;
}

/* Grafite: o selecionado continua com a borda na cor semântica do próprio contador (como era
   antes dos três temas); --mkf-select-line não consegue expressar isso porque a cor é por
   contador, não por tema. */
:root[data-theme="graphite"] .mkf-counter.mkf-counter-active {
    border-color: var(--mkf-counter-color, var(--mkf-brand)) !important;
}

.mkf-counter-head {
    display: flex;
    align-items: center;
    gap: var(--mkf-space-2);
}

.mkf-counter-value {
    font-family: var(--mkf-font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.01em;
    /* Cor que IDENTIFICA (2026-09-23): o número sai na cor do estado quando o Razor define
       --mkf-counter-num (Ganhando, Concorrendo, Erro, Sem estoque, Não listado). Os neutros
       (Sincronizados, Não participa, Não verificado) não definem e ficam na cor de texto. */
    color: var(--mkf-counter-num, var(--mkf-text));
}

.mkf-counter-label {
    font-size: var(--mkf-type-label-size);
    color: var(--mkf-text-2);
    display: flex;
    align-items: center;
    gap: var(--mkf-space-1);
}

/* v1.23 - o ⓘ do card "Nao listado" reaproveita .mkf-info-icon, que nasceu ao lado de um
   MudButton e por isso carrega top:-5px. Dentro do rotulo do card o alinhamento ja e feito
   pelo flex do proprio .mkf-counter-label, entao o deslocamento tem que sair.
   TRES classes de proposito: MudBlazor.min.css e carregado DEPOIS de app.css, e regra de 1-2
   classes empata e perde por ordem - armadilha ja documentada varias vezes neste projeto. */
.mkf-counter .mkf-counter-label .mkf-info-icon {
    top: 0;
}

/* Ponto de 6px na cor semântica do contador — a ÚNICA cor no card, ver --mkf-counter-color
   definida inline por status (ColocacaoCatalogo.razor). Contador estático ("Sincronizados")
   não define --mkf-counter-color, então o ponto sai --mkf-idle (neutro) por padrão. */
.mkf-counter-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
    background-color: var(--mkf-counter-color, var(--mkf-idle));
}

/* Barra de proporção — largura definida inline (--mkf-counter-pct, 0-100) por status,
   mesma cor do ponto. */
.mkf-counter-bar-track {
    height: 2px;
    border-radius: 1px;
    background-color: var(--mkf-line);
    overflow: hidden;
}

.mkf-counter-bar-fill {
    height: 100%;
    background-color: var(--mkf-counter-color, var(--mkf-idle));
    width: var(--mkf-counter-pct, 0%);
}

/* ---- Campo de busca da tabela (ColocacaoCatalogo.razor, v1.14) — largura limitada em vez
   de ocupar a linha inteira. ----
   v2 (2026-09-08) — MEDIDO com Playwright: o `max-width: 320px` de 1 classe NUNCA valeu; o
   computed style era `max-width: 100%`, do `.mud-input-control` do MudBlazor. Empate de
   especificidade (1 classe x 1 classe) resolvido pela ordem dos <link> em App.razor, onde
   MudBlazor.min.css vem DEPOIS de app.css — exatamente a mesma armadilha já documentada aqui
   pro font-family da tabela (2026-09-06) e pro `font:inherit` do input da Precificação
   (2026-09-07). Fix: 3 classes, ganhando por especificidade e não por ordem. flex-basis
   junto porque agora o campo é item de um flex container (.mkf-toolbar) que tem os botões de
   Filtros/Colunas e os chips ao lado — sem isso ele estica e joga o resto pra linha de
   baixo. */
/* v3 (2026-09-08) — passou a CRESCER (flex:1) até 420px, em vez dos 320px fixos: os botões
   foram pra borda direita e a busca é quem ocupa a esquerda. As 3 classes continuam sendo
   obrigatórias pelo mesmo motivo da v2 (o max-width de 1 classe perdia pro .mud-input-control
   do MudBlazor por ordem de <link>). */
.mkf-toolbar .mud-input-control.mkf-busca-field {
    flex: 1 1 320px;
    max-width: 420px;
    width: auto;
}

/* ...e 34px de ALTURA, a mesma dos dois botões — "uma linha, 34px" é a outra metade do B1 que
   também não tinha pego: o campo continuava com os 56px de fábrica do outlined do MudBlazor
   (MEDIDO: padding vertical de 18.5px no <input> + fonte 16px), quase o dobro dos botões, e
   era ele quem definia a altura da barra inteira. 4 classes, pelo motivo de sempre. */
.mkf-toolbar .mud-input-control.mkf-busca-field .mud-input-outlined {
    height: var(--mkf-control-height);
    align-items: center;
}

.mkf-toolbar .mud-input-control.mkf-busca-field .mud-input-slot {
    height: var(--mkf-control-height);
    padding-top: 0;
    padding-bottom: 0;
    font-size: var(--mkf-type-body-size);
}

.mkf-toolbar .mud-input-control.mkf-busca-field .mud-input-adornment .mud-icon-root {
    font-size: 18px;
}

/* v2 (2026-09-08) — o badge de fundo âmbar por trás da Diferença R$/% saiu: regra "cor só no
   que exige ação" do Sistema de Design MarketFlow — a célula numérica colorida (--mkf-lose
   contra o vendedor, --mkf-win a favor, cinza no zero) já comunica sozinha, sem precisar de
   um chip de fundo em toda linha não-zero (isso é ruído numa tabela de milhares de linhas). */

/* ---- Cabeçalho de coluna ordenável (ColocacaoCatalogo.razor, v1.4) ---- */
.mkf-sortable-th {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    user-select: none;
    white-space: nowrap;
}

/* ---- Célula de SKU com ícone de copiar (ColocacaoCatalogo.razor, v1.5) — ícone só aparece
   no hover da célula, pra não poluir a tabela quando não está em uso. ---- */
.mkf-sku-cell {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Defeito 2 (rodada 2, Sistema de Design) — SKU ganhou cor própria, --mkf-text-2 (secundária,
   menos apagada que a cor de texto default), pra ficar legível o bastante na hora de comparar
   com o painel do Mercado Livre lado a lado (uso real, não só decorativo). Tamanho já vem de
   --mkf-mono-numeric-size (13px) via .mkf-col-mono — não precisa de font-size próprio aqui. */
.mkf-sku-text {
    color: var(--mkf-text-2);
}

.mkf-sku-copy-btn {
    opacity: 0;
    transition: opacity 120ms ease;
}

.mkf-sku-cell:hover .mkf-sku-copy-btn {
    opacity: 1;
}

/* ---- Card de superfície (ex.: Components/Pages/ColocacaoCatalogo.razor) — destaca um
   bloco do fundo escuro da página com uma borda sutil, em vez de depender só de sombra
   (Elevation). ---- */
.mkf-surface-card {
    background-color: var(--mkf-surface) !important;
    border: 1px solid var(--mkf-line) !important;
    border-radius: var(--mkf-radius-panel) !important;
}

/* ---- Aba "Dados completos" do modal de item (MarketplaceItemEditDialog.razor, v1.9) —
   resposta crua de GET /items/{itemId} formatada, só legibilidade (sem editar/persistir). ---- */
.mkf-dados-completos {
    background-color: var(--mud-palette-background) !important;
    border: 1px solid var(--mud-palette-lines-default) !important;
    border-radius: 8px;
    padding: 12px;
    max-height: 60vh;
    overflow: auto;
    font-family: ui-monospace, "Cascadia Code", "Consolas", monospace;
    font-size: 0.8rem;
    white-space: pre-wrap;
    word-break: break-word;
}

/* ---- Logo no card de login (Login.razor) ---- */
.mkf-login-logo {
    display: block;
    width: 100%;
    max-width: 320px;
    height: auto;
    margin: 0 auto 24px;
    /* O SVG (fundo-escuro) já vem com retângulo de fundo navy próprio — a página de login
       é sempre dark (AuthLayout força IsDarkMode="true"), mas o card usa a cor "surface" do
       tema, não o mesmo navy exato do logo; arredondar os cantos evita esse retângulo ficar
       com quinas duras destoando do resto do card, que já é arredondado. */
    border-radius: 12px;
}

/* ---- Badge colorido por trás dos ícones de nível 1 da sidebar (NavMenu.razor) ----
   Quadrado 28x28, cantos suaves, fundo na cor do item em baixa opacidade e o
   ícone na mesma cor em opacidade sólida. A cor é fixa por item (não muda em
   hover/active — só o fundo/indicador da linha muda, ver NavMenu.razor.css). */
.nav-icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    margin-inline-end: 10px;
    flex-shrink: 0;
}

.nav-icon-badge .mud-icon-root {
    font-size: 1.15rem;
}

.c-slate {
    background-color: var(--mkf-cat-soft);
    color: var(--mkf-cat-slate);
}

.c-blue {
    background-color: var(--mkf-cat-soft);
    color: var(--mkf-cat-blue);
}

.c-amber {
    background-color: var(--mkf-cat-soft);
    color: var(--mkf-cat-amber);
}

.c-purple {
    background-color: var(--mkf-cat-soft);
    color: var(--mkf-cat-purple);
}

.c-green {
    background-color: var(--mkf-cat-soft);
    color: var(--mkf-cat-green);
}

.c-red {
    background-color: var(--mkf-cat-soft);
    color: var(--mkf-cat-red);
}

/* v1 (2026-09-06) — 4ª integração (Loja Integrada), cor nova pra distinguir das 3 já existentes
   (amber=Mercado Livre, green=Vonder, blue=Olist, purple=Configurações). */
.c-teal {
    background-color: var(--mkf-cat-soft);
    color: var(--mkf-cat-teal);
}

/* v1 (2026-09-07) — item de menu "Precificação", cor nova pra não colidir com nenhuma das 5 já
   usadas (amber=Mercado Livre, green=Vonder, blue=Olist, teal=Loja Integrada, purple=
   Configurações). */
.c-indigo {
    background-color: var(--mkf-cat-soft);
    color: var(--mkf-cat-indigo);
}

.nav-icon-badge.c-slate .mud-icon-root {
    color: var(--mkf-cat-slate);
}

.nav-icon-badge.c-blue .mud-icon-root {
    color: var(--mkf-cat-blue);
}

.nav-icon-badge.c-amber .mud-icon-root {
    color: var(--mkf-cat-amber);
}

.nav-icon-badge.c-purple .mud-icon-root {
    color: var(--mkf-cat-purple);
}

.nav-icon-badge.c-green .mud-icon-root {
    color: var(--mkf-cat-green);
}

.nav-icon-badge.c-red .mud-icon-root {
    color: var(--mkf-cat-red);
}

.nav-icon-badge.c-teal .mud-icon-root {
    color: var(--mkf-cat-teal);
}

.nav-icon-badge.c-indigo .mud-icon-root {
    color: var(--mkf-cat-indigo);
}

/* ---- Sidebar (NavMenu.razor) ---- v3 (2026-09-08, "acabamento"): o bloco de regras que
   ficava aqui (`.mkf-nav .nav-icon-badge ...`, monocromia dos ícones de nível 1 por cima do
   MudNavLink) foi REMOVIDO junto com o próprio `.nav-icon-badge` da sidebar — a lista de
   nível 1 deixou de ser MudNavMenu/MudNavLink e virou markup próprio, então a monocromia
   agora sai direto de `.mkf-nav-icon{color:var(--mkf-text-3)}` em NavMenu.razor.css, em CSS
   isolado normal, sem ::deep e sem !important. As classes `.c-*`/.nav-icon-badge acima
   continuam existindo e coloridas para os badges FORA da sidebar (ex.: ícone ao lado de
   título de página, AtualizacaoValores.razor).

   O fundo da sidebar (--mkf-shell) e o do flyout continuam vindo do tema/das vars
   --mkf-sidebar-* declaradas no topo deste arquivo. */

/* ================================================================================
   COMPONENTES — Sistema de Design MarketFlow (v1, 2026-09-08)
   ================================================================================ */

/* ---- Botões — só o primário (MudButton Color="Color.Primary" Variant="Variant.Filled",
   já vem laranja/hover pelo MudTheme) usa cor de marca; as demais variantes abaixo são
   utilitárias, aplicadas via Class. Uma tela tem UM primário só — a ação que o operador
   veio fazer. ---- */
.mkf-btn-secondary {
    background-color: var(--mkf-surface-2) !important;
    border: 1px solid var(--mkf-line) !important;
    color: var(--mkf-text) !important;
}

.mkf-btn-ghost {
    background-color: transparent !important;
    border: none !important;
    color: var(--mkf-text-2) !important;
}

.mkf-btn-ghost:hover {
    color: var(--mkf-text) !important;
}

.mkf-btn-destructive {
    background-color: transparent !important;
    border: 1px solid var(--mkf-lose) !important;
    color: var(--mkf-lose) !important;
}

.mkf-btn-destructive:hover {
    background-color: var(--mkf-lose) !important;
    color: var(--mkf-text-on-semantic) !important;
}

/* ---- Campos — foco com borda de marca + anel suave (aplica em qualquer MudTextField/
   MudNumericField/MudSelect outlined; MudBlazor expõe a borda do outline via ::before/
   ::after do fieldset nativo do browser, então o alvo real é .mud-input-outlined-border). */
.mud-input-control .mud-input-outlined.mud-input-outlined-focused .mud-input-outlined-border {
    border-color: var(--mkf-brand) !important;
    border-width: 1px !important;
    box-shadow: 0 0 0 3px var(--mkf-brand-soft);
}

/* Campo numérico é mono, alinhado à direita (ex.: Precificação, edição inline do Buy Box). */
.mkf-input-numeric input {
    font-family: var(--mkf-font-mono);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/* ---- Chips de filtro — mostram o filtro ativo com o valor em mono na cor da marca,
   removível; "Filtros"/"Colunas" ao lado usam a variante neutra (sem -active). ---- */
.mkf-chip-filter {
    background-color: var(--mkf-surface-2) !important;
    border: 1px solid var(--mkf-line) !important;
    color: var(--mkf-text-2) !important;
}

.mkf-chip-filter-active {
    background-color: var(--mkf-brand-soft) !important;
    border: 1px solid var(--mkf-brand-dim) !important;
    color: var(--mkf-text) !important;
}

.mkf-chip-filter-active .mkf-chip-filter-value {
    font-family: var(--mkf-font-mono);
    font-variant-numeric: tabular-nums;
    color: var(--mkf-brand);
}

/* ---- Abas — sublinhado de 2px na cor da marca (troca o indicador padrão do MudTabs, que
   herda Primary do tema mas sem a espessura pedida); contador em pílula ao lado do rótulo. */
.mkf-tabs .mud-tabs-slider {
    background-color: var(--mkf-brand) !important;
    height: 2px !important;
}

/* Rótulo em caixa normal: o MudBlazor aplica text-transform:uppercase no .mud-tab, e o padrão
   reserva caixa alta pra cabeçalho de coluna e eyebrow — nunca pra aba. 3 classes pra ganhar
   do seletor da lib sem depender da ordem dos <link> (MudBlazor.min.css vem DEPOIS de app.css
   em App.razor — empate de especificidade sempre perde aqui). */
.mkf-tabs .mud-tab.mud-tab-panel {
    text-transform: none;
    letter-spacing: normal;
    font-size: 13px;
    font-weight: 400;
    color: var(--mkf-text-2);
    min-width: 0;
    padding: 0 12px;
}

.mkf-tabs .mud-tab.mud-tab-panel:hover {
    color: var(--mkf-text);
}

.mkf-tabs .mud-tab.mud-tab-panel.mud-tab-active {
    color: var(--mkf-text);
    font-weight: 500;
}

/* Contador em pílula ao lado do rótulo (substitui o badge nativo do MudTabPanel, uma bolinha
   laranja com o número quase ilegível por cima da cor da marca). */
.mkf-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0 6px;
    margin-inline-start: 7px;
    border-radius: 9px;
    background-color: var(--mkf-surface-3);
    color: var(--mkf-text-2);
    font-family: var(--mkf-font-mono);
    font-size: 0.65625rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.mkf-tabs .mud-tab.mud-tab-active .mkf-tab-count {
    background-color: var(--mkf-brand-soft);
    color: var(--mkf-brand);
}

/* ---- Estado fora da tabela — badge com fundo suave + ponto + rótulo. Dentro da tabela usa
   .mkf-state-dot sozinho (ver seção da tabela, mais abaixo). ---- */
.mkf-state-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--mkf-space-2);
    padding: 2px var(--mkf-space-2);
    border-radius: var(--mkf-radius-control);
    font-size: var(--mkf-type-label-size);
    background-color: var(--mkf-state-soft, var(--mkf-idle-soft));
    color: var(--mkf-state-color, var(--mkf-idle));
}

.mkf-state-badge .mkf-state-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--mkf-state-color, var(--mkf-idle));
}

/* ---- Hub "Minhas Integrações" (ConfiguracoesIntegracoes.razor, 2026-09-05) — grid responsivo
   de cards, um por integração conectável. auto-fill/minmax deixa o número de colunas se
   ajustar sozinho à largura disponível, sem media query manual (mesmo espírito de robustez
   entre resoluções já buscado em .mkf-page-flex acima). ---- */
.mkf-integracoes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
}

.mkf-integracao-card-link {
    display: block;
    color: inherit;
}

.mkf-integracao-card {
    height: 100%;
    transition: border-color 0.15s ease;
}

.mkf-integracao-card-link:hover .mkf-integracao-card {
    border-color: var(--mud-palette-primary) !important;
}

/* ---- Bolinha de status de conexão (hub de Integrações + aba "Conexão" de cada integração,
   2026-09-05) — mesmo indicador visual nos dois lugares (ver IntegracaoStatus.cs), verde/
   âmbar/cinza. ---- */
.mkf-status-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.mkf-status-dot-ok {
    background-color: var(--mud-palette-success);
}

.mkf-status-dot-warn {
    background-color: var(--mud-palette-warning);
}

.mkf-status-dot-off {
    background-color: var(--mud-palette-text-secondary);
}

/* v1 (2026-09-06) — só pra aba Conexão da Loja Integrada: pedido explícito de vermelho pra
   "precisa reconectar" (diferente do amarelo/warn que as outras 3 integrações usam pro mesmo
   estado, ver IntegracaoStatusExtensions) — o amarelo aqui fica reservado pro estado novo
   "expira em breve", que as outras integrações não têm (token sem validade por tempo). */
.mkf-status-dot-error {
    background-color: var(--mud-palette-error);
}

/* ---- PrintLayout.razor — moldura genérica pra documentos formatados pra impressão/PDF
   via Ctrl+P — sempre clara/profissional em papel, independente do tema (claro/escuro/auto)
   escolhido no resto do sistema. Fora da tela, só dá um fundo cinza-claro pra simular uma
   folha sobre a mesa; @media print zera isso e deixa só o conteúdo do documento na página.
   Páginas de impressão específicas do domínio (ex.: layout de um documento real) estilizam
   seu próprio conteúdo por cima disso quando forem plugadas. ---- */
/* NOTA pra varredura de hex literais: os hex desta seção são de PROPÓSITO e NÃO viram token.
   Uma folha impressa é branca com texto preto nos dois temas — se o operador escolheu o tema
   escuro, a impressão continua saindo em papel branco. Trocar por --mkf-* aqui gastaria tinta
   e deixaria o documento ilegível impresso. */
.mkf-print-backdrop {
    min-height: 100vh;
    background: #E7E9EE;
    padding: 24px 0 48px;
}

.mkf-print-page {
    max-width: 210mm;
    min-height: 297mm;
    margin: 0 auto;
    background: #fff;
    color: #1A1F2B;
    font-family: var(--mkf-font-sans);
    font-size: 13px;
    line-height: 1.5;
    padding: 18mm 16mm;
    box-shadow: 0 4px 24px rgba(0, 0, 0, .18);
    box-sizing: border-box;
}

@media print {
    @page {
        size: A4;
        margin: 0;
    }

    .mkf-print-backdrop {
        background: #fff;
        padding: 0;
        min-height: 0;
    }

    .mkf-print-page {
        box-shadow: none;
        max-width: none;
        min-height: 0;
        margin: 0;
        padding: 14mm 14mm;
    }
}

/* Mantém os ícones de ordenação de MudTable/MudDataGrid sempre visíveis, não só no hover. */
.mud-table-sort-label-icon {
    opacity: 1 !important;
}

.mud-data-grid .mud-table-cell .column-header .sort-direction-icon {
    opacity: .8 !important;
}

/* ================================================================================
   TABELA DE DADOS — Sistema de Design MarketFlow (v2, 2026-09-08)
   ================================================================================
   As 7 regras não-negociáveis do prompt do usuário, aplicadas a .mkf-data-table — classe
   base compartilhada por QUALQUER MudTable do app que segue o padrão novo (Buy Box e
   Vonder por enquanto; .mkf-catalogo-table/.mkf-vonder-table continuam existindo só pra
   largura TOTAL/coluna Título, que é específica de cada tabela, ver blocos próprios mais
   abaixo). Regras 1/2/3/4 dependem de classe por coluna no Razor (.mkf-col-numeric/-mono/
   -truncate/-empty); aqui vão as que são globais à tabela: nowrap+largura fixa (1),
   cabeçalho/corpo tipográficos (célula 12.5px, cabeçalho 10px caixa-alta), scrollbar fina
   temática (a "barra horizontal sempre visível" já conquistada antes, ver v1.30/v1.31 —
   NÃO regredir), altura de linha/cabeçalho (--mkf-row-height/--mkf-thead-height) e
   indicador de ordenação visível em toda coluna ordenável (regra 7).

   MANUTENÇÃO da largura total (v3, 2026-09-08 — Defeito 1 da rodada 2) — a decisão anterior
   deste comentário (fixar a largura da TABELA em px, soma de TODAS as colunas incluindo
   Título) foi REVERTIDA: causava um vão morto entre o fim da tabela e a borda do painel em
   qualquer tela mais larga que a soma, com a coluna Título nunca recebendo o espaço sobrando
   de verdade — visto num print real do usuário. Agora é `width:100%` na tabela + Título SEM
   `width` declarado nem no <MudTh> nem no <MudTd> (a única coluna sem largura própria, que por
   isso absorve o espaço que sobra — mecanismo padrão de table-layout:fixed), soma em px só das
   OUTRAS colunas (ver .mkf-catalogo-table mais abaixo pro número exato e o porquê disso não
   ser a mesma técnica "width:100%;max-width:1px" que já tinha regredido 3x antes). Título
   continua com ellipsis+tooltip (mkf-col-truncate), só que agora com largura de verdade. */
.mkf-data-table .mud-table-cell {
    white-space: nowrap;
    height: var(--mkf-row-height);
    box-sizing: border-box;
    border-bottom: 1px solid var(--mkf-line-soft);
}

.mkf-data-table .mud-table-head .mud-table-cell {
    height: var(--mkf-thead-height);
}

/* Regra 3 — zero e vazio em --mkf-text-3 (nunca zero em verde), ou "—" quando o dado não se
   aplica. Classe aplicada na célula/valor pelo Razor quando o número é zero/nulo. */
.mkf-cell-empty {
    color: var(--mkf-text-3) !important;
}

/* Colunas numéricas — alinhadas à direita, mesma classe no <MudTh> e no <MudTd>. */
.mkf-col-numeric {
    text-align: right;
}

/* Título/SKU/qualquer texto longo — reticências em vez de esticar ou quebrar linha (quebrar
   quebraria a altura uniforme da linha). Texto completo via title="" (tooltip nativo). */
.mkf-col-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---- Blindagem do cabeçalho (v1.29, 2026-09-10) ----
   TODO <th> corta o que não couber, em vez de deixar vazar por cima da coluna vizinha. Sem
   isto, qualquer conteúdo que passe da largura declarada é DESENHADO FORA da célula — foi
   exatamente o que o usuário viu (o ⓘ de "7 DIAS" em cima do rótulo "30 DIAS"), e voltaria a
   acontecer na próxima coluna estreita que ganhasse um ícone. `white-space: nowrap` já vinha
   de .mkf-data-table .mud-table-cell; faltavam o overflow e o ellipsis.
   3 classes: MudBlazor.min.css carrega DEPOIS de app.css e uma regra de 1-2 classes empata e
   perde por ordem — armadilha já documentada várias vezes neste projeto. */
.mkf-data-table .mud-table-head .mud-table-cell {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* O padding padrão do MudBlazor pro <th> é 16px à esquerda e 24px à direita — 40px de folga
   por coluna, num cabeçalho cujas colunas numéricas têm 74-116px. Com o overflow:hidden acima,
   essa folga deixou de vazar em silêncio e passou a COMER o rótulo (o print virou
   "R$ P/ LUCR…"). 8px dos dois lados devolve 24px por coluna e é o que faz os rótulos caberem
   de verdade — a mesma medida que a rodada anterior já tinha aplicado, via :has(), só nas duas
   colunas do ⓘ; agora vale pro cabeçalho inteiro, que é onde o problema sempre esteve.
   !important necessário: o MudBlazor declara padding-left/-right E padding-inline-start/-end na
   MESMA regra (.mud-table-cell), então um seletor mais específico que só sobrescreve os
   físicos perde pro par lógico — achado medido na rodada anterior, mantido aqui. */
.mkf-catalogo-table thead th {
    padding-left: 8px !important;
    padding-right: 8px !important;
}

/* Cabeçalho que carrega explicação (colunas de venda): sublinhado pontilhado discreto avisando
   que há tooltip ali, mesmo tratamento da célula de Lucro. Nenhuma cor nova. */
.mkf-th-explicavel:hover {
    text-decoration: underline dotted var(--mkf-text-3);
    text-underline-offset: 3px;
}

/* Tooltip curto: uma ou duas linhas, nunca um parágrafo (medido sem a regra: 417px numa linha
   só, atravessando três colunas).
   NÃO é a armadilha de especificidade de sempre — e foi por isso que subir de 1 pra 2 e pra 3
   classes não mudou nada. Diagnóstico real, via el.matches() sobre todas as folhas de estilo
   com o tooltip ABERTO: a única regra de max-width que casava já era a nossa, e mesmo assim o
   computed dava `none`. A causa é o MudPopover escrever `max-width: none` no atributo STYLE
   INLINE do popover — estilo inline ganha de qualquer seletor, por mais classes que ele tenha.
   Contra inline só existe !important, e este é o caso legítimo dele.
   O Class do MudTooltip cai no popover (confirmado no DOM), então é aqui que a regra mora. */
.mud-popover.mud-tooltip.mkf-th-tooltip {
    max-width: 320px !important;
}

/* ---- Divisória de grupo (v1.29) ----
   UMA linha, à esquerda de Vendas: separa o bloco de preço/lucro/estoque do histórico de
   vendas. --mkf-line-soft (e não --mkf-line, que é a borda de Ações): a de Ações separa
   CAMADAS — a coluna fixa do conteúdo que rola por baixo dela — e precisa pesar mais; esta só
   agrupa colunas.
   É BORDA, não fundo: a zebra continua vindo de --mkf-surface / --mkf-row-alt / --mkf-surface-2
   como sempre, sem disputa. */
.mkf-data-table .mud-table-cell.mkf-col-grupo {
    border-left: 1px solid var(--mkf-line-soft);
}

/* Regra 2 — corpo em IBM Plex Sans (herdado do html/body, ver topo do arquivo); toda célula
   numérica em IBM Plex Mono tabular via .mkf-col-mono. 4 classes de especificidade pra
   ganhar de verdade do `.mud-table-root .mud-table-body .mud-table-cell` nativo do MudBlazor
   (achado em 2026-09-06 — ver histórico; sem isso a tabela inteira ficava na fonte do tema,
   nunca na fonte-própria da tabela, mesmo com o CSS "certo" escrito). */
/* v3 (2026-09-08, painel de Colunas) — padding VERTICAL zerado. MEDIDO com Playwright: com
   os 6px de padding do MudBlazor, a linha ficava em 47px mesmo com `height: 40px` declarado —
   em <td>, `height` é um MÍNIMO, e o conteúdo mais alto da linha (o botão de ícone de 34px
   das colunas SKU/Ações) + 12px de padding passava por cima. Ou seja: a altura de linha do
   Sistema de Design (40px) nunca tinha valido de verdade, e a densidade nova (34/40/46) não
   mudaria nada. Sem o padding vertical, 34px de conteúdo cabem dentro dos 40px e quem manda
   volta a ser --mkf-row-height; o texto continua centrado pelo vertical-align:middle da
   célula. O padding HORIZONTAL fica intacto. */
.mkf-data-table .mud-table-container .mud-table-body .mud-table-cell {
    font-size: var(--mkf-type-cell-size);
    font-weight: 400;
    padding-top: 0;
    padding-bottom: 0;
}

.mkf-data-table .mud-table-container .mud-table-body td.mkf-col-mono {
    font-family: var(--mkf-mono-numeric-family);
    font-size: var(--mkf-mono-numeric-size);
    font-weight: var(--mkf-mono-numeric-weight);
    font-variant-numeric: var(--mkf-mono-numeric-variant);
    letter-spacing: var(--mkf-mono-numeric-tracking);
}

/* Célula destacada — "Preço mínimo sugerido" na aba "Ajustes de Preço" (Atualização de Valores):
   é o piso que vai valer na próxima prévia, então usa a cor semântica --mkf-warn (mesma família
   do badge "🛡️ Ajustado ao mínimo") pra chamar atenção sem virar um alerta de erro. */
.mkf-data-table .mud-table-container .mud-table-body td.mkf-highlight-cell {
    background: var(--mkf-warn-soft);
    color: var(--mkf-warn);
    font-weight: 500;
}

/* ---- Zebra (2026-09-08) — vale pra TODAS as tabelas do app: .mkf-data-table é a classe que
   Buy Box, Prateleira, Catálogo Vonder, Enriquecer, Olist, Home e Ajustes de Preço já
   carregam, então uma regra só cobre todas.

   Pintada na CÉLULA (td), não na linha, de propósito: o MudBlazor pinta hover e striped no
   <tr> (`.mud-table-hover ... .mud-table-row:hover{background-color:...}`), e o fundo da
   célula sempre cobre o da linha — uma zebra no <td> apagaria o hover nativo justamente nas
   linhas pares, que é o defeito que o pedido manda evitar. Com os dois no <td>, quem decide
   é a ordem: o hover vem DEPOIS da zebra e tem a mesma especificidade, então ganha nas duas
   paridades.

   Três classes de propósito, não quatro: `td.mkf-highlight-cell` (célula destacada dos
   Ajustes de Preço, logo acima) tem quatro e precisa continuar ganhando da zebra — com
   quatro aqui, o `:nth-of-type` empataria com ela e a apagaria por vir depois.

   O divisor de --mkf-line-soft CONTINUA: com uma zebra deste tamanho, é ele que ainda separa
   as linhas pra quem não percebe o tom. */
.mkf-data-table .mud-table-row:nth-of-type(even) td {
    background-color: var(--mkf-row-alt);
}

.mkf-data-table .mud-table-row:hover td {
    background-color: var(--mkf-surface-2);
}

/* Linha "perdendo" (2026-09-23) — fundo vermelho-pálido em toda linha com Dif. R$ > 0 no
   Buy Box (classe posta pelo RowClassFunc). É o trabalho da tela: achar onde está perdendo
   dinheiro sem ler número por número. SÓ esta linha ganha fundo de cor; colorir todas as
   linhas continua proibido. Três classes + nth-of-type pra ganhar da zebra acima; o hover vem
   depois, um passo mais forte. A coluna fixa de Ações recebe o mesmo fundo logo abaixo dela. */
.mkf-data-table .mud-table-row.mkf-row-perdendo td,
.mkf-data-table .mud-table-row.mkf-row-perdendo:nth-of-type(even) td {
    background-color: var(--mkf-lose-row);
}

.mkf-data-table .mud-table-row.mkf-row-perdendo:hover td {
    background-color: var(--mkf-lose-row-hover);
}

/* Texto do Título — peso levemente acima do corpo (500) pra ser o âncora visual da linha,
   cor primária de texto (nunca secundária). */
.mkf-data-table .mkf-titulo-text {
    font-weight: 500;
    color: var(--mkf-text);
}

/* Cabeçalho (thead) — caixa alta, letter-spacing, 10px, cor secundária. 4 classes pelo mesmo
   motivo do bloco de fonte do corpo acima (empate de especificidade com o MudBlazor nativo
   é resolvido por ORDEM de carregamento — MudBlazor.min.css vem depois de app.css — perdendo
   pra ele em color/font-family com só 3 classes; ver histórico 2026-09-06). */
/* .mud-table-root a mais no seletor NÃO é enfeite (2026-09-08, revisão "mais azul"): o
   MudBlazor declara
   `.mud-table-sticky-header * .mud-table-root .mud-table-head .mud-table-cell{background-color:var(--mud-palette-surface)}`
   — QUATRO classes, exatamente as mesmas quatro que esta regra tinha, e MudBlazor.min.css é
   linkado DEPOIS de app.css, então ganhava por ORDEM e o cabeçalho da tabela era pintado com a
   superfície de CARD, não com --mkf-surface-2. É a 7ª vez que essa ordem de <link> derrubou uma
   regra nossa neste projeto. O defeito existia desde que o cabeçalho ganhou fundo, e ficou
   invisível todo esse tempo porque --mkf-surface era #ffffff e --mkf-surface-2 #f0f4f9 (quase o
   mesmo branco); com os neutros mais azuis (#f3f7fc vs #dee9f5) a faixa do cabeçalho
   simplesmente sumia. Cinco classes passam a ganhar por especificidade, sem !important.
   Confirmado com CSS.getMatchedStylesForNode (DevTools protocol), não por leitura. */
.mkf-data-table .mud-table-container .mud-table-root .mud-table-head .mud-table-cell {
    text-transform: uppercase;
    letter-spacing: var(--mkf-type-header-tracking);
    font-size: var(--mkf-type-header-size);
    font-weight: var(--mkf-type-header-weight);
    color: var(--mkf-text-2);
    /* --mkf-thead-bg (2026-09-23): no Aço e no Papel o cabeçalho é a própria superfície do
       card (branco) e quem o separa do corpo é a borda --mkf-line; no Grafite continua um
       degrau abaixo (--mkf-surface-2). */
    background-color: var(--mkf-thead-bg);
    border-bottom: 1px solid var(--mkf-line);
}

/* Regra 6 — cabeçalho fixo (sticky) + a barra horizontal sempre visível dentro do viewport
   (conquistado antes, ver .mkf-page-flex/.mkf-table-flex-wrapper no topo do arquivo — não
   regredir). MudTable com FixedHeader="true" já posiciona o thead sticky; só falta garantir
   que ele fica por CIMA do corpo ao rolar verticalmente (z-index) e não fica transparente. */
.mkf-data-table .mud-table-container .mud-table-head th {
    position: sticky;
    top: 0;
    z-index: var(--mkf-z-tabela-cabecalho);
}

/* Regra 7 — indicador de ordenação em TODA coluna ordenável, não só na ordenada: nas demais,
   visível no hover (opacidade baixa em repouso, ver .mkf-sortable-th no Razor — o próprio
   ícone de seta já é condicional lá; aqui só o comportamento de hover/repouso do container). */
.mkf-sortable-th .mkf-sort-icon {
    opacity: 0;
    transition: opacity 120ms ease;
}

.mkf-sortable-th:hover .mkf-sort-icon,
.mkf-sortable-th .mkf-sort-icon-active {
    opacity: 1;
}

/* Coluna de checkbox (seleção em lote) — largura mínima fixa, sem padding extra. */
.mkf-col-checkbox {
    width: 34px;
}

/* Coluna de estado — ponto de 6px com tooltip, substitui o ícone ⚠ que aparecia em quase
   toda linha (regra: um alerta que aparece sempre não alerta). Cor por --mkf-state-color,
   definida inline pelo Razor por status. */
.mkf-col-state {
    width: 28px;
    text-align: center;
}

.mkf-state-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--mkf-state-color, var(--mkf-idle));
}

/* NaoVerificado (Defeito 5, rodada 2) — mesma cor neutra de NaoParticipa (--mkf-idle), mas
   esmaecida: "ainda não sabemos o estado" é uma informação mais fraca que "sabemos e não
   participa", então o ponto correspondente também deve pesar menos visualmente. */
.mkf-state-dot-fraco {
    opacity: 0.45;
}

/* ================================================================================
   POPOVER DE DUPLICIDADE — "concorrendo com você mesmo" (2026-09-08)
   ================================================================================
   O ponto âmbar da coluna Estado virou o gatilho de um painel com uma linha por anúncio do
   grupo (ver ColocacaoCatalogo.razor). O painel é o ChildContent de um MudMenu, porque a
   .mud-table-container tem overflow-x:auto pro scroll horizontal das colunas e recortaria
   qualquer painel position:absolute nascido dentro da célula — o MudMenu renderiza no
   MudPopoverProvider, no nível do <body>.

   As duas regras abaixo desmontam a casca do MudBlazor (superfície + padding da lista) pra
   que .mkf-dup-pop desenhe o painel do jeito do Sistema de Design, igual a .mkf-pop. Cada
   seletor tem 3+ classes E !important de propósito: MudBlazor.min.css é linkado DEPOIS de
   app.css (é a 7ª vez que essa ordem derruba uma regra nossa neste projeto), então empate de
   especificidade sempre perde. */
.mud-popover.mkf-dup-pop-surface.mud-popover-open {
    background-color: transparent !important;
    border: none !important;
    padding: 0 !important;
    max-width: none !important;
}

.mud-popover.mkf-dup-pop-surface .mud-list.mkf-dup-pop-list {
    padding: 0 !important;
    background-color: transparent !important;
}

/* Área de clique do ponto: o alvo real é 6px, pequeno demais pra um gesto que agora abre um
   painel. O quadrado de 22px dá o alvo sem mudar cor nem tamanho do ponto (fora de escopo) —
   por isso a caixa não pinta nada em repouso, só no hover. */
/* v1.23 - celula de Titulo: texto que encolhe + icone de duplicidade que nao encolhe.
   min-width:0 no texto e o que permite o text-overflow:ellipsis funcionar dentro de um flex
   item (sem ele o item usa min-content e empurra o icone pra fora da celula). */
.mkf-titulo-cell {
    display: flex;
    align-items: center;
    gap: var(--mkf-space-2);
    min-width: 0;
}

.mkf-titulo-cell .mkf-titulo-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Gatilho do popover de duplicidade (era .mkf-state-dot-clicavel na coluna de estado).
   flex-shrink:0 pra nunca ser espremido pelo titulo. A cor e --mkf-text-3 e NAO --mkf-warn:
   o ambar continua reservado pra "erro/atencao" (o ponto de estado ao lado pode estar ambar
   ao mesmo tempo, e eram justamente os dois que se confundiam antes). */
.mkf-dup-trigger {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    cursor: pointer;
    color: var(--mkf-text-3);
    padding: 4px;
    margin: -4px;
    border-radius: 4px;
}

.mkf-dup-trigger:hover {
    color: var(--mkf-text);
    background: var(--mkf-surface-3);
}

/* 3 classes: MudBlazor.min.css carrega DEPOIS de app.css e empata/ganha em color e
   font-size com 1-2 classes (armadilha ja documentada varias vezes neste projeto). */
.mkf-titulo-cell .mkf-dup-trigger .mud-icon-root {
    font-size: 16px;
    color: inherit;
}

.mkf-dup-anchor {
    display: inline-flex;
    flex-shrink: 0;
}

.mkf-dup-anchor .mud-menu {
    display: inline-flex;
}

.mkf-state-dot-clicavel {
    box-sizing: content-box;
    padding: 8px;
    margin: -8px;
    cursor: pointer;
    background-clip: content-box;
    border-radius: 50%;
}

.mkf-dup-pop {
    width: 900px;
    max-width: calc(100vw - 32px);
    background-color: var(--mkf-surface-3);
    border: 1px solid var(--mkf-line);
    border-radius: var(--mkf-radius-panel);
    overflow: hidden;
    text-align: left;
    cursor: default;
}

/* Cabeçalho explicativo: por que estas linhas estão juntas. Texto corrido (não o eyebrow de
   .mkf-pop-head) porque é uma frase, não um rótulo de painel. */
.mkf-dup-pop-head {
    padding: 11px 14px;
    border-bottom: 1px solid var(--mkf-line);
    font-size: var(--mkf-type-label-size);
    line-height: 1.45;
    color: var(--mkf-text-2);
}

.mkf-dup-pop-body {
    max-height: max(180px, calc(100vh - 320px));
    overflow: auto;
}

.mkf-dup-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

/* Mesmo cabeçalho de coluna da tabela grande (papel "header" da escala) — o popover é uma
   mini-tabela do mesmo sistema, não um componente novo. */
.mkf-dup-table thead th {
    padding: 8px 10px;
    background-color: var(--mkf-surface-2);
    border-bottom: 1px solid var(--mkf-line);
    font-size: var(--mkf-type-header-size);
    font-weight: var(--mkf-type-header-weight);
    letter-spacing: var(--mkf-type-header-tracking);
    text-transform: uppercase;
    color: var(--mkf-text-2);
    text-align: left;
    white-space: nowrap;
}

.mkf-dup-table tbody td {
    padding: 9px 10px;
    border-bottom: 1px solid var(--mkf-line-soft);
    font-size: var(--mkf-type-cell-size);
    color: var(--mkf-text);
    vertical-align: middle;
}

.mkf-dup-table tbody tr:last-child td {
    border-bottom: none;
}

/* A linha de onde o popover foi aberto — marcada por superfície, nunca por cor semântica
   (verde/âmbar aqui competiriam com os pontos de estado da própria coluna Estado). */
.mkf-dup-table tbody tr.mkf-dup-row-este td {
    background-color: var(--mkf-surface-2);
}

/* Larguras: TODAS as colunas em px, menos Título, que leva width:100% e absorve o resto —
   mesma regra que a tabela grande passou a seguir na rodada 2 do Sistema de Design. A primeira
   versão deste painel deixava Título SEM largura nenhuma num table-layout:fixed, e as colunas
   fixas somavam 680 dos 760px: o título aparecia como "2 Par E…" (visto no print da rodada de
   verificação). Somam 620px agora, sobrando ~280 pro título. */
.mkf-dup-th-titulo {
    width: 100%;
}

.mkf-dup-th-estado {
    width: 116px;
}

.mkf-dup-th-item {
    width: 120px;
}

.mkf-dup-th-num {
    width: 82px;
    text-align: right !important;
}

.mkf-dup-th-tipo {
    width: 76px;
}

.mkf-dup-td-estado {
    white-space: nowrap;
    color: var(--mkf-text-2);
}

.mkf-dup-estado-wrap {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

/* Título truncado com o nome completo no title do <td> — mesmo padrão da coluna Título da
   tabela grande. */
.mkf-dup-td-titulo {
    overflow: hidden;
}

.mkf-dup-titulo-text {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mkf-dup-este {
    font-size: var(--mkf-type-label-size);
    color: var(--mkf-text-3);
}

.mkf-dup-td-item a {
    font-family: var(--mkf-mono-numeric-family);
    font-size: var(--mkf-mono-numeric-size);
    font-variant-numeric: var(--mkf-mono-numeric-variant);
    letter-spacing: var(--mkf-mono-numeric-tracking);
    color: var(--mkf-brand);
    text-decoration: none;
}

.mkf-dup-td-item a:hover {
    text-decoration: underline;
}

/* Todo número em mono tabular, alinhado à direita — mesma fonte canônica das colunas
   numéricas da tabela e da Precificação (--mkf-mono-numeric-*, ponto único). */
.mkf-dup-td-num {
    text-align: right;
    font-family: var(--mkf-mono-numeric-family);
    font-size: var(--mkf-mono-numeric-size);
    font-weight: var(--mkf-mono-numeric-weight);
    font-variant-numeric: var(--mkf-mono-numeric-variant);
    letter-spacing: var(--mkf-mono-numeric-tracking);
}

.mkf-dup-td-tipo {
    color: var(--mkf-text-2);
    white-space: nowrap;
}

.mkf-dup-pop-foot {
    display: flex;
    justify-content: flex-end;
    padding: 10px 14px;
    border-top: 1px solid var(--mkf-line);
    background-color: var(--mkf-surface-2);
}

/* O botão do rodapé reusa .mkf-pop-btn--primary, que é flex:1 nos painéis da barra (dois
   botões dividindo a largura). Aqui é um botão só num painel largo — flex:none pra ele ficar
   do tamanho do texto em vez de esticar 760px. */
.mkf-dup-pop-foot .mkf-pop-btn {
    flex: none;
}

.mkf-data-table .mud-table-container {
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: var(--mkf-text-3) var(--mkf-line);
}

.mkf-data-table .mud-table-container::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.mkf-data-table .mud-table-container::-webkit-scrollbar-track {
    background: var(--mkf-line);
}

.mkf-data-table .mud-table-container::-webkit-scrollbar-thumb {
    background: var(--mkf-text-3);
    border-radius: 6px;
}

.mkf-data-table .mud-table-container::-webkit-scrollbar-thumb:hover {
    background: var(--mkf-brand);
}

/* ---- Largura total do "Monitor de Buy Box" (ColocacaoCatalogo.razor) — v3 (2026-09-08,
   correção do Defeito 1 da rodada 2 do Sistema de Design): REVERTE a decisão anterior (ver
   comentário no topo desta seção, "MANUTENÇÃO da largura total") de usar uma largura FIXA em
   px igual à soma de TODAS as colunas, Título incluído. Essa técnica tinha um bug sério: com
   `table-layout:fixed` e width em px explícito, a LARGURA DA TABELA é exatamente essa soma —
   sobra um vão morto entre o fim da tabela e a borda direita do painel toda vez que a tela é
   mais larga que a soma (o caso comum), e a coluna Título nunca visualmente "ganhava" o espaço
   disponível de verdade porque a tabela inteira já parava de crescer antes.
   Fix: `width: 100%` (a tabela ocupa o painel inteiro, não mais um valor fixo) + a coluna
   Título SEM largura declarada nenhuma no <MudTh>/<MudTd> (ver ColocacaoCatalogo.razor) — em
   table-layout:fixed, uma coluna sem largura própria absorve todo o espaço que sobra depois
   das outras (que continuam em px fixo). `min-width` = soma só das colunas COM largura própria
   (1170px, Checkbox+Estado+SKU+...+Ações, sem Título — 7 dias/30 dias maiores que a sugestão
   original do prompt, ver comentário nelas no Razor) + uma folga de ~260px pro Título nunca
   ficar espremido a 0 em telas mais estreitas que isso — abaixo do min-width, a barra de
   rolagem horizontal do wrapper entra em ação (já existente, não regride). Esta técnica é
   DIFERENTE da "width:100%;max-width:1px" que a decisão anterior rejeitava (aquela travava a
   largura da coluna Título num valor absurdamente pequeno só pra forçar ellipsis, e já tinha
   regredido 3x por causa de table-layout:auto/width:max-content brigando entre si) — aqui
   nenhuma coluna usa esse truque, só uma ausência legítima de `width` na única coluna elástica,
   que é o comportamento padrão e documentado de table-layout:fixed. Validado com Playwright
   real (1920px) antes de fechar — ver relatório da sessão. */
/* v4 (2026-09-08, painel de Colunas) — o min-width deixou de ser um número escrito à mão
   aqui (1436px = soma das colunas + folga do Título) e passou a ser calculado no C# a partir
   das colunas VISÍVEIS (LarguraMinimaTabela -> --mkf-table-min-width, inline no wrapper da
   tabela). Sem isso, desligar colunas no painel deixaria a tabela larga demais e reapareceria
   o vão morto à direita que a rodada anterior corrigiu. O fallback é o valor antigo, pra
   qualquer tabela que use esta classe sem declarar a var. */
.mkf-catalogo-table .mud-table-root {
    width: 100%;
    min-width: var(--mkf-table-min-width, 1436px);
    table-layout: fixed;
}

/* ---- Largura total da "Tabela de Custos" (TabelaCustos.razor, 2026-09-09) — MESMA técnica já
   validada no Monitor de Buy Box logo acima: `width:100%` + `table-layout:fixed` + a coluna Nome
   SEM largura declarada nenhuma (a única elástica, que por isso absorve o espaço que sobra).
   min-width = soma das colunas COM largura própria (140+130+150+140+120+110+150+110 = 1050px)
   + ~250px de folga pro Nome nunca ficar espremido a 0; abaixo disso entra a barra de rolagem
   horizontal do wrapper, que .mkf-data-table já provê. NÃO trocar por table-layout:auto: neste
   projeto largura de coluna com auto já precisou de 3 rodadas pra pegar (ver histórico). */
/* min-width = soma das colunas COM largura própria (130+110+120+100+150+104+96+130+64+120 =
   1124px) + ~206px de folga pro Nome (a única elástica, sem width declarada).
   MEDIDO no DOM real, não estimado: numa janela de 1680px a área útil da tabela é 1342px (a
   sidebar fixa come 240px, mais os paddings do MudPaper). A 1° tentativa (1560px, depois 1420px)
   estourava esses 1342px e a tabela ganhava rolagem horizontal permanente — e bastava o foco cair
   num botão da coluna Ações pro navegador rolar sozinho e esconder Código e Nome. Com 1330px a
   tabela CABE na largura padrão e a rolagem volta a ser só o fallback de janela estreita, que
   .mkf-data-table já provê. NÃO trocar por table-layout:auto: neste projeto largura de coluna com
   auto já precisou de 3 rodadas pra pegar (ver histórico). */
.mkf-custos-table .mud-table-root {
    width: 100%;
    min-width: 1330px;
    table-layout: fixed;
}

/* Compra Vonder (2026-09-13) — entraram seleção (36), Unid. (52) e Unid./Custo (76); o espaço saiu
   do padding de fábrica que as células deixaram de ter (logo abaixo) e de larguras refeitas pela
   medição real de cada coluna; a soma fixa é 1174px e Nome fica com o resto dos 1330px (o
   container mede 1332px numa janela de 1680px). Mín./Múlt. são opcionais (checkbox da tela) e
   somam 112px: com eles ligados a tabela rola na horizontal nessa janela — escolha de quem ligou. */
.mkf-custos-table.mkf-custos-table--minmult .mud-table-root {
    min-width: 1442px;
}

/* Fonte do custo (2026-09-13) — coluna opcional "Prat. (CSV)" (96px), desligada por padrão; ligada,
   a tabela rola na horizontal como com Mín./Múlt. */
.mkf-custos-table.mkf-custos-table--csv .mud-table-root {
    min-width: 1426px;
}

.mkf-custos-table.mkf-custos-table--minmult.mkf-custos-table--csv .mud-table-root {
    min-width: 1538px;
}

/* Mesma correção do Monitor (.mkf-catalogo-table thead th, acima): o padding de fábrica do
   MudBlazor é 16px + 24px por <th> e ~16px por lado no <td> dense. Com 14 colunas de largura fixa
   isso era ~500px de folga, e foi o que a medição no DOM mostrou ao entrarem as colunas da Compra
   Vonder (Ações pedia 164px com 124, Unid./Custo 124px com 76, e a tabela passava do container).
   !important pelo mesmo motivo documentado lá (par físico + lógico na mesma regra do MudBlazor). */
.mkf-custos-table .mud-table-container .mud-table-root th,
.mkf-custos-table .mud-table-container .mud-table-root td {
    padding-left: 8px !important;
    padding-right: 8px !important;
}

/* Enriquecer Produtos — Vonder (2026-09-13, colunas Preço e C/ impostos): mesma técnica do Monitor e da
   Tabela de Custos — `width:100%` + `table-layout:fixed`, Descrição é a única coluna sem largura e
   absorve a sobra. min-width = soma das larguras fixas do Razor (64+112+100+132+96+116+58+56+56+150 =
   940px) + ~260px de folga pra Descrição; abaixo disso entra a rolagem horizontal do container. */
.mkf-enriquecer-table .mud-table-root {
    width: 100%;
    min-width: 1200px;
    table-layout: fixed;
}

/* .mkf-col-numeric sozinha (1 classe) perde pro text-align:start do MudBlazor, que carrega depois do
   app.css — medido: a célula ficava "start". 4 classes, como as demais regras de tabela. */
.mkf-enriquecer-table .mud-table-container .mud-table-root th.mkf-col-numeric,
.mkf-enriquecer-table .mud-table-container .mud-table-root td.mkf-col-numeric {
    text-align: right;
}

/* ⚠ discreto antes do valor quando o c/ impostos do enriquecimento diverge da Prateleira — cor de
   aviso, sem fundo: é indicação, não erro. */
.mkf-preco-divergente {
    color: var(--mkf-warn);
    margin-right: 4px;
    cursor: help;
}

/* Tabelas da Vonder (Minha Prateleira, Enriquecer Produtos, Catálogo Vonder) — mesmo padding de 8px
   do Monitor e da Tabela de Custos. Com as colunas Unid./Mín./Múlt. (Compra Vonder, 2026-09-13) o
   padding de fábrica fazia a Prateleira passar da área útil e esconder Múlt. atrás da rolagem
   (visto no print a 1680px). */
.mkf-tabela-compacta .mud-table-container .mud-table-root th,
.mkf-tabela-compacta .mud-table-container .mud-table-root td {
    padding-left: 8px !important;
    padding-right: 8px !important;
}

/* Botões de ícone da coluna Ações: 34px de fábrica (Size.Small) davam 4 × 34 + padding = 152px nas
   linhas Olist (editar, travar, reatualizar, remover). Com 28px cabem nos 128px da coluna. */
.mkf-custos-table .mud-table-container .mud-table-body td .mud-icon-button {
    padding: 4px;
}

/* ---- Formulário da "Tabela de Custos" (TabelaCustos.razor, 2026-09-09) — a largura de cada
   campo mora AQUI (no <div> nosso), não no Style do MudTextField: medido no DOM real, o Style do
   MudTextField 9.7 não chega na raiz .mud-input-control, e a regra `flex: 1 1 auto` do MudBlazor
   dividia os campos igualmente pela linha inteira, ignorando a largura pedida (todos saíam com
   438px numa linha de 1346px). Com um wrapper próprio de largura fixa, o input preenche 100% dele
   e o MudBlazor não tem o que disputar. */
.mkf-custo-form {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 16px;
    align-items: flex-start;
}

.mkf-custo-f {
    flex: none;
}

.mkf-custo-f small {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    line-height: 1.35;
    color: var(--mkf-text-3);
}

/* ---- Botão de arquivo da importação de CSV (TabelaCustos.razor, 2026-09-09) — <label for> +
   <InputFile> escondido, no lugar do MudFileUpload: o ActivatorContent dele foi ignorado na
   prática (renderizou o botão padrão "Browse Files", em inglês). Visual copiado do MudButton
   Variant.Outlined pra não destoar dos outros botões da tela. NÃO usar display:none no input:
   input escondido assim fica inalcançável por teclado em alguns navegadores — a técnica aqui é
   tirá-lo do fluxo mantendo-o focável. */
.mkf-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.mkf-file-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: 1px solid var(--mkf-brand);
    border-radius: var(--mkf-radius-pill);
    color: var(--mkf-brand);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .02em;
    cursor: pointer;
    user-select: none;
}

.mkf-file-btn:hover {
    background: var(--mkf-surface-2);
}

.mkf-file-input:focus-visible + .mkf-file-btn,
.mkf-file-btn:focus-visible {
    outline: 2px solid var(--mkf-brand);
    outline-offset: 2px;
}


/* ---- Largura total do "Catálogo Vonder" (VonderCatalogo.razor) — essa tabela não tem
   larguras fixas por coluna (auto), só precisa crescer com o conteúdo sem cortar. */
.mkf-vonder-table .mud-table-root {
    width: max-content;
    min-width: 100%;
}

/* ---- Miniaturas da galeria no modal de detalhes do produto (VonderProductDetailDialog.razor,
   v1.43) — clique troca a imagem grande acima. Borda de destaque na miniatura selecionada,
   mesmo espírito visual do .mkf-surface-card (borda sutil em vez de só sombra). ---- */
.mkf-vonder-thumb {
    display: inline-flex;
    padding: 2px;
    border: 2px solid transparent;
    border-radius: 8px;
    cursor: pointer;
}

.mkf-vonder-thumb:hover {
    border-color: var(--mud-palette-lines-default);
}

.mkf-vonder-thumb-selecionada,
.mkf-vonder-thumb-selecionada:hover {
    border-color: var(--mud-palette-primary);
}

/* v2 (2026-09-08) — resíduo do scaffold padrão do Blazor (Bootstrap), alinhado aos tokens do
   Sistema de Design em vez dos azuis default — link/ação é interação, cor de marca. */
a, .btn-link {
    color: var(--mkf-brand);
}

.btn-primary {
    color: var(--mkf-text-on-brand);
    background-color: var(--mkf-brand);
    border-color: var(--mkf-brand-dim);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem var(--mkf-bg), 0 0 0 0.25rem var(--mkf-brand-soft);
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

/* Vinham do scaffold do Blazor com verde/vermelho fixos, calibrados pra fundo claro do
   template — sobre o tema escuro ficavam berrantes e fora da escala semântica do app. */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--mkf-win);
}

.invalid {
    outline: 1px solid var(--mkf-lose);
}

.validation-message {
    color: var(--mkf-lose);
}

/* NOTA pra varredura de hex literais: os hex de .blazor-error-boundary são do template
   padrão do Blazor e NÃO viram token de propósito — é a faixa de "erro fatal, o circuito
   caiu", que precisa ser idêntica e alarmante nos dois temas (vermelho sólido + texto
   branco). Se ela seguisse --mkf-*, um erro de runtime seria pintado com os mesmos tokens
   que acabaram de falhar em carregar. */
.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: var(--mkf-line);
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ================================================================================
   FILTROS E COLUNAS — popovers da barra de ferramentas (B0–B4, 2026-09-08)
   ================================================================================
   Global (não CSS isolado) porque as mesmas classes são usadas por dois donos diferentes:
   o markup do painel de Filtros vive em ColocacaoCatalogo.razor e o de Colunas em
   Components/Shared/ColunasPopover.razor — e a intenção declarada é repetir os dois nas
   demais tabelas depois de aprovado aqui. */

/* ---- Barra de ferramentas: busca + os dois botões + os chips do que está filtrando ---- */
/* Uma linha só: busca à esquerda, chips do que está filtrando ao lado dela, e os dois botões
   empurrados pra BORDA DIREITA (B1 do pedido de 2026-09-08 — tinha ficado por aplicar).
   flex-wrap fica no grupo dos chips, não aqui: são eles que podem passar de um punhado, e a
   linha da busca + botões precisa continuar sendo uma linha. */
.mkf-toolbar {
    display: flex;
    align-items: center;
    gap: var(--mkf-space-2);
    flex-wrap: nowrap;
}

.mkf-toolbar-chips {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--mkf-space-2);
    min-width: 0;
}

/* margin-left:auto no GRUPO, e não margin-right:auto na busca: com os chips entre os dois, um
   auto na busca empurraria os chips junto pro meio da barra. O auto aqui come toda a folga
   que sobrar, encoste a busca no seu máximo ou não. */
.mkf-toolbar-actions {
    display: flex;
    align-items: center;
    gap: var(--mkf-space-2);
    margin-left: auto;
    flex: none;
}

/* Os dois painéis agora nascem na borda direita — ancorar pela esquerda jogaria metade do
   painel pra fora da janela. 3 classes pra ganhar do `left: 0` de .mkf-pop sem !important. */
.mkf-toolbar-actions .mkf-pop-anchor .mkf-pop {
    left: auto;
    right: 0;
}

.mkf-toolbar-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: var(--mkf-control-height);
    padding: 0 11px;
    border: 1px solid var(--mkf-line);
    border-radius: var(--mkf-radius-pill);
    background-color: var(--mkf-surface-2);
    color: var(--mkf-text-2);
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.mkf-toolbar-btn:hover {
    background-color: var(--mkf-surface-3);
    color: var(--mkf-text);
}

.mkf-toolbar-btn--on {
    background-color: var(--mkf-surface-3);
    border-color: var(--mkf-surface-3);
    color: var(--mkf-text);
}

.mkf-toolbar-btn svg {
    width: 13px;
    height: 13px;
    opacity: 0.75;
}

.mkf-toolbar-btn-count {
    font-family: var(--mkf-font-mono);
    font-size: 11px;
    font-weight: 600;
    color: var(--mkf-brand);
}

/* Chip de filtro aplicado — o valor em mono na cor da marca é o que faz o estado da tela ser
   legível de relance sem abrir o painel. */
.mkf-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: var(--mkf-control-height);
    padding: 0 11px;
    border: 1px solid var(--mkf-surface-3);
    border-radius: var(--mkf-radius-pill);
    background-color: var(--mkf-surface-3);
    color: var(--mkf-text);
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
}

.mkf-filter-chip-valor {
    font-family: var(--mkf-font-mono);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--mkf-brand);
}

.mkf-filter-chip svg {
    width: 12px;
    height: 12px;
    opacity: 0.55;
}

.mkf-filter-chip:hover svg {
    opacity: 1;
}

/* ---- Ancoragem e camada de fechamento ----
   O popover é absoluto DENTRO do botão que o abriu (alinhado pela esquerda, 6px abaixo), não
   um MudPopover: o z-index de popover e de overlay do MudBlazor sai do mesmo token
   (--mud-zindex-popover), e o empate deixaria o painel atrás da própria camada que deveria
   ficar embaixo dele. O z-index vai no ÂNCORA (não no painel) pra o botão também ficar acima
   da camada (clicar Filtros com Colunas aberto troca de painel num clique só).
   2026-09-17 — o âncora só sobe de camada ENQUANTO um painel próprio está aberto (a camada
   .mkf-pop-overlay só existe nesse momento). Antes ficava em 1201 o tempo todo e cobria o
   menu "Sincronizar" (MudMenu, também 1201, renderizado antes da página no DOM). Fechado, o
   âncora não cria contexto de empilhamento e fica na camada da página, abaixo de qualquer
   MudPopover; e com o MudMenu aberto, o .mud-overlay dele cobre a barra — um popover por vez. */
.mkf-pop-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--mkf-z-dropdown-fundo);
    background: transparent;
}

.mkf-pop-anchor {
    position: relative;
    display: inline-flex;
}

:root:has(.mkf-pop-overlay) .mkf-pop-anchor {
    z-index: var(--mkf-z-dropdown);
}

.mkf-pop {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    width: 318px;
    background-color: var(--mkf-surface-3);
    border: 1px solid var(--mkf-line);
    border-radius: var(--mkf-radius-panel);
    overflow: hidden;
    text-align: left;
    cursor: default;
}

.mkf-pop--sm {
    width: 266px;
}

.mkf-pop:focus,
.mkf-pop:focus-visible {
    outline: none;
}

.mkf-pop-head {
    display: flex;
    align-items: center;
    height: 38px;
    padding: 0 13px;
    border-bottom: 1px solid var(--mkf-line);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--mkf-text);
}

.mkf-pop-count {
    margin-left: auto;
    font-family: var(--mkf-font-mono);
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--mkf-brand);
}

/* O corpo rola quando não cabe: o painel abre ancorado num botão que já está a ~330px do
   topo, então um max-height em vh puro (60vh) ainda estouraria a janela em telas menores —
   descontar a altura do que vem antes (com um piso pra nunca virar uma fresta inútil) é o que
   garante o rodapé de ações sempre visível. */
.mkf-pop-body {
    padding: 13px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    max-height: max(180px, calc(100vh - 420px));
    overflow-y: auto;
}

.mkf-pop-sec {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.mkf-pop-label {
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--mkf-text-3);
}

/* Contador ao lado do rótulo da seção ("12 em cento · 9 sem fator", Compra Vonder 2026-09-13) —
   sem caixa alta, em mono, pra não competir com o rótulo. */
.mkf-pop-label .mkf-pop-label-contagem {
    margin-left: 8px;
    font-family: var(--mkf-mono-numeric-family);
    font-variant-numeric: var(--mkf-mono-numeric-variant);
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--mkf-text-2);
}

.mkf-pop-foot {
    display: flex;
    gap: var(--mkf-space-2);
    padding: 10px 13px;
    border-top: 1px solid var(--mkf-line);
    background-color: var(--mkf-surface-2);
}

.mkf-pop-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    padding: 0 13px;
    border: 1px solid var(--mkf-line);
    border-radius: var(--mkf-radius-pill);
    background-color: var(--mkf-surface-2);
    color: var(--mkf-text);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
}

.mkf-pop-btn--primary {
    background-color: var(--mkf-brand);
    border-color: var(--mkf-brand);
    color: var(--mkf-text-on-brand);
    font-weight: 600;
}

.mkf-pop-btn--primary:hover {
    background-color: var(--mkf-brand-hover);
    border-color: var(--mkf-brand-hover);
}

.mkf-pop-btn--ghost {
    flex: none;
    background: transparent;
    border-color: transparent;
    color: var(--mkf-text-2);
}

.mkf-pop-btn--ghost:hover {
    background-color: var(--mkf-surface-3);
    color: var(--mkf-text);
}

/* ---- Chips de multisseleção (Estado no catálogo) ---- 26px, cada um com o ponto da cor
   semântica do estado (a mesma de --mkf-counter-color nos contadores do topo). */
.mkf-mini {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.mkf-mini-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 26px;
    padding: 0 9px;
    border: 1px solid var(--mkf-line);
    border-radius: 5px;
    background-color: var(--mkf-surface);
    color: var(--mkf-text-2);
    font-family: inherit;
    font-size: 11.5px;
    cursor: pointer;
}

.mkf-mini-btn:hover {
    background-color: var(--mkf-surface-2);
    color: var(--mkf-text);
}

.mkf-mini-btn--on {
    background-color: var(--mkf-surface-2);
    color: var(--mkf-text);
    border-color: var(--mkf-mini-color, var(--mkf-line));
}

.mkf-mini-dot {
    width: 5px;
    height: 5px;
    flex: none;
    border-radius: 50%;
    background-color: var(--mkf-mini-color, var(--mkf-idle));
}

/* ---- Segmentado de 3 ---- */
.mkf-seg {
    display: flex;
    gap: 2px;
    padding: 2px;
    border: 1px solid var(--mkf-line);
    border-radius: var(--mkf-radius-control);
    background-color: var(--mkf-surface);
}

.mkf-seg-btn {
    flex: 1;
    height: 26px;
    border: 0;
    border-radius: 4px;
    background: none;
    color: var(--mkf-text-2);
    font-family: inherit;
    font-size: 11.5px;
    white-space: nowrap;
    cursor: pointer;
}

.mkf-seg-btn:hover {
    color: var(--mkf-text);
}

.mkf-seg-btn--on {
    background-color: var(--mkf-surface-3);
    color: var(--mkf-text);
    font-weight: 500;
}

/* ---- Grupo "Lucro e oportunidade" no painel de Filtros (v1.31, 2026-09-10) ----
   Caixa de marcação em linha, com espaço pro campo numérico do "Margem abaixo de X %" ficar
   entre o rótulo e o "%" sem quebrar linha. */
.mkf-pop-check {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    white-space: nowrap;
    gap: var(--mkf-space-2);
    min-height: 28px;
    color: var(--mkf-text-2);
    font-size: 12px;
    cursor: pointer;
}

.mkf-pop-check:hover {
    color: var(--mkf-text);
}

.mkf-pop-check input[type="checkbox"] {
    accent-color: var(--mkf-brand);
    cursor: pointer;
}

/* O seletor de motivos tem 2 a 7 opções com rótulos de tamanhos diferentes — em uma linha só
   elas ficariam ilegíveis. flex:none nos botões pra cada um ocupar a própria largura em vez de
   dividir a linha em partes iguais (que é o comportamento dos outros .mkf-seg do painel). */
.mkf-seg--wrap {
    flex-wrap: wrap;
    height: auto;
    gap: 2px;
}

.mkf-seg--wrap .mkf-seg-btn {
    flex: 0 0 auto;
    padding: 0 8px;
}

/* Contagem ao lado do motivo: é o que transforma a opção numa fila de trabalho ("SKU sem custo
   · 412"). Tom abaixo do rótulo — informa o tamanho, não disputa a leitura do nome. */
.mkf-seg-contagem {
    margin-left: 5px;
    color: var(--mkf-text-3);
    font-family: var(--mkf-mono-numeric-family);
    font-variant-numeric: var(--mkf-mono-numeric-variant);
}

/* ---- Rodapé da tabela (v1.31) ----
   A contagem à esquerda, a paginação à direita. Existe pra o filtro nunca ficar invisível: sem
   o "filtrado de N", um recorte de 137 linhas e a base inteira têm exatamente a mesma cara. */
.mkf-table-rodape {
    gap: var(--mkf-space-3);
}

.mkf-rodape-info {
    color: var(--mkf-text-2);
    font-size: var(--mkf-type-label-size);
    font-variant-numeric: var(--mkf-mono-numeric-variant);
}

/* v1.33 — "Ganho somado" do filtro de faixa morta: afastado da contagem (é outra informação),
   valor em mono, mesma cor da linha — sem verde, porque não é um alerta nem uma conquista, é o
   tamanho da oportunidade. Depois de .mkf-rodape-info no arquivo, pra não repetir o empate por
   ordem da v1.31 (.mkf-pop-input--inline). */
.mkf-table-rodape .mkf-rodape-info .mkf-rodape-ganho {
    margin-left: var(--mkf-space-6);
    white-space: nowrap;
}

.mkf-table-rodape .mkf-rodape-info .mkf-rodape-ganho b {
    font-family: var(--mkf-mono-numeric-family);
    font-weight: 600;
    color: var(--mkf-text-2);
}

/* ---- Par de campos numéricos (Preço atual: mín até máx) ---- */
.mkf-pair {
    display: flex;
    align-items: center;
    gap: 7px;
}

.mkf-pair span {
    flex: none;
    font-size: 11.5px;
    color: var(--mkf-text-3);
}

.mkf-pop-input {
    width: 100%;
    min-width: 0;
    height: 30px;
    padding: 0 9px;
    border: 1px solid var(--mkf-line);
    border-radius: var(--mkf-radius-control);
    background-color: var(--mkf-surface-2);
    color: var(--mkf-text);
    font-family: var(--mkf-font-sans);
    font-size: 12px;
}

/* O campo do percentual não é de largura total como os outros do painel: ele mora DENTRO da
   frase ("Margem abaixo de [ 5 ] %"), e esticar quebra a frase em três linhas — foi o que
   aconteceu na primeira tentativa, porque esta regra estava ANTES de .mkf-pop-input no arquivo
   e perdia o empate de 1 classe por ORDEM. Fica DEPOIS de propósito; não é caso de !important.
   Mono à direita, como todo número do app. */
.mkf-pop-input--inline {
    width: 62px;
    flex: 0 0 auto;
    text-align: right;
    font-family: var(--mkf-mono-numeric-family);
    font-variant-numeric: var(--mkf-mono-numeric-variant);
}

.mkf-pop-input:focus {
    outline: none;
    border-color: var(--mkf-brand);
    box-shadow: 0 0 0 3px var(--mkf-brand-soft);
}

/* Todo número em mono tabular, inclusive dentro de um <input> — mesma regra canônica do
   resto do app (ver --mkf-mono-numeric-*; foi exatamente num <input> que a fonte mono já
   deixou de pegar uma vez, por empate de especificidade com o `font:inherit` do MudBlazor —
   aqui o input é HTML puro, sem nenhuma regra da lib competindo). */
.mkf-pop-input--num {
    font-family: var(--mkf-mono-numeric-family);
    font-variant-numeric: var(--mkf-mono-numeric-variant);
    letter-spacing: var(--mkf-mono-numeric-tracking);
    text-align: right;
}

/* ---- Lista de colunas (exibir e reordenar) ---- */
.mkf-cols {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.mkf-col-item {
    display: flex;
    align-items: center;
    gap: 9px;
    height: 31px;
    padding: 0 8px;
    margin: 0;
    border-radius: 5px;
    font-size: 12.5px;
    color: var(--mkf-text);
    cursor: pointer;
}

.mkf-col-item:hover {
    background-color: var(--mkf-surface-2);
}

.mkf-col-item input[type="checkbox"] {
    accent-color: var(--mkf-brand);
    width: 14px;
    height: 14px;
    flex: none;
    margin: 0;
}

.mkf-col-item-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mkf-col-grip {
    display: flex;
    flex: none;
    color: var(--mkf-text-3);
}

.mkf-col-grip svg {
    width: 13px;
    height: 13px;
    display: block;
}

.mkf-col-grip--drag {
    cursor: grab;
}

/* Coluna fixa (Título/Ações) — cadeado no lugar da alça, texto e cadeado esmaecidos: fica
   claro que não é uma escolha desabilitada por engano, é uma âncora da tabela. */
.mkf-col-item--lock {
    color: var(--mkf-text-3);
    cursor: default;
}

.mkf-col-item--lock .mkf-col-grip {
    opacity: 0.35;
}

.mkf-col-item--drag {
    opacity: 0.45;
}

/* ---- Estado vazio depois de filtrar (B4) ---- */
.mkf-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 34px 18px;
    min-height: 168px;
    text-align: center;
    background-color: var(--mkf-surface);
    border: 1px solid var(--mkf-line);
    border-radius: var(--mkf-radius-panel);
}

.mkf-empty svg {
    width: 22px;
    height: 22px;
    color: var(--mkf-text-3);
}

.mkf-empty b {
    font-size: 13px;
    font-weight: 600;
    color: var(--mkf-text);
}

.mkf-empty p {
    margin: 0;
    max-width: 46ch;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--mkf-text-2);
}

.mkf-empty .mkf-pop-btn {
    margin-top: 4px;
}

/* ================================================================================
   CABEÇALHO DA PÁGINA (A1, 2026-09-08)
   ================================================================================
   Uma linha: breadcrumb + título à esquerda, meta de sincronização na MESMA linha-base do
   título, ações empurradas pra direita. Global (não CSS isolado) porque o markup mistura
   elementos da própria tela com componentes filhos (MudButton/MudMenu/MudIconButton), e as
   regras precisam alcançar os dois; e porque a intenção declarada é repetir este cabeçalho
   nas demais tabelas.

   `align-items: flex-end` é o que põe título e meta na mesma linha-base: alinhar pelo centro
   deixaria a meta (12px) flutuando no meio da altura do h1 (22px). */
.mkf-page-head {
    display: flex;
    align-items: flex-end;
    gap: var(--mkf-space-4);
    flex-wrap: wrap;
    padding: 0 0 14px;
    margin-bottom: var(--mkf-space-4);
    border-bottom: 1px solid var(--mkf-line-soft);
}

.mkf-page-head-id {
    min-width: 0;
}

.mkf-page-head h1 {
    margin: 0;
    line-height: 1.2;
    font-size: var(--mkf-type-display-size);
    font-weight: var(--mkf-type-display-weight);
    letter-spacing: var(--mkf-type-display-tracking);
}

/* Breadcrumb DENTRO do cabeçalho — o MudBreadcrumbs traz padding próprio de componente
   autônomo, que aqui só afastaria o breadcrumb do título que ele rotula. */
.mkf-page-head .mkf-breadcrumb {
    padding: 0;
    margin: 0 0 5px;
    font-size: 12px;
}

.mkf-page-head .mkf-breadcrumb .mud-breadcrumb-item,
.mkf-page-head .mkf-breadcrumb .mud-breadcrumb-item a,
.mkf-page-head .mkf-breadcrumb .mud-breadcrumb-separator {
    font-size: 12px;
    color: var(--mkf-text-3);
}

/* O último item é o canal/página atual (disabled no MudBreadcrumbs) — um degrau acima na
   escala de texto, porque é a informação que localiza o operador. */
.mkf-page-head .mkf-breadcrumb .mud-breadcrumb-item .mud-typography.mud-link-underline-none,
.mkf-page-head .mkf-breadcrumb .mud-breadcrumb-item.mud-disabled,
.mkf-page-head .mkf-breadcrumb .mud-breadcrumb-item:last-child {
    color: var(--mkf-text-2);
    font-weight: 500;
}

/* ---- Meta de sincronização (A3) ---- mono, porque é essencialmente um horário (regra do
   Sistema de Design: todo número em mono). Fica em --mkf-text-3 no estado normal e sobe pra
   --mkf-warn quando envelhece ou nunca sincronizou: é INFORMAÇÃO, não alarme — vermelho aqui
   é proibido pelo padrão (reservado a erro de verdade). */
.mkf-page-meta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 3px;
    font-family: var(--mkf-font-mono);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--mkf-text-3);
    white-space: nowrap;
}

.mkf-page-meta--warn {
    color: var(--mkf-warn);
}

.mkf-page-meta--sync {
    color: var(--mkf-text-2);
}

.mkf-page-meta-spinner {
    width: 13px !important;
    height: 13px !important;
    color: var(--mkf-text-2);
}

/* ---- Ações do cabeçalho ---- todas com 34px de altura (mesma altura de controle do
   Sistema de Design), 8px entre elas. */
.mkf-page-acts {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--mkf-space-2);
    margin-bottom: 2px;
}

/* 3 classes pra vencer o `.mud-button-root` do MudBlazor sem depender da ordem dos <link>
   (MudBlazor.min.css vem DEPOIS de app.css em App.razor — empate de especificidade sempre
   perde aqui; é a armadilha já documentada 4x neste projeto). */
.mkf-page-acts .mud-button-root.mud-button,
.mkf-page-acts .mud-menu .mud-button-root {
    height: var(--mkf-control-height);
    min-width: 0;
    padding: 0 14px;
    text-transform: none;
    letter-spacing: normal;
    font-size: 13px;
    font-weight: 500;
}

.mkf-page-acts .mud-button-root.mud-icon-button {
    width: var(--mkf-control-height);
    height: var(--mkf-control-height);
    padding: 0;
    color: var(--mkf-text-2);
}

.mkf-page-acts .mud-button-root.mud-icon-button:hover {
    background-color: var(--mkf-surface-2);
    color: var(--mkf-text);
}

/* Botão primário (Sincronizar) — o ÚNICO da tela. Peso 600 e texto sobre a marca. */
.mkf-page-acts .mud-menu .mud-button-root.mud-button-filled-primary {
    background-color: var(--mkf-brand);
    color: var(--mkf-text-on-brand);
    font-weight: 600;
}

.mkf-page-acts .mud-menu .mud-button-root.mud-button-filled-primary:hover {
    background-color: var(--mkf-brand-hover);
}

/* A seta do dropdown é subordinada ao rótulo, não um segundo ícone de mesmo peso: 11px,
   opacidade 0.75 e colada no texto (o MudButton dá 8px de margem pro ícone final). */
.mkf-page-acts .mud-button-root .mud-button-icon-end {
    margin-left: 1px;
    margin-right: -2px;
    opacity: 0.75;
}

.mkf-page-acts .mud-button-root .mud-button-icon-end .mud-icon-root {
    width: 11px;
    height: 11px;
    font-size: 11px;
}

.mkf-page-acts .mud-button-root .mud-button-icon-start .mud-icon-root {
    width: 15px;
    height: 15px;
    font-size: 15px;
}

/* ================================================================================
   ABA "AJUSTES DE PREÇO" (AtualizacaoValores.razor, 2026-09-08)
   ================================================================================
   Global (não CSS isolado) porque o markup mistura elementos escritos na própria tela com
   componentes filhos (MudAutocomplete/MudTextField/MudButton/MudIcon), e as regras precisam
   alcançar os dois — AtualizacaoValores.razor não tem .razor.css, e ::deep exigiria um. */

/* ---- Cabeçalho da aba (item 1) ---- uma linha curta + o ⓘ que carrega a explicação longa. */
.mkf-ajuste-lead {
    display: flex;
    align-items: flex-start;
    gap: var(--mkf-space-2);
    margin-bottom: var(--mkf-space-4);
}

.mkf-ajuste-lead p {
    margin: 0;
    max-width: 76ch;
    font-size: var(--mkf-type-body-size);
    line-height: 1.55;
    color: var(--mkf-text-2);
}

.mkf-ajuste-info {
    width: 15px !important;
    height: 15px !important;
    font-size: 15px !important;
    color: var(--mkf-text-3);
    display: block;
    margin-top: 2px;
}

.mkf-ajuste-info:hover {
    color: var(--mkf-text-2);
}

/* ---- Linha do formulário (item 2) ----
   flex-start (não flex-end): rótulos e inputs ficam na mesma altura mesmo quando um texto de
   apoio quebra em duas linhas — com flex-end, a linha inteira dançava junto com o apoio mais
   alto. O bloco de resultado e o botão compensam a altura do rótulo com margin-top.
   1180px de teto: em monitor largo, formulário esticado de ponta a ponta vira faixa. */
.mkf-ajuste-form {
    display: flex;
    align-items: flex-start;
    gap: var(--mkf-space-3);
    flex-wrap: wrap;
    max-width: 1180px;
    padding-top: var(--mkf-space-4);
    border-top: 1px solid var(--mkf-line);
    margin-bottom: var(--mkf-space-4);
}

.mkf-f {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

/* O campo de produto absorve a sobra da linha, com teto de 460px. */
.mkf-f--grow {
    flex: 1 1 260px;
    min-width: 230px;
    max-width: 460px;
}

.mkf-f--preco {
    width: 140px;
    flex: none;
}

.mkf-f--pix {
    width: 130px;
    flex: none;
}

.mkf-f > label {
    font-size: 11.5px;
    line-height: 1.25;
    color: var(--mkf-text-2);
}

/* Apoio curto, uma linha, do mesmo tamanho nos três campos — o texto longo virou tooltip. */
.mkf-f > small {
    font-size: 11px;
    line-height: 1.4;
    color: var(--mkf-text-3);
    white-space: nowrap;
}

.mkf-f > small.mkf-f-erro {
    color: var(--mkf-lose);
    white-space: normal;
}

/* ---- Campos: 34px, raio 6px, foco com borda da marca + anel --mkf-brand-soft ----
   O MudAutocomplete/MudTextField outlined+dense não chega nos 34px sozinho; as regras abaixo
   zeram o padding vertical do wrapper e fixam a altura no elemento certo (.mud-input, o que
   desenha a borda). 4 classes pelo mesmo motivo do bloco de abas acima. */
.mkf-ajuste-form .mkf-ajuste-campo.mud-input-control {
    margin: 0;
}

.mkf-ajuste-form .mkf-ajuste-campo .mud-input-control-input-container {
    min-height: 0;
}

.mkf-ajuste-form .mkf-ajuste-campo .mud-input.mud-input-outlined {
    height: var(--mkf-control-height);
    min-height: var(--mkf-control-height);
    background-color: var(--mkf-surface-2);
    border-radius: var(--mkf-radius-control);
}

.mkf-ajuste-form .mkf-ajuste-campo .mud-input.mud-input-outlined > input,
.mkf-ajuste-form .mkf-ajuste-campo .mud-input.mud-input-outlined > .mud-input-slot {
    height: var(--mkf-control-height);
    padding: 0 11px;
    font-size: 13px;
    color: var(--mkf-text);
}

.mkf-ajuste-form .mkf-ajuste-campo .mud-input.mud-input-outlined .mud-input-outlined-border {
    border-color: var(--mkf-line);
    border-width: 1px;
    border-radius: var(--mkf-radius-control);
}

.mkf-ajuste-form .mkf-ajuste-campo .mud-input.mud-input-outlined:focus-within .mud-input-outlined-border {
    border-color: var(--mkf-brand);
    border-width: 1px;
    box-shadow: 0 0 0 3px var(--mkf-brand-soft);
}

/* Todo número em mono tabular, alinhado à direita (--mkf-mono-numeric-*, a fonte canônica). */
.mkf-ajuste-form .mkf-ajuste-campo--num .mud-input.mud-input-outlined > input {
    font-family: var(--mkf-mono-numeric-family);
    font-variant-numeric: var(--mkf-mono-numeric-variant);
    letter-spacing: var(--mkf-mono-numeric-tracking);
    text-align: right;
}

/* Erro de validação (Pix >= 100%) — vermelho só aqui, que é erro de verdade. */
.mkf-ajuste-form .mkf-ajuste-campo--erro .mud-input.mud-input-outlined .mud-input-outlined-border {
    border-color: var(--mkf-lose);
}

.mkf-ajuste-form .mkf-ajuste-campo--erro .mud-input.mud-input-outlined:focus-within .mud-input-outlined-border {
    border-color: var(--mkf-lose);
    box-shadow: 0 0 0 3px var(--mkf-lose-soft);
}

/* ---- Divisor + bloco de resultado (item 3) ----
   O divisor vertical é o que diz "daqui pra direita não é mais entrada, é resposta".
   margin-top nos dois compensa a altura do rótulo dos campos à esquerda (~20px), pra ficarem
   na linha dos inputs e não coladas no topo. */
.mkf-ajuste-divisor {
    width: 1px;
    height: 56px;
    flex: none;
    background-color: var(--mkf-line);
    margin: 20px var(--mkf-space-1) 0;
}

.mkf-ajuste-resultado {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 158px;
    flex: none;
    margin-top: 19px;
}

.mkf-ajuste-resultado-label {
    font-size: var(--mkf-type-header-size);
    font-weight: var(--mkf-type-header-weight);
    letter-spacing: var(--mkf-type-header-tracking);
    text-transform: uppercase;
    color: var(--mkf-text-2);
}

/* Mono 18px — é um valor, e todo número é mono. Sem laranja: a cor da marca é interação,
   nunca significado de dado. */
.mkf-ajuste-resultado-valor {
    font-family: var(--mkf-font-mono);
    font-size: 18px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    line-height: 1.25;
    color: var(--mkf-text);
}

/* Enquanto não dá pra calcular: "—" em cinza fraco, nunca "R$ 0,00" (que afirmaria um preço). */
.mkf-ajuste-resultado-valor--vazio {
    color: var(--mkf-text-3);
}

.mkf-ajuste-resultado-apoio {
    font-size: 11px;
    color: var(--mkf-text-3);
}

/* ---- Salvar (item 4) ---- único primário da aba, na mesma linha do formulário. */
.mkf-ajuste-form .mkf-ajuste-salvar.mud-button-root {
    height: var(--mkf-control-height);
    min-width: 0;
    padding: 0 18px;
    margin-top: 21px;
    flex: none;
    text-transform: none;
    letter-spacing: normal;
    font-size: 13px;
    font-weight: 600;
    border-radius: var(--mkf-radius-control);
}

/* ---- Estado vazio (item 5) ---- a tabela não é renderizada; este bloco toma o lugar dela. */
.mkf-ajuste-vazio {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 40px var(--mkf-space-4);
    text-align: center;
    border-top: 1px solid var(--mkf-line);
}

.mkf-ajuste-vazio .mud-icon-root {
    width: 22px;
    height: 22px;
    font-size: 22px;
    color: var(--mkf-text-3);
}

.mkf-ajuste-vazio b {
    font-size: var(--mkf-type-body-size);
    font-weight: 600;
    color: var(--mkf-text);
}

.mkf-ajuste-vazio p {
    margin: 0;
    max-width: 38ch;
    font-size: 12px;
    line-height: 1.5;
    color: var(--mkf-text-2);
}

/* ---- Tabela da lista (item 7) ----
   Mesma técnica do Monitor de Buy Box: width 100% + table-layout fixed, largura explícita em
   todas as colunas MENOS Produto (que por isso absorve a sobra). min-width = soma das colunas
   com largura própria (824px) + folga pro Produto não ficar espremido. */
.mkf-ajustes-table .mud-table-root {
    width: 100%;
    min-width: 1084px;
    table-layout: fixed;
}

.mkf-ajustes-table .mkf-ajustes-sugerido {
    color: var(--mkf-text);
    font-weight: 500;
}

.mkf-ajustes-table .mkf-ajustes-acoes {
    text-align: right;
    white-space: nowrap;
}

/* Ação destrutiva: cinza em repouso, vermelha só no hover. Vermelho em toda linha, o tempo
   todo, deixaria de significar "cuidado". */
.mkf-ajustes-table .mkf-btn-remover.mud-icon-button {
    color: var(--mkf-text-3);
}

.mkf-ajustes-table .mkf-btn-remover.mud-icon-button:hover {
    background-color: var(--mkf-lose-soft);
    color: var(--mkf-lose);
}

/* ---- Badge de ORIGEM da Tabela de Custos (TabelaCustos.razor / AtualizacaoValores.razor, v2
   2026-09-09) — três cores DISTINTAS, reaproveitando os tokens de categoria que a sidebar já usa
   pra cada integração, pra origem e integração nunca terem cores diferentes na mesma tela:
   Vonder = verde (mesma cor do item "Vonder" no menu), Olist = azul (idem), Manual = slate (o
   neutro, que nenhuma integração usa). Sem `!important` e sem ::deep: são <span> nossos dentro de
   um <td>, não componente do MudBlazor — não há especificidade pra disputar aqui. */
.mkf-origem-badge {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .02em;
    white-space: nowrap;
    background-color: var(--mkf-cat-soft);
}

.mkf-origem-badge--vonder {
    color: var(--mkf-cat-green);
}

.mkf-origem-badge--olist {
    color: var(--mkf-cat-blue);
}

.mkf-origem-badge--manual {
    color: var(--mkf-cat-slate);
}

/* "s/ imp." — o custo desta linha NÃO inclui os impostos de entrada, e a fórmula do PDV usa o
   número como está. Âmbar (aviso), nunca vermelho: não é erro, é uma informação que muda a leitura
   do número ao lado. */
.mkf-sem-imposto-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 0 6px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
    background-color: var(--mkf-cat-soft);
    color: var(--mkf-cat-amber);
    vertical-align: middle;
}

/* Ícones de estado da linha (🔒 travada, ⚠ ausente na origem) — mesma ideia do ponto de estado do
   Buy Box: a coluna existe SEMPRE, o ícone é que aparece ou não (uma coluna que some muda a
   largura de todas as outras a cada filtro). */
.mkf-custos-table .mkf-estado-icons {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    color: var(--mkf-text-3);
}

.mkf-custos-table .mkf-estado-icons .mkf-estado-ausente {
    color: var(--mkf-cat-amber);
}

/* ---- Regra de custo do item (2026-09-14, v2) ---------------------------------------------------------
   Prateleira Vonder (Minha/Estendida), Tabela de Custos e o modal RegraCustoDialog. Substituiu o ⚠ + "Aplicar 100",
   o campo de fator na célula, a prévia de impacto e o painel de regras por unidade (o sistema não sugere mais nada).
   Mockup aprovado: artifact 058899d1. Só tokens --mkf-*; 3+ classes onde o MudBlazor tem regra própria (ele
   carrega DEPOIS do app.css). */

/* Chips UNIDADE e REGRA DE CUSTO. */
.mkf-regra-filtros {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
}

.mkf-regra-filtros .mkf-regra-fgrupo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.mkf-regra-filtros .mkf-regra-flabel {
    margin-right: 2px;
    color: var(--mkf-text-3);
    font-size: var(--mkf-type-label-size);
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.mkf-regra-filtros .mkf-regra-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 26px;
    padding: 0 11px;
    border: 1px solid var(--mkf-line);
    border-radius: 999px;
    background: var(--mkf-surface-2);
    color: var(--mkf-text-2);
    font-family: inherit;
    font-size: 12px;
    cursor: pointer;
}

.mkf-regra-filtros .mkf-regra-chip:hover {
    border-color: var(--mkf-text-3);
    color: var(--mkf-text);
}

.mkf-regra-filtros .mkf-regra-chip[aria-pressed="true"] {
    border-color: var(--mkf-brand);
    background: var(--mkf-brand-soft);
    color: var(--mkf-brand);
    font-weight: 600;
}

.mkf-regra-filtros .mkf-regra-chip:focus-visible {
    outline: 2px solid var(--mkf-brand);
    outline-offset: 2px;
}

.mkf-regra-filtros .mkf-regra-chip .mkf-regra-chip-n {
    opacity: .75;
    font-family: var(--mkf-mono-numeric-family);
    font-size: 11px;
    font-variant-numeric: var(--mkf-mono-numeric-variant);
}

/* Linha inteira clicável (abre o modal). */
.mkf-data-table.mkf-regra-clicavel .mud-table-body tr {
    cursor: pointer;
}

/* Célula FATOR: botão (Tab + Enter abre o mesmo modal da linha). "× 5" em --mkf-brand; "—" apagado. */
.mkf-data-table .mud-table-body .mkf-regra-fator-btn {
    display: inline-block;
    min-width: 44px;
    padding: 2px 6px;
    border: 1px solid transparent;
    border-radius: var(--mkf-radius-control);
    background: transparent;
    font-family: var(--mkf-mono-numeric-family);
    font-size: var(--mkf-mono-numeric-size);
    font-variant-numeric: var(--mkf-mono-numeric-variant);
    text-align: right;
    white-space: nowrap;
    cursor: pointer;
}

.mkf-data-table .mud-table-body .mkf-regra-fator-btn.mkf-regra-fator--set {
    color: var(--mkf-brand);
    font-weight: 600;
}

.mkf-data-table .mud-table-body .mkf-regra-fator-btn.mkf-regra-fator--none {
    color: var(--mkf-text-3);
    font-weight: 400;
}

.mkf-data-table .mud-table-body .mkf-regra-fator-btn:hover {
    border-color: var(--mkf-line);
}

.mkf-data-table .mud-table-body .mkf-regra-fator-btn:focus-visible {
    outline: 2px solid var(--mkf-brand);
    outline-offset: 1px;
}

/* CUSTO UNIT.: negrito quando há regra (o número mudou por decisão sua). */
.mkf-data-table .mud-table-body .mkf-regra-custo--adj {
    color: var(--mkf-text);
    font-weight: 600;
}

.mkf-data-table .mud-table-body .mkf-regra-custo--plain {
    color: var(--mkf-text-2);
}

/* Qtd. Disponível com regra: unidades vendidas em cima, o bruto da Vonder menor embaixo. */
.mkf-data-table .mud-table-body .mkf-regra-qtd {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.15;
}

.mkf-data-table .mud-table-body .mkf-regra-qtd .mkf-regra-qtd-bruta {
    color: var(--mkf-text-3);
    font-size: 11px;
    white-space: nowrap;
}

/* ---- Modal RegraCustoDialog ---- */
.mud-dialog-container .mud-dialog.mkf-regra-dialog {
    max-width: 760px;
    border: 1px solid var(--mkf-line);
    border-radius: var(--mkf-radius-panel);
    background: var(--mkf-surface);
    color: var(--mkf-text);
}

.mud-dialog-container .mud-dialog.mkf-regra-dialog .mud-dialog-content {
    padding: 0;
    margin: 0;
}

.mkf-regra-dialog .mkf-regra-carregando {
    display: grid;
    place-items: center;
    padding: 40px;
}

.mkf-regra-dialog .mkf-regra-erro {
    margin: 0;
    padding: 24px;
    color: var(--mkf-lose);
}

.mkf-regra-dialog .mkf-regra-head {
    padding: 18px 20px 14px;
    border-bottom: 1px solid var(--mkf-line-soft);
}

.mkf-regra-dialog .mkf-regra-eyebrow,
.mkf-regra-dialog .mkf-regra-ptitle,
.mkf-regra-dialog .mkf-regra-resultado-lbl {
    margin: 0;
    color: var(--mkf-text-3);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.mkf-regra-dialog .mkf-regra-titulo {
    margin: 6px 0 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.35;
    text-wrap: balance;
}

.mkf-regra-dialog .mkf-regra-codigo {
    color: var(--mkf-brand);
    font-family: var(--mkf-mono-numeric-family);
    font-size: 13px;
}

.mkf-regra-dialog .mkf-regra-corpo {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.mkf-regra-dialog .mkf-regra-pane {
    min-width: 0;
    padding: 18px 20px;
}

.mkf-regra-dialog .mkf-regra-pane + .mkf-regra-pane {
    border-left: 1px solid var(--mkf-line-soft);
}

.mkf-regra-dialog .mkf-regra-pane > .mkf-regra-ptitle {
    margin-bottom: 12px;
}

.mkf-regra-dialog .mkf-regra-dl {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 9px 12px;
    margin: 0;
    font-size: 13px;
}

.mkf-regra-dialog .mkf-regra-dl dt {
    margin: 0;
    color: var(--mkf-text-2);
}

.mkf-regra-dialog .mkf-regra-dl dd {
    margin: 0;
    text-align: right;
    font-family: var(--mkf-mono-numeric-family);
    font-variant-numeric: var(--mkf-mono-numeric-variant);
    white-space: nowrap;
}

.mkf-regra-dialog .mkf-regra-dl dd.mkf-regra-dd-texto {
    font-family: inherit;
}

.mkf-regra-dialog .mkf-regra-dl .mkf-regra-forte {
    padding-top: 9px;
    border-top: 1px solid var(--mkf-line-soft);
    color: var(--mkf-text);
    font-weight: 600;
}

.mkf-regra-dialog .mkf-regra-seg {
    display: flex;
    gap: 6px;
    margin-bottom: 14px;
}

.mkf-regra-dialog .mkf-regra-seg .mkf-regra-seg-btn {
    flex: 1;
    padding: 9px 6px;
    border: 1px solid var(--mkf-line);
    border-radius: var(--mkf-radius-control);
    background: var(--mkf-surface-2);
    color: var(--mkf-text-2);
    font-family: inherit;
    font-size: 12.5px;
    cursor: pointer;
}

.mkf-regra-dialog .mkf-regra-seg .mkf-regra-seg-btn:hover {
    color: var(--mkf-text);
}

.mkf-regra-dialog .mkf-regra-seg .mkf-regra-seg-btn--on {
    border-color: var(--mkf-brand);
    background: var(--mkf-brand-soft);
    color: var(--mkf-brand);
    font-weight: 600;
}

.mkf-regra-dialog .mkf-regra-seg .mkf-regra-seg-btn:focus-visible,
.mkf-regra-dialog .mkf-regra-foot .mkf-pop-btn:focus-visible {
    outline: 2px solid var(--mkf-brand);
    outline-offset: 2px;
}

.mkf-regra-dialog .mkf-regra-campo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.mkf-regra-dialog .mkf-regra-sinal {
    width: 18px;
    color: var(--mkf-brand);
    font-family: var(--mkf-mono-numeric-family);
    font-size: 20px;
    text-align: center;
}

.mkf-regra-dialog .mkf-regra-sinal.mkf-regra-sinal--oculto {
    visibility: hidden;
}

.mkf-regra-dialog .mkf-regra-input {
    box-sizing: border-box;
    width: 100%;
    height: var(--mkf-control-height);
    padding: 0 11px;
    border: 1px solid var(--mkf-line);
    border-radius: var(--mkf-radius-control);
    background: var(--mkf-surface-2);
    color: var(--mkf-text);
    font-family: var(--mkf-mono-numeric-family);
    font-size: 14px;
    font-variant-numeric: var(--mkf-mono-numeric-variant);
}

.mkf-regra-dialog .mkf-regra-input.mkf-regra-input--texto {
    font-family: inherit;
    font-size: 13px;
}

.mkf-regra-dialog .mkf-regra-input:focus {
    outline: none;
    border-color: var(--mkf-brand);
}

.mkf-regra-dialog .mkf-regra-input:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.mkf-regra-dialog .mkf-regra-input.mkf-regra-input--erro {
    border-color: var(--mkf-lose);
}

.mkf-regra-dialog .mkf-regra-erro-campo {
    margin: 0 0 6px 28px;
    color: var(--mkf-lose);
    font-size: 12px;
}

.mkf-regra-dialog .mkf-regra-hint {
    margin: 0 0 14px;
    color: var(--mkf-text-3);
    font-size: 11.5px;
}

.mkf-regra-dialog .mkf-regra-resultado {
    padding: 13px 14px;
    border: 1px solid var(--mkf-line);
    border-radius: var(--mkf-radius-control);
    background: var(--mkf-surface-2);
}

.mkf-regra-dialog .mkf-regra-resultado .mkf-regra-resultado-val {
    margin-top: 5px;
    font-family: var(--mkf-mono-numeric-family);
    font-size: 24px;
    font-weight: 600;
    font-variant-numeric: var(--mkf-mono-numeric-variant);
    letter-spacing: -.01em;
}

.mkf-regra-dialog .mkf-regra-resultado .mkf-regra-resultado-eq {
    margin-top: 6px;
    color: var(--mkf-text-2);
    font-family: var(--mkf-mono-numeric-family);
    font-size: 12px;
}

.mkf-regra-dialog .mkf-regra-resultado .mkf-regra-resultado-qtd {
    margin-top: 9px;
    padding-top: 9px;
    border-top: 1px solid var(--mkf-line-soft);
    color: var(--mkf-text-3);
    font-size: 12px;
}

.mkf-regra-dialog .mkf-regra-obs-lbl {
    display: block;
    margin: 16px 0 8px;
}

.mkf-regra-dialog .mkf-regra-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
    border-top: 1px solid var(--mkf-line-soft);
    background: var(--mkf-surface-2);
}

.mkf-regra-dialog .mkf-regra-foot p {
    flex: 1;
    min-width: 220px;
    margin: 0;
    color: var(--mkf-text-3);
    font-size: 11.5px;
}

.mkf-regra-dialog .mkf-regra-foot .mkf-regra-acoes {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

/* Limite de envio por item (2026-09-16) - segunda secao do pane da direita do modal "Regra do item". */
.mkf-regra-dialog .mkf-regra-pane .mkf-regra-secao {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--mkf-line-soft);
}

.mkf-regra-dialog .mkf-regra-pane .mkf-regra-secao > .mkf-regra-ptitle {
    margin-bottom: 10px;
}

.mkf-regra-dialog .mkf-regra-pane .mkf-regra-limite-lbl {
    display: block;
    margin-bottom: 6px;
    color: var(--mkf-text-2);
    font-size: 12.5px;
}

.mkf-regra-dialog .mkf-regra-pane .mkf-regra-input--num {
    width: 128px;
    text-align: right;
}

.mkf-regra-dialog .mkf-regra-pane .mkf-regra-erro-campo--num {
    margin-left: 0;
}

.mkf-regra-dialog .mkf-regra-pane .mkf-regra-previa-linha {
    margin-top: 4px;
    font-size: 14px;
    color: var(--mkf-text-1);
}

@media (max-width: 720px) {
    .mkf-regra-dialog .mkf-regra-corpo {
        grid-template-columns: 1fr;
    }

    .mkf-regra-dialog .mkf-regra-pane + .mkf-regra-pane {
        border-left: 0;
        border-top: 1px solid var(--mkf-line-soft);
    }
}

/* Filtro "Compra Vonder" (Components/Shared/CompraVonderFiltro.razor) — largura no <div> nosso. */
.mkf-compra-vonder-filtro {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.mkf-compra-vonder-filtro .mkf-compra-vonder-filtro-campo {
    width: 230px;
}

.mkf-compra-vonder-filtro .mkf-compra-vonder-filtro-contador {
    color: var(--mkf-text-2);
    font-size: var(--mkf-type-label-size);
    font-family: var(--mkf-mono-numeric-family);
    font-variant-numeric: var(--mkf-mono-numeric-variant);
    white-space: nowrap;
}

/* Coluna Unid. ("ct", "pc") — centralizada: 2-3 letras encostadas na borda esquerda de uma coluna
   de 48px ficam soltas (mesma exceção honesta da coluna Tipo do Monitor). */
.mkf-data-table .mud-table-container .mud-table-root th.mkf-col-compra-unid,
.mkf-data-table .mud-table-container .mud-table-body td.mkf-col-compra-unid {
    text-align: center;
}

/* Contadores do cabeçalho da Tabela de Custos — números em mono/tabular, como todo número do app
   (ver --mkf-mono-numeric-*). */
.mkf-custos-contadores {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    align-items: baseline;
}

.mkf-custos-contador {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    font-size: 12px;
    color: var(--mkf-text-2);
}

.mkf-custos-contador strong {
    font-family: var(--mkf-font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 15px;
    color: var(--mkf-text);
}

/* Filtro por origem — é o campo que o usuário pediu pra filtrar, então fica em destaque ACIMA da
   tabela, não escondido num painel "Filtros". */
.mkf-origem-filtro {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.mkf-origem-filtro-btn {
    padding: 4px 12px;
    border: 1px solid var(--mkf-line);
    border-radius: 999px;
    background: var(--mkf-surface-2);
    color: var(--mkf-text-2);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    line-height: 20px;
}

.mkf-origem-filtro-btn:hover {
    border-color: var(--mkf-brand-dim);
}

.mkf-origem-filtro-btn.mkf-origem-filtro-ativo {
    background: var(--mkf-brand-soft);
    border-color: var(--mkf-brand-dim);
    color: var(--mkf-text);
}

.mkf-origem-filtro-btn .mkf-origem-filtro-n {
    font-family: var(--mkf-font-mono);
    font-variant-numeric: tabular-nums;
    color: var(--mkf-text-3);
    margin-left: 6px;
}

.mkf-origem-filtro-btn.mkf-origem-filtro-ativo .mkf-origem-filtro-n {
    color: var(--mkf-brand);
}

/* Fonte do custo Vonder (2026-09-13) — segunda fileira do filtro: Catálogo / Reserva CSV /
   Divergência > X%, com o X num <input> puro ao lado (input dentro de <button> é HTML inválido). */
.mkf-fonte-custo-filtro .mkf-fonte-custo-rotulo {
    font-size: 12px;
    font-weight: 600;
    color: var(--mkf-text-3);
}

.mkf-fonte-custo-filtro .mkf-fonte-custo-x {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--mkf-text-3);
}

.mkf-fonte-custo-filtro .mkf-fonte-custo-x .mkf-fonte-custo-pct {
    width: 44px;
    height: 24px;
    box-sizing: border-box;
    padding: 0 6px;
    border: 1px solid var(--mkf-line);
    border-radius: var(--mkf-radius-control);
    background: var(--mkf-surface);
    color: var(--mkf-text);
    text-align: right;
    font-family: var(--mkf-mono-numeric-family);
    font-size: var(--mkf-mono-numeric-size);
    font-variant-numeric: var(--mkf-mono-numeric-variant);
}

.mkf-custos-table .mkf-estado-icons .mkf-estado-csv {
    color: var(--mkf-warn);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1;
    cursor: help;
}

.mkf-custos-table .mud-table-body td .mkf-custo-csv {
    color: var(--mkf-text-3);
}

/* Resumo da última sincronização da Vonder, logo abaixo dos botões do topo. A lista de códigos
   sobrescritos pode ser longa — rola dentro da própria caixa em vez de empurrar a tabela pra
   baixo. */
.mkf-sync-resumo {
    border: 1px solid var(--mkf-line);
    border-radius: var(--mkf-radius-control);
    background: var(--mkf-surface-2);
    padding: 10px 14px;
    font-size: 12px;
    color: var(--mkf-text-2);
}

.mkf-sync-resumo .mkf-sync-resumo-codigos {
    display: block;
    max-height: 84px;
    overflow-y: auto;
    margin-top: 6px;
    font-family: var(--mkf-font-mono);
    font-size: 11px;
    color: var(--mkf-text-3);
    word-break: break-all;
}

/* ---- Resumo de "pulados" da importação em lote do Olist (ImportarOlistDialog, v3 2026-09-09).
   Cada motivo vira uma linha com a lista de códigos logo abaixo — a lista pode ser longa (numa
   conta cujo Olist quase não tem preco_custo preenchido, "sem custo" é a maioria do lote), então
   rola dentro da própria caixa em vez de esticar o diálogo. */
.mkf-import-pulos {
    margin-top: 6px;
    font-size: 12px;
}

.mkf-import-pulos .mkf-import-pulos-codigos {
    display: block;
    max-height: 60px;
    overflow-y: auto;
    margin-top: 2px;
    font-family: var(--mkf-font-mono);
    font-size: 11px;
    color: var(--mkf-text-3);
    word-break: break-all;
}

/* A tabela do diálogo tem cabeçalho fixo e altura própria (a lista é de 100 por página) — a
   largura mínima é menor que a da Tabela de Custos porque são 6 colunas, não 11. */
.mkf-import-olist-table .mud-table-root {
    width: 100%;
    min-width: 860px;
    table-layout: fixed;
}

/* ---- "Importar do Olist" v4 (2026-09-09): busca-primeiro + seleção que atravessa buscas ----
   O campo de busca aqui NÃO reaproveita .mkf-busca-field: aquele bloco é ancorado em .mkf-toolbar
   (ancestral que só existe nas telas), e dentro do diálogo o seletor simplesmente não casaria.
   3 classes desde o início, pelo motivo de sempre — MudBlazor.min.css vem depois de app.css na
   ordem dos <link>, então empate de especificidade é derrota. */
.mud-dialog .mud-input-control.mkf-import-busca {
    flex: 1 1 320px;
    max-width: 460px;
    width: auto;
}

.mud-dialog .mud-input-control.mkf-import-busca .mud-input-outlined {
    height: var(--mkf-control-height);
    align-items: center;
}

.mud-dialog .mud-input-control.mkf-import-busca .mud-input-slot {
    height: var(--mkf-control-height);
    padding-top: 0;
    padding-bottom: 0;
    font-size: var(--mkf-type-body-size);
}

/* Dica embaixo do campo. Não é decoração: sem ela a pessoa digita meio SKU, não vê nada e conclui
   que a importação está quebrada (o Olist casa nome parcial, mas código só EXATO — medido). */
.mkf-import-dica {
    font-size: var(--mkf-type-label-size);
    color: var(--mkf-text-3);
}

.mkf-import-dica code {
    font-family: var(--mkf-font-mono);
    font-size: 0.95em;
    color: var(--mkf-text-2);
}

/* Barra da seleção — fica acima da tabela e é o único lugar que mostra o total acumulado entre
   buscas diferentes. */
.mkf-import-selbar {
    display: flex;
    align-items: center;
    gap: var(--mkf-space-3);
    min-height: 28px;
    padding: 4px var(--mkf-space-3);
    border: 1px solid var(--mkf-line-soft);
    border-radius: var(--mkf-radius-control);
    background: var(--mkf-surface-2);
    font-size: var(--mkf-type-body-size);
    color: var(--mkf-text-2);
}

.mkf-import-link {
    padding: 0;
    border: 0;
    background: none;
    color: var(--mkf-brand);
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

.mkf-import-link:disabled {
    color: var(--mkf-text-3);
    cursor: default;
}

/* Lista de "ver seleção": código + nome + × por item. Rola dentro da própria caixa — a seleção
   pode ter dezenas de itens juntados em várias buscas e não pode empurrar a tabela pra fora. */
.mkf-import-selecao {
    max-height: 132px;
    overflow-y: auto;
    padding: var(--mkf-space-2);
    border: 1px solid var(--mkf-line-soft);
    border-radius: var(--mkf-radius-panel);
    background: var(--mkf-surface);
}

.mkf-import-selecao-item {
    display: flex;
    align-items: center;
    gap: var(--mkf-space-2);
    padding: 2px 0;
    font-size: var(--mkf-type-cell-size);
}

.mkf-import-selecao-codigo {
    flex: 0 0 150px;
    font-family: var(--mkf-mono-numeric-family);
    font-size: var(--mkf-mono-numeric-size);
    font-variant-numeric: var(--mkf-mono-numeric-variant);
    color: var(--mkf-text-2);
}

.mkf-import-selecao-nome {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--mkf-text-2);
}

.mkf-import-x {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    border: 0;
    border-radius: var(--mkf-radius-control);
    background: none;
    color: var(--mkf-text-3);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}

.mkf-import-x:hover {
    background: var(--mkf-surface-3);
    color: var(--mkf-text);
}

/* Estado inicial (nada buscado ainda) e "nada encontrado" usam a mesma caixa. */
.mkf-import-vazio {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--mkf-space-2);
    min-height: 240px;
    padding: var(--mkf-space-6);
    border: 1px dashed var(--mkf-line-soft);
    border-radius: var(--mkf-radius-panel);
    text-align: center;
}

.mkf-import-vazio .mkf-import-vazio-icone {
    color: var(--mkf-text-3);
}

/* O tooltip precisa de um alvo que RECEBA o ponteiro: o checkbox desabilitado do MudBlazor não
   dispara mouseenter, então quem escuta é este span em volta (achado rodando — sem ele o motivo
   do bloqueio nunca aparecia). */
.mkf-import-check-bloqueado {
    display: inline-flex;
    cursor: not-allowed;
}

/* ---- Marcadores da coluna CUSTO do Monitor de Buy Box (v1.24, 2026-09-09) ----
   Os dois são DISCRETOS de propósito: cor forte nesta tela é reservada ao que exige ação (o
   prejuízo, em --mkf-lose). "Custo manual" e "custo possivelmente desatualizado" são informação
   sobre a PROCEDÊNCIA do número, não alarme — quem quiser o detalhe lê o tooltip da célula. */
.mkf-custo-manual-marca {
    margin-left: 5px;
    font-family: var(--mkf-font-sans);
    font-size: 10px;
    font-weight: 600;
    color: var(--mkf-text-3);
    vertical-align: middle;
}

.mkf-custo-ausente-marca {
    margin-left: 4px;
    font-size: 11px;
    color: var(--mkf-warn);
    vertical-align: middle;
}

/* ---- Memória de cálculo do lucro (modal do anúncio, v1.24) ----
   Duas colunas de números (R$ Atual / R$ p/ Vencer) com os rótulos à esquerda. Grid e não table:
   a "tabela" aqui tem 3 colunas fixas e nenhuma semântica tabular que valha o peso do <table>
   dentro de um diálogo. */
.mkf-lucro-memoria {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 2px var(--mkf-space-4);
    align-items: baseline;
    margin-top: var(--mkf-space-2);
}

/* v1.28 — quatro colunas de preço: Atual · p/ Vencer · p/ Lucrar · Simular. min-content nas
   colunas de valor (e não auto) pra que a régua de "= Lucro" não estique quando um número for
   mais largo que outro. */
.mkf-lucro-memoria--4 {
    grid-template-columns: 1fr repeat(4, minmax(88px, min-content));
    gap: 2px var(--mkf-space-3);
}

/* Em tela estreita a memória rola no próprio container — NUNCA quebra linha dentro de uma
   célula: um número partido em duas linhas deixa de ser conferível, que é a razão de a memória
   existir. */
.mkf-lucro-memoria-scroll {
    overflow-x: auto;
}

.mkf-lucro-memoria-scroll .mkf-lucro-memoria--4 {
    min-width: 560px;
}

.mkf-lucro-memoria-val,
.mkf-lucro-memoria-cab {
    white-space: nowrap;
}

/* Campo da coluna Simular, dentro da linha "Preço" — mesma altura/fonte dos valores ao lado,
   com o R$ como prefixo DENTRO do campo e sem spinner (padrão do Sistema de Design). */
.mkf-lucro-simular-cel {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    justify-content: flex-end;
    border: 1px solid var(--mkf-line);
    border-radius: var(--mkf-radius-control);
    background: var(--mkf-surface);
    padding: 0 6px;
    height: 34px;
}

.mkf-lucro-simular-cel:focus-within {
    border-color: var(--mkf-brand);
}

.mkf-lucro-simular-prefixo {
    font-size: var(--mkf-type-label-size);
    color: var(--mkf-text-3);
}

.mkf-lucro-simular-input {
    width: 72px;
    border: 0;
    outline: none;
    background: transparent;
    text-align: right;
    color: var(--mkf-text);
    font-family: var(--mkf-mono-numeric-family);
    font-size: var(--mkf-mono-numeric-size);
    font-weight: var(--mkf-mono-numeric-weight);
    font-variant-numeric: var(--mkf-mono-numeric-variant);
    letter-spacing: var(--mkf-mono-numeric-tracking);
}

/* ---- Campos editáveis da aba (custo manual e preço) ----
   <input> puro, sem MudBlazor no meio: é o padrão que a tela Precificação já adotou depois de
   a disputa de especificidade com o MudBlazor custar caro oito vezes neste app. Zero ::deep,
   zero !important. */
.mkf-lucro-campo {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 220px;
}

.mkf-lucro-campo-rot {
    font-size: var(--mkf-type-label-size);
    color: var(--mkf-text-2);
}

.mkf-lucro-campo-input {
    height: 34px;
    padding: 0 8px;
    border: 1px solid var(--mkf-line);
    border-radius: var(--mkf-radius-control);
    background: var(--mkf-surface);
    color: var(--mkf-text);
    text-align: right;
    font-family: var(--mkf-mono-numeric-family);
    font-size: var(--mkf-mono-numeric-size);
    font-weight: var(--mkf-mono-numeric-weight);
    font-variant-numeric: var(--mkf-mono-numeric-variant);
    letter-spacing: var(--mkf-mono-numeric-tracking);
}

.mkf-lucro-campo-input:focus {
    outline: none;
    border-color: var(--mkf-brand);
}

.mkf-lucro-campo-apoio {
    font-size: var(--mkf-type-label-size);
    color: var(--mkf-text-3);
}

/* Confirmação de gravação na Shopee dentro do modal Custo & Lucro (2026-09-19) — o mesmo conteúdo do
   popover da célula editável (de → para, pergunta, avisos), só que ancorado no rodapé do diálogo, onde
   não há célula pra ancorar. Reaproveita as classes .mkf-cel-pop-* do texto e dos avisos. */
.mkf-lucro-confirmacao {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 11px 13px;
    background-color: var(--mkf-surface-3);
    border: 1px solid var(--mkf-line);
    border-radius: var(--mkf-radius-panel);
    color: var(--mkf-text);
    font-size: var(--mkf-type-cell-size);
}

/* ---- Tela da matriz de tarifa de envio (v1.32) ----
   30 × 8 células editáveis. Rola no próprio container: quebrar número no meio tornaria a tabela
   de conferência inútil, que é justamente pra que ela existe. */
.mkf-matriz-scroll {
    overflow-x: auto;
    padding: var(--mkf-space-3);
}

.mkf-matriz {
    border-collapse: collapse;
    white-space: nowrap;
}

.mkf-matriz th,
.mkf-matriz td {
    padding: 2px 4px;
    border-bottom: 1px solid var(--mkf-line-soft);
    text-align: right;
}

.mkf-matriz th {
    font-size: var(--mkf-type-header-size);
    font-weight: var(--mkf-type-header-weight);
    letter-spacing: var(--mkf-type-header-tracking);
    text-transform: uppercase;
    color: var(--mkf-text-3);
}

.mkf-matriz-peso {
    text-align: left;
    color: var(--mkf-text-2);
    font-size: var(--mkf-type-label-size);
    position: sticky;
    left: 0;
    background: var(--mkf-surface);
}

.mkf-matriz-faixa {
    display: flex;
    align-items: center;
    gap: 3px;
    justify-content: flex-end;
    text-transform: none;
    letter-spacing: normal;
}

/* Os dois campos da faixa dividem o cabeçalho da coluna — 64px cada cabe "1.199,99" sem cortar. */
.mkf-matriz-faixa .mkf-matriz-input {
    width: 64px;
}

.mkf-matriz-input {
    width: 74px;
    height: 26px;
    padding: 0 5px;
    border: 1px solid transparent;
    border-radius: var(--mkf-radius-control);
    background: transparent;
    color: var(--mkf-text);
    text-align: right;
    font-family: var(--mkf-mono-numeric-family);
    font-size: var(--mkf-mono-numeric-size);
    font-variant-numeric: var(--mkf-mono-numeric-variant);
}

.mkf-matriz-input:hover {
    border-color: var(--mkf-line-soft);
}

.mkf-matriz-input:focus {
    outline: none;
    border-color: var(--mkf-brand);
    background: var(--mkf-surface-2);
}

/* ---- Quadro do degrau de tarifa (v1.32) ----
   Preço · Tarifa · Lucro por faixa, com a seta marcando o melhor. Sem cor: o "←" é o marcador —
   pintar de verde/vermelho aqui competiria com a regra de cor da tabela, onde vermelho já
   significa prejuízo. */
.mkf-degrau {
    border: 1px solid var(--mkf-line-soft);
    border-radius: var(--mkf-radius-control);
    padding: var(--mkf-space-3);
}

.mkf-degrau-cab {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--mkf-space-3);
    margin-bottom: var(--mkf-space-2);
    font-size: var(--mkf-type-label-size);
    color: var(--mkf-text-2);
}

.mkf-degrau-peso {
    color: var(--mkf-text-3);
}

.mkf-degrau-grade {
    display: grid;
    grid-template-columns: repeat(3, minmax(72px, auto)) 1fr;
    gap: 2px var(--mkf-space-3);
    align-items: baseline;
}

.mkf-degrau-marca {
    font-size: var(--mkf-type-label-size);
    color: var(--mkf-text-2);
}

/* Lado direito do cabeçalho da aba: regime de frete + tarifa. */
.mkf-lucro-cabecalho-frete {
    font-size: var(--mkf-type-label-size);
    color: var(--mkf-text-2);
}

.mkf-lucro-memoria-cab {
    font-size: var(--mkf-type-header-size);
    font-weight: var(--mkf-type-header-weight);
    letter-spacing: var(--mkf-type-header-tracking);
    text-transform: uppercase;
    color: var(--mkf-text-3);
    text-align: right;
}

.mkf-lucro-memoria-rot {
    font-size: var(--mkf-type-label-size);
    color: var(--mkf-text-2);
}

.mkf-lucro-memoria-val {
    font-family: var(--mkf-mono-numeric-family);
    font-size: var(--mkf-mono-numeric-size);
    font-weight: var(--mkf-mono-numeric-weight);
    font-variant-numeric: var(--mkf-mono-numeric-variant);
    letter-spacing: var(--mkf-mono-numeric-tracking);
    color: var(--mkf-text);
    text-align: right;
}

.mkf-lucro-memoria-val--neg {
    color: var(--mkf-lose);
}

.mkf-lucro-memoria-val--vazio {
    color: var(--mkf-text-3);
}

/* Linha do resultado: elevada, separada por uma régua — é o número que a pessoa veio ver. */
.mkf-lucro-memoria-linha-total {
    margin-top: var(--mkf-space-2);
    padding-top: var(--mkf-space-2);
    border-top: 1px solid var(--mkf-line-soft);
}

.mkf-lucro-memoria-total-rot {
    font-size: var(--mkf-type-body-size);
    font-weight: 600;
    color: var(--mkf-text);
}

.mkf-lucro-memoria-total-val {
    padding: 2px 6px;
    border-radius: var(--mkf-radius-control);
    background: var(--mkf-surface-2);
}

.mkf-lucro-cabecalho {
    display: flex;
    align-items: center;
    gap: var(--mkf-space-2);
    flex-wrap: wrap;
    font-size: var(--mkf-type-body-size);
    color: var(--mkf-text-2);
}

/* ---- Linha "Preço sugerido pela sua tabela" no modal do anúncio (v1.25, 2026-09-09) ----
   Uma linha, não uma segunda memória de cálculo: a composição do custo já está logo acima, e
   repetir a tabela inteira só pra trocar o número final seria ruído. */
.mkf-lucro-pdv {
    display: flex;
    align-items: baseline;
    gap: var(--mkf-space-2);
    flex-wrap: wrap;
    padding-top: var(--mkf-space-2);
    border-top: 1px solid var(--mkf-line-soft);
    font-size: var(--mkf-type-body-size);
    color: var(--mkf-text-2);
}

.mkf-lucro-pdv .mkf-lucro-pdv-valor {
    font-family: var(--mkf-mono-numeric-family);
    font-size: var(--mkf-mono-numeric-size);
    font-variant-numeric: var(--mkf-mono-numeric-variant);
    letter-spacing: var(--mkf-mono-numeric-tracking);
    color: var(--mkf-text);
}

.mkf-lucro-pdv .mkf-lucro-pdv-nota {
    font-size: var(--mkf-type-label-size);
    color: var(--mkf-text-3);
}

/* ================================================================================
   BLOCO DE CUSTO/LUCRO COMPACTADO — Monitor de Buy Box (v1.26, 2026-09-10)
   ================================================================================
   Motivo, nas palavras do usuário: "o layout estava perfeito. Mas inseri os custos precos e
   ficou confuso". Seis colunas novas entraram de uma vez e a tabela passou a exigir rolagem
   horizontal pra chegar no que interessa. Três respostas: lucro e margem na MESMA célula, tipo
   virou badge de uma letra, e Ações foi pro fim, fixa. */

/* ---- Lucro + margem na mesma célula ----
   Duas linhas, alinhadas à direita. A altura da LINHA continua 40px: 13px + 11px com
   line-height 1.15 dão ~28px, que cabem no --mkf-row-height sem esticar nada. Se um dia não
   couber, mexer aqui (line-height/padding), NUNCA na altura da linha. */
/* ---- Célula de Lucro (v1.28) ----
   Só o R$, alinhado à direita como as demais colunas numéricas. A linha de margem que a v1.26
   empilhava aqui saiu: a célula virou o gatilho do modal, e um alvo de clique com dois números
   convida a clicar "no percentual" esperando outra coisa. */
.mkf-lucro-cel-rs {
    font-family: var(--mkf-mono-numeric-family);
    font-size: var(--mkf-mono-numeric-size);
    font-weight: 450;
    font-variant-numeric: var(--mkf-mono-numeric-variant);
    letter-spacing: var(--mkf-mono-numeric-tracking);
    color: var(--mkf-text);
}

/* Prejuízo é o único estado que exige ação — é o que a regra de cor do Sistema de Design
   reserva. Positivo não ganha verde. */
.mkf-lucro-cel-rs.mkf-lucro-cel--neg {
    color: var(--mkf-lose);
}

/* Gatilho do modal: a célula INTEIRA é clicável (inclusive no "—", que é onde o operador mais
   precisa abrir pra cadastrar o custo). Sublinhado pontilhado só no hover, em --mkf-text-3 —
   nenhuma cor nova entra na tabela por causa disso. */
.mkf-lucro-gatilho {
    display: block;
    width: 100%;
    text-align: right;
    cursor: pointer;
}

.mkf-lucro-gatilho:hover {
    text-decoration: underline dotted var(--mkf-text-3);
    text-underline-offset: 3px;
}

/* ---- Badge do tipo do anúncio (C / P / ?) ----
   Neutro: superfície + linha, sem cor semântica. Clássico x Premium é estrutura do anúncio,
   não ganhar/perder. */
.mkf-data-table .mkf-col-tipo {
    text-align: center;
}

.mkf-tipo-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: 1px solid var(--mkf-line);
    border-radius: 4px;
    background-color: var(--mkf-surface-3);
    font-family: var(--mkf-font-mono);
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1;
    color: var(--mkf-text-2);
    cursor: default;
}

/* ---- Ações fixa à direita ----
   A coluna fixa PRECISA de fundo opaco próprio: sem isso os números das colunas que rolam
   passam por baixo dos ícones. E o fundo tem que repetir a zebra da linha, senão a coluna fixa
   vira uma faixa lisa no meio de uma tabela listrada.

   Especificidade: a zebra geral é `.mkf-data-table .mud-table-row:nth-of-type(even) td`
   (2 classes + pseudo + elemento). Uma regra com `td.mkf-col-acoes` EMPATA com ela e ganharia
   só por vir depois — o que apagaria a zebra nas linhas pares. Por isso cada estado tem a sua
   regra explícita, com uma classe a mais, e o hover vem por último (mesmo padrão da zebra
   original, que resolve hover x zebra por ordem entre iguais). */
.mkf-data-table .mud-table-row td.mkf-col-acoes {
    position: sticky;
    right: 0;
    z-index: var(--mkf-z-tabela-corpo-fixo);
    background-color: var(--mkf-surface);
    border-left: 1px solid var(--mkf-line);
}

.mkf-data-table .mud-table-row:nth-of-type(even) td.mkf-col-acoes {
    background-color: var(--mkf-row-alt);
}

.mkf-data-table .mud-table-row:hover td.mkf-col-acoes {
    background-color: var(--mkf-surface-2);
}

.mkf-data-table .mud-table-row.mkf-row-perdendo td.mkf-col-acoes,
.mkf-data-table .mud-table-row.mkf-row-perdendo:nth-of-type(even) td.mkf-col-acoes {
    background-color: var(--mkf-lose-row);
}

.mkf-data-table .mud-table-row.mkf-row-perdendo:hover td.mkf-col-acoes {
    background-color: var(--mkf-lose-row-hover);
}

/* Cabeçalho da coluna fixa: mesmo right:0, z-index acima do corpo fixo E do resto do thead.
   Seis classes porque a regra de fundo do thead (logo acima, "mais azul") já usa cinco pra
   ganhar do MudBlazor — empatar aqui deixaria o cabeçalho de Ações transparente ao rolar. */
.mkf-data-table .mud-table-container .mud-table-root .mud-table-head .mud-table-cell.mkf-col-acoes {
    position: sticky;
    right: 0;
    z-index: var(--mkf-z-tabela-canto);
    background-color: var(--mkf-thead-bg);
    border-left: 1px solid var(--mkf-line);
}

/* Origem da tarifa, abaixo da memória de cálculo do modal (v1.27) — texto de apoio: o número
   já está na linha "(−) Tarifa do anúncio"; aqui só se ele veio do anúncio ou da reserva do canal. */
.mkf-lucro-tarifa-origem {
    margin-top: var(--mkf-space-1);
    font-size: var(--mkf-type-label-size);
    color: var(--mkf-text-3);
}

/* Nota de apoio sob um rótulo da tabela de canais da Precificação (v1.27). */
.mkf-preco-label-col .mkf-preco-label-nota {
    display: block;
    /* max-width + normal: a coluna de rótulos tem 214px fixos e é STICKY; sem isto o texto saía
       numa linha só e passava POR BAIXO dos campos das colunas de canal (a célula fixa tem fundo
       próprio, então o vazamento aparecia por cima da tabela rolando). 190px = 214 − 24 de
       padding. A linha da Taxa fixa fica mais alta, e é o preço honesto de ter a explicação
       visível: é ela que evita o usuário copiar de novo a tarifa do anúncio pra cá. */
    max-width: 190px;
    white-space: normal;
    margin-top: 2px;
    font-size: var(--mkf-type-label-size);
    font-weight: 400;
    line-height: 1.25;
    color: var(--mkf-text-3);
}

/* ================================================================================
   BUY BOX AUTOMÁTICO (v1.34, 2026-09-10)
   ================================================================================
   Coluna "Auto" do Monitor, popover de inclusão em lote, card de configuração, bloco do modal
   e página de histórico. Só tokens --mkf-* (zero hex); cor só em Erro (--mkf-lose); nunca
   verde — "está no automático" é estado, não conquista. Tudo markup próprio (sem componente
   MudBlazor dentro), e as regras que moram DENTRO da tabela do MudBlazor usam 3 classes desde o
   começo: a lib carrega depois do app.css e ganha qualquer empate por ordem. */

/* ---- Coluna Auto (a célula inteira é o botão de incluir/remover) ---- */
.mkf-data-table .mud-table-cell.mkf-col-auto {
    text-align: center;
    padding-left: 0;
    padding-right: 0;
}

.mkf-data-table .mkf-col-auto .mkf-auto-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: var(--mkf-radius-control);
    background: none;
    cursor: pointer;
}

.mkf-data-table .mkf-col-auto .mkf-auto-toggle:hover {
    background-color: var(--mkf-surface-3);
}

.mkf-data-table .mkf-col-auto .mkf-auto-toggle:disabled {
    cursor: progress;
}

/* Não incluído = anel vazio SEMPRE visível (v1.35). Até a v1.34 o anel só aparecia no hover e a
   célula vazia não dizia que era clicável — o usuário não achou como incluir um anúncio só. O
   anel é discreto (--mkf-line) e escurece no hover; incluído continua o ponto cheio. */
.mkf-auto-toggle .mkf-auto-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 1px solid var(--mkf-line);
}

.mkf-auto-toggle:hover .mkf-auto-dot {
    border-color: var(--mkf-text-3);
}

.mkf-auto-toggle .mkf-auto-dot.mkf-auto-dot--on {
    background-color: var(--mkf-text-3);
    border-color: var(--mkf-text-3);
}

.mkf-auto-toggle .mkf-auto-dot.mkf-auto-dot--erro {
    background-color: var(--mkf-lose);
    border-color: var(--mkf-lose);
}

.mkf-link-btn {
    padding: 0;
    border: 0;
    background: none;
    color: var(--mkf-text-2);
    font: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.mkf-link-btn:hover {
    color: var(--mkf-text);
}

.mkf-link-btn:disabled {
    cursor: progress;
    opacity: 0.6;
}

/* ---- R$ p/ Lucrar elevado ao piso de frete grátis (v1.36) — continua sem cor (valor de
   referência); só o sublinhado pontilhado diz que o número tem explicação no tooltip. ---- */
.mkf-data-table .mud-table-cell .mkf-pdv-piso,
.mkf-lucro-memoria .mkf-lucro-memoria-val.mkf-pdv-piso {
    text-decoration: underline dotted var(--mkf-text-3);
    text-underline-offset: 3px;
    cursor: help;
}

/* ---- Faixa de ações dos selecionados (v1.35) — dentro da barra, entre a busca e os chips ---- */
.mkf-toolbar .mkf-sel-faixa {
    display: inline-flex;
    align-items: center;
    flex: none;
    gap: 6px;
    height: var(--mkf-control-height);
    padding: 0 11px;
    border: 1px solid var(--mkf-line);
    border-radius: var(--mkf-radius-control);
    background-color: var(--mkf-surface-2);
    color: var(--mkf-text-2);
    font-size: 13px;
    white-space: nowrap;
}

.mkf-toolbar .mkf-sel-faixa .mkf-sel-faixa-n {
    font-family: var(--mkf-font-mono);
    font-weight: 600;
    color: var(--mkf-text);
}

.mkf-toolbar .mkf-sel-faixa .mkf-sel-faixa-sep {
    color: var(--mkf-text-3);
}

.mkf-toolbar .mkf-sel-faixa .mkf-link-btn {
    font-size: 13px;
}

/* ---- Faixa "selecionar todos do filtro" (2026-09-17) — entre a barra e o <thead> ----
   Altura de UMA linha da tabela (--mkf-row-height, a mesma custom property que a densidade
   escolhida no painel de Colunas escreve no wrapper logo abaixo), pra a faixa ler como uma
   linha a mais e não como um bloco novo empurrando a tabela. Fundo --mkf-surface-2 e texto
   --mkf-text-2: é um convite, não um alerta — nada de cor semântica aqui.
   Nenhuma regra desta seção toca em width de coluna nem em height de linha da tabela. */
.mkf-sel-todos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-sizing: border-box;
    width: 100%;
    min-height: var(--mkf-row-height, 34px);
    margin-top: 8px;
    padding: 4px 12px;
    border: 1px solid var(--mkf-line-soft);
    border-radius: var(--mkf-radius-control);
    background-color: var(--mkf-surface-2);
    color: var(--mkf-text-2);
    font-size: 13px;
    text-align: center;
}

/* Com o filtro INTEIRO selecionado, a faixa precisa ser vista de longe: quem está olhando uma
   página de 50 linhas tem que perceber que a próxima ação vale por 718. --mkf-brand é o token
   de destaque desta tela (marca/interação); nunca --mkf-win, que significaria "deu certo". */
.mkf-sel-todos.mkf-sel-todos--tudo {
    border-bottom: 2px solid var(--mkf-brand);
    color: var(--mkf-text);
}

.mkf-sel-todos .mkf-sel-todos-txt {
    color: inherit;
}

.mkf-sel-todos .mkf-link-btn {
    font-size: 13px;
    color: var(--mkf-brand);
}

.mkf-sel-todos .mkf-link-btn:hover {
    color: var(--mkf-brand-hover);
}

/* Ação de escrita no ML fora do alcance do modo "todos do filtro": apagada e com o motivo no
   title, não escondida (o tooltip é o que ensina o limite das 50 por vez). Classe própria e
   não :disabled genérico — desabilitado por ESTAR RODANDO continua com cursor:progress, que é
   outra coisa (passa sozinho) e não pode virar "não dá, e pronto". */
.mkf-toolbar .mkf-sel-faixa .mkf-link-btn.mkf-link-btn--bloqueado:disabled {
    color: var(--mkf-text-3);
    cursor: not-allowed;
    opacity: 1;
}

/* Dica no topo do popover "Automático": aponta pros caminhos de 1 ou poucos anúncios. */
.mkf-pop--auto .mkf-pop-body .mkf-pop-dica {
    display: block;
    padding: 4px 8px 6px;
    font-size: var(--mkf-type-label-size);
    line-height: 1.35;
    color: var(--mkf-text-3);
}

/* ---- Popover "Automático" da barra (ações em lote) ---- */
/* 340 e não 300: v1.35 — "Incluir o filtro inteiro, todas as páginas (N)" em 12,5px. */
.mkf-toolbar-actions .mkf-pop-anchor .mkf-pop.mkf-pop--auto {
    width: 340px;
}

.mkf-pop--auto .mkf-pop-body {
    padding: 6px;
    gap: 2px;
}

/* 2026-09-19 — Anúncios Shopee: o filtro "Precificação automática" mora no próprio popover. */
.mkf-pop--auto .mkf-pop-body .mkf-shopee-auto-select {
    width: 100%;
    margin: 0 0 4px;
}

.mkf-pop--auto .mkf-pop-acao {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    height: 32px;
    padding: 0 10px;
    border: 0;
    border-radius: var(--mkf-radius-control);
    background: none;
    color: var(--mkf-text);
    font-family: inherit;
    font-size: 12.5px;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.mkf-pop--auto .mkf-pop-acao:hover {
    background-color: var(--mkf-surface-2);
}

.mkf-pop--auto .mkf-pop-acao-n {
    margin-left: auto;
    font-family: var(--mkf-mono-numeric-family);
    font-variant-numeric: var(--mkf-mono-numeric-variant);
    font-weight: 600;
    color: var(--mkf-text-2);
}

.mkf-pop--auto .mkf-pop-acao--link {
    color: var(--mkf-text-2);
    border-top: 1px solid var(--mkf-line);
    border-radius: 0;
    margin-top: 4px;
}

/* ---- Card de configuração, bloco do modal e histórico ---- */
.mkf-bba-card {
    max-width: 760px;
    margin-top: var(--mkf-space-4);
    background-color: var(--mkf-surface);
    border: 1px solid var(--mkf-line);
    border-radius: var(--mkf-radius-panel);
}

.mkf-bba-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px var(--mkf-space-4);
    border-bottom: 1px solid var(--mkf-line);
}

.mkf-bba-card-title {
    font-size: var(--mkf-type-section-size);
    font-weight: var(--mkf-type-section-weight);
    color: var(--mkf-text);
}

.mkf-bba-card-body {
    display: flex;
    flex-direction: column;
    gap: var(--mkf-space-4);
    padding: var(--mkf-space-4);
}

.mkf-bba-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--mkf-space-3) var(--mkf-space-4);
}

.mkf-bba-f {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 170px;
}

.mkf-bba-f > label,
.mkf-bba-label {
    font-size: 11.5px;
    line-height: 1.25;
    color: var(--mkf-text-2);
}

.mkf-bba-f > small,
.mkf-bba-apoio {
    font-size: 11px;
    line-height: 1.4;
    color: var(--mkf-text-3);
}

.mkf-bba-f.mkf-bba-f--erro > small {
    color: var(--mkf-lose);
}

.mkf-bba-wrap {
    position: relative;
    display: block;
}

/* Mesma receita dos campos da Precificação: <input type="text" inputmode="decimal"> (sem
   spinner por construção), 34px, mono tabular à direita, foco na cor da marca. */
.mkf-bba-input {
    height: var(--mkf-control-height);
    width: 100%;
    padding: 0 11px;
    border: 1px solid var(--mkf-line);
    border-radius: var(--mkf-radius-control);
    background-color: var(--mkf-surface-2);
    color: var(--mkf-text);
    font-family: var(--mkf-mono-numeric-family);
    font-size: 13px;
    font-variant-numeric: var(--mkf-mono-numeric-variant);
    letter-spacing: var(--mkf-mono-numeric-tracking);
    text-align: right;
}

.mkf-bba-input::placeholder {
    color: var(--mkf-text-3);
    font-family: var(--mkf-font-sans);
    font-size: 11.5px;
    letter-spacing: normal;
}

.mkf-bba-input:hover {
    border-color: var(--mkf-surface-3);
}

.mkf-bba-input:focus {
    outline: none;
    border-color: var(--mkf-brand);
    box-shadow: 0 0 0 3px var(--mkf-brand-soft);
}

.mkf-bba-input:disabled {
    opacity: 0.6;
}

.mkf-bba-f.mkf-bba-f--erro .mkf-bba-input {
    border-color: var(--mkf-lose);
}

.mkf-bba-input.mkf-bba-input--pre {
    padding-left: 30px;
}

.mkf-bba-input.mkf-bba-input--suf {
    padding-right: 28px;
}

.mkf-bba-unit {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--mkf-mono-numeric-family);
    font-size: 11.5px;
    color: var(--mkf-text-3);
    pointer-events: none;
}

.mkf-bba-unit--left {
    left: 10px;
}

.mkf-bba-unit--right {
    right: 10px;
}

/* Switch — o mesmo desenho de 28x16 do "Fixar menu" (mkf-pin-switch), aqui com rótulo ao lado. */
.mkf-bba-switch {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 9px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--mkf-text);
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
}

.mkf-bba-switch:disabled {
    cursor: default;
    opacity: 0.6;
}

.mkf-bba-track {
    position: relative;
    width: 28px;
    height: 16px;
    flex: none;
    border-radius: 999px;
    background-color: var(--mkf-surface-3);
    border: 1px solid var(--mkf-line);
    transition: background-color 0.12s ease;
}

.mkf-bba-track::after {
    content: "";
    position: absolute;
    top: 1px;
    left: 1px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--mkf-text-3);
    transition: transform 0.12s ease, background-color 0.12s ease;
}

.mkf-bba-switch.mkf-bba-switch--on .mkf-bba-track {
    background-color: var(--mkf-brand);
    border-color: var(--mkf-brand);
}

.mkf-bba-switch.mkf-bba-switch--on .mkf-bba-track::after {
    transform: translateX(12px);
    background-color: var(--mkf-text-on-brand);
}

.mkf-bba-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--mkf-space-2) var(--mkf-space-4);
    padding: 12px var(--mkf-space-4);
    border-top: 1px solid var(--mkf-line);
}

.mkf-bba-status {
    font-size: var(--mkf-type-label-size);
    color: var(--mkf-text-2);
    font-variant-numeric: var(--mkf-mono-numeric-variant);
}

/* v1.35 — só o ciclo INTERROMPIDO pinta o status (pedido do usuário). */
.mkf-bba-foot .mkf-bba-status.mkf-bba-status--erro {
    color: var(--mkf-lose);
}

.mkf-bba-links {
    display: flex;
    gap: var(--mkf-space-4);
    margin-left: auto;
    font-size: var(--mkf-type-label-size);
}

.mkf-bba-links a {
    color: var(--mkf-text-2);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.mkf-bba-links a:hover {
    color: var(--mkf-text);
}

.mkf-bba-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: var(--mkf-control-height);
    padding: 0 13px;
    border: 1px solid var(--mkf-line);
    border-radius: var(--mkf-radius-pill);
    background-color: var(--mkf-surface-2);
    color: var(--mkf-text);
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
}

.mkf-bba-btn:hover:not(:disabled) {
    background-color: var(--mkf-surface-3);
}

.mkf-bba-btn:disabled {
    opacity: 0.55;
    cursor: default;
}

.mkf-bba-btn.mkf-bba-btn--primary {
    background-color: var(--mkf-brand);
    border-color: var(--mkf-brand);
    color: var(--mkf-text-on-brand);
    font-weight: 600;
}

.mkf-bba-btn.mkf-bba-btn--primary:hover:not(:disabled) {
    background-color: var(--mkf-brand-hover);
}

/* ---- Tabela compacta (últimas decisões no modal) e tabela do histórico ---- */
.mkf-bba-tabela-wrap {
    overflow-x: auto;
}

.mkf-bba-tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--mkf-type-cell-size);
}

.mkf-bba-tabela th {
    height: var(--mkf-thead-height);
    padding: 0 8px;
    border-bottom: 1px solid var(--mkf-line);
    background-color: var(--mkf-surface-2);
    color: var(--mkf-text-2);
    font-size: var(--mkf-type-header-size);
    font-weight: var(--mkf-type-header-weight);
    letter-spacing: var(--mkf-type-header-tracking);
    text-transform: uppercase;
    text-align: left;
    white-space: nowrap;
}

.mkf-bba-tabela th.mkf-bba-num,
.mkf-bba-tabela td.mkf-bba-num {
    text-align: right;
}

.mkf-bba-tabela td {
    height: var(--mkf-row-height);
    padding: 0 8px;
    border-bottom: 1px solid var(--mkf-line-soft);
    color: var(--mkf-text);
    vertical-align: middle;
}

.mkf-bba-tabela tbody tr:nth-of-type(even) td {
    background-color: var(--mkf-row-alt);
}

.mkf-bba-mono {
    font-family: var(--mkf-mono-numeric-family);
    font-variant-numeric: var(--mkf-mono-numeric-variant);
    letter-spacing: var(--mkf-mono-numeric-tracking);
    white-space: nowrap;
}

.mkf-bba-fraco {
    color: var(--mkf-text-3);
}

/* Rótulo de ação numa linha só — "Não vence com a margem" quebrava em três e cada linha da
   tabela saía com uma altura (medido no primeiro print do histórico). */
.mkf-bba-tabela td.mkf-bba-nowrap {
    white-space: nowrap;
}

.mkf-bba-tabela td.mkf-bba-erro,
.mkf-bba-erro {
    color: var(--mkf-lose);
}

/* Linha da mensagem da API sob uma linha de Erro (modal): ocupa as 5 colunas; max-width:0 no td
   deixa o ellipsis funcionar sem a célula alargar a tabela. */
.mkf-bba-tabela td.mkf-bba-erro-linha {
    max-width: 0;
}

.mkf-bba-tabela td.mkf-bba-erro-linha .mkf-bba-trunc {
    max-width: none;
}

.mkf-bba-trunc {
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mkf-bba-th-sort {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    cursor: pointer;
}

/* ---- Bloco do modal ---- */
.mkf-bba-bloco {
    margin-top: var(--mkf-space-4);
    padding-top: var(--mkf-space-4);
    border-top: 1px solid var(--mkf-line);
    display: flex;
    flex-direction: column;
    gap: var(--mkf-space-3);
}

.mkf-bba-bloco-title {
    font-size: var(--mkf-type-header-size);
    font-weight: var(--mkf-type-header-weight);
    letter-spacing: var(--mkf-type-header-tracking);
    text-transform: uppercase;
    color: var(--mkf-text-2);
}

.mkf-bba-linha {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--mkf-space-2) var(--mkf-space-4);
    font-size: var(--mkf-type-body-size);
    color: var(--mkf-text-2);
}

/* ---- Página de histórico: filtros ---- */
.mkf-bba-filtros {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--mkf-space-3);
    margin-bottom: var(--mkf-space-3);
}

.mkf-bba-select,
.mkf-bba-busca,
.mkf-bba-data {
    height: var(--mkf-control-height);
    padding: 0 10px;
    border: 1px solid var(--mkf-line);
    border-radius: var(--mkf-radius-control);
    background-color: var(--mkf-surface-2);
    color: var(--mkf-text);
    font-family: inherit;
    font-size: 13px;
}

.mkf-bba-busca {
    width: 260px;
    max-width: 100%;
}

.mkf-bba-select:focus,
.mkf-bba-busca:focus,
.mkf-bba-data:focus {
    outline: none;
    border-color: var(--mkf-brand);
    box-shadow: 0 0 0 3px var(--mkf-brand-soft);
}

.mkf-bba-pagina {
    background-color: var(--mkf-surface);
    border: 1px solid var(--mkf-line);
    border-radius: var(--mkf-radius-panel);
    overflow: hidden;
}

.mkf-bba-vazio {
    padding: var(--mkf-space-8) var(--mkf-space-4);
    text-align: center;
    color: var(--mkf-text-2);
}

/* ================================================================================
   PRECIFICAÇÃO AUTOMÁTICA (v1.37) — página própria do robô de preço
   ================================================================================
   Reaproveita os cards/campos .mkf-bba-* (mesma receita: <input> puro 34px mono, switch com
   rótulo à direita). O que é novo aqui é só a ARRUMAÇÃO: subtítulo do cabeçalho, apoio no
   cabeçalho do card, linhas de regra com contador e o Salvar único no fim. Só tokens. */

.mkf-page-head .mkf-page-sub {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--mkf-text-2);
}

/* Cards um embaixo do outro, mais largos que o card antigo (três linhas de controles). */
.mkf-pa-card.mkf-bba-card {
    max-width: 880px;
}

.mkf-pa-abas .mud-tabs-panels .mkf-pa-card.mkf-bba-card:first-child {
    margin-top: var(--mkf-space-2);
}

/* Cabeçalho com título + apoio (o card antigo tinha só o título). */
.mkf-pa-card .mkf-bba-card-head.mkf-pa-card-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
}

/* Uma regra por linha: [switch + apoio] · [campo] · contador encostado à direita. */
.mkf-pa-card .mkf-bba-card-body .mkf-pa-regra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--mkf-space-3) var(--mkf-space-4);
    padding-bottom: var(--mkf-space-3);
    border-bottom: 1px solid var(--mkf-line-soft);
}

.mkf-pa-card .mkf-bba-card-body .mkf-pa-regra:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.mkf-pa-regra .mkf-pa-regra-id {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 300px;
    max-width: 100%;
}

.mkf-pa-regra .mkf-bba-f {
    width: 150px;
}

/* 2026-09-13 — nome da regra como título da linha (peso normal); o switch embaixo só estende a regra. */
.mkf-pa-regra .mkf-pa-regra-id .mkf-pa-regra-nome {
    font-size: 14px;
    font-weight: 400;
    color: var(--mkf-text);
}

/* Contador "N anúncios abaixo hoje": informação, não alarme — cor de texto secundário, mono no
   número (vem junto no texto), sublinhado só por ser link pro Monitor já filtrado. */
.mkf-pa-regra .mkf-pa-contador {
    margin-left: auto;
    font-size: var(--mkf-type-label-size);
    font-variant-numeric: var(--mkf-mono-numeric-variant);
    color: var(--mkf-text-3);
    white-space: nowrap;
}

.mkf-pa-regra .mkf-pa-contador a,
.mkf-pa-card .mkf-pa-status-linha a {
    color: var(--mkf-text-2);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.mkf-pa-regra .mkf-pa-contador a:hover,
.mkf-pa-card .mkf-pa-status-linha a:hover {
    color: var(--mkf-text);
}

.mkf-pa-card .mkf-pa-status-linha {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--mkf-space-2) var(--mkf-space-4);
    padding-top: var(--mkf-space-3);
    border-top: 1px solid var(--mkf-line-soft);
    font-size: 13px;
}

.mkf-pa-card .mkf-pa-status-linha b {
    font-weight: 600;
    font-variant-numeric: var(--mkf-mono-numeric-variant);
}

/* v1.44 — subseção "Sem concorrência" do card Buy Box Automático: mesma divisória da linha de
   status, título no estilo de cabeçalho de tabela (caixa alta, text-2). */
.mkf-pa-card .mkf-pa-subsecao {
    display: flex;
    flex-direction: column;
    gap: var(--mkf-space-3);
    padding-top: var(--mkf-space-3);
    border-top: 1px solid var(--mkf-line-soft);
}

.mkf-pa-card .mkf-pa-subsecao-titulo {
    font-size: var(--mkf-type-header-size);
    font-weight: var(--mkf-type-header-weight);
    letter-spacing: var(--mkf-type-header-tracking);
    text-transform: uppercase;
    color: var(--mkf-text-2);
}

/* O apoio da margem alvo fica AO LADO do campo (e não embaixo, como nos outros): é uma frase
   longa, e embaixo de um campo de 170px viraria quatro linhas. */
.mkf-pa-card .mkf-pa-subsecao-apoio {
    align-self: center;
    max-width: 44ch;
}

.mkf-pa-card .mkf-pa-contadores-sc {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--mkf-space-2);
    font-size: 13px;
    font-variant-numeric: var(--mkf-mono-numeric-variant);
    color: var(--mkf-text-3);
}

.mkf-pa-card .mkf-pa-contadores-sc a {
    color: var(--mkf-text-2);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.mkf-pa-card .mkf-pa-contadores-sc a:hover {
    color: var(--mkf-text);
}

/* v1.48 — chave "Descer até o piso" do card Buy Box Automático: [switch + apoio] · contador à direita. */
.mkf-pa-card .mkf-bba-card-body .mkf-pa-chave-linha {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--mkf-space-2) var(--mkf-space-4);
}

.mkf-pa-card .mkf-pa-chave-linha .mkf-pa-chave-id {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.mkf-pa-card .mkf-pa-chave-linha .mkf-pa-contador {
    margin-left: auto;
    font-size: var(--mkf-type-label-size);
    font-variant-numeric: var(--mkf-mono-numeric-variant);
    color: var(--mkf-text-2);
    white-space: nowrap;
}

/* 2026-09-24 — card Margens da Precificação Automática Shopee: aviso "só sobe" (as linhas de regra estão em .mkf-spa-*). */
.mkf-pa-card .mkf-bba-card-body .mkf-pa-so-sobe {
    padding: var(--mkf-space-2) var(--mkf-space-3);
    border-left: 3px solid var(--mkf-brand);
    border-radius: var(--mkf-radius-control);
    background-color: var(--mkf-brand-soft);
    color: var(--mkf-text);
    font-size: 13px;
    font-weight: 600;
}














/* 2026-09-24 — card Margens da Shopee simplificado: Margens · Aplicar em · Regras (3 linhas iguais em grade:
   [chave + descrição] · [Sobe até] · contador à direita; aviso inline ocupa a linha de baixo). */
.mkf-pa-card.mkf-spa-card .mkf-bba-card-head {
    align-items: center;
}

.mkf-pa-card .mkf-spa-ajuda {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    margin-left: 4px;
    border: 1px solid var(--mkf-line);
    border-radius: 50%;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    color: var(--mkf-text-3);
    vertical-align: 1px;
    cursor: help;
}

.mkf-pa-card .mkf-spa-ajuda:hover,
.mkf-pa-card .mkf-spa-ajuda:focus-visible {
    border-color: var(--mkf-text-2);
    color: var(--mkf-text);
    outline: none;
}

.mkf-pa-card.mkf-spa-card .mkf-spa-avancado {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--mkf-space-2) var(--mkf-space-3);
    margin-top: calc(-1 * var(--mkf-space-2));
}

.mkf-pa-card.mkf-spa-card .mkf-spa-avancado .mkf-spa-avancado-btn {
    font-size: 13px;
    font-weight: 500;
}

.mkf-pa-card.mkf-spa-card .mkf-bba-row.mkf-spa-avancado-corpo {
    padding: var(--mkf-space-3);
    border: 1px dashed var(--mkf-line);
    border-radius: var(--mkf-radius-control);
}

.mkf-pa-card.mkf-spa-card .mkf-spa-avancado-corpo .mkf-spa-lucro-desejado {
    align-self: flex-start;
    font-size: 12px;
}

.mkf-pa-card.mkf-spa-card .mkf-spa-escopo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--mkf-space-2) var(--mkf-space-3);
    padding-top: var(--mkf-space-3);
    border-top: 1px solid var(--mkf-line-soft);
}

.mkf-pa-card.mkf-spa-card .mkf-spa-escopo .mkf-seg .mkf-seg-btn {
    flex: 0 0 auto;
    padding: 0 12px;
}

.mkf-pa-card.mkf-spa-card .mkf-spa-escopo .mkf-spa-gerenciar {
    font-size: 13px;
    color: var(--mkf-text-2);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.mkf-pa-card.mkf-spa-card .mkf-spa-escopo .mkf-spa-gerenciar:hover {
    color: var(--mkf-text);
}

.mkf-pa-card.mkf-spa-card .mkf-spa-aviso {
    font-size: 12px;
    color: var(--mkf-warn);
}

.mkf-pa-card.mkf-spa-card .mkf-spa-regras .mkf-spa-regra {
    display: grid;
    grid-template-columns: minmax(0, 280px) auto minmax(0, 1fr);
    align-items: center;
    gap: var(--mkf-space-1) var(--mkf-space-4);
    padding: var(--mkf-space-3) 0;
    border-bottom: 1px solid var(--mkf-line-soft);
}

.mkf-pa-card.mkf-spa-card .mkf-spa-regras .mkf-spa-regra:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.mkf-pa-card.mkf-spa-card .mkf-spa-regra .mkf-spa-regra-id {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
}

/* Em prejuízo: travado ligado — cor cheia (não parece desligado), sem cursor de clique. */
.mkf-pa-card.mkf-spa-card .mkf-spa-regra .mkf-bba-switch.mkf-spa-travado:disabled {
    opacity: 1;
    cursor: default;
}

/* O que a regra não faz: esmaecido e riscado de leve, com o porquê no title. */
.mkf-pa-card.mkf-spa-card .mkf-spa-regra .mkf-spa-sobe .mkf-seg .mkf-seg-btn:disabled:not(.mkf-seg-btn--on) {
    opacity: 0.4;
    cursor: not-allowed;
}

.mkf-pa-card.mkf-spa-card .mkf-spa-regra .mkf-spa-sobe {
    flex-direction: row;
    align-items: center;
    gap: var(--mkf-space-2);
    width: auto;
}

.mkf-pa-card.mkf-spa-card .mkf-spa-regra .mkf-spa-sobe .mkf-seg .mkf-seg-btn {
    flex: 0 0 auto;
    min-width: 72px;
    padding: 0 10px;
}

.mkf-pa-card.mkf-spa-card .mkf-spa-regra .mkf-pa-contador {
    justify-self: end;
    font-size: var(--mkf-type-label-size);
    font-variant-numeric: var(--mkf-mono-numeric-variant);
    color: var(--mkf-text-2);
    white-space: nowrap;
}

.mkf-pa-card.mkf-spa-card .mkf-spa-regra .mkf-pa-contador a {
    color: var(--mkf-text-2);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.mkf-pa-card.mkf-spa-card .mkf-spa-regra .mkf-spa-aviso {
    grid-column: 2 / -1;
}

@media (max-width: 900px) {
    .mkf-pa-card.mkf-spa-card .mkf-spa-regras .mkf-spa-regra {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .mkf-pa-card.mkf-spa-card .mkf-spa-regra .mkf-spa-sobe {
        grid-column: 1;
        grid-row: 2;
    }

    .mkf-pa-card.mkf-spa-card .mkf-spa-regra .mkf-pa-contador {
        grid-column: 2;
        grid-row: 1;
    }

    .mkf-pa-card.mkf-spa-card .mkf-spa-regra .mkf-spa-aviso {
        grid-column: 1 / -1;
    }
}

/* v1.47 — subseção "Intervalos" do card Execução: uma linha por ciclo —
   [rótulo 110px] · [campo 90px] · [apoio] · contador encostado à direita. */
.mkf-pa-card .mkf-pa-subsecao .mkf-pa-intervalo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--mkf-space-2) var(--mkf-space-4);
}

.mkf-pa-card .mkf-pa-intervalo .mkf-bba-label {
    width: 110px;
}

.mkf-pa-card .mkf-pa-intervalo .mkf-bba-f {
    width: 90px;
}

.mkf-pa-card .mkf-pa-intervalo .mkf-bba-apoio {
    flex: 1 1 260px;
    max-width: 52ch;
}

.mkf-pa-card .mkf-pa-intervalo .mkf-pa-contador {
    margin-left: auto;
    font-size: var(--mkf-type-label-size);
    font-variant-numeric: var(--mkf-mono-numeric-variant);
    color: var(--mkf-text-2);
    white-space: nowrap;
}

.mkf-pa-card .mkf-pa-subsecao .mkf-pa-intervalo-chave {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

/* Frase de latência: informação, não alerta — texto secundário, sem fundo. */
.mkf-pa-card .mkf-pa-subsecao .mkf-pa-latencia {
    margin: 0;
    font-size: 12px;
    line-height: 1.45;
    color: var(--mkf-text-2);
}

/* Rodapé do card Execução: botão com menu + uma linha de status por ciclo. */
.mkf-bba-foot.mkf-pa-foot {
    align-items: flex-start;
}

.mkf-pa-foot .mkf-pa-rodar {
    position: relative;
}

.mkf-pa-foot .mkf-pa-rodar .mkf-pa-rodar-seta {
    font-size: 10px;
    color: var(--mkf-text-2);
}

.mkf-pa-foot .mkf-pa-rodar .mkf-pa-rodar-fundo {
    position: fixed;
    inset: 0;
    z-index: var(--mkf-z-dropdown-fundo);
}

.mkf-pa-foot .mkf-pa-rodar .mkf-pa-rodar-menu {
    position: absolute;
    bottom: calc(100% + 4px);
    left: 0;
    z-index: var(--mkf-z-dropdown);
    display: flex;
    flex-direction: column;
    min-width: 140px;
    padding: 4px;
    border: 1px solid var(--mkf-line);
    border-radius: var(--mkf-radius-control);
    background-color: var(--mkf-surface);
}

/* flex no botão: text-align sozinho não tirava o texto do centro. */
.mkf-pa-foot .mkf-pa-rodar .mkf-pa-rodar-menu button {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 30px;
    padding: 0 10px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--mkf-text);
    font-family: inherit;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}

.mkf-pa-foot .mkf-pa-rodar-menu button:hover:not(:disabled) {
    background-color: var(--mkf-surface-2);
}

.mkf-pa-foot .mkf-pa-rodar-menu button:disabled {
    color: var(--mkf-text-3);
    cursor: default;
}

.mkf-pa-foot .mkf-pa-status-ciclos {
    display: flex;
    flex: 1 1 320px;
    flex-direction: column;
    gap: 3px;
    padding-top: 8px;
}

/* Salvar único dos três cards. */
.mkf-pa-salvar {
    display: flex;
    align-items: center;
    gap: var(--mkf-space-3);
    max-width: 880px;
    margin-top: var(--mkf-space-4);
    padding: var(--mkf-space-3) 0 var(--mkf-space-6);
}

/* Rótulo só pra leitor de tela (o campo do piso fica ao lado do switch que já o nomeia). */
.mkf-pa-regra .mkf-bba-f .mkf-pa-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Aba Histórico: o Exportar (que era do cabeçalho da página antiga) fica na linha dos filtros. */
.mkf-bba-filtros .mkf-pa-hist-acts {
    margin-left: auto;
}

/* Na página antiga os filtros vinham depois do cabeçalho; aqui vêm colados na barra das abas. */
.mkf-pa-abas .mud-tabs-panels .mkf-bba-filtros {
    margin-top: var(--mkf-space-4);
}

/* ================================================================================
   EDIÇÃO DIRETO NA CÉLULA + ALTERAÇÃO EM MASSA — Monitor de Buy Box (v1.42, 2026-09-11)
   ================================================================================
   R$ Atual e Estoque viram campo com um clique (CelulaEditavel.razor); a seleção ganha Alterar
   preço/estoque (AlterarEmMassaDialog.razor). Só tokens --mkf-*; cor só em --mkf-lose (prejuízo,
   erro); nunca verde. As regras que moram DENTRO da tabela do MudBlazor têm 3 classes + elemento
   desde o começo: a lib carrega depois do app.css e ganha qualquer empate por ordem. */

/* ---- A célula editável ocupa a <td> INTEIRA ----
   Padding horizontal da td zerado (o MudBlazor dá 16px/24px, inclusive nos pares lógicos
   padding-inline-*) e devolvido DENTRO do editor, com os mesmos 16/24: o número fica exatamente
   onde estava, e qualquer clique na célula cai no editor — nunca no OnRowClick que abre o modal. */
.mkf-data-table .mud-table-row td.mkf-col-editavel {
    padding-inline: 0;
    padding-left: 0;
    padding-right: 0;
}

/* O ⚠ de faixa morta vem ANTES do preço; a margem padrão dele (à esquerda) é pra quando vem depois. */
.mkf-data-table .mkf-col-editavel .mkf-custo-ausente-marca {
    margin: 0 4px 0 0;
}

/* O mesmo recuo pro caso NÃO editável da coluna (preço de anúncio sem estoque, ou sem preço). */
.mkf-data-table .mkf-col-editavel .mkf-cel-fixa {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: var(--mkf-row-height);
    padding: 0 24px 0 16px;
}

.mkf-data-table .mkf-col-editavel .mkf-cel-edit {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: var(--mkf-row-height);
    padding: 0 24px 0 16px;
    cursor: text;
}

/* Hover: fundo um tom acima do hover da LINHA (que já é --mkf-surface-2) — com o mesmo tom a
   célula não se distinguiria da linha — e sublinhado tracejado no valor. Só em repouso. */
.mkf-data-table .mkf-col-editavel .mkf-cel-edit:not(.mkf-cel-edit--on):hover {
    background-color: var(--mkf-surface-3);
}

.mkf-data-table .mkf-col-editavel .mkf-cel-edit:not(.mkf-cel-edit--on):hover .mkf-cel-edit-valor {
    text-decoration: underline dashed var(--mkf-text-3);
    text-underline-offset: 3px;
}

/* Em edição: o campo usa a largura da célula e a altura da linha menos 8px (34/40/46 → 26/32/38),
   pra nunca mexer na altura da linha nem na largura da coluna. */
.mkf-data-table .mkf-col-editavel .mkf-cel-edit.mkf-cel-edit--on {
    padding: 0 4px;
    cursor: default;
}

/* O MudTooltip envolve o campo num inline-block — ele precisa ocupar a célula como o campo. */
.mkf-col-editavel .mkf-cel-tooltip-root {
    display: flex;
    width: 100%;
    min-width: 0;
}

.mkf-cel-input-wrap {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
    min-width: 0;
    height: calc(var(--mkf-row-height) - 8px);
    padding: 0 6px;
    border: 1px solid var(--mkf-line);
    border-radius: var(--mkf-radius-control);
    background-color: var(--mkf-surface);
    box-sizing: border-box;
}

.mkf-cel-input-wrap:focus-within {
    border-color: var(--mkf-brand);
}

.mkf-cel-input-wrap.mkf-cel-input-wrap--erro,
.mkf-cel-input-wrap.mkf-cel-input-wrap--erro:focus-within {
    border-color: var(--mkf-lose);
}

.mkf-cel-input-pref {
    flex: none;
    color: var(--mkf-text-3);
    font-family: var(--mkf-mono-numeric-family);
    font-size: var(--mkf-mono-numeric-size);
}

.mkf-cel-input {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--mkf-text);
    text-align: right;
    font-family: var(--mkf-mono-numeric-family);
    font-size: var(--mkf-mono-numeric-size);
    font-weight: var(--mkf-mono-numeric-weight);
    font-variant-numeric: var(--mkf-mono-numeric-variant);
    letter-spacing: var(--mkf-mono-numeric-tracking);
}

/* ---- Confirmação leve (popover ancorado abaixo da célula) ----
   Mesma superfície do popover de duplicidade: o MudPopover dá só o posicionamento. */
.mud-popover.mkf-cel-pop.mud-popover-open {
    background-color: transparent;
    box-shadow: none;
    max-width: none;
}

.mkf-cel-pop-corpo {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 280px;
    margin-top: 4px;
    padding: 11px 13px;
    background-color: var(--mkf-surface-3);
    border: 1px solid var(--mkf-line);
    border-radius: var(--mkf-radius-panel);
    text-align: left;
    color: var(--mkf-text);
    font-size: var(--mkf-type-cell-size);
}

.mkf-cel-pop-de-para {
    font-family: var(--mkf-mono-numeric-family);
    font-variant-numeric: var(--mkf-mono-numeric-variant);
    font-size: 15px;
    font-weight: 500;
}

.mkf-cel-pop-seta {
    color: var(--mkf-text-3);
}

.mkf-cel-pop-pergunta {
    color: var(--mkf-text-2);
}

.mkf-cel-pop-atalhos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: var(--mkf-type-label-size);
    color: var(--mkf-text-3);
}

.mkf-cel-pop-atalhos .mkf-link-btn {
    font-family: var(--mkf-mono-numeric-family);
    font-variant-numeric: var(--mkf-mono-numeric-variant);
}

.mkf-cel-pop-atalho-vazio {
    color: var(--mkf-text-3);
}

.mkf-cel-pop-aviso {
    font-size: var(--mkf-type-label-size);
    line-height: 1.4;
    color: var(--mkf-text-3);
}

.mkf-cel-pop-aviso.mkf-cel-pop-aviso--lose,
.mkf-cel-pop-erro {
    color: var(--mkf-lose);
}

.mkf-cel-pop-erro {
    font-size: var(--mkf-type-label-size);
    line-height: 1.4;
}

.mkf-cel-pop-acoes {
    display: flex;
    align-items: center;
    gap: var(--mkf-space-2);
    margin-top: 4px;
    min-height: 30px;
}

.mkf-cel-pop-gravando {
    color: var(--mkf-text-2);
    font-size: var(--mkf-type-label-size);
}

/* ---- Coluna Ações só com o ↻ (44px) ----
   Sem padding horizontal nas duas pontas (corpo e cabeçalho) — 44px não comportam os 16/24 do
   MudBlazor mais um botão de 30. O rótulo do cabeçalho centraliza no mesmo eixo do ícone. */
.mkf-data-table .mud-table-row td.mkf-col-acoes {
    padding-inline: 0;
    padding-left: 0;
    padding-right: 0;
}

.mkf-data-table .mkf-col-acoes .mkf-acoes-cel {
    display: flex;
    justify-content: center;
}

.mkf-catalogo-table thead th.mkf-col-acoes {
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: center;
}

/* ---- Diálogo "Alterar preço e estoque de N anúncios" (v1.43 — grade editável) ----
   940px e não os 720 da v1.42: a grade tem 8 colunas, duas delas campos — em 720 o Título ficava
   com menos de 100px. */
.mud-dialog.mkf-massa-dialog {
    width: min(940px, calc(100vw - 32px));
    max-width: none;
    background-color: var(--mkf-surface);
    color: var(--mkf-text);
}

.mkf-massa-titulo {
    font-size: var(--mkf-type-section-size);
    font-weight: var(--mkf-type-section-weight);
}

.mkf-massa-conteudo {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mkf-massa-op {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.mkf-massa-seg {
    flex: 1 1 360px;
    max-width: 440px;
}

.mkf-massa-ajuste {
    display: flex;
    align-items: center;
    gap: 6px;
}

.mkf-massa-sinal {
    width: 64px;
    flex: none;
}

.mkf-massa-campo {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 34px;
    padding: 0 8px;
    border: 1px solid var(--mkf-line);
    border-radius: var(--mkf-radius-control);
    background-color: var(--mkf-surface);
    box-sizing: border-box;
}

.mkf-massa-campo:focus-within {
    border-color: var(--mkf-brand);
}

.mkf-massa-campo-pref,
.mkf-massa-campo-suf {
    color: var(--mkf-text-3);
    font-family: var(--mkf-mono-numeric-family);
}

.mkf-massa-input {
    width: 72px;
    height: 100%;
    padding: 0;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--mkf-text);
    text-align: right;
    font-family: var(--mkf-mono-numeric-family);
    font-size: var(--mkf-mono-numeric-size);
    font-variant-numeric: var(--mkf-mono-numeric-variant);
}

/* Prévia: rolável, ~10 linhas visíveis (10 × 32 + cabeçalho). */
.mkf-massa-previa {
    max-height: 356px;
    overflow: auto;
    border: 1px solid var(--mkf-line);
    border-radius: var(--mkf-radius-control);
}

.mkf-massa-tabela {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: var(--mkf-type-cell-size);
}

.mkf-massa-tabela th {
    position: sticky;
    top: 0;
    z-index: var(--mkf-z-tabela-cabecalho);
    height: 30px;
    padding: 0 8px;
    background-color: var(--mkf-surface-2);
    border-bottom: 1px solid var(--mkf-line);
    color: var(--mkf-text-2);
    font-size: var(--mkf-type-header-size);
    font-weight: var(--mkf-type-header-weight);
    letter-spacing: var(--mkf-type-header-tracking);
    text-transform: uppercase;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mkf-massa-tabela td {
    height: 32px;
    padding: 0 8px;
    border-bottom: 1px solid var(--mkf-line-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mkf-massa-tabela tbody tr:nth-of-type(even) td {
    background-color: var(--mkf-row-alt);
}

.mkf-massa-tabela .mkf-massa-num {
    text-align: right;
    font-family: var(--mkf-mono-numeric-family);
    font-size: var(--mkf-mono-numeric-size);
    font-variant-numeric: var(--mkf-mono-numeric-variant);
    letter-spacing: var(--mkf-mono-numeric-tracking);
}

.mkf-massa-sku {
    color: var(--mkf-text-2);
    font-family: var(--mkf-mono-numeric-family);
    font-size: var(--mkf-mono-numeric-size);
}

.mkf-massa-tabela .mkf-massa-aviso-th,
.mkf-massa-tabela .mkf-massa-aviso {
    text-align: center;
    padding: 0;
}

.mkf-massa-aviso-ic {
    color: var(--mkf-text-3);
    cursor: help;
}

.mkf-massa-tabela .mkf-massa-lose {
    color: var(--mkf-lose);
}

/* Linha cujo preço ficaria em prejuízo e não vai ser gravado: riscada a parte de PREÇO; o estoque
   da mesma linha continua valendo (prejuízo é regra de preço). */
.mkf-massa-tabela tr.mkf-massa-linha--preco-pulado td.mkf-massa-riscavel {
    text-decoration: line-through;
}

/* ---- Cabeçalho e atalhos ---- */
.mkf-massa-cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.mkf-massa-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: var(--mkf-radius-control);
    background: none;
    color: var(--mkf-text-2);
    cursor: pointer;
}

.mkf-massa-x:hover {
    background-color: var(--mkf-surface-3);
    color: var(--mkf-text);
}

.mkf-massa-x svg {
    width: 18px;
    height: 18px;
}

.mkf-massa-atalhos {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mkf-massa-atalho-linha {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-height: 34px;
}

/* Rótulo pequeno de propósito: os atalhos poupam digitação, o centro é a grade. */
.mkf-massa-rotulo {
    flex: none;
    width: 118px;
    font-size: var(--mkf-type-label-size);
    color: var(--mkf-text-3);
}

.mkf-massa-seg.mkf-massa-seg--estoque {
    flex: 0 1 240px;
}

.mkf-massa-desfazer {
    font-size: var(--mkf-type-label-size);
}

/* ---- Campos da grade ---- */
.mkf-massa-tabela.mkf-massa-tabela--grade td {
    height: 38px;
}

/* ~10 linhas de 38px + cabeçalho: com a altura da prévia antiga (linhas de 32) cabiam 8,5. */
.mkf-massa-previa:has(.mkf-massa-tabela--grade) {
    max-height: 414px;
}

.mkf-massa-tabela .mkf-massa-cel-campo {
    padding: 0 4px;
}

.mkf-grade-campo {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 30px;
    padding: 0 6px;
    border: 1px solid var(--mkf-line);
    border-radius: var(--mkf-radius-control);
    background-color: var(--mkf-surface);
    box-sizing: border-box;
}

.mkf-grade-campo:focus-within {
    border-color: var(--mkf-brand);
}

/* O ÚNICO sinal de "vai gravar" na linha: borda esquerda de 2px no campo que difere do atual. */
.mkf-grade-campo.mkf-grade-campo--alterado {
    border-left: 2px solid var(--mkf-brand);
    padding-left: 5px;
}

.mkf-grade-campo.mkf-grade-campo--erro,
.mkf-grade-campo.mkf-grade-campo--erro:focus-within {
    border-color: var(--mkf-lose);
}

.mkf-grade-pref {
    flex: none;
    color: var(--mkf-text-3);
    font-family: var(--mkf-mono-numeric-family);
    font-size: var(--mkf-mono-numeric-size);
}

.mkf-grade-input {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--mkf-text);
    text-align: right;
    font-family: var(--mkf-mono-numeric-family);
    font-size: var(--mkf-mono-numeric-size);
    font-variant-numeric: var(--mkf-mono-numeric-variant);
    letter-spacing: var(--mkf-mono-numeric-tracking);
}

.mkf-grade-input:disabled {
    color: var(--mkf-text-2);
}

.mkf-grade-campo.mkf-grade-campo--lose .mkf-grade-input {
    color: var(--mkf-lose);
}

.mkf-grade-campo.mkf-grade-campo--riscado .mkf-grade-input {
    text-decoration: line-through;
}

.mkf-massa-pergunta {
    margin-left: 16px;
    margin-right: auto;
    color: var(--mkf-text);
    font-weight: 500;
}

.mkf-massa-final-detalhe {
    margin-left: 4px;
    color: var(--mkf-text-3);
    font-weight: 400;
}

.mkf-massa-switch {
    font-size: var(--mkf-type-cell-size);
}

.mkf-massa-resumo {
    font-size: var(--mkf-type-label-size);
    color: var(--mkf-text-3);
}

.mkf-massa-final {
    font-weight: 500;
}

.mkf-massa-erros {
    display: flex;
    flex-direction: column;
    max-height: 160px;
    overflow: auto;
    border: 1px solid var(--mkf-line);
    border-radius: var(--mkf-radius-control);
}

.mkf-massa-erro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 124px minmax(0, 1.2fr);
    gap: 8px;
    align-items: baseline;
    padding: 6px 8px;
    border-bottom: 1px solid var(--mkf-line-soft);
    font-size: var(--mkf-type-cell-size);
}

.mkf-massa-erro-titulo {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mkf-massa-erro-msg {
    color: var(--mkf-lose);
    font-size: var(--mkf-type-label-size);
}

.mkf-massa-progresso {
    margin-left: 16px;
    margin-right: auto;
    color: var(--mkf-text-2);
    font-family: var(--mkf-mono-numeric-family);
    font-variant-numeric: var(--mkf-mono-numeric-variant);
}

.mkf-massa-btn.mkf-pop-btn {
    flex: none;
}

.mkf-massa-btn.mkf-pop-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

/* ==========================================================================================
   Monitor de Vendas (2026-09-13) — Components/Pages/MonitorVendas.razor, GraficoVendas.razor,
   VendaMemoriaDialog.razor. Só tokens --mkf-*. Cor só no sinal do lucro (--mkf-win/--mkf-lose)
   e no estado de erro; o resto é neutro. Seletores da tabela com 3+ classes: MudBlazor.min.css
   carrega DEPOIS deste arquivo e ganha empates.
   ========================================================================================== */

.mkf-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Indicador "ao vivo" do cabeçalho — neutro; o ponto pulsa só enquanto as notificações chegam. */
.mkf-vendas-aovivo {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 3px;
    font-family: var(--mkf-font-mono);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--mkf-text-3);
    white-space: nowrap;
}

.mkf-vendas-aovivo-ponto {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: var(--mkf-text-3);
    flex-shrink: 0;
}

.mkf-vendas-aovivo.mkf-vendas-aovivo--on {
    color: var(--mkf-text-2);
}

.mkf-vendas-aovivo--on .mkf-vendas-aovivo-ponto {
    /* 2026-09-14 — verde só com prova de vida (VendasAoVivo); antes era cinza pulsando com qualquer notificação. */
    background-color: var(--mkf-win);
    animation: mkf-vendas-pulso 2s ease-in-out infinite;
}

.mkf-vendas-aovivo.mkf-vendas-aovivo--erro {
    color: var(--mkf-lose);
}

.mkf-vendas-aovivo--erro .mkf-vendas-aovivo-ponto {
    background-color: var(--mkf-lose);
}

@keyframes mkf-vendas-pulso {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.25; }
}

@media (prefers-reduced-motion: reduce) {
    .mkf-vendas-aovivo--on .mkf-vendas-aovivo-ponto {
        animation: none;
    }
}

/* 2026-09-14 — ações do estado "webhook parado": texto-link no mesmo corpo do indicador. */
.mkf-vendas-aovivo-acoes {
    display: inline-flex;
    align-items: center;
    gap: var(--mkf-space-3);
    margin-bottom: 3px;
    font-size: 12px;
    white-space: nowrap;
}

.mkf-vendas-aovivo-acoes .mkf-vendas-aovivo-acao {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--mkf-lose);
    font-family: inherit;
    font-size: inherit;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.mkf-vendas-aovivo-acoes .mkf-vendas-aovivo-acao:disabled {
    color: var(--mkf-text-3);
    cursor: default;
}

/* Barra de período. */
.mkf-vendas-periodo {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--mkf-space-3);
    margin-bottom: var(--mkf-space-4);
}

.mkf-vendas-periodo .mkf-seg.mkf-vendas-periodo-seg {
    flex: none;
}

.mkf-vendas-periodo .mkf-seg.mkf-vendas-periodo-seg .mkf-seg-btn {
    padding: 0 12px;
    font-size: 12.5px;
    height: 28px;
}

.mkf-vendas-datas {
    display: flex;
    gap: var(--mkf-space-2);
    font-size: var(--mkf-type-label-size);
    color: var(--mkf-text-2);
}

.mkf-vendas-datas label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.mkf-vendas-periodo-datas {
    margin-left: auto;
    font-family: var(--mkf-font-mono);
    font-size: 12px;
    color: var(--mkf-text-3);
}

/* Tiles — Lucro um passo maior. */
.mkf-vendas-tiles {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
    gap: var(--mkf-space-3);
    margin-bottom: var(--mkf-space-3);
}

@media (max-width: 1280px) {
    .mkf-vendas-tiles {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .mkf-vendas-tiles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.mkf-vendas-tile {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    /* 2026-09-14 — o valor dimensiona a fonte pela largura do card (cqi), nunca corta. */
    container-type: inline-size;
    padding: var(--mkf-space-3) var(--mkf-space-4);
    border-radius: var(--mkf-radius-panel);
    background-color: var(--mkf-surface-2);
    border: 1px solid var(--mkf-line);
}

.mkf-vendas-tile-rot {
    font-size: var(--mkf-type-label-size);
    color: var(--mkf-text-2);
}

/* Dinheiro nunca é truncado ("R$ 41.094…" no print de 14/09). Mono = 0,6em por caractere: 12,5cqi deixa
   13 caracteres ("−R$ 11.877,00") caberem na largura do card; acima disso VendasApresentacao.BrlCard
   abrevia ("R$ 123,5 mil") com o valor completo no title. Sem ellipsis. */
.mkf-vendas-tile-val {
    font-family: var(--mkf-font-mono);
    font-size: min(1.25rem, 12.5cqi);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--mkf-text);
    white-space: nowrap;
}

.mkf-vendas-tile-val small {
    font-size: 12px;
    font-weight: 400;
    color: var(--mkf-text-2);
}

.mkf-vendas-tile.mkf-vendas-tile--lucro .mkf-vendas-tile-val {
    font-size: min(1.625rem, 12.5cqi);
}

/* Base do Lucro: "315 de 442 vendas com custo" — ⚠ quando falta custo em alguma venda. */
.mkf-vendas-tile .mkf-vendas-tile-base {
    font-size: 11.5px;
    color: var(--mkf-text-2);
}

.mkf-vendas-tile .mkf-vendas-tile-base.mkf-vendas-tile-base--aviso {
    color: var(--mkf-warn);
}

/* 2026-09-17 — Custos: "Prod. R$ …" / "Emb. R$ …" / "Imp. R$ …", uma parte por linha. O valor nunca quebra no meio;
   num card estreito com valor grande o rótulo sobe sozinho pra linha de cima (sem estouro nem reticências). */
.mkf-vendas-tile .mkf-vendas-tile-base.mkf-vendas-tile-base--partes {
    display: flex;
    flex-direction: column;
}

.mkf-vendas-tile .mkf-vendas-tile-base .mkf-vendas-tile-num {
    font-family: var(--mkf-font-mono);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* 2026-09-14 — Lucro/Margem "parcial" enquanto houver venda sem custo: o badge de estado do design system
   (.mkf-state-badge) em cor de aviso, na linha do rótulo. Na linha do valor ele apertava o número, que
   dimensiona a fonte pela largura do card. */
.mkf-vendas-tile .mkf-vendas-tile-rot.mkf-vendas-tile-rot--marca {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 18px;
}

.mkf-vendas-tile .mkf-vendas-tile-rot .mkf-state-badge.mkf-vendas-parcial {
    --mkf-state-color: var(--mkf-warn);
    --mkf-state-soft: var(--mkf-warn-soft);
    gap: 4px;
    padding: 0 6px;
    font-size: 11px;
    line-height: 16px;
    cursor: help;
}

.mkf-vendas-tile-cmp {
    font-size: 11.5px;
    color: var(--mkf-text-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mkf-vendas-tile .mkf-vendas-tile-val.mkf-venda-pos,
.mkf-venda-pos {
    color: var(--mkf-win);
}

.mkf-vendas-tile .mkf-vendas-tile-val.mkf-venda-neg,
.mkf-venda-neg {
    color: var(--mkf-lose);
}

.mkf-vendas-tile .mkf-vendas-tile-val.mkf-cell-empty,
.mkf-venda-zero {
    color: var(--mkf-text-3);
}

/* Contadores pequenos (viram filtro da tabela). */
.mkf-vendas-contadores {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mkf-space-2);
    margin-bottom: var(--mkf-space-4);
}

.mkf-vendas-contador {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    height: 28px;
    padding: 0 11px;
    border: 1px solid var(--mkf-line);
    border-radius: var(--mkf-radius-control);
    background-color: var(--mkf-surface);
    color: var(--mkf-text-2);
    font-family: inherit;
    font-size: 12.5px;
    line-height: 26px;
    cursor: pointer;
}

.mkf-vendas-contador b {
    font-family: var(--mkf-font-mono);
    font-weight: 600;
    color: var(--mkf-text);
}

.mkf-vendas-contador span {
    font-family: var(--mkf-font-mono);
    font-size: 11.5px;
    color: var(--mkf-text-3);
}

/* 2026-09-27 — "· ocultas" no tile Pendentes com o switch "Incluir pendentes" desligado: texto, não número. */
.mkf-vendas-contadores .mkf-vendas-contador span.mkf-vendas-contador-ocultas {
    margin-left: -2px;
    font-family: inherit;
    font-size: 12px;
    font-style: italic;
}

/* O switch "Incluir pendentes" na barra de período: centrado na linha dos chips (o mkf-bba-switch nasce
   flex-start), sem mudar a altura da barra. */
.mkf-vendas-periodo .mkf-bba-switch.mkf-vendas-pendentes-switch {
    align-self: center;
    gap: 6px;
    font-size: 12px;
    color: var(--mkf-text-2);
    white-space: nowrap;
}

.mkf-vendas-contador:hover {
    border-color: var(--mkf-text-3);
}

.mkf-vendas-contador.mkf-vendas-contador--on {
    background-color: var(--mkf-surface-3);
    border-color: var(--mkf-text-2);
    color: var(--mkf-text);
}

/* Resultado do último "Recalcular sem custo" (2026-09-14) — texto, não botão. */
.mkf-vendas-contadores .mkf-vendas-recalculo {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    min-height: 28px;
    font-size: 12.5px;
    color: var(--mkf-text-2);
}

.mkf-vendas-contadores .mkf-vendas-recalculo b {
    font-family: var(--mkf-font-mono);
    font-weight: 600;
    color: var(--mkf-text);
}

.mkf-vendas-contadores .mkf-vendas-recalculo .mkf-vendas-recalculo-ver {
    margin-left: 4px;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: var(--mkf-brand);
    text-decoration: underline;
    cursor: pointer;
}

.mkf-vendas-contadores .mkf-vendas-contador.mkf-vendas-contador--erro {
    border-color: var(--mkf-lose);
    color: var(--mkf-lose);
}

.mkf-vendas-contadores .mkf-vendas-contador.mkf-vendas-contador--erro b {
    color: var(--mkf-lose);
}

/* Lista "Notificações com erro" (diálogo). */
.mkf-notif-erro-lista {
    display: flex;
    flex-direction: column;
    gap: var(--mkf-space-3);
}

.mkf-notif-erro {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: var(--mkf-space-3);
    border: 1px solid var(--mkf-line);
    border-radius: var(--mkf-radius-control);
}

.mkf-notif-erro-cab {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--mkf-space-2);
}

.mkf-notif-erro-recurso {
    font-family: var(--mkf-font-mono);
    font-size: 13px;
    font-weight: 600;
    color: var(--mkf-text);
}

.mkf-notif-erro-meta {
    font-family: var(--mkf-font-mono);
    font-size: 11.5px;
    color: var(--mkf-text-3);
}

.mkf-notif-erro .mkf-notif-erro-msg {
    display: block;
    padding: 6px 8px;
    border-radius: var(--mkf-radius-control);
    background-color: var(--mkf-surface-2);
    color: var(--mkf-lose);
    font-family: var(--mkf-font-mono);
    font-size: 12px;
    white-space: pre-wrap;
    word-break: break-word;
}

.mkf-notif-erro-acoes {
    display: flex;
    gap: var(--mkf-space-2);
}

/* Gráfico. */
.mkf-vendas-grafico-card {
    padding: var(--mkf-space-3) var(--mkf-space-4) var(--mkf-space-2);
    margin-bottom: var(--mkf-space-4);
    border-radius: var(--mkf-radius-panel);
    background-color: var(--mkf-surface);
    border: 1px solid var(--mkf-line);
}

.mkf-grafico-vendas {
    position: relative;
}

.mkf-grafico-area {
    position: relative;
}

.mkf-grafico-svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

/* 2026-09-14 — grade recessiva, quase apagada: com 3 valores no eixo ela só serve de régua. */
.mkf-grafico-grade {
    stroke: var(--mkf-line-soft);
    stroke-width: 1;
    stroke-opacity: 0.55;
    vector-effect: non-scaling-stroke;
}

.mkf-grafico-zero {
    stroke: var(--mkf-line);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.mkf-grafico-titulo {
    fill: var(--mkf-text-2);
    font-family: var(--mkf-font-sans);
    font-size: 12px;
    font-weight: 500;
}

.mkf-grafico-cursor {
    stroke: var(--mkf-line);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
    pointer-events: none;
}

.mkf-grafico-eixo {
    fill: var(--mkf-text-3);
    font-family: var(--mkf-font-mono);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.mkf-grafico-barra-pos {
    fill: var(--mkf-win);
}

.mkf-grafico-barra-neg {
    fill: var(--mkf-lose);
}

.mkf-grafico-esmaecida {
    opacity: 0.45;
}

.mkf-grafico-linha {
    fill: none;
    stroke: var(--mkf-text-2);
    stroke-width: 1.5;
    stroke-linejoin: round;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
    pointer-events: none;
}

.mkf-grafico-ponto {
    fill: var(--mkf-text-2);
    stroke: var(--mkf-surface);
    stroke-width: 2;
    pointer-events: none;
}

.mkf-grafico-alvo {
    fill: transparent;
    cursor: crosshair;
}

.mkf-grafico-alvo.mkf-grafico-fundo {
    cursor: default;
}

/* 2026-09-14 — ao lado da linha do cursor (left/top inline, em px do viewBox = px da tela), virando pra
   esquerda quando não cabe à direita. Largura FIXA: é ela que o flip usa na conta (TooltipLargura). */
.mkf-grafico-tooltip {
    position: absolute;
    top: 0;
    transform: none;
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 190px;
    box-sizing: border-box;
    padding: 8px 10px;
    border-radius: var(--mkf-radius-control);
    background-color: var(--mkf-surface-3);
    border: 1px solid var(--mkf-line);
    color: var(--mkf-text);
    font-size: 12px;
    pointer-events: none;
    z-index: 2;
}

.mkf-grafico-tooltip.mkf-grafico-tooltip--esq {
    transform: translateX(-100%);
}

.mkf-grafico-tooltip.mkf-grafico-tooltip--dir {
    transform: none;
}

.mkf-grafico-tooltip b {
    margin-bottom: 2px;
    font-weight: 500;
}

.mkf-grafico-tooltip span {
    display: flex;
    justify-content: space-between;
    gap: var(--mkf-space-3);
    font-family: var(--mkf-font-mono);
    font-variant-numeric: tabular-nums;
}

.mkf-grafico-tooltip span i {
    font-style: normal;
    font-family: var(--mkf-font-sans);
    color: var(--mkf-text-2);
}

/* 2026-09-24 — barras empilhadas por canal (Geral). Negativo = mesma cor, mais clara e com contorno de prejuízo:
   o sinal é a POSIÇÃO (desce da linha zero), a cor é o canal. */
.mkf-grafico-vendas .mkf-grafico-barra-canal {
    stroke: var(--mkf-surface);
    stroke-width: 1;
}

.mkf-grafico-vendas .mkf-grafico-barra-canal.mkf-grafico-barra-canal--neg {
    fill-opacity: 0.55;
    stroke: var(--mkf-lose);
}

.mkf-grafico-vendas .mkf-grafico-legenda {
    position: absolute;
    top: 0;
    right: 12px;
    display: flex;
    gap: 12px;
    font-size: 11.5px;
    color: var(--mkf-text-2);
    pointer-events: none;
}

.mkf-grafico-vendas .mkf-grafico-legenda span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.mkf-grafico-vendas .mkf-grafico-legenda .mkf-grafico-legenda-cor {
    width: 9px;
    height: 9px;
    border-radius: 2px;
}

@media (max-width: 640px) {
    .mkf-grafico-vendas .mkf-grafico-legenda {
        position: static;
        justify-content: flex-end;
        margin-bottom: 4px;
    }
}

.mkf-grafico-tooltip.mkf-grafico-tooltip--canais {
    width: 240px;
}

.mkf-grafico-tooltip span.mkf-grafico-tooltip-canal {
    font-size: 11.5px;
}

.mkf-grafico-tooltip span.mkf-grafico-tooltip-canal i {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.mkf-grafico-vazio {
    padding: 48px 0;
    text-align: center;
    color: var(--mkf-text-3);
    font-size: 13px;
}

/* Barra de ferramentas e pill de vendas novas. */
.mkf-toolbar.mkf-vendas-toolbar {
    margin-bottom: var(--mkf-space-3);
}

.mkf-vendas-novas {
    flex: none;
    height: 28px;
    padding: 0 12px;
    border: 1px solid var(--mkf-line);
    border-radius: 999px;
    background-color: var(--mkf-surface-3);
    color: var(--mkf-text);
    font-family: inherit;
    font-size: 12.5px;
    cursor: pointer;
}

/* Tabela — mesma técnica de largura do Buy Box: width 100% + table-layout fixed + Anúncio sem
   largura (a única elástica). min-width = soma das colunas fixas (1148px) + folga do Anúncio. */
.mkf-vendas-table .mud-table-root {
    width: 100%;
    min-width: 1350px;
    table-layout: fixed;
}

/* Padding horizontal de 8px (o de fábrica do MudBlazor é 16+24px no th e cortava os rótulos numéricos
   alinhados à direita — "ECEITA", "ISSÃO" no primeiro print). Físico E lógico: o MudBlazor declara os dois. */
.mkf-vendas-table .mud-table-container .mud-table-root th.mud-table-cell,
.mkf-vendas-table .mud-table-container .mud-table-root td.mud-table-cell {
    padding-left: 8px;
    padding-right: 8px;
    padding-inline-start: 8px;
    padding-inline-end: 8px;
}

.mkf-vendas-table .mud-table-container .mud-table-root th.mkf-col-numeric,
.mkf-vendas-table .mud-table-container .mud-table-root td.mkf-col-numeric {
    text-align: right;
}

/* Ícone de ordenação de 14px nesta tabela: o de 20px ocupa espaço mesmo invisível e cortava "QTD",
   "COMISSÃO" e "MARGEM" pela esquerda (medido no print local). */
.mkf-vendas-table .mud-table-container .mud-table-root th .mkf-sortable-th .mkf-sort-icon {
    font-size: 14px;
    width: 14px;
    height: 14px;
}

.mkf-vendas-table .mud-table-container .mud-table-root th .mkf-sortable-th.mkf-sortable-th--dir {
    justify-content: flex-end;
}

.mkf-vendas-table .mud-table-container .mud-table-body .mud-table-cell {
    height: 44px;
}

.mkf-vendas-anuncio {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}

.mkf-vendas-anuncio .mkf-titulo-text,
.mkf-vendas-anuncio .mkf-sku-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mkf-vendas-table .mkf-vendas-anuncio .mkf-sku-text {
    font-family: var(--mkf-font-mono);
    font-size: 11.5px;
}

/* Nome do produto que abre o modal do anúncio (2026-09-22). <button> pra ter teclado e foco, mas com a cara do
   texto da tabela: sem fundo, borda nem sublinhado; só cursor e a cor da marca no hover (a mesma do nº da venda).
   As reticências vêm do .mkf-vendas-anuncio .mkf-titulo-text. */
.mkf-vendas-table .mkf-vendas-anuncio .mkf-vendas-titulo-btn {
    display: block;
    max-width: 100%;
    padding: 0;
    margin: 0;
    border: 0;
    background: none;
    font: inherit;
    font-weight: 500;
    color: var(--mkf-text);
    text-align: left;
    cursor: pointer;
}

.mkf-vendas-table .mkf-vendas-anuncio .mkf-vendas-titulo-btn:hover:not(:disabled) {
    color: var(--mkf-brand);
}

.mkf-vendas-table .mkf-vendas-anuncio .mkf-vendas-titulo-btn:focus-visible {
    outline: 2px solid var(--mkf-brand);
    outline-offset: 1px;
    border-radius: 2px;
}

.mkf-vendas-table .mkf-vendas-anuncio .mkf-vendas-titulo-btn:disabled {
    cursor: progress;
}

/* Copiar SKU no Monitor de Vendas (2026-09-14) — mesmo SkuComCopia do Buy Box, mas a linha do
   SKU aqui tem ~14px (11,5px mono embaixo do título, célula de 44px): o MudIconButton Small de
   fábrica (34px, padding 3px) empurraria a linha. Botão encolhido pra caber na altura do texto;
   ele ocupa o espaço mesmo invisível, então o hover não faz a tabela pular. 3+ classes porque o
   MudBlazor.min.css carrega DEPOIS do app.css. O ícone aparece no hover da célula Anúncio. */
.mkf-vendas-table .mkf-vendas-anuncio .mkf-sku-cell--linha {
    gap: 4px;
    min-width: 0;
}

.mkf-vendas-table .mkf-vendas-anuncio .mkf-sku-cell--linha .mkf-sku-text {
    min-width: 0;
}

/* O <div> do stopPropagation herdava a altura de linha da célula (13,5px × 1,25) e esticava a
   linha do SKU pra ~17px — o bloco título+SKU ficava 1px fora do das vendas "sem SKU". */
.mkf-vendas-table .mkf-vendas-anuncio .mkf-sku-cell--linha > div {
    display: flex;
    line-height: 0;
}

.mkf-vendas-table .mkf-vendas-anuncio .mkf-sku-cell--linha .mkf-sku-copy-btn {
    padding: 0;
    width: 14px;
    height: 14px;
    color: var(--mkf-text-2);
}

.mkf-vendas-table .mkf-vendas-anuncio .mkf-sku-cell--linha .mkf-sku-copy-btn .mud-icon-root {
    font-size: 13px;
    width: 13px;
    height: 13px;
}

.mkf-vendas-table .mkf-vendas-anuncio:hover .mkf-sku-cell--linha .mkf-sku-copy-btn {
    opacity: 1;
}

.mkf-vendas-table .mud-table-body a.mkf-vendas-pedido {
    color: var(--mkf-text);
    text-decoration: none;
    border-bottom: 1px dotted var(--mkf-text-3);
}

.mkf-vendas-table .mud-table-body a.mkf-vendas-pedido:hover {
    color: var(--mkf-brand);
    border-bottom-color: var(--mkf-brand);
}

.mkf-vendas-table .mud-table-container .mud-table-body td.mkf-vendas-lucro {
    font-weight: 600;
}

.mkf-vendas-table .mud-table-container .mud-table-body td.mkf-venda-pos {
    color: var(--mkf-win);
}

.mkf-vendas-table .mud-table-container .mud-table-body td.mkf-venda-neg {
    color: var(--mkf-lose);
}

.mkf-venda-aviso {
    margin-right: 4px;
    color: var(--mkf-warn);
    cursor: help;
}

.mkf-vendas-status {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 999px;
    border: 1px solid var(--mkf-line);
    font-size: 11.5px;
    color: var(--mkf-text-2);
}

.mkf-vendas-status.mkf-vendas-status--fora {
    color: var(--mkf-text-3);
    border-style: dashed;
}

.mkf-vendas-mediacao {
    margin-left: 4px;
    font-size: 11px;
    color: var(--mkf-text-3);
}

/* Realce de 2s da venda que entrou ao vivo: um degrau de superfície que se apaga. 4 classes pra
   ganhar da zebra. */
.mkf-data-table .mud-table-container .mud-table-row.mkf-vendas-realce td {
    animation: mkf-vendas-realce 2s ease-out;
}

@keyframes mkf-vendas-realce {
    from { background-color: var(--mkf-surface-3); }
    to { background-color: transparent; }
}

/* Memória de cálculo. */
.mkf-venda-mem-cab {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: var(--mkf-space-3);
}

.mkf-venda-mem-pedido {
    font-family: var(--mkf-font-mono);
    font-size: 14px;
    color: var(--mkf-text);
}

.mkf-venda-mem-titulo {
    font-weight: 500;
    color: var(--mkf-text);
}

.mkf-venda-mem-meta {
    font-size: 12px;
    color: var(--mkf-text-2);
}

.mkf-venda-mem-tabela {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.mkf-venda-mem-tabela td {
    padding: 7px 8px;
    border-bottom: 1px solid var(--mkf-line-soft);
    font-size: 13px;
    color: var(--mkf-text);
    vertical-align: top;
}

.mkf-venda-mem-tabela td:first-child {
    width: 110px;
    color: var(--mkf-text-2);
}

.mkf-venda-mem-tabela td.mkf-venda-mem-val {
    width: 110px;
    text-align: right;
    font-family: var(--mkf-font-mono);
    font-variant-numeric: tabular-nums;
}

.mkf-venda-mem-tabela td.mkf-venda-mem-origem {
    font-size: 12px;
    color: var(--mkf-text-2);
}

.mkf-venda-mem-congelado {
    display: block;
    color: var(--mkf-text-3);
}

.mkf-venda-mem-tabela tr.mkf-venda-mem-total td {
    border-bottom: 0;
    border-top: 1px solid var(--mkf-line);
    font-weight: 600;
}

.mkf-venda-mem-tabela tr.mkf-venda-mem-total td.mkf-venda-mem-val.mkf-venda-pos {
    color: var(--mkf-win);
}

.mkf-venda-mem-tabela tr.mkf-venda-mem-total td.mkf-venda-mem-val.mkf-venda-neg {
    color: var(--mkf-lose);
}

.mkf-venda-mem-nota {
    margin: var(--mkf-space-2) 0 0;
    font-size: 12px;
    color: var(--mkf-text-3);
}

/* SKU corrigido depois da venda: os dois SKUs lado a lado (2026-09-14). */
.mkf-venda-mem-sku-corrigido {
    display: flex;
    flex-wrap: wrap;
    gap: 4px var(--mkf-space-3);
    margin-top: var(--mkf-space-3);
    padding: var(--mkf-space-2) var(--mkf-space-3);
    border: 1px solid var(--mkf-line-soft);
    border-radius: var(--mkf-radius-control);
    background: var(--mkf-surface-2);
    font-size: 12px;
    color: var(--mkf-text-2);
}

.mkf-venda-mem-sku-corrigido b {
    font-weight: 500;
    color: var(--mkf-text);
}

.mkf-venda-mem-sku-corrigido .mkf-venda-mem-nota {
    flex-basis: 100%;
    margin: 0;
}

.mkf-venda-mem-ajustes {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: var(--mkf-space-3);
}

/* ================================================================================
   CUSTOS PENDENTES (2026-09-15) — tela /custos-pendentes + diálogo de aprovação + selo do custo de catálogo.
   Só tokens --mkf-*; 3+ classes onde o MudBlazor tem regra própria (ele carrega DEPOIS do app.css).
   ================================================================================ */
.mkf-pend-aviso {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--mkf-space-3);
    margin-bottom: var(--mkf-space-3);
    padding: 10px 14px;
    border: 1px solid var(--mkf-line);
    border-radius: var(--mkf-radius-panel);
    background: var(--mkf-surface-2);
    color: var(--mkf-text-2);
    font-size: var(--mkf-type-body-size);
}

.mkf-pend-aviso.mkf-pend-aviso--relatorio {
    border-color: var(--mkf-warn);
    background: var(--mkf-warn-soft);
    color: var(--mkf-text);
}

.mkf-pend-aviso .mkf-pend-erro {
    color: var(--mkf-warn);
}

.mkf-regra-filtros.mkf-pend-filtros {
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--mkf-space-3);
}

.mkf-bba-tabela.mkf-pend-tabela th.mkf-pend-check,
.mkf-bba-tabela.mkf-pend-tabela td.mkf-pend-check {
    width: 34px;
    text-align: center;
}

.mkf-bba-tabela.mkf-pend-tabela input[type="checkbox"] {
    accent-color: var(--mkf-brand);
    cursor: pointer;
}

.mkf-bba-tabela.mkf-pend-tabela input[type="checkbox"]:disabled {
    cursor: not-allowed;
}

/* Desatualizada: âmbar, com a data da última atualização boa à vista. */
.mkf-bba-tabela.mkf-pend-tabela tr.mkf-pend-linha--desatualizada td {
    background-color: var(--mkf-warn-soft);
}

.mkf-bba-tabela.mkf-pend-tabela td.mkf-pend-data--desatualizada {
    color: var(--mkf-warn);
    font-weight: 600;
}

.mkf-pend-pill {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 8px;
    border: 1px solid var(--mkf-line);
    border-radius: 999px;
    background: var(--mkf-surface-2);
    color: var(--mkf-text-2);
    font-size: 11px;
    white-space: nowrap;
}

.mkf-pend-pill.mkf-pend-pill--candidato {
    border-color: var(--mkf-brand);
    background: var(--mkf-brand-soft);
    color: var(--mkf-brand);
}

.mkf-pend-pill.mkf-pend-pill--aprovado {
    border-color: var(--mkf-win);
    color: var(--mkf-win);
}

.mkf-pend-pill.mkf-pend-pill--desatualizado {
    border-color: var(--mkf-warn);
    background: var(--mkf-warn-soft);
    color: var(--mkf-warn);
}

.mkf-pend-barra {
    position: sticky;
    bottom: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--mkf-space-2) var(--mkf-space-3);
    margin-top: var(--mkf-space-3);
    padding: 10px 14px;
    border: 1px solid var(--mkf-line);
    border-radius: var(--mkf-radius-panel);
    background: var(--mkf-surface);
    box-shadow: 0 -4px 12px rgba(0, 0, 0, .06);
}

.mkf-pend-barra .mkf-pend-barra-n {
    color: var(--mkf-text);
    font-size: 13px;
}

.mkf-pend-barra .mkf-pend-barra-nota {
    color: var(--mkf-text-3);
    font-size: 12px;
}

.mud-dialog-container .mud-dialog.mkf-aprovar-dialog {
    border: 1px solid var(--mkf-line);
    border-radius: var(--mkf-radius-panel);
    background: var(--mkf-surface);
    color: var(--mkf-text);
}

.mkf-aprovar-dialog .mkf-aprovar-head .mkf-aprovar-titulo {
    margin: 4px 0 10px;
    font-size: 17px;
    font-weight: 600;
}

.mkf-aprovar-dialog .mkf-aprovar-codigos {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    max-height: 96px;
    overflow-y: auto;
    margin-bottom: 12px;
}

.mkf-aprovar-dialog .mkf-aprovar-codigos .mkf-aprovar-codigo,
.mkf-aprovar-dialog .mkf-aprovar-codigos .mkf-aprovar-mais {
    padding: 1px 7px;
    border: 1px solid var(--mkf-line);
    border-radius: 4px;
    background: var(--mkf-surface-2);
    font-family: var(--mkf-mono-numeric-family);
    font-size: 12px;
}

.mkf-aprovar-dialog .mkf-aprovar-lista {
    margin: 0 0 12px;
    padding-left: 20px;
    color: var(--mkf-text);
    font-size: 13px;
    line-height: 1.5;
}

.mkf-aprovar-dialog .mkf-aprovar-lista li + li {
    margin-top: 6px;
}

.mkf-aprovar-dialog .mkf-aprovar-nota {
    margin: 0;
    padding: 8px 10px;
    border-left: 3px solid var(--mkf-warn);
    background: var(--mkf-warn-soft);
    color: var(--mkf-text-2);
    font-size: 12px;
}

.mud-dialog-container .mud-dialog.mkf-aprovar-dialog .mud-dialog-actions {
    gap: var(--mkf-space-2);
    padding: 0 24px 18px;
}

/* Selo do custo de catálogo (Monitor de Vendas, Monitor de Buy Box, Tabela de Custos). */
.mkf-selo-catalogo {
    display: inline-block;
    margin-right: 4px;
    padding: 0 4px;
    border: 1px solid var(--mkf-line);
    border-radius: 3px;
    color: var(--mkf-text-3);
    font-family: inherit;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .04em;
    line-height: 14px;
    text-transform: uppercase;
    vertical-align: 1px;
}

/* De-para de SKU (2026-09-15) — mesmo formato do selo "cat", texto "dp". */
.mkf-selo-catalogo.mkf-selo-depara {
    border-color: var(--mkf-line);
    color: var(--mkf-text-2);
}

.mkf-selo-catalogo.mkf-selo-catalogo--confirmar {
    border-color: var(--mkf-brand);
    color: var(--mkf-brand);
}

/* ================================================================================
   DE-PARA DE SKU (2026-09-15) — "Apontar para…", "Sugerir parecidos", aba De-para, "também atende".
   Só tokens --mkf-*; 3+ classes onde o MudBlazor tem regra própria (ele carrega DEPOIS do app.css).
   ================================================================================ */
.mkf-regra-filtros.mkf-pend-filtros .mkf-pend-filtros-acoes {
    display: flex;
    align-items: center;
    gap: var(--mkf-space-2);
}

.mkf-bba-tabela.mkf-pend-tabela th.mkf-pend-acoes,
.mkf-bba-tabela.mkf-pend-tabela td.mkf-pend-acoes {
    width: 1%;
    white-space: nowrap;
    text-align: right;
}

.mkf-bba-tabela.mkf-pend-tabela td.mkf-pend-acoes .mkf-bba-btn {
    height: 26px;
    padding: 0 10px;
    font-size: 12px;
}

.mkf-bba-tabela.mkf-pend-tabela td.mkf-depara-seta {
    width: 1%;
    color: var(--mkf-text-3);
    text-align: center;
}

.mud-dialog-container .mud-dialog.mkf-depara-dialog .mud-dialog-content {
    max-height: calc(100vh - 160px);
    overflow-y: auto;
}

.mkf-depara-dialog .mkf-depara-origem {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    margin-bottom: 6px;
}

.mkf-depara-dialog .mkf-depara-codigo {
    font-family: var(--mkf-mono-numeric-family);
    font-size: 13px;
    font-weight: 600;
    color: var(--mkf-text);
    white-space: nowrap;
}

.mkf-depara-dialog .mkf-depara-desc {
    overflow: hidden;
    min-width: 0;
    color: var(--mkf-text-2);
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mkf-depara-dialog .mkf-depara-origem .mkf-depara-desc {
    flex: 1 1 240px;
}

.mkf-depara-dialog .mkf-depara-onde,
.mkf-depara-dialog .mkf-depara-fraco,
.mkf-depara-dialog .mkf-depara-opcional {
    color: var(--mkf-text-3);
    font-size: 12px;
}

.mkf-depara-dialog .mkf-depara-explica {
    margin: 0 0 12px;
    color: var(--mkf-text-2);
    font-size: 12px;
    line-height: 1.5;
}

.mkf-depara-dialog .mkf-depara-secao {
    margin: 14px 0 6px;
    color: var(--mkf-text-3);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.mkf-depara-dialog .mkf-depara-lista {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--mkf-line);
    border-radius: var(--mkf-radius-panel);
    overflow: hidden;
}

.mkf-depara-dialog .mkf-depara-lista .mkf-depara-opcao {
    display: grid;
    grid-template-columns: 16px auto minmax(0, 1fr) auto auto auto auto;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 12px;
    border: 0;
    border-bottom: 1px solid var(--mkf-line);
    background: var(--mkf-surface);
    color: var(--mkf-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.mkf-depara-dialog .mkf-depara-lista .mkf-depara-opcao:last-child {
    border-bottom: 0;
}

.mkf-depara-dialog .mkf-depara-lista .mkf-depara-opcao:hover {
    background: var(--mkf-surface-2);
}

.mkf-depara-dialog .mkf-depara-lista .mkf-depara-opcao[aria-pressed="true"] {
    background: var(--mkf-brand-soft);
}

.mkf-depara-dialog .mkf-depara-opcao .mkf-depara-opcao-radio {
    width: 14px;
    height: 14px;
    border: 1.5px solid var(--mkf-text-3);
    border-radius: 50%;
}

.mkf-depara-dialog .mkf-depara-opcao[aria-pressed="true"] .mkf-depara-opcao-radio {
    border: 4px solid var(--mkf-brand);
}

.mkf-depara-dialog .mkf-depara-num {
    font-family: var(--mkf-mono-numeric-family);
    font-size: 12px;
    color: var(--mkf-text);
    text-align: right;
    white-space: nowrap;
}

.mkf-depara-dialog .mkf-depara-num.mkf-depara-qtd {
    color: var(--mkf-text-2);
}

.mkf-depara-dialog .mkf-depara-fonte {
    color: var(--mkf-text-3);
    font-size: 11px;
    white-space: nowrap;
}

.mkf-depara-conf {
    display: inline-flex;
    align-items: center;
    height: 18px;
    padding: 0 7px;
    border: 1px solid var(--mkf-line);
    border-radius: 999px;
    font-size: 11px;
    white-space: nowrap;
}

.mkf-depara-conf.mkf-depara-conf--alta {
    border-color: var(--mkf-win);
    color: var(--mkf-win);
}

.mkf-depara-conf.mkf-depara-conf--media {
    border-color: var(--mkf-warn);
    color: var(--mkf-warn);
}

.mkf-depara-dialog .mkf-depara-vazio {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border: 1px dashed var(--mkf-line);
    border-radius: var(--mkf-radius-panel);
    color: var(--mkf-text-3);
    font-size: 13px;
}

.mkf-depara-dialog .mkf-depara-aviso {
    margin-top: 6px;
    color: var(--mkf-warn);
    font-size: 12px;
}

.mkf-depara-dialog .mkf-depara-busca {
    display: flex;
    gap: var(--mkf-space-2);
    margin-bottom: 8px;
}

.mkf-depara-dialog .mkf-depara-busca .mkf-bba-busca {
    flex: 1 1 auto;
}

.mkf-depara-dialog .mkf-bba-busca.mkf-depara-obs {
    width: 100%;
}

.mkf-depara-dialog .mkf-depara-erro {
    margin-top: 10px;
    padding: 8px 10px;
    border-left: 3px solid var(--mkf-lose);
    background: var(--mkf-surface-2);
    color: var(--mkf-lose);
    font-size: 13px;
}

.mkf-depara-dialog .mkf-depara-contagens,
.mkf-depara-dialog .mkf-depara-ferramentas,
.mkf-depara-dialog .mkf-depara-paginas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin-bottom: 10px;
    color: var(--mkf-text-2);
    font-size: 13px;
}

.mkf-depara-dialog .mkf-depara-paginas {
    justify-content: flex-end;
    margin: 10px 0 0;
}

.mkf-depara-dialog .mkf-depara-resultado {
    margin-bottom: 10px;
    padding: 8px 10px;
    border-left: 3px solid var(--mkf-win);
    background: var(--mkf-surface-2);
    color: var(--mkf-text);
    font-size: 13px;
}

.mkf-depara-dialog .mkf-bba-tabela-wrap.mkf-depara-tabela-wrap {
    max-height: calc(100vh - 380px);
    overflow: auto;
}

.mkf-depara-dialog .mkf-depara-tabela .mkf-depara-sug {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 8px;
    max-width: 560px;
}

.mkf-bba-tabela.mkf-pend-tabela.mkf-depara-aba td .mkf-bba-trunc {
    max-width: 320px;
}

.mkf-custo-tambem-atende {
    margin-top: 2px;
    color: var(--mkf-text-3);
    font-family: var(--mkf-font-sans);
    font-size: 11px;
    white-space: nowrap;
}

.mkf-agenda-depara {
    margin-top: 2px;
    color: var(--mkf-text-2);
    font-size: 12px;
}

/* ---- Configurações → Usuários (2026-09-17) ---- */
.mkf-usuarios-legenda {
    max-width: 640px;
}

.mkf-usuarios-tag {
    display: inline-block;
    margin-left: 6px;
    padding: 0 6px;
    border: 1px solid var(--mkf-line);
    border-radius: 4px;
    color: var(--mkf-text-2);
    font-size: 11px;
    line-height: 16px;
    vertical-align: 1px;
}

.mud-table.mkf-usuarios-tabela td.mkf-usuarios-acoes {
    white-space: nowrap;
}

.mkf-usuario-perfis .mud-radio {
    align-items: flex-start;
}

/* Visualizador (2026-09-17): célula de preço/estoque só mostra o valor. */
.mkf-data-table .mkf-col-editavel .mkf-cel-edit.mkf-cel-edit--leitura {
    cursor: default;
}

.mkf-data-table .mkf-col-editavel .mkf-cel-edit.mkf-cel-edit--leitura:hover {
    background-color: transparent;
}

.mkf-data-table .mkf-col-editavel .mkf-cel-edit.mkf-cel-edit--leitura:hover .mkf-cel-edit-valor {
    text-decoration: none;
}

.mkf-aviso-leitura {
    margin: 0 0 12px;
    padding: 6px 12px;
    border: 1px solid var(--mkf-line);
    border-radius: 6px;
    background-color: var(--mkf-surface-2);
    color: var(--mkf-text-2);
    font-size: 12px;
}

/* ================================================================================
   PERGUNTAS ML (2026-09-18) — /mercadolivre/perguntas + aba Perguntas em Integrações → Mercado Livre.
   Só tokens --mkf-*; 3+ classes onde o MudBlazor tem regra própria (ele carrega DEPOIS do app.css).
   ================================================================================ */
.mkf-bba-tabela.mkf-perg-tabela {
    table-layout: fixed;
}

.mkf-bba-tabela.mkf-perg-tabela tr.mkf-perg-linha {
    cursor: pointer;
}

.mkf-bba-tabela.mkf-perg-tabela tr.mkf-perg-linha:hover td {
    background-color: var(--mkf-surface-3);
}

.mkf-bba-tabela.mkf-perg-tabela tr.mkf-perg-linha.mkf-perg-linha--aberta td {
    background-color: var(--mkf-brand-soft);
}

/* Pergunta e anúncio em duas linhas (texto + sublinha): a célula cresce além da altura padrão. */
.mkf-bba-tabela.mkf-perg-tabela td {
    height: auto;
    padding-top: 6px;
    padding-bottom: 6px;
}

.mkf-bba-tabela.mkf-perg-tabela .mkf-perg-texto {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mkf-bba-tabela.mkf-perg-tabela .mkf-bba-trunc.mkf-perg-anuncio {
    max-width: 100%;
}

.mkf-bba-tabela.mkf-perg-tabela .mkf-perg-sub {
    display: flex;
    gap: var(--mkf-space-2);
    overflow: hidden;
    color: var(--mkf-text-3);
    font-size: 11.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mkf-bba-tabela.mkf-perg-tabela .mkf-perg-sub a {
    color: var(--mkf-brand);
    text-decoration: none;
}

.mkf-bba-tabela.mkf-perg-tabela .mkf-perg-sub.mkf-perg-sub--aviso {
    display: block;
    color: var(--mkf-warn);
}

.mkf-bba-tabela.mkf-perg-tabela .mkf-perg-sub.mkf-perg-sub--erro {
    display: block;
    color: var(--mkf-lose);
}

.mkf-pend-pill.mkf-perg-pill--complexa {
    border-color: var(--mkf-cat-purple);
    color: var(--mkf-cat-purple);
}

/* "> td": só a célula do painel. Sem o ">", o padding 0 alcançava tabelas ANINHADAS no painel (lista de documentos
   Vonder, 2026-09-18: "Caracteres" colava em "Data"). */
.mkf-bba-tabela.mkf-perg-tabela tr.mkf-perg-painel-linha > td {
    padding: 0;
    background-color: var(--mkf-surface);
}

.mkf-perg-painel {
    display: flex;
    flex-direction: column;
    gap: var(--mkf-space-2);
    padding: var(--mkf-space-3) var(--mkf-space-4) var(--mkf-space-4);
    border-left: 3px solid var(--mkf-brand);
}

.mkf-perg-painel p {
    margin: 2px 0 0;
    white-space: pre-wrap;
}

.mkf-perg-rotulo {
    color: var(--mkf-text-2);
    font-size: var(--mkf-type-label-size);
    font-weight: 600;
}

.mkf-perg-motivo {
    padding: 6px 10px;
    border: 1px solid var(--mkf-warn);
    border-radius: var(--mkf-radius-control);
    background: var(--mkf-warn-soft);
    color: var(--mkf-text);
}

.mkf-perg-motivo.mkf-perg-motivo--erro {
    border-color: var(--mkf-lose);
    background: var(--mkf-lose-soft);
}

.mkf-perg-nota {
    color: var(--mkf-text-2);
    font-size: 12px;
}

.mkf-perg-textarea {
    width: 100%;
    min-height: 88px;
    padding: 8px 10px;
    border: 1px solid var(--mkf-line);
    border-radius: var(--mkf-radius-control);
    background: var(--mkf-surface);
    color: var(--mkf-text);
    font-family: var(--mkf-font-sans);
    font-size: var(--mkf-type-body-size);
    line-height: 1.45;
    resize: vertical;
}

.mkf-perg-textarea:focus {
    border-color: var(--mkf-brand);
    outline: 2px solid var(--mkf-brand-soft);
}

.mkf-perg-contador {
    color: var(--mkf-text-3);
    font-size: 11.5px;
}

.mkf-perg-contador.mkf-perg-contador--erro {
    color: var(--mkf-lose);
}

.mkf-perg-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mkf-space-2);
}

.mkf-perg-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    color: var(--mkf-text-3);
    font-size: 11.5px;
}

.mkf-perg-link {
    padding: 0;
    border: 0;
    background: none;
    color: var(--mkf-brand);
    font: inherit;
    text-decoration: none;
    cursor: pointer;
}

.mkf-page-acts .mkf-perg-link {
    align-self: center;
    font-size: var(--mkf-type-body-size);
}

.mkf-perg-ficha {
    max-height: 320px;
    margin: 0;
    padding: 10px 12px;
    overflow: auto;
    border: 1px solid var(--mkf-line-soft);
    border-radius: var(--mkf-radius-control);
    background: var(--mkf-surface-2);
    color: var(--mkf-text-2);
    font-family: var(--mkf-font-mono);
    font-size: 11.5px;
    white-space: pre-wrap;
}

/* Interruptor "Modo automático" no cabeçalho — <button aria-pressed>, sem MudSwitch (Shared/ChaveModoAutomatico).
   2026-09-24: não depende mais do contêiner (.mkf-page-acts) — no chat ele fica em .mkf-page-head-acoes e perdia a
   caixa. E pinta aria-checked também: a cópia do chat usava aria-checked e a chave aparecia SEMPRE desligada. */
button.mkf-perg-auto {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: var(--mkf-control-height);
    padding: 0 10px;
    border: 1px solid var(--mkf-line);
    border-radius: var(--mkf-radius-control);
    background: var(--mkf-surface);
    color: var(--mkf-text);
    font: inherit;
    font-size: var(--mkf-type-body-size);
    cursor: pointer;
}

button.mkf-perg-auto:disabled {
    color: var(--mkf-text-3);
    cursor: not-allowed;
}

.mkf-perg-auto .mkf-perg-auto-trilho {
    position: relative;
    width: 28px;
    height: 16px;
    border-radius: 999px;
    background: var(--mkf-line);
    transition: background-color 0.15s;
}

.mkf-perg-auto .mkf-perg-auto-bola {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--mkf-surface);
    transition: transform 0.15s;
}

.mkf-perg-auto[aria-pressed="true"] .mkf-perg-auto-trilho,
.mkf-perg-auto[aria-checked="true"] .mkf-perg-auto-trilho {
    background: var(--mkf-win);
}

.mkf-perg-auto[aria-pressed="true"] .mkf-perg-auto-bola,
.mkf-perg-auto[aria-checked="true"] .mkf-perg-auto-bola {
    transform: translateX(12px);
}

.mkf-perg-auto .mkf-perg-auto-estado {
    color: var(--mkf-text-2);
}

.mkf-perg-auto[aria-pressed="true"] .mkf-perg-auto-estado {
    color: var(--mkf-win);
    font-weight: 600;
}

/* Aba Perguntas (Configurações). */
.mkf-perg-cfg-linha {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: var(--mkf-space-3);
    color: var(--mkf-text);
    font-size: var(--mkf-type-body-size);
    cursor: pointer;
}

.mkf-perg-cfg-linha input[type="checkbox"] {
    margin-top: 3px;
    accent-color: var(--mkf-brand);
}

.mkf-perg-cfg-campo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--mkf-space-2);
    margin-bottom: var(--mkf-space-4);
    font-size: var(--mkf-type-body-size);
}

.mkf-perg-cfg-campo.mkf-perg-cfg-campo--bloco {
    flex-direction: column;
    align-items: stretch;
}

.mkf-perg-cfg-campo label {
    color: var(--mkf-text-2);
    font-weight: 600;
}

.mkf-perg-cfg-num {
    width: 72px;
    height: var(--mkf-control-height);
    padding: 0 8px;
    border: 1px solid var(--mkf-line);
    border-radius: var(--mkf-radius-control);
    background: var(--mkf-surface);
    color: var(--mkf-text);
    font-family: var(--mkf-mono-numeric-family);
    font-variant-numeric: var(--mkf-mono-numeric-variant);
}

.mkf-rodape-info.mkf-perg-rodape {
    padding: var(--mkf-space-2) var(--mkf-space-3);
    border-top: 1px solid var(--mkf-line-soft);
}

/* ================================================================================
   PERGUNTAS ML — exclusão, saldo estimado e copiar SKU (2026-09-18).
   ================================================================================ */

/* ---- Saldo estimado no cabeçalho: continuação do "custo do mês" (mesma fonte mono, mesma cor),
   dentro do .mkf-perg-meta-grupo (definido no fim deste bloco). ---- */
.mkf-page-head .mkf-pop-anchor.mkf-perg-saldo-anchor {
    align-self: baseline;
}

.mkf-page-head .mkf-perg-saldo-anchor .mkf-perg-saldo {
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    text-decoration: underline dotted var(--mkf-text-3);
    text-underline-offset: 3px;
}

.mkf-page-head .mkf-perg-saldo-anchor .mkf-perg-saldo:hover {
    color: var(--mkf-text);
}

/* Abaixo de 20% do crédito, menos de 100 perguntas ou erro de crédito da Anthropic: alerta (não erro). */
.mkf-page-head .mkf-perg-saldo-anchor .mkf-perg-saldo.mkf-perg-saldo--alerta {
    color: var(--mkf-warn);
    text-decoration-color: var(--mkf-warn);
}

.mkf-perg-saldo-anchor .mkf-pop.mkf-perg-saldo-pop {
    width: 340px;
    white-space: normal;
}

.mkf-perg-saldo-pop .mkf-perg-saldo-linhas {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 6px var(--mkf-space-3);
    padding: 12px 13px;
    color: var(--mkf-text-2);
    font-size: 12.5px;
}

.mkf-page-head .mkf-perg-saldo .mkf-perg-saldo-num,
.mkf-perg-saldo-pop .mkf-perg-saldo-linhas .mkf-perg-saldo-num {
    font-family: var(--mkf-mono-numeric-family);
    font-variant-numeric: var(--mkf-mono-numeric-variant);
    white-space: nowrap;
}

.mkf-perg-saldo-pop .mkf-perg-saldo-linhas .mkf-perg-saldo-num {
    text-align: right;
    color: var(--mkf-text);
}

.mkf-perg-saldo-pop .mkf-perg-saldo-linhas .mkf-perg-saldo-sub {
    margin-left: 4px;
    color: var(--mkf-text-3);
    font-size: 11px;
}

.mkf-perg-saldo-pop .mkf-perg-saldo-nota {
    margin: 0;
    padding: 0 13px 12px;
    color: var(--mkf-text-3);
    font-size: 11.5px;
    line-height: 1.4;
}

.mkf-perg-saldo-pop .mkf-pop-foot .mkf-bba-btn {
    text-decoration: none;
}

.mkf-pend-aviso .mkf-perg-saldo-eco {
    color: var(--mkf-warn);
}

/* ---- Coluna de seleção ---- */
.mkf-bba-tabela.mkf-perg-tabela th.mkf-perg-sel,
.mkf-bba-tabela.mkf-perg-tabela td.mkf-perg-sel {
    padding-left: 10px;
    padding-right: 0;
    cursor: default;
}

.mkf-bba-tabela.mkf-perg-tabela .mkf-perg-sel input[type="checkbox"] {
    width: 15px;
    height: 15px;
    margin: 0;
    accent-color: var(--mkf-brand);
    cursor: pointer;
}

.mkf-bba-tabela.mkf-perg-tabela .mkf-perg-sel input[type="checkbox"]:disabled {
    cursor: default;
}

/* ---- Barra de seleção / progresso da exclusão ---- */
.mkf-perg-selbar {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: var(--mkf-control-height);
    margin-bottom: var(--mkf-space-3);
    padding: 0 11px;
    border: 1px solid var(--mkf-line);
    border-radius: var(--mkf-radius-control);
    background-color: var(--mkf-surface-2);
    color: var(--mkf-text-2);
    font-size: 13px;
}

.mkf-perg-selbar .mkf-perg-selbar-n {
    font-family: var(--mkf-font-mono);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--mkf-text);
}

.mkf-perg-selbar .mkf-perg-selbar-sep {
    color: var(--mkf-text-3);
}

.mkf-perg-selbar .mkf-link-btn.mkf-perg-link-perigo {
    color: var(--mkf-lose);
}

.mkf-perg-selbar .mkf-perg-selbar-trilho {
    flex: 0 1 220px;
    height: 6px;
    margin-left: var(--mkf-space-2);
    border-radius: 999px;
    background-color: var(--mkf-surface-3);
    overflow: hidden;
}

.mkf-perg-selbar .mkf-perg-selbar-barra {
    display: block;
    height: 100%;
    background-color: var(--mkf-brand);
    transition: width 200ms ease;
}

.mkf-pend-aviso.mkf-perg-resumo-exclusao .mkf-perg-falhas {
    margin: 6px 0 0;
    padding-left: 18px;
    font-size: 12.5px;
}

.mkf-pend-aviso.mkf-perg-resumo-exclusao .mkf-perg-falha-texto {
    display: inline-block;
    max-width: 420px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
    color: var(--mkf-text);
}

/* ---- Ações da linha: Responder + (alerta) + lixeira ---- */
.mkf-bba-tabela.mkf-perg-tabela .mkf-perg-acoes-linha {
    display: flex;
    align-items: center;
    gap: 6px;
}

.mkf-bba-tabela.mkf-perg-tabela .mkf-perg-acoes-linha .mkf-perg-lixeira {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--mkf-control-height);
    height: var(--mkf-control-height);
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--mkf-radius-control);
    background: none;
    color: var(--mkf-lose);
    cursor: pointer;
}

.mkf-bba-tabela.mkf-perg-tabela .mkf-perg-acoes-linha .mkf-perg-lixeira:hover:not(:disabled) {
    border-color: var(--mkf-line);
    background-color: var(--mkf-lose-soft);
}

.mkf-bba-tabela.mkf-perg-tabela .mkf-perg-acoes-linha .mkf-perg-lixeira:disabled {
    opacity: 0.45;
    cursor: default;
}

.mkf-bba-tabela.mkf-perg-tabela .mkf-perg-acoes-linha .mkf-perg-exclusao-erro {
    display: inline-flex;
    color: var(--mkf-warn);
    cursor: help;
}

/* ---- Linha excluída: continua na lista como registro, esmaecida por inteiro (sem riscar o texto —
   o administrador precisa conseguir ler o que foi apagado). ---- */
.mkf-bba-tabela.mkf-perg-tabela tr.mkf-perg-linha.mkf-perg-linha--excluida td {
    opacity: var(--mkf-opacity-inativo);
}

.mkf-bba-tabela.mkf-perg-tabela .mkf-perg-classif {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

.mkf-pend-pill.mkf-perg-pill--excluida {
    border-color: var(--mkf-idle);
    background: var(--mkf-idle-soft);
    color: var(--mkf-idle);
    cursor: help;
}

/* ---- Diálogo de exclusão ---- */
.mkf-perg-excluir-dialog .mkf-perg-excluir-texto {
    margin: 8px 0 12px;
    color: var(--mkf-text-2);
    line-height: 1.45;
}

.mkf-perg-excluir-dialog .mkf-perg-excluir-lista {
    margin: 0;
    padding-left: 18px;
    color: var(--mkf-text);
    font-size: 13px;
}

.mkf-perg-excluir-dialog .mkf-perg-excluir-lista li {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mkf-perg-excluir-dialog .mkf-perg-excluir-mais {
    margin: 4px 0 0 18px;
    color: var(--mkf-text-3);
    font-size: 12.5px;
}

.mud-dialog .mud-dialog-actions .mkf-bba-btn.mkf-perg-btn-perigo {
    border-color: var(--mkf-lose);
    background-color: transparent;
    color: var(--mkf-lose);
}

.mud-dialog .mud-dialog-actions .mkf-bba-btn.mkf-perg-btn-perigo:hover {
    background-color: var(--mkf-lose-soft);
}

/* ---- Copiar SKU (SkuComCopia) na sublinha do anúncio — mesma receita do Monitor de Vendas: botão
   encolhido à altura do texto (11,5px mono), invisível fora do hover mas OCUPANDO o espaço, então a
   linha não pula com o mouse. Cor e fonte = as de antes (sublinha em --mkf-text-3, mono tabular). ---- */
.mkf-bba-tabela.mkf-perg-tabela .mkf-perg-sub .mkf-sku-cell.mkf-perg-sku {
    gap: 3px;
    min-width: 0;
}

.mkf-bba-tabela.mkf-perg-tabela .mkf-perg-sub .mkf-perg-sku .mkf-sku-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: inherit;
    font-family: var(--mkf-mono-numeric-family);
    font-variant-numeric: var(--mkf-mono-numeric-variant);
    letter-spacing: var(--mkf-mono-numeric-tracking);
}

.mkf-bba-tabela.mkf-perg-tabela .mkf-perg-sub .mkf-perg-sku > div {
    display: flex;
    line-height: 0;
}

.mkf-bba-tabela.mkf-perg-tabela .mkf-perg-sub .mkf-perg-sku .mkf-sku-copy-btn {
    padding: 0;
    width: 14px;
    height: 14px;
    color: var(--mkf-text-2);
}

.mkf-bba-tabela.mkf-perg-tabela .mkf-perg-sub .mkf-perg-sku .mkf-sku-copy-btn .mud-icon-root {
    font-size: 13px;
    width: 13px;
    height: 13px;
}

.mkf-bba-tabela.mkf-perg-tabela tr.mkf-perg-linha:hover .mkf-perg-sub .mkf-perg-sku .mkf-sku-copy-btn {
    opacity: 1;
}

/* ---- Configuração: crédito ---- */
.mkf-perg-cfg-credito {
    display: flex;
    align-items: center;
    gap: var(--mkf-space-3);
}

.mkf-perg-cfg-num.mkf-perg-cfg-num--credito {
    width: 120px;
}

.mkf-perg-cfg-erro {
    color: var(--mkf-lose);
    font-size: 12.5px;
}

/* Meta + saldo: um item só do .mkf-page-head, que encolhe e quebra POR DENTRO (base pequena, cresce até
   o que couber). Sem isso, a 1680 px o conjunto não cabia e as ações do cabeçalho iam pra 2ª linha. */
.mkf-page-head .mkf-perg-meta-grupo {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 6px;
    row-gap: 2px;
    flex: 1 1 280px;
    min-width: 0;
    margin-bottom: 3px;
}

.mkf-page-head .mkf-perg-meta-grupo .mkf-page-meta {
    margin-bottom: 0;
}

/* ================================================================================
   DOCUMENTOS VONDER (2026-09-18) — lista de documentos por código (modal do Catálogo Vonder e seção Fontes das
   Perguntas ML) + seção Fontes do painel da pergunta. Só tokens --mkf-*.
   ================================================================================ */
.mkf-docv {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: var(--mkf-space-2) 0 var(--mkf-space-4);
    padding: 10px 12px;
    border: 1px solid var(--mkf-line-soft);
    border-radius: var(--mkf-radius-panel);
    background-color: var(--mkf-surface);
    font-size: 13px;
}

.mkf-docv .mkf-docv-head {
    display: flex;
    align-items: center;
    gap: var(--mkf-space-2);
    min-height: 28px;
}

.mkf-docv .mkf-docv-titulo {
    font-size: var(--mkf-type-header-size);
    font-weight: var(--mkf-type-header-weight);
    letter-spacing: var(--mkf-type-header-tracking);
    text-transform: uppercase;
    color: var(--mkf-text-3);
}

.mkf-docv .mkf-docv-head .mkf-bba-btn.mkf-docv-buscar {
    margin-left: auto;
    height: 28px;
    padding: 0 10px;
    font-size: 12.5px;
}

.mkf-pend-pill.mkf-docv-aguardando {
    border-color: var(--mkf-fight);
    background: var(--mkf-fight-soft);
    color: var(--mkf-fight);
}

.mkf-docv .mkf-docv-nota {
    color: var(--mkf-text-2);
}

.mkf-docv .mkf-docv-nota.mkf-docv-nota--erro {
    color: var(--mkf-lose);
}

.mkf-docv .mkf-docv-tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}

.mkf-docv .mkf-docv-tabela th {
    padding: 4px 8px;
    border-bottom: 1px solid var(--mkf-line);
    text-align: left;
    font-size: var(--mkf-type-header-size);
    font-weight: var(--mkf-type-header-weight);
    letter-spacing: var(--mkf-type-header-tracking);
    text-transform: uppercase;
    color: var(--mkf-text-3);
}

.mkf-docv .mkf-docv-tabela td {
    padding: 5px 8px;
    border-bottom: 1px solid var(--mkf-line-soft);
    color: var(--mkf-text);
    vertical-align: top;
}

.mkf-docv .mkf-docv-tabela tr.mkf-docv-linha--fora td {
    color: var(--mkf-text-3);
}

.mkf-docv .mkf-docv-tabela .mkf-docv-arquivo a {
    color: var(--mkf-brand);
    text-decoration: none;
}

.mkf-docv .mkf-docv-tabela .mkf-docv-arquivo a:hover {
    text-decoration: underline;
}

.mkf-docv .mkf-docv-tabela .mkf-docv-situacao {
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---- Seção Fontes no painel da pergunta ---- */
.mkf-perg-painel .mkf-perg-fontes {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: var(--mkf-space-2);
    padding-top: var(--mkf-space-2);
    border-top: 1px solid var(--mkf-line-soft);
}

.mkf-perg-fontes .mkf-perg-fontes-lista {
    margin: 0;
    padding-left: 18px;
    color: var(--mkf-text-2);
    font-size: 13px;
}

.mkf-perg-fontes .mkf-perg-fontes-lista strong {
    color: var(--mkf-text);
    font-weight: 600;
}

.mkf-pend-pill.mkf-perg-fontes-regerada {
    margin-left: 6px;
    border-color: var(--mkf-win);
    background: var(--mkf-win-soft);
    color: var(--mkf-win);
}

.mkf-perg-fontes .mkf-perg-fontes-orientacao {
    padding: 6px 10px;
    border-left: 3px solid var(--mkf-fight);
    background-color: var(--mkf-fight-soft);
    color: var(--mkf-text);
    font-size: 12.5px;
}

.mkf-perg-fontes .mkf-perg-fontes-blocos {
    margin: 0;
    padding-left: 22px;
    font-size: 12.5px;
    color: var(--mkf-text-2);
}

.mkf-perg-fontes .mkf-perg-fontes-blocos li {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: help;
}

.mkf-perg-fontes .mkf-perg-fontes-origem {
    margin-right: 6px;
    font-weight: 600;
    color: var(--mkf-text);
}

.mkf-perg-fontes .mkf-perg-fontes-blocos .mkf-bba-mono {
    margin-right: 6px;
    color: var(--mkf-text-3);
}

.mkf-perg-painel .mkf-perg-fontes .mkf-docv {
    margin-bottom: 0;
}

/* A lista de documentos também mora DENTRO da tabela de perguntas (painel da linha): as regras .mkf-bba-tabela th/td
   (altura de linha, zebra, fundo do cabeçalho) são de descendente e alcançam a tabela aninhada — reset aqui com
   especificidade maior que a delas. */
.mkf-bba-tabela.mkf-perg-tabela .mkf-docv table.mkf-docv-tabela th,
.mkf-bba-tabela.mkf-perg-tabela .mkf-docv table.mkf-docv-tabela td {
    height: auto;
    padding: 5px 8px;
    background: none;
    border-bottom: 1px solid var(--mkf-line-soft);
    font-size: 12.5px;
    vertical-align: top;
}

.mkf-bba-tabela.mkf-perg-tabela .mkf-docv table.mkf-docv-tabela th {
    border-bottom-color: var(--mkf-line);
    color: var(--mkf-text-3);
    font-size: var(--mkf-type-header-size);
}

.mkf-bba-tabela.mkf-perg-tabela .mkf-docv table.mkf-docv-tabela tr.mkf-docv-linha--fora td {
    color: var(--mkf-text-3);
}

/* Chip "Aguardando documentos" na sublinha da pergunta (na coluna Classif. ele invadia Confiança). */
.mkf-bba-tabela.mkf-perg-tabela .mkf-perg-sub .mkf-pend-pill.mkf-docv-aguardando {
    height: 18px;
    font-size: 10.5px;
}

/* ================================================================================
   PRATELEIRA VONDER — "Atualizar este produto" (2026-09-18). Coluna Ações travada no fim, 56 px declarados (a tabela é
   layout automático, mas coluna de ação sem largura dançava com o conteúdo). Botão encolhido a 28 px: o MudIconButton
   Small de fábrica (34 px + padding) esticaria a linha na densidade Compacta (34 px). 3+ classes: o MudBlazor carrega
   depois do app.css.
   ================================================================================ */
.mkf-data-table .mud-table-head th.mkf-col-prat-acoes,
.mkf-data-table .mud-table-body td.mkf-col-prat-acoes {
    width: 56px;
    min-width: 56px;
    max-width: 56px;
    padding-left: 4px;
    padding-right: 4px;
    text-align: center;
}

.mkf-data-table .mud-table-body .mkf-prat-acao {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

.mkf-data-table .mud-table-body .mkf-prat-acao .mkf-prat-acao-alvo {
    display: inline-flex;
}

.mkf-data-table .mud-table-body .mkf-prat-acao .mud-icon-button.mkf-prat-acao-btn {
    width: 28px;
    height: 28px;
    padding: 4px;
    color: var(--mkf-text-2);
}

.mkf-data-table .mud-table-body .mkf-prat-acao .mud-icon-button.mkf-prat-acao-btn:hover:not(:disabled) {
    color: var(--mkf-brand);
}

/* Desabilitado não recebe o mouse — o hover cai no <span> em volta, que abre o tooltip com o porquê. */
.mkf-data-table .mud-table-body .mkf-prat-acao .mud-icon-button.mkf-prat-acao-btn:disabled {
    pointer-events: none;
    color: var(--mkf-text-3);
}

.mkf-data-table .mud-table-body .mkf-prat-acao .mkf-prat-acao-spinner {
    width: 18px !important;
    height: 18px !important;
    color: var(--mkf-brand);
}

/* ---- Diálogo do resultado ---- */
.mkf-prat-result .mkf-prat-result-secao {
    margin: 14px 0 6px;
    font-size: var(--mkf-type-header-size);
    font-weight: var(--mkf-type-header-weight);
    letter-spacing: var(--mkf-type-header-tracking);
    text-transform: uppercase;
    color: var(--mkf-text-3);
}

.mkf-prat-result .mkf-prat-result-msg {
    margin: 4px 0;
    color: var(--mkf-text);
    line-height: 1.45;
}

.mkf-prat-result .mkf-prat-result-msg.mkf-prat-result-msg--ok {
    padding: 8px 10px;
    border-left: 3px solid var(--mkf-fight);
    background-color: var(--mkf-fight-soft);
}

.mkf-prat-result .mkf-prat-result-msg.mkf-prat-result-msg--alerta {
    padding: 8px 10px;
    border-left: 3px solid var(--mkf-warn);
    background-color: var(--mkf-warn-soft);
}

.mkf-prat-result .mkf-prat-result-msg.mkf-prat-result-msg--erro {
    padding: 8px 10px;
    border-left: 3px solid var(--mkf-lose);
    background-color: var(--mkf-lose-soft);
}

.mkf-prat-result .mkf-prat-result-nota {
    margin: 4px 0;
    color: var(--mkf-text-2);
    font-size: 12.5px;
}

.mkf-prat-result .mkf-prat-result-valor {
    font-family: var(--mkf-mono-numeric-family);
    font-variant-numeric: var(--mkf-mono-numeric-variant);
}

.mkf-prat-result .mkf-prat-result-tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}

.mkf-prat-result .mkf-prat-result-tabela th {
    padding: 4px 8px;
    border-bottom: 1px solid var(--mkf-line);
    text-align: left;
    font-size: var(--mkf-type-header-size);
    font-weight: var(--mkf-type-header-weight);
    letter-spacing: var(--mkf-type-header-tracking);
    text-transform: uppercase;
    color: var(--mkf-text-3);
}

.mkf-prat-result .mkf-prat-result-tabela td {
    padding: 5px 8px;
    border-bottom: 1px solid var(--mkf-line-soft);
    color: var(--mkf-text);
}

.mkf-prat-result .mkf-prat-result-rodape {
    margin: 16px 0 0;
    padding-top: 8px;
    border-top: 1px solid var(--mkf-line-soft);
    color: var(--mkf-text-3);
    font-size: 12px;
}

/* ================================================================================
   SHOPEE (2026-09-18, passo 1 — conexão + Anúncios Shopee)
   ================================================================================ */

/* Aba Conexão: rótulo/valor em grade de 2 colunas. */
.mkf-shopee-conexao-dados {
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: var(--mkf-space-4);
    row-gap: var(--mkf-space-1);
    font-size: 13px;
    color: var(--mkf-text);
}

.mkf-shopee-conexao-dados .mkf-shopee-conexao-rotulo {
    color: var(--mkf-text-3);
}

/* Validade da Partner Key do APP — amarelo com < 30 dias, vermelho vencida. Informação com borda à esquerda,
   não um alerta gritante: a ação é de quem administra o servidor. */
.mkf-shopee-aviso {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--mkf-space-2) var(--mkf-space-3);
    border-left: 3px solid var(--mkf-warn);
    border-radius: 4px;
    background-color: var(--mkf-warn-soft);
    color: var(--mkf-text);
    font-size: 13px;
}

.mkf-shopee-aviso.mkf-shopee-aviso--erro {
    border-left-color: var(--mkf-lose);
    background-color: var(--mkf-lose-soft);
}

.mkf-shopee-aviso .mkf-shopee-aviso-titulo {
    font-weight: 600;
}

/* Linha de aviso dentro do card do hub de Integrações. */
.mkf-shopee-aviso-card {
    display: block;
    font-size: 12px;
    font-weight: 600;
}

.mkf-shopee-aviso-card.mkf-shopee-aviso--warn {
    color: var(--mkf-warn);
}

.mkf-shopee-aviso-card.mkf-shopee-aviso--erro {
    color: var(--mkf-lose);
}

.mkf-shopee-mono {
    font-family: var(--mkf-font-mono);
    font-variant-numeric: tabular-nums;
}

/* Anúncios Shopee — cabeçalho: nome da loja ao lado da meta de sincronização, mesma linha-base. */
.mkf-page-head .mkf-shopee-head-loja {
    font-size: 12px;
    color: var(--mkf-text-2);
    padding-bottom: 3px;
}

/* Progresso "1.234 de 6.433" dentro do botão primário. */
.mkf-page-acts .mud-button-root .mkf-shopee-progresso {
    margin-left: var(--mkf-space-2);
    font-size: 12px;
    opacity: 0.9;
}

/* Produto/Variação numa linha só, com reticências (o title mostra o texto inteiro). */
.mkf-shopee-tabela .mud-table-body .mkf-shopee-produto {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---- Anúncios Shopee: custo e lucro (2026-09-19) -------------------------------------------------------------
   Três classes em tudo que precisa vencer o MudBlazor (o CSS dele carrega depois deste). Regra de cor do design
   system: lucro >= 0 sem cor, < 0 em --mkf-lose, "—" em --mkf-text-3, nunca verde. */
.mkf-shopee-tabela .mud-table-body .mkf-shopee-celula-btn {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    width: 100%;
    padding: 0;
    border: none;
    background: none;
    color: inherit;
    font: inherit;
    text-align: right;
    cursor: pointer;
}

.mkf-shopee-tabela .mud-table-body .mkf-shopee-celula-btn:hover > span:first-child {
    text-decoration: underline dotted var(--mkf-text-3);
    text-underline-offset: 3px;
}

.mkf-shopee-tabela .mud-table-body .mkf-shopee-neg {
    color: var(--mkf-lose);
}

.mkf-shopee-tabela .mud-table-body .mkf-shopee-faixa {
    color: var(--mkf-text-2);
}

.mkf-shopee-tabela .mud-table-body .mkf-shopee-marca {
    margin-right: 4px;
}

/* Promoção ativa: ponto discreto antes do preço (informação, não alarme). */
.mkf-shopee-tabela .mud-table-body .mkf-shopee-promo {
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 5px;
    border-radius: 50%;
    background-color: var(--mkf-brand);
    vertical-align: middle;
}

/* Modal Custo & Lucro da Shopee */
.mkf-shopee-dialog-produto {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
    margin-bottom: var(--mkf-space-2);
    font-size: var(--mkf-type-body-size);
}

.mkf-shopee-dialog-produto .mkf-shopee-dialog-nome {
    font-weight: 600;
    color: var(--mkf-text);
}

.mkf-shopee-dialog-produto .mkf-shopee-dialog-var {
    color: var(--mkf-text-2);
}

.mkf-lucro-memoria .mkf-lucro-memoria-val.mkf-shopee-memoria-faixa {
    color: var(--mkf-text-2);
}

/* Anúncios Shopee: até 10 contadores (6 de status + Prejuízo, Sem cálculo, Faixa morta, Vai p/ prejuízo). Com o
   mínimo padrão de 140px o décimo quebrava sozinho numa linha de largura inteira. */
.mkf-counter-row.mkf-shopee-contadores .mkf-counter {
    min-width: 112px;
    flex-basis: 112px;
    padding-left: var(--mkf-space-3);
    padding-right: var(--mkf-space-3);
}

.mkf-shopee-dialog-produto .mkf-shopee-dialog-sku {
    display: inline-flex;
}

.mkf-shopee-dialog-produto .mkf-shopee-dialog-sku > div {
    display: inline-flex;
    align-items: center;
    width: auto;
}

/* ==========================================================================
   Chat da Shopee (2026-09-22) — caixa de entrada com IA, /shopee/chat.
   Duas colunas: lista (360 px) e conversa. Sem hex literal: só tokens --mkf-*.
   ========================================================================== */

/* Contadores = filtros. Número em mono (regra do Sistema de Design: todo número em mono) e
   ponto de estado na MESMA escala de cor das outras telas. */
.mkf-chat-contadores {
    display: flex;
    gap: var(--mkf-space-2);
    flex-wrap: wrap;
    margin-bottom: var(--mkf-space-4);
}

.mkf-chat-cont {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: var(--mkf-control-height);
    padding: 0 12px;
    border: 1px solid var(--mkf-line);
    border-radius: var(--mkf-radius-control);
    background-color: var(--mkf-surface);
    color: var(--mkf-text-2);
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
}

.mkf-chat-cont:hover:not(:disabled) {
    background-color: var(--mkf-surface-2);
}

.mkf-chat-cont--on {
    background-color: var(--mkf-surface-2);
    border-color: var(--mkf-brand);
    color: var(--mkf-text);
}

.mkf-chat-cont-rot {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.mkf-chat-cont-n {
    font-family: var(--mkf-mono-numeric-family);
    font-size: var(--mkf-mono-numeric-size);
    font-weight: 500;
    font-variant-numeric: var(--mkf-mono-numeric-variant);
    color: var(--mkf-text);
}

.mkf-chat-cont .mkf-chat-cont-n.mkf-chat-cont-n--zero { color: var(--mkf-text-3); }
.mkf-chat-cont .mkf-chat-cont-n.mkf-chat-cont-n--lose { color: var(--mkf-lose); }

.mkf-chat-cont .mkf-chat-cont-extra {
    margin-left: -4px;
    font-family: var(--mkf-mono-numeric-family);
    font-size: 11.5px;
    color: var(--mkf-text-3);
}

.mkf-chat-ponto {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: var(--mkf-idle);
    flex: 0 0 auto;
}

.mkf-chat-ponto--win { background-color: var(--mkf-win); }
.mkf-chat-ponto--warn { background-color: var(--mkf-warn); }
.mkf-chat-ponto--lose { background-color: var(--mkf-lose); }
.mkf-chat-ponto--fight { background-color: var(--mkf-fight); }
.mkf-chat-ponto--idle { background-color: var(--mkf-idle); }

.mkf-chat-corpo {
    display: grid;
    grid-template-columns: 360px minmax(0, 1fr);
    gap: var(--mkf-space-4);
    align-items: start;
}

/* ---- Lista ---- */
.mkf-chat-lista {
    border: 1px solid var(--mkf-line);
    border-radius: var(--mkf-radius-surface);
    background-color: var(--mkf-surface);
    overflow: hidden;
}

.mkf-chat-busca {
    display: flex;
    gap: 8px;
    padding: 10px;
    border-bottom: 1px solid var(--mkf-line-soft);
}

.mkf-chat-busca .mkf-chat-ordem {
    flex: 0 0 auto;
    height: var(--mkf-control-height);
    padding: 0 6px;
    border: 1px solid var(--mkf-line);
    border-radius: var(--mkf-radius-control);
    background-color: var(--mkf-surface-2);
    color: var(--mkf-text-2);
    font-family: inherit;
    font-size: 12.5px;
}

.mkf-chat-busca input {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    height: var(--mkf-control-height);
    padding: 0 10px;
    border: 1px solid var(--mkf-line);
    border-radius: var(--mkf-radius-control);
    background-color: var(--mkf-surface-2);
    color: var(--mkf-text);
    font-family: inherit;
    font-size: 13px;
}

.mkf-chat-itens {
    max-height: 62vh;
    overflow-x: hidden;
    overflow-y: auto;
}

/* Três faixas por linha (topo, trecho, rodapé), como no mockup. A zebra vai no próprio botão:
   aqui não existe td em que aplicá-la. */
.mkf-chat-item {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 3px;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 0;
    border-bottom: 1px solid var(--mkf-line-soft);
    border-left: 2px solid transparent;
    background-color: transparent;
    color: var(--mkf-text);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

.mkf-chat-itens .mkf-chat-item:nth-child(even) {
    background-color: var(--mkf-row-alt);
}

.mkf-chat-itens .mkf-chat-item:hover {
    background-color: var(--mkf-surface-2);
}

.mkf-chat-itens .mkf-chat-item:focus-visible {
    outline: 2px solid var(--mkf-brand);
    outline-offset: -2px;
}

.mkf-chat-item-top {
    display: flex;
    align-items: center;
    gap: 7px;
}

.mkf-chat-item-nome {
    font-size: 13px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mkf-chat-item-quando {
    margin-left: auto;
    font-family: var(--mkf-mono-numeric-family);
    font-size: 11.5px;
    color: var(--mkf-text-3);
    flex: 0 0 auto;
}

.mkf-chat-item-trecho {
    font-size: 12.5px;
    color: var(--mkf-text-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mkf-chat-item-rod {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
    color: var(--mkf-text-3);
}

.mkf-chat-ref {
    font-family: var(--mkf-mono-numeric-family);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mkf-chat-estado {
    margin-left: auto;
    flex: 0 0 auto;
}

.mkf-chat-rodape {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-top: 1px solid var(--mkf-line-soft);
    font-family: var(--mkf-mono-numeric-family);
    font-size: 11.5px;
    color: var(--mkf-text-3);
}

.mkf-chat-rodape .mkf-link-btn {
    margin-left: auto;
    font-family: inherit;
}

.mkf-chat-vazio {
    padding: var(--mkf-space-4);
}

/* ---- Conversa ---- */
.mkf-chat-conversa {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border: 1px solid var(--mkf-line);
    border-radius: var(--mkf-radius-surface);
    background-color: var(--mkf-surface);
    min-height: 420px;
    overflow: hidden;
}

.mkf-chat-ctx {
    display: flex;
    align-items: flex-start;
    gap: var(--mkf-space-3);
    padding: 12px 14px;
    background-color: var(--mkf-surface-2);
    border-bottom: 1px solid var(--mkf-line);
}

.mkf-chat-ctx-txt {
    min-width: 0;
    flex: 1 1 auto;
}

.mkf-chat-ctx-titulo {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--mkf-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mkf-chat-ctx-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 4px;
    font-size: 12px;
    color: var(--mkf-text-3);
}

.mkf-chat-marca,
.mkf-chat-badge {
    padding: 1px 7px;
    border-radius: var(--mkf-radius-control);
    background-color: var(--mkf-surface-3);
    color: var(--mkf-text-2);
    font-size: 11.5px;
}

/* A fonte do contexto é neutra por padrão: "não Vonder" é o caminho normal da loja, não defeito.
   Só "Vonder sem ficha" e "sem dados do produto" viram aviso — ali existe ficha a recuperar. */
.mkf-chat-fonte {
    color: var(--mkf-text-3);
}

.mkf-chat-fonte--alerta {
    color: var(--mkf-warn);
}

.mkf-chat-falas {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    max-height: 52vh;
    min-height: 200px;
    overflow-y: auto;
    background-color: var(--mkf-shell);
    border-bottom: 1px solid var(--mkf-line);
}

.mkf-chat-balao {
    align-self: flex-start;
    max-width: 78%;
    padding: 8px 11px;
    border: 1px solid var(--mkf-line-soft);
    border-radius: 8px;
    background-color: var(--mkf-surface-2);
}

.mkf-chat-balao--loja {
    align-self: flex-end;
    background-color: var(--mkf-surface-3);
}

.mkf-chat-balao-txt {
    font-size: 13px;
    color: var(--mkf-text);
    white-space: pre-wrap;
}

.mkf-chat-balao-pe {
    margin-top: 3px;
    font-size: 11px;
    color: var(--mkf-text-3);
}

/* source server é automação da Shopee: não é fala de ninguém, então não ganha balão. */
.mkf-chat-sistema {
    align-self: center;
    font-size: 11.5px;
    color: var(--mkf-text-3);
    font-style: italic;
}

/* ---- Painel do rascunho e da escalada ---- */
.mkf-chat-painel {
    padding: 12px 14px;
    border-top: 1px solid var(--mkf-line);
    background-color: var(--mkf-surface-2);
}

.mkf-chat-painel-top {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.mkf-chat-painel-rot {
    font-size: 13px;
    font-weight: 500;
    color: var(--mkf-text);
}

.mkf-chat-chip {
    padding: 1px 8px;
    border-radius: var(--mkf-radius-control);
    background-color: var(--mkf-surface-3);
    color: var(--mkf-text-2);
    font-size: 11.5px;
}

.mkf-chat-chip--warn {
    background-color: var(--mkf-warn-soft);
    color: var(--mkf-warn);
}

.mkf-chat-painel textarea {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid var(--mkf-line);
    border-radius: var(--mkf-radius-control);
    background-color: var(--mkf-surface);
    color: var(--mkf-text);
    font-family: inherit;
    font-size: 13px;
    line-height: 1.45;
    resize: vertical;
}

.mkf-chat-fontes {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
    font-size: 11.5px;
    color: var(--mkf-text-3);
}

.mkf-chat-fontes .mkf-link-btn {
    text-align: left;
}

.mkf-chat-fontes-lista {
    margin: 6px 0 0;
    padding-left: 18px;
    font-size: 12px;
    color: var(--mkf-text-2);
}

.mkf-chat-motivo {
    margin: 0 0 8px;
    padding: 7px 10px;
    border-left: 2px solid var(--mkf-warn);
    background-color: var(--mkf-warn-soft);
    color: var(--mkf-text-2);
    font-size: 12.5px;
}

.mkf-chat-sugestao {
    margin-top: 8px;
    padding: 8px 11px;
    border: 1px dashed var(--mkf-line);
    border-radius: var(--mkf-radius-control);
    background-color: var(--mkf-surface);
}

.mkf-chat-sugestao p {
    margin: 4px 0 6px;
    font-size: 12.5px;
    color: var(--mkf-text-2);
}

.mkf-chat-erro {
    margin: 6px 0 0;
    font-size: 12.5px;
    color: var(--mkf-lose);
}

.mkf-chat-acoes {
    display: flex;
    align-items: center;
    gap: var(--mkf-space-2);
    flex-wrap: wrap;
    margin-top: 10px;
}

.mkf-chat-espaco {
    flex: 1 1 auto;
}

.mkf-chat-auto {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.mkf-page-meta-sep {
    color: var(--mkf-text-3);
}

/* Telas estreitas: a lista vira faixa acima da conversa, em vez de espremer as duas colunas. */
@media (max-width: 1100px) {
    .mkf-chat-corpo {
        grid-template-columns: minmax(0, 1fr);
    }

    .mkf-chat-itens {
        max-height: 40vh;
    }
}

/* Aba Chat das Configurações → Integrações → Shopee (2026-09-22). */
.mkf-chat-cfg {
    display: flex;
    flex-direction: column;
    gap: var(--mkf-space-4);
    max-width: 720px;
}

.mkf-chat-cfg-linha {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    color: var(--mkf-text);
}

.mkf-chat-cfg-linha input[type="checkbox"] {
    margin-top: 2px;
    width: 16px;
    height: 16px;
    accent-color: var(--mkf-brand);
}

.mkf-chat-cfg-ajuda {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: var(--mkf-text-3);
}

.mkf-chat-cfg-num {
    width: 72px;
    height: var(--mkf-control-height);
    padding: 0 8px;
    border: 1px solid var(--mkf-line);
    border-radius: var(--mkf-radius-control);
    background-color: var(--mkf-surface-2);
    color: var(--mkf-text);
    font-family: var(--mkf-mono-numeric-family);
    font-size: var(--mkf-mono-numeric-size);
    font-variant-numeric: var(--mkf-mono-numeric-variant);
}

.mkf-chat-cfg-regras textarea {
    width: 100%;
    margin-top: 6px;
    padding: 10px 12px;
    border: 1px solid var(--mkf-line);
    border-radius: var(--mkf-radius-control);
    background-color: var(--mkf-surface);
    color: var(--mkf-text);
    font-family: inherit;
    font-size: 13px;
    line-height: 1.5;
    resize: vertical;
}

/* Aviso, não bloqueio: o texto com lacuna é salvo, e a tela diz o que vai acontecer com ele. */
.mkf-chat-cfg-aviso {
    margin: 8px 0 0;
    padding: 7px 10px;
    border-left: 2px solid var(--mkf-warn);
    background-color: var(--mkf-warn-soft);
    color: var(--mkf-text-2);
    font-size: 12.5px;
}

/* Link de saída da barra de contexto: cor de TEXTO, não a laranja da marca — no Sistema de Design a laranja é
   interação (primário, foco, item ativo), e os links das outras telas usam --mkf-text-2. */
.mkf-chat-link {
    color: var(--mkf-text-2);
    font-size: 12px;
    text-decoration: none;
    white-space: nowrap;
}

.mkf-chat-link:hover {
    color: var(--mkf-text);
    text-decoration: underline;
}

.mkf-chat-ctx .mkf-chat-ctx-titulo .mkf-chat-ctx-titulo-link {
    color: inherit;
    text-decoration: none;
}

.mkf-chat-ctx .mkf-chat-ctx-titulo .mkf-chat-ctx-titulo-link:hover {
    text-decoration: underline;
}

/* ---- Barra do pedido (2026-09-23) — lida do pedido, nunca do rascunho. Situação do envio na MESMA escala de
   estado das outras telas: fight = em dia, lose = atrasado/cancelado, warn = pede atenção, stock = esgotado. ---- */
.mkf-chat-ctx .mkf-chat-ctx-links {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex: 0 0 auto;
}

.mkf-chat-cab .mkf-chat-ped-topo {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    white-space: normal;
}

.mkf-chat-sit {
    padding: 1px 8px;
    border-radius: var(--mkf-radius-control);
    font-size: 11.5px;
    font-weight: 500;
    white-space: nowrap;
    flex: 0 0 auto;
}

.mkf-chat-sit.mkf-chat-sit--idle { background-color: var(--mkf-idle-soft); color: var(--mkf-idle); }
.mkf-chat-sit.mkf-chat-sit--fight { background-color: var(--mkf-fight-soft); color: var(--mkf-fight); }
.mkf-chat-sit.mkf-chat-sit--warn { background-color: var(--mkf-warn-soft); color: var(--mkf-warn); }
.mkf-chat-sit.mkf-chat-sit--lose { background-color: var(--mkf-lose-soft); color: var(--mkf-lose); }
.mkf-chat-sit.mkf-chat-sit--stock { background-color: var(--mkf-stock-soft); color: var(--mkf-stock); }

.mkf-chat-cab .mkf-chat-ped-sit {
    margin-top: 4px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--mkf-text-2);
}

.mkf-chat-cab .mkf-chat-ped-sit.mkf-chat-ped-sit--lose { color: var(--mkf-lose); }
.mkf-chat-cab .mkf-chat-ped-sit.mkf-chat-ped-sit--warn { color: var(--mkf-warn); }
.mkf-chat-cab .mkf-chat-ped-sit.mkf-chat-ped-sit--fight { color: var(--mkf-fight); }

.mkf-chat-cab .mkf-chat-ped-recado,
.mkf-chat-cab .mkf-chat-ped-aviso {
    margin-top: 4px;
    font-size: 12px;
    color: var(--mkf-text-2);
}

.mkf-chat-cab .mkf-chat-ped-aviso {
    color: var(--mkf-warn);
}

.mkf-chat-cab .mkf-chat-ped-itens {
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
    font-size: 12.5px;
    color: var(--mkf-text);
}

.mkf-chat-cab .mkf-chat-ped-itens li {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-height: 26px;
}

.mkf-chat-cab .mkf-chat-ped-itens .mkf-chat-ped-titulo {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 420px;
}


/* ================================================================================
   Promoções do Mercado Livre (2026-09-22) — a tabela herda a mkf-vendas-table inteira (larguras fixas,
   padding de 8px, ordenação à direita nos numéricos); aqui só o que é da tela. 3+ classes onde disputa com
   o MudBlazor (MudBlazor.min.css carrega DEPOIS do app.css).
   ================================================================================ */
.mkf-promo-aviso {
    margin-bottom: var(--mkf-space-3);
}

/* 2026-09-23 — min-width calculado no C# pelas colunas visíveis (painel Colunas → --mkf-table-min-width). */
.mkf-vendas-table.mkf-promo-table .mud-table-root {
    min-width: var(--mkf-table-min-width, 2160px);
}

/* 2026-09-23 — aviso dispensável: o × fica no canto; depois de fechado o texto mora no ⓘ do título. */
.mkf-pend-aviso.mkf-promo-aviso {
    flex-wrap: nowrap;
    align-items: flex-start;
}

.mkf-promo-aviso .mkf-promo-aviso-texto {
    flex: 1;
    min-width: 0;
}

.mkf-promo-aviso .mkf-promo-aviso-fechar {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin: -2px -6px -2px 0;
    padding: 0;
    border: 0;
    border-radius: var(--mkf-radius-control);
    background: transparent;
    color: var(--mkf-text-3);
    cursor: pointer;
}

.mkf-promo-aviso .mkf-promo-aviso-fechar:hover {
    background: var(--mkf-surface-3);
    color: var(--mkf-text);
}

.mkf-promo-aviso .mkf-promo-aviso-fechar svg {
    width: 14px;
    height: 14px;
}

/* O .mkf-info-icon sobe 5px pra alinhar com botões; ao lado do h1 ele fica no meio da linha do texto. */
.mkf-page-head h1 .mkf-info-icon.mkf-promo-titulo-info {
    top: 0;
    margin-left: 4px;
    vertical-align: middle;
}

.mkf-promo-aviso-tip {
    max-width: 360px;
    white-space: normal;
    text-align: left;
    line-height: 1.4;
}

.mkf-promo-campanhas-head {
    flex: none;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--mkf-space-2);
    margin-bottom: var(--mkf-space-2);
}

/* Cabeçalho clicável da seção colapsável: mesmo tom do rótulo antigo (.mkf-vendas-tile-rot), com chevron. */
.mkf-promo-campanhas-head .mkf-promo-campanhas-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 28px;
    margin-left: -4px;
    padding: 0 8px 0 4px;
    border: 0;
    border-radius: var(--mkf-radius-control);
    background: transparent;
    color: var(--mkf-text-2);
    font-family: inherit;
    font-size: var(--mkf-type-label-size);
    cursor: pointer;
}

.mkf-promo-campanhas-head .mkf-promo-campanhas-toggle:hover {
    background: var(--mkf-surface-2);
    color: var(--mkf-text);
}

.mkf-promo-campanhas-head .mkf-promo-chevron {
    width: 14px;
    height: 14px;
    transition: transform 0.15s ease;
}

.mkf-promo-campanhas-head .mkf-promo-chevron.mkf-promo-chevron--aberto {
    transform: rotate(90deg);
}

.mkf-promo-campanhas-head .mkf-filter-chip.mkf-promo-campanha-chip {
    height: 26px;
    max-width: 420px;
    font-size: 12.5px;
}

.mkf-promo-campanha-chip .mkf-filter-chip-valor {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mkf-promo-erro {
    font-size: 12px;
    color: var(--mkf-warn);
}

/* 2026-09-23 — sem rolagem interna: expandido mostra todos os cards e quem rola é a página (a área da tabela
   tem altura mínima, ver .mkf-promo-tabela-area). Pra ganhar altura, o usuário colapsa a seção. */
.mkf-promo-campanhas {
    flex: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--mkf-space-2);
    margin-bottom: var(--mkf-space-3);
}

.mkf-promo-campanhas .mkf-vendas-tile.mkf-promo-campanha {
    font: inherit;
    align-items: flex-start;
    text-align: left;
    color: var(--mkf-text);
    cursor: pointer;
    gap: 2px;
}

.mkf-promo-campanhas .mkf-vendas-tile.mkf-promo-campanha:hover {
    border-color: var(--mkf-text-3);
}

.mkf-promo-campanhas .mkf-vendas-tile.mkf-promo-campanha--on {
    border-color: var(--mkf-brand);
    box-shadow: inset 0 0 0 1px var(--mkf-brand);
}

.mkf-promo-campanha-nome {
    font-weight: 600;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mkf-promo-campanha-sub {
    font-size: 12px;
    color: var(--mkf-text-2);
}

.mkf-promo-campanha-sub b {
    font-family: var(--mkf-font-mono);
    color: var(--mkf-text);
}

.mkf-promo-status {
    font-size: 12px;
    color: var(--mkf-text-2);
}

.mkf-promo-status.mkf-promo-status--candidate {
    color: var(--mkf-brand);
    font-weight: 600;
}

.mkf-promo-status.mkf-promo-status--started {
    color: var(--mkf-win);
}

.mkf-promo-sub {
    display: block;
    font-size: 11px;
    line-height: 1.1;
    opacity: 0.85;
}

.mkf-promo-flag {
    margin-right: 3px;
    color: var(--mkf-warn);
}

.mkf-promo-flag.mkf-promo-flag--neg {
    color: var(--mkf-lose);
}

/* Linha abaixo do mínimo/em prejuízo: faixa de 3px à esquerda, sem pintar a linha inteira (a zebra continua). */
.mkf-vendas-table.mkf-promo-table .mud-table-body tr.mkf-promo-linha--baixa > td:first-child {
    box-shadow: inset 3px 0 0 var(--mkf-warn);
}

.mkf-vendas-table.mkf-promo-table .mud-table-body tr.mkf-promo-linha--neg > td:first-child {
    box-shadow: inset 3px 0 0 var(--mkf-lose);
}

.mkf-vendas-table.mkf-promo-table .mud-table-body td.mkf-promo-datas {
    font-size: 12px;
}

/* 2026-09-23 — a tabela fica com a altura que sobra da página (flex:1 do .mkf-table-flex-wrapper), mas nunca
   menos que cabeçalho + 5 linhas + barra horizontal. Quando o topo não deixa isso, a coluna estoura a altura
   travada do .mkf-page-flex e a PÁGINA rola — melhor que uma tabela de 2 linhas. Os irmãos acima não encolhem
   (flex:none) pra o flex-shrink não esmagar cards/contadores no lugar de deixar a página rolar. */
.mkf-page-flex.mkf-promo-page > * {
    flex-shrink: 0;
}

.mkf-page-flex.mkf-promo-page > .mkf-table-flex-wrapper.mkf-promo-tabela-area {
    flex: 1 1 0;
    min-height: 320px;
}

/* Rodapé de paginação: último item da coluna, logo abaixo da caixa da tabela — sempre visível sem rolar. */
.mkf-page-flex.mkf-promo-page > .mkf-table-rodape {
    padding-bottom: 2px;
}

/* Topo compacto em telas baixas (notebook de 768px, janela reduzida): menos respiro entre título, aviso,
   campanhas, contadores e busca. */
@media (max-height: 900px) {
    .mkf-page-flex.mkf-promo-page > .mkf-page-head {
        padding-bottom: 8px;
        margin-bottom: var(--mkf-space-2);
    }

    .mkf-page-flex.mkf-promo-page > .mkf-pend-aviso.mkf-promo-aviso {
        padding: 6px 10px 6px 12px;
        margin-bottom: var(--mkf-space-2);
        font-size: 12.5px;
    }

    .mkf-page-flex.mkf-promo-page > .mkf-promo-campanhas-head {
        margin-bottom: 4px;
    }

    .mkf-page-flex.mkf-promo-page > .mkf-promo-campanhas {
        margin-bottom: var(--mkf-space-2);
    }

    .mkf-page-flex.mkf-promo-page > .mkf-vendas-contadores {
        margin-bottom: var(--mkf-space-2);
    }

    .mkf-page-flex.mkf-promo-page > .mkf-toolbar.mkf-vendas-toolbar {
        margin-bottom: var(--mkf-space-2);
    }

    .mkf-page-flex.mkf-promo-page > .mkf-table-rodape.mt-2 {
        margin-top: 4px !important;
    }
}

.mkf-promo-minimo {
    display: flex;
    align-items: center;
    gap: var(--mkf-space-2);
}

.mkf-promo-minimo .mkf-promo-minimo-input,
.mkf-promo-preco-faixa .mkf-promo-minimo-input {
    width: 72px;
    height: 28px;
    padding: 0 8px;
    border: 1px solid var(--mkf-line);
    border-radius: var(--mkf-radius-control);
    background-color: var(--mkf-surface);
    color: var(--mkf-text);
    font-family: var(--mkf-font-mono);
    font-size: 12.5px;
    text-align: right;
}

.mkf-promo-minimo-nota {
    font-size: 11.5px;
    color: var(--mkf-text-3);
}

/* ================================================================================
   Promoções — "Lucra mais", "Muda de faixa", faixa de preço e o modal do cálculo (2026-09-23).
   ================================================================================ */
.mkf-vendas-contador b.mkf-promo-warn {
    color: var(--mkf-warn);
}

/* Linha em que a promoção rende mais que hoje: mesma faixa de 3px das linhas de prejuízo, em verde. */
.mkf-vendas-table.mkf-promo-table .mud-table-body tr.mkf-promo-linha--ganha > td:first-child {
    box-shadow: inset 3px 0 0 var(--mkf-win);
}

/* Δ lucro: botão do modal. Positivo vira badge verde com seta; negativo só o número em vermelho. */
.mkf-vendas-table.mkf-promo-table .mud-table-body .mkf-promo-delta {
    display: inline-block;
    position: relative;
    padding: 2px 6px;
    border: 0;
    border-radius: var(--mkf-radius-control);
    background: transparent;
    color: var(--mkf-text-2);
    font: inherit;
    font-family: var(--mkf-mono-numeric-family);
    font-variant-numeric: var(--mkf-mono-numeric-variant);
    text-align: right;
    cursor: pointer;
}

.mkf-vendas-table.mkf-promo-table .mud-table-body .mkf-promo-delta:hover {
    background: var(--mkf-surface-3);
}

.mkf-vendas-table.mkf-promo-table .mud-table-body .mkf-promo-delta.mkf-promo-delta--mais {
    background: var(--mkf-win-soft);
    color: var(--mkf-win);
    font-weight: 600;
}

.mkf-vendas-table.mkf-promo-table .mud-table-body .mkf-promo-delta.mkf-promo-delta--menos {
    color: var(--mkf-lose);
}

.mkf-vendas-table.mkf-promo-table .mud-table-body .mkf-promo-delta.mkf-promo-delta--vazio {
    padding-left: 6px;
    color: var(--mkf-text-3);
}

/* Faixa de preço no painel de Filtros. */
.mkf-promo-preco-faixa {
    display: flex;
    align-items: center;
    gap: var(--mkf-space-2);
}

.mkf-promo-preco-em {
    display: flex;
    align-items: center;
    gap: var(--mkf-space-2);
    margin-top: 6px;
}

.mkf-promo-preco-em .mkf-seg {
    flex: 1;
}

/* Modal "Como esse lucro foi calculado" — herda a memória de cálculo do Monitor de Vendas (.mkf-venda-mem-*). */
.mkf-promo-calc-resumo {
    margin: 0 0 var(--mkf-space-3);
    padding: 8px 12px;
    border-left: 3px solid var(--mkf-win);
    border-radius: var(--mkf-radius-control);
    background: var(--mkf-win-soft);
    color: var(--mkf-text);
    font-size: 13px;
    line-height: 1.45;
}

.mkf-pend-aviso.mkf-promo-calc-aviso {
    font-size: 12.5px;
}

.mkf-venda-mem-tabela.mkf-promo-calc-precos {
    margin-bottom: var(--mkf-space-3);
}

.mkf-venda-mem-tabela.mkf-promo-calc-tabela td:first-child,
.mkf-venda-mem-tabela.mkf-promo-calc-precos td:first-child {
    width: 210px;
}

.mkf-venda-mem-tabela.mkf-promo-calc-tabela tr.mkf-promo-calc-base td {
    font-weight: 600;
}

.mkf-venda-mem-tabela.mkf-promo-calc-tabela td.mkf-venda-mem-val.mkf-venda-pos,
.mkf-venda-mem-tabela.mkf-promo-calc-precos .mkf-venda-pos {
    color: var(--mkf-win);
}

.mkf-venda-mem-tabela.mkf-promo-calc-tabela td.mkf-venda-mem-val.mkf-venda-neg,
.mkf-venda-mem-tabela.mkf-promo-calc-precos .mkf-venda-neg {
    color: var(--mkf-lose);
}

.mkf-venda-mem-tabela.mkf-promo-calc-tabela tr.mkf-promo-calc-destaque td {
    background: var(--mkf-warn-soft);
}

.mkf-venda-mem-tabela.mkf-promo-calc-tabela tr.mkf-promo-calc-destaque td.mkf-venda-mem-origem b {
    color: var(--mkf-warn);
}

/* ================================================================================
   Promoções — adesão, vendas e histórico (2026-09-23).
   ================================================================================ */
.mkf-vendas-table.mkf-promo-table .mud-table-cell.mkf-promo-col-sel {
    padding-left: 10px;
    padding-right: 4px;
    text-align: center;
}

.mkf-promo-check {
    accent-color: var(--mkf-brand);
    width: 15px;
    height: 15px;
    margin: 0;
    cursor: pointer;
    vertical-align: middle;
}

.mkf-promo-check:disabled {
    cursor: not-allowed;
    opacity: 0.4;
}

.mkf-vendas-table.mkf-promo-table .mud-table-body .mkf-promo-acao {
    height: 26px;
    padding: 0 10px;
    border: 1px solid var(--mkf-brand);
    border-radius: var(--mkf-radius-control);
    background: transparent;
    color: var(--mkf-brand);
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}

.mkf-vendas-table.mkf-promo-table .mud-table-body .mkf-promo-acao:hover:not(:disabled) {
    background: var(--mkf-brand);
    color: var(--mkf-text-on-brand);
}

.mkf-vendas-table.mkf-promo-table .mud-table-body .mkf-promo-acao.mkf-promo-acao--neg {
    border-color: var(--mkf-lose);
    color: var(--mkf-lose);
}

.mkf-vendas-table.mkf-promo-table .mud-table-body .mkf-promo-acao.mkf-promo-acao--neg:hover:not(:disabled) {
    background: var(--mkf-lose);
    color: var(--mkf-text-on-semantic);
}

.mkf-vendas-table.mkf-promo-table .mud-table-body .mkf-promo-acao.mkf-promo-acao--sair {
    border-color: var(--mkf-line);
    color: var(--mkf-text-2);
}

.mkf-vendas-table.mkf-promo-table .mud-table-body .mkf-promo-acao.mkf-promo-acao--sair:hover:not(:disabled) {
    background: var(--mkf-surface-2);
    color: var(--mkf-text);
}

.mkf-vendas-table.mkf-promo-table .mud-table-body .mkf-promo-acao:disabled {
    border-color: var(--mkf-line);
    color: var(--mkf-text-3);
    cursor: not-allowed;
}

/* Faixas de filtro com a nota ao lado dos dois campos. */
.mkf-pop-body .mkf-promo-preco-faixa {
    flex-wrap: wrap;
}

/* Modal de adesão */
.mkf-promo-lote-titulo {
    font-size: 16px;
    font-weight: 600;
}

.mkf-promo-lote-resumo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin: 0 0 var(--mkf-space-3);
    font-size: 13px;
    color: var(--mkf-text);
}

.mkf-promo-lote-resumo .mkf-promo-lote-spinner {
    margin-right: 6px;
}

.mkf-promo-lote-alerta {
    margin-bottom: var(--mkf-space-3);
    padding: 10px 12px;
    border: 1px solid var(--mkf-lose);
    border-left-width: 4px;
    border-radius: var(--mkf-radius-control);
    background: var(--mkf-lose-soft);
    color: var(--mkf-text);
    font-size: 12.5px;
}

.mkf-promo-lote-alerta .mkf-promo-lote-alerta-bloco + .mkf-promo-lote-alerta-bloco {
    margin-top: 8px;
}

.mkf-promo-lote-alerta strong {
    color: var(--mkf-lose);
}

.mkf-promo-lote-alerta ul {
    margin: 4px 0 0;
    padding-left: 18px;
    max-height: 120px;
    overflow-y: auto;
}

.mkf-promo-lote-previa {
    max-height: 46vh;
    overflow: auto;
    border: 1px solid var(--mkf-line);
    border-radius: var(--mkf-radius-control);
}

.mkf-promo-lote-previa .mkf-promo-lote-tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}

.mkf-promo-lote-previa .mkf-promo-lote-tabela th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 6px 8px;
    background: var(--mkf-surface-2);
    color: var(--mkf-text-2);
    font-size: 11.5px;
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
}

.mkf-promo-lote-previa .mkf-promo-lote-tabela th.mkf-col-numeric,
.mkf-promo-lote-previa .mkf-promo-lote-tabela td.mkf-col-numeric {
    text-align: right;
}

.mkf-promo-lote-previa .mkf-promo-lote-tabela td {
    padding: 6px 8px;
    border-top: 1px solid var(--mkf-line);
    vertical-align: top;
    color: var(--mkf-text);
}

.mkf-promo-lote-previa .mkf-promo-lote-tabela td.mkf-col-numeric {
    white-space: nowrap;
}

.mkf-promo-lote-tabela tr.mkf-promo-lote-linha--neg > td:first-child {
    box-shadow: inset 3px 0 0 var(--mkf-lose);
}

.mkf-promo-lote-tabela tr.mkf-promo-lote-linha--faixa > td:first-child {
    box-shadow: inset 3px 0 0 var(--mkf-warn);
}

.mkf-promo-lote-tabela .mkf-promo-lote-anuncio {
    max-width: 320px;
}

.mkf-promo-lote-tabela .mkf-promo-lote-sku {
    display: block;
    font-size: 11.5px;
    color: var(--mkf-text-2);
}

.mkf-promo-lote-tabela .mkf-promo-lote-tit {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mkf-promo-lote-tabela .mkf-promo-lote-res {
    min-width: 180px;
    max-width: 360px;
}

.mkf-promo-lote-digitar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: var(--mkf-space-3);
    font-size: 13px;
    color: var(--mkf-lose);
}

.mkf-promo-lote-digitar .mkf-promo-minimo-input.mkf-promo-lote-input {
    width: 120px;
    height: 30px;
    padding: 0 8px;
    border: 1px solid var(--mkf-lose);
    border-radius: var(--mkf-radius-control);
    background-color: var(--mkf-surface);
    color: var(--mkf-text);
    font-family: var(--mkf-font-mono);
    font-size: 13px;
    text-align: left;
    text-transform: uppercase;
}

.mkf-promo-lote-digitar .mkf-promo-minimo-input.mkf-promo-lote-input:focus {
    outline: 2px solid var(--mkf-lose);
    outline-offset: 1px;
}

/* Histórico de adesões */
.mkf-promo-hist-barra {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--mkf-space-3);
    margin-bottom: var(--mkf-space-3);
}

/* 2026-10-03 — chip "Recusados por credibilidade" (liga/desliga o filtro). Mesmas cores do .mkf-chip-filter. */
.mkf-promo-hist-barra .mkf-promo-chip {
    border: 1px solid var(--mkf-line);
    background: var(--mkf-surface-2);
    color: var(--mkf-text-2);
    border-radius: 999px;
    padding: 4px 12px;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
}

.mkf-promo-hist-barra .mkf-promo-chip.mkf-promo-chip--ativo {
    background: var(--mkf-brand-soft);
    border-color: var(--mkf-brand-dim);
    color: var(--mkf-text);
}

.mkf-promo-lote-tabela .mkf-promo-lote-res .mkf-promo-cred {
    cursor: help;
}

.mkf-promo-hist-barra .mkf-busca-field {
    flex: 0 1 420px;
    max-width: 420px;
}

.mkf-promo-lote-previa.mkf-promo-hist-previa {
    max-height: 62vh;
}

.mkf-promo-hist-tabela tr.mkf-promo-hist-linha {
    cursor: pointer;
}

.mkf-promo-hist-tabela tr.mkf-promo-hist-linha:hover > td,
.mkf-promo-hist-tabela tr.mkf-promo-hist-linha--aberta > td {
    background: var(--mkf-surface-2);
}

.mkf-promo-hist-tabela tr.mkf-promo-hist-detalhe > td {
    background: var(--mkf-surface-2);
    font-size: 12px;
    word-break: break-all;
}

.mkf-promo-hist-tabela tr.mkf-promo-hist-detalhe code {
    font-family: var(--mkf-font-mono);
    font-size: 11.5px;
}

/* Bloco de vendas no modal do cálculo */
.mkf-promo-calc-vendas {
    margin-top: var(--mkf-space-4, 16px);
}

.mkf-promo-calc-vendas .mkf-promo-calc-vendas-titulo {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--mkf-text-2);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ================================================================================
   Promoções — colunas de lucro/margem reorganizadas + painel Colunas (2026-09-23).
   ================================================================================ */
/* Unidade no cabeçalho (R$, %, p.p.) fora da caixa-alta e mais apagada que o nome. */
.mkf-vendas-table.mkf-promo-table .mkf-sortable-th .mkf-promo-th-rotulo {
    overflow: hidden;
    text-overflow: ellipsis;
}

.mkf-vendas-table.mkf-promo-table .mkf-sortable-th .mkf-promo-unid {
    margin-left: 3px;
    color: var(--mkf-text-3);
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
}

/* Δ margem: "4,4% → 7,0%" na linha de cima, "+2,6 p.p." menor e colorido embaixo (o sinal vai junto). */
.mkf-vendas-table.mkf-promo-table .mud-table-body .mkf-promo-transicao {
    display: block;
    white-space: nowrap;
    line-height: 1.15;
    color: var(--mkf-text);
}

.mkf-vendas-table.mkf-promo-table .mud-table-body .mkf-promo-sub.mkf-venda-pos {
    color: var(--mkf-win);
    opacity: 1;
}

.mkf-vendas-table.mkf-promo-table .mud-table-body .mkf-promo-sub.mkf-venda-neg {
    color: var(--mkf-lose);
    opacity: 1;
}

/* Promoções — sem custo e "em vigor" (2026-09-23). */
.mkf-vendas-table.mkf-promo-table .mud-table-body a.mkf-promo-semcusto {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--mkf-warn);
    font-family: var(--mkf-font-sans, inherit);
    font-size: 12px;
    text-decoration: none;
    white-space: nowrap;
}

.mkf-vendas-table.mkf-promo-table .mud-table-body a.mkf-promo-semcusto:hover {
    text-decoration: underline;
}

.mkf-vendas-table.mkf-promo-table .mud-table-body a.mkf-promo-semcusto svg {
    width: 14px;
    height: 14px;
    flex: none;
}

.mkf-vendas-table.mkf-promo-table .mud-table-body .mkf-promo-sub.mkf-promo-vigor {
    color: var(--mkf-win);
    font-weight: 600;
    opacity: 1;
}

/* Colunas de vendas (ColunasVendas, 2026-09-23) — padrão único de Buy Box, Shopee e Promoções: número à direita, e o
   cabeçalho (rótulo + seta) encostado à direita também. 4 classes: com .mkf-col-numeric sozinha o text-align:start do
   MudBlazor ganhava e as colunas saíam à esquerda no Buy Box. */
.mkf-data-table .mud-table-container .mud-table-root td.mkf-col-vendas {
    text-align: right;
}

.mkf-data-table .mud-table-container .mud-table-root th.mkf-col-vendas {
    text-align: right;
}

.mkf-data-table .mud-table-container .mud-table-root th.mkf-col-vendas .mkf-sortable-th {
    justify-content: flex-end;
}

/* Promoções — linhas agrupadas por anúncio (2026-09-23): linha-mãe (dados do anúncio + chevron) e uma sub-linha por
   promoção; anúncio com uma promoção só continua numa linha única. O grupo abre com a separação forte em cima da mãe e
   fecha com outra embaixo da última linha. Sem zebra nesta tabela: a mãe/linha única fica no fundo da superfície e as
   sub-linhas um tom abaixo — a zebra alternaria mãe e filhas e apagaria o agrupamento. As regras de fundo têm 5 classes
   + 2 elementos pra passar da zebra geral e das colunas fixas (.mkf-promo-fixa / .mkf-col-acoes). */
.mkf-vendas-table.mkf-promo-table .mud-table-body tr.mkf-promo-grupo--inicio > td {
    border-top: 2px solid var(--mkf-line);
}

.mkf-vendas-table.mkf-promo-table .mud-table-body tr.mkf-promo-grupo--fim > td {
    border-bottom: 2px solid var(--mkf-line);
}

.mkf-data-table.mkf-promo-table .mud-table-body tr.mud-table-row.mkf-promo-linha td {
    background-color: var(--mkf-surface);
}

.mkf-data-table.mkf-promo-table .mud-table-body tr.mud-table-row.mkf-promo-sub-linha td {
    background-color: var(--mkf-surface-2);
}

.mkf-data-table.mkf-promo-table .mud-table-body tr.mud-table-row.mkf-promo-linha:hover td {
    background-color: var(--mkf-surface-2);
}

.mkf-data-table.mkf-promo-table .mud-table-body tr.mud-table-row.mkf-promo-sub-linha:hover td {
    background-color: var(--mkf-surface-3);
}

/* Sub-linha: guia vertical fina no Título (recuo visual do grupo). Imagem de fundo, não borda nem box-shadow: o
   box-shadow do Título já é a sombra da coluna fixa. */
.mkf-data-table.mkf-promo-table .mud-table-body tr.mud-table-row.mkf-promo-sub-linha td.mkf-promo-titulo-sub {
    background-image: linear-gradient(var(--mkf-line), var(--mkf-line));
    background-size: 2px 100%;
    background-position: 17px 0;
    background-repeat: no-repeat;
}

/* Linha-mãe: chevron + título (e o resumo "3 promoções · 1 ativa" embaixo quando recolhida). */
.mkf-vendas-table.mkf-promo-table .mud-table-body .mkf-promo-titulo-grupo {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.mkf-vendas-table.mkf-promo-table .mud-table-body .mkf-promo-titulo-texto {
    min-width: 0;
    overflow: hidden;
}

.mkf-vendas-table.mkf-promo-table .mud-table-body .mkf-promo-titulo-texto .mkf-promo-l1 {
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
}

.mkf-vendas-table.mkf-promo-table .mud-table-body .mkf-promo-chevron-btn {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    border-radius: var(--mkf-radius-control);
    background: transparent;
    color: var(--mkf-text-2);
    cursor: pointer;
}

.mkf-vendas-table.mkf-promo-table .mud-table-body .mkf-promo-chevron-btn:hover {
    background: var(--mkf-surface-3);
    color: var(--mkf-text);
}

.mkf-vendas-table.mkf-promo-table .mud-table-body .mkf-promo-chevron-btn .mkf-promo-chevron {
    width: 14px;
    height: 14px;
    transition: transform 0.15s ease;
}

.mkf-vendas-table.mkf-promo-table .mud-table-body .mkf-promo-chevron-btn .mkf-promo-chevron.mkf-promo-chevron--aberto {
    transform: rotate(90deg);
}

/* ================================================================================
   Promoções — tabela compacta (2026-09-23): 22 colunas viraram 13 (células de duas linhas), caixinha + Anúncio +
   Título fixos à esquerda, Ação fixa à direita, corpo em 13px e linha mais baixa. Tudo com 4+ classes: a tabela é do
   MudBlazor e o MudBlazor.min.css carrega depois do app.css.
   ================================================================================ */

/* Densidade — corpo em 13px (era 13,5px) e a linha segue a densidade do painel (40px no Padrão, 34 na Compacta) em
   vez dos 44px fixos da mkf-vendas-table. Duas linhas de texto (13px + 11px) cabem em ~30px. */
.mkf-data-table.mkf-promo-table .mud-table-container .mud-table-body .mud-table-cell {
    font-size: 13px;
    height: var(--mkf-row-height);
    padding-top: 2px;
    padding-bottom: 2px;
}

/* Célula de duas linhas: valor principal em cima; secundário embaixo, menor e em cinza (a cor de sinal — Δ p.p.,
   "em vigor", "tarifa −x" — continua nas regras de 5 classes mais acima, que ganham desta). */
.mkf-vendas-table.mkf-promo-table .mud-table-body .mkf-promo-l1 {
    display: block;
    line-height: 1.2;
    white-space: nowrap;
}

.mkf-vendas-table.mkf-promo-table .mud-table-body .mkf-promo-sub {
    margin-top: 1px;
    color: var(--mkf-text-3);
    opacity: 1;
    white-space: nowrap;
}

/* Δ: o botão do modal tem 6px de respiro lateral; a margem negativa alinha o número à direita com o p.p. de baixo. */
.mkf-vendas-table.mkf-promo-table .mud-table-body .mkf-promo-delta {
    margin-right: -6px;
    line-height: 1.2;
}

/* Anúncio — SKU em cima (texto da linha), MLB embaixo em mono, menor e apagado. */
.mkf-vendas-table.mkf-promo-table .mud-table-body .mkf-promo-anuncio .mkf-sku-text {
    font-size: 12.5px;
    color: var(--mkf-text);
}

.mkf-vendas-table.mkf-promo-table .mud-table-body a.mkf-promo-mlb {
    align-self: flex-start;
    font-family: var(--mkf-font-mono);
    font-size: 11px;
    line-height: 1.2;
    color: var(--mkf-text-3);
}

/* Prazo — datas em 12px (cabem "28/09–13/10" e "até 12/10/26" nos 112px). */
.mkf-data-table.mkf-promo-table .mud-table-container .mud-table-body td.mkf-promo-datas {
    font-size: 12px;
}

/* Vendas — "7d · 30d · total" numa linha só. */
.mkf-vendas-table.mkf-promo-table .mud-table-body .mkf-promo-vendas {
    white-space: nowrap;
}

.mkf-vendas-table.mkf-promo-table .mud-table-body .mkf-promo-sep {
    margin: 0 3px;
    color: var(--mkf-text-3);
}

/* Cabeçalho de Vendas — três alvos de ordenação (7d / 30d / total), cada um com a sua seta. Sem caixa-alta: "7D" lê
   como outra coisa. */
.mkf-vendas-table.mkf-promo-table .mud-table-head .mkf-promo-vendas-th {
    display: flex;
    justify-content: flex-end;
    gap: 1px;
}

.mkf-vendas-table.mkf-promo-table .mud-table-head .mkf-promo-sort-alvo {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    padding: 2px 3px;
    border: 0;
    border-radius: var(--mkf-radius-control);
    background: transparent;
    color: var(--mkf-text-3);
    font: inherit;
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
}

.mkf-vendas-table.mkf-promo-table .mud-table-head .mkf-promo-sort-alvo:hover {
    background: var(--mkf-surface-3);
    color: var(--mkf-text);
}

.mkf-vendas-table.mkf-promo-table .mud-table-head .mkf-promo-sort-alvo.mkf-promo-sort-alvo--on {
    color: var(--mkf-text);
    font-weight: 600;
}

.mkf-vendas-table.mkf-promo-table .mud-table-head .mkf-promo-sort-alvo .mkf-sort-icon {
    font-size: 12px;
    width: 12px;
    height: 12px;
}

/* ---- Colunas fixas à esquerda (caixinha, Anúncio, Título) — mesmo padrão da Ações fixa do Buy Box (ver
   .mkf-col-acoes): fundo opaco que repete a zebra, cada estado com a sua regra e o hover por último. O `left` de cada
   uma vem inline do Razor (soma das larguras à esquerda). */
.mkf-data-table.mkf-promo-table .mud-table-row td.mkf-promo-fixa {
    position: sticky;
    z-index: var(--mkf-z-tabela-corpo-fixo);
    background-color: var(--mkf-surface);
}

.mkf-data-table.mkf-promo-table .mud-table-row:nth-of-type(even) td.mkf-promo-fixa {
    background-color: var(--mkf-row-alt);
}

.mkf-data-table.mkf-promo-table .mud-table-row:hover td.mkf-promo-fixa {
    background-color: var(--mkf-surface-2);
}

.mkf-data-table.mkf-promo-table .mud-table-container .mud-table-root .mud-table-head .mud-table-cell.mkf-promo-fixa {
    position: sticky;
    z-index: var(--mkf-z-tabela-canto);
    background-color: var(--mkf-thead-bg);
}

/* Sombra sutil na borda das fixas — só quando há conteúdo rolado por baixo delas (data-* posto pelo
   mkfColunasFixas no .mud-table-container; o Blazor não mexe nesse atributo). Esquerda: a sombra sai do Título;
   direita: sai da Ação. INSET, na borda de dentro da própria célula: sombra externa (6px 0 8px) num <td> não aparecia
   — medida no Chrome com o box-shadow computado certo e nada pintado. */
.mkf-promo-table .mud-table-container[data-mkf-rola-esq] .mud-table-root .mud-table-cell.mkf-promo-fixa-fim {
    box-shadow: inset -10px 0 8px -8px var(--mkf-sombra-fixa);
}

.mkf-promo-table .mud-table-container[data-mkf-rola-dir] .mud-table-root .mud-table-cell.mkf-promo-fixa-ini {
    box-shadow: inset 10px 0 8px -8px var(--mkf-sombra-fixa);
}

/* Painel Colunas — nota sob os presets quando a escolha é manual. */
.mkf-pop-sec .mkf-pop-nota {
    font-size: 11px;
    color: var(--mkf-text-3);
}

/* ---- Página ativa da paginação (2026-09-23) ----
   Aço: degrau neutro (--mkf-surface-3), sem laranja — a página não é uma ação. Papel e
   Grafite: cor da marca com o texto sobre-a-marca (branco no Papel). 4 classes + <button>
   pra ganhar do .mud-button-filled-primary do MudBlazor, que carrega depois. */
:root {
    --mkf-pag-on-bg: var(--mkf-surface-3);
    --mkf-pag-on-text: var(--mkf-text);
}

:root[data-theme="paper"],
:root[data-theme="graphite"] {
    --mkf-pag-on-bg: var(--mkf-brand);
    --mkf-pag-on-text: var(--mkf-text-on-brand);
}

.mud-pagination .mud-pagination-item.mud-pagination-item-selected .mud-button-root {
    background-color: var(--mkf-pag-on-bg);
    color: var(--mkf-pag-on-text);
    box-shadow: none;
}

/* ================================================================================
   AUTOMAÇÃO DE PROMOÇÕES (2026-09-23) — abas da tela de Promoções, aba Automação e indicador da linha.
   Os cards reaproveitam mkf-bba-card / mkf-pa-card da Precificação Automática. 3+ classes onde disputa com a lib.
   ================================================================================ */
.mkf-page-flex.mkf-promo-page > .mkf-promo-abas {
    display: flex;
    gap: 4px;
    margin: 0 0 10px;
    border-bottom: 1px solid var(--mkf-line);
}

.mkf-promo-page .mkf-promo-abas .mkf-promo-aba {
    padding: 6px 14px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    color: var(--mkf-text-2);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: -1px;
}

.mkf-promo-page .mkf-promo-abas .mkf-promo-aba:hover {
    color: var(--mkf-text);
}

.mkf-promo-page .mkf-promo-abas .mkf-promo-aba.mkf-promo-aba--on {
    color: var(--mkf-brand);
    border-bottom-color: var(--mkf-brand);
}

/* A aba Automação ocupa o que sobra da página travada e rola por dentro. */
.mkf-page-flex.mkf-promo-page > .mkf-pauto-area {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    padding-bottom: 16px;
}

/* Regras e Decisões são tabelas: mais largas que o card de controles (880px). */
.mkf-pauto .mkf-pa-card.mkf-bba-card.mkf-pauto-largo {
    max-width: 1280px;
}

.mkf-pauto .mkf-pa-card .mkf-pauto-acoes {
    display: flex;
    gap: 8px;
}

.mkf-pauto .mkf-bba-tabela .mkf-pauto-seta {
    border: 0;
    background: none;
    padding: 0 3px;
    color: var(--mkf-text-2);
    cursor: pointer;
    font-size: 13px;
}

.mkf-pauto .mkf-bba-tabela .mkf-pauto-seta:disabled {
    opacity: 0.3;
    cursor: default;
}

.mkf-pauto .mkf-bba-tabela tr.mkf-pauto-inativa td {
    color: var(--mkf-text-3);
}

/* 2026-09-23 — ordem das regras: texto de ajuda, alça de arrastar, linha de inserção e aviso de regra encoberta. */
.mkf-pauto .mkf-pa-card .mkf-pauto-ajuda {
    margin: var(--mkf-space-4) var(--mkf-space-4) 0;
    padding: 8px 12px;
    border-left: 3px solid var(--mkf-brand);
    background: var(--mkf-surface-2);
    font-size: 13px;
    line-height: 1.45;
}

.mkf-pauto .mkf-pa-card .mkf-pauto-ajuda .mkf-bba-fraco {
    display: block;
    font-size: 12px;
    margin-top: 2px;
}

.mkf-pauto .mkf-bba-tabela .mkf-pauto-alca {
    color: var(--mkf-text-3);
    cursor: grab;
    padding-right: 4px;
    user-select: none;
}

.mkf-pauto .mkf-bba-tabela .mkf-pauto-ordem {
    display: inline-block;
    min-width: 1.4em;
    font-weight: 600;
}

.mkf-pauto .mkf-bba-tabela tr[draggable="false"] .mkf-pauto-alca {
    cursor: default;
    opacity: 0.4;
}

.mkf-pauto .mkf-bba-tabela tr.mkf-pauto-arrastando td {
    opacity: 0.45;
}

.mkf-pauto .mkf-bba-tabela tr.mkf-pauto-alvo-acima td {
    box-shadow: inset 0 2px 0 var(--mkf-brand);
}

.mkf-pauto .mkf-bba-tabela tr.mkf-pauto-alvo-abaixo td {
    box-shadow: inset 0 -2px 0 var(--mkf-brand);
}

.mkf-pauto .mkf-bba-tabela .mkf-pauto-encoberta {
    margin-top: 3px;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--mkf-warn-soft);
    color: var(--mkf-warn);
    font-size: 12px;
    white-space: normal;
    max-width: 360px;
}

.mkf-pauto .mkf-bba-tabela .mkf-pauto-sku-cel {
    max-width: 280px;
}

.mkf-pauto .mkf-bba-tabela .mkf-pauto-titulo {
    max-width: 220px;
}

.mkf-pauto .mkf-bba-tabela .mkf-pauto-motivo {
    max-width: 360px;
    font-size: 12px;
}

/* 2026-09-24 — erro da API inteiro, quebrando linha (sem reticências). */
.mkf-pauto .mkf-bba-tabela .mkf-pauto-motivo.mkf-pauto-motivo--erro {
    white-space: normal;
    overflow-wrap: anywhere;
    overflow: visible;
}

.mkf-pauto .mkf-bba-tabela .mkf-pauto-excluir {
    color: var(--mkf-lose);
    margin-left: 8px;
}

.mkf-pauto .mkf-pauto-filtros .mkf-pauto-contagem {
    align-self: flex-end;
    padding-bottom: 8px;
}

.mkf-pauto .mkf-pauto-acao {
    font-weight: 600;
}

.mkf-pauto .mkf-pauto-acao.mkf-pauto-acao--aderiu,
.mkf-pauto .mkf-pauto-acao.mkf-pauto-acao--aderiria {
    color: var(--mkf-win);
}

.mkf-pauto .mkf-pauto-acao.mkf-pauto-acao--erro,
.mkf-pauto .mkf-pauto-acao.mkf-pauto-acao--recusacredibilidade {
    color: var(--mkf-lose);
}

.mkf-pauto .mkf-pauto-acao.mkf-pauto-acao--pulou,
.mkf-pauto .mkf-pauto-acao.mkf-pauto-acao--adiada,
.mkf-pauto .mkf-pauto-acao.mkf-pauto-acao--pendente {
    color: var(--mkf-text-2);
}

/* 2026-09-25 — ML travou o anúncio irmão: Aguardando, neutro (não é recusa); a mensagem do ML fica no tooltip. */
.mkf-promo-lote-res .mkf-promo-aguardando,
.mkf-promo-lote-tabela .mkf-promo-lote-res .mkf-promo-aguardando {
    color: var(--mkf-text-2);
    font-weight: 600;
    cursor: help;
}

/* 2026-09-23 — "Manter só a de maior lucro": saída automática em âmbar (não é erro nem ganho direto). */
.mkf-pauto .mkf-pauto-acao.mkf-pauto-acao--saiu,
.mkf-pauto .mkf-pauto-acao.mkf-pauto-acao--sairia {
    color: var(--mkf-warn);
}

.mkf-pauto .mkf-bba-tabela .mkf-pauto-outra,
.mkf-pauto .mkf-bba-tabela .mkf-pauto-maior-lucro {
    font-size: 11.5px;
    white-space: nowrap;
}

/* Dialog da regra */
.mkf-pauto-dialog .mkf-pauto-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.mkf-pauto-dialog .mkf-pauto-form .mkf-pauto-f-nome {
    width: 320px;
}

/* Margem mínima: o texto de ajuda e o exemplo ao vivo precisam de mais largura que o campo numérico. */
.mkf-pauto-dialog .mkf-pauto-form .mkf-pauto-f-margem {
    width: 360px;
    max-width: 100%;
}

.mkf-pauto-dialog .mkf-pauto-form .mkf-pauto-margem-campo {
    width: 170px;
}

.mkf-pauto-dialog .mkf-pauto-form .mkf-pauto-exemplo {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--mkf-text-2);
}

.mkf-pauto-dialog .mkf-pauto-form .mkf-pauto-exemplo:empty {
    display: none;
}

.mkf-pauto-dialog .mkf-pauto-exemplo .mkf-pauto-exemplo-ok {
    color: var(--mkf-win);
}

.mkf-pauto-dialog .mkf-pauto-form .mkf-pauto-f-qtd {
    width: 90px;
}

/* 2026-09-23 — "Manter só a de maior lucro": campos da troca (o sufixo "dias" não cabe nos 90px) e os switches
   em linha própria, sem colar no texto de ajuda. */
.mkf-pauto-dialog .mkf-pauto-form .mkf-pauto-f-troca {
    width: 150px;
}

.mkf-pauto-dialog .mkf-pauto-form .mkf-pauto-grupo > .mkf-bba-switch {
    display: flex;
    margin: 4px 0 8px;
}

.mkf-pauto-dialog .mkf-pauto-form .mkf-pauto-grupo > small {
    display: block;
    margin-top: 4px;
}

.mkf-pauto-dialog .mkf-pauto-form .mkf-pauto-f-sku {
    width: 100%;
}

/* mkf-bba-input é de número (mono, à direita); nome e SKUs são texto. */
.mkf-pauto-dialog .mkf-pauto-form .mkf-bba-input.mkf-pauto-texto {
    text-align: left;
    font-family: var(--mkf-font-sans);
    font-variant-numeric: normal;
    letter-spacing: normal;
}

/* Filtro "Só estes SKUs ou títulos" em chips (Components/Shared/FiltroTermosAnuncio). A caixa imita o
   .mkf-bba-input (borda, raio, foco na marca) e cresce em linhas conforme entram chips. Três tipos de
   chip: SKU exato (neutro), prefixo e título (tingidos, com etiqueta). Lista de sugestões no fluxo, não
   flutuando: dentro do MudDialog um absolute seria cortado pelo overflow do conteúdo. */
.mkf-ft .mkf-ft-caixa {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    min-height: var(--mkf-control-height);
    padding: 3px 6px;
    border: 1px solid var(--mkf-line);
    border-radius: var(--mkf-radius-control);
    background-color: var(--mkf-surface-2);
    cursor: text;
}

.mkf-ft .mkf-ft-caixa:hover {
    border-color: var(--mkf-surface-3);
}

.mkf-ft .mkf-ft-caixa.mkf-ft-caixa--foco {
    border-color: var(--mkf-brand);
    box-shadow: 0 0 0 3px var(--mkf-brand-soft);
}

.mkf-ft .mkf-ft-caixa .mkf-ft-input {
    flex: 1 1 160px;
    min-width: 120px;
    height: 26px;
    padding: 0 4px;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--mkf-text);
    font-family: var(--mkf-font-sans);
    font-size: 13px;
}

.mkf-ft .mkf-ft-caixa .mkf-ft-input::placeholder {
    color: var(--mkf-text-3);
    font-size: 11.5px;
}

.mkf-ft .mkf-ft-caixa .mkf-ft-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 100%;
    height: 24px;
    padding: 0 2px 0 8px;
    border: 1px solid var(--mkf-line);
    border-radius: var(--mkf-radius-control);
    background-color: var(--mkf-surface);
    color: var(--mkf-text);
    font-family: var(--mkf-mono-numeric-family);
    font-size: 12px;
    cursor: default;
}

.mkf-ft .mkf-ft-caixa .mkf-ft-chip.mkf-ft-chip--prefixo {
    border-color: var(--mkf-brand);
    background-color: var(--mkf-brand-soft);
}

.mkf-ft .mkf-ft-caixa .mkf-ft-chip.mkf-ft-chip--titulo {
    border-color: var(--mkf-warn);
    background-color: var(--mkf-warn-soft);
}

/* Termo que hoje não casa com nenhum anúncio ativo (SKU que saiu, padrão digitado errado). */
.mkf-ft .mkf-ft-caixa .mkf-ft-chip.mkf-ft-chip--vazio {
    border-style: dashed;
    color: var(--mkf-text-3);
}

.mkf-ft .mkf-ft-chip .mkf-ft-chip-tag {
    font-family: var(--mkf-font-sans);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--mkf-text-2);
}

.mkf-ft .mkf-ft-chip .mkf-ft-chip-texto {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mkf-ft .mkf-ft-chip .mkf-ft-chip-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--mkf-text-2);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}

.mkf-ft .mkf-ft-chip .mkf-ft-chip-x:hover,
.mkf-ft .mkf-ft-chip .mkf-ft-chip-x:focus-visible {
    background-color: var(--mkf-surface-3);
    color: var(--mkf-text);
    outline: none;
}

.mkf-ft .mkf-ft-caixa .mkf-ft-chips-mais {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0 4px;
}

.mkf-ft .mkf-ft-caixa .mkf-ft-link {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--mkf-brand);
    font-family: var(--mkf-font-sans);
    font-size: 12px;
    text-decoration: underline;
    cursor: pointer;
}

.mkf-ft .mkf-ft-caixa .mkf-ft-link.mkf-ft-link--perigo {
    color: var(--mkf-lose);
}

/* Painel da lista: cabeçalho (Selecionar todos + padrão), linhas com rolagem, rodapé com o resumo. */
.mkf-ft .mkf-ft-lista {
    margin-top: 4px;
    border: 1px solid var(--mkf-line);
    border-radius: var(--mkf-radius-control);
    background-color: var(--mkf-surface);
    overflow: hidden;
}

.mkf-ft .mkf-ft-lista .mkf-ft-topo {
    padding: 6px 10px;
    border-bottom: 1px solid var(--mkf-line);
    background-color: var(--mkf-surface-2);
}

.mkf-ft .mkf-ft-topo .mkf-ft-topo-linha {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 12px;
}

.mkf-ft .mkf-ft-topo .mkf-ft-todos {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 3px 6px 3px 0;
    border-radius: 4px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--mkf-text);
    cursor: pointer;
    user-select: none;
}

.mkf-ft .mkf-ft-topo .mkf-ft-todos.mkf-ft-todos--on {
    box-shadow: 0 0 0 2px var(--mkf-brand);
}

.mkf-ft .mkf-ft-topo .mkf-ft-topo-dica {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    line-height: 1.4;
    color: var(--mkf-text-2);
}

.mkf-ft .mkf-ft-lista .mkf-ft-usar-padrao {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    padding: 3px 8px;
    border: 1px solid var(--mkf-warn);
    border-radius: var(--mkf-radius-control);
    background-color: var(--mkf-warn-soft);
    color: var(--mkf-text);
    font-family: var(--mkf-font-sans);
    font-size: 12px;
    cursor: pointer;
}

.mkf-ft .mkf-ft-lista .mkf-ft-usar-padrao:hover {
    border-color: var(--mkf-text-2);
}

.mkf-ft .mkf-ft-topo .mkf-ft-confirmar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 12px;
    font-size: 12px;
    color: var(--mkf-text);
}

.mkf-ft .mkf-ft-confirmar .mkf-ft-confirmar-acoes {
    display: inline-flex;
    gap: 6px;
}

.mkf-ft .mkf-ft-confirmar .mkf-ft-btn {
    height: 26px;
    padding: 0 10px;
    border: 1px solid var(--mkf-line);
    border-radius: var(--mkf-radius-control);
    background-color: var(--mkf-surface);
    color: var(--mkf-text);
    font-family: var(--mkf-font-sans);
    font-size: 12px;
    cursor: pointer;
}

.mkf-ft .mkf-ft-confirmar .mkf-ft-btn.mkf-ft-btn--primario {
    border-color: var(--mkf-brand);
    background-color: var(--mkf-brand);
    color: var(--mkf-text-on-brand);
}

.mkf-ft .mkf-ft-lista .mkf-ft-opcoes {
    max-height: 264px;
    overflow-y: auto;
}

.mkf-ft .mkf-ft-lista .mkf-ft-opcao {
    display: grid;
    grid-template-columns: 16px minmax(90px, auto) 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    border-bottom: 1px solid var(--mkf-line-soft);
    cursor: pointer;
    user-select: none;
}

.mkf-ft .mkf-ft-lista .mkf-ft-opcao:last-child {
    border-bottom: 0;
}

.mkf-ft .mkf-ft-lista .mkf-ft-opcao:hover {
    background-color: var(--mkf-surface-2);
}

.mkf-ft .mkf-ft-lista .mkf-ft-opcao.mkf-ft-opcao--on {
    box-shadow: inset 3px 0 0 var(--mkf-brand);
    background-color: var(--mkf-brand-soft);
}

/* Caixa de seleção desenhada (a linha inteira é o alvo do clique; o foco fica no campo de busca). */
.mkf-ft .mkf-ft-lista .mkf-ft-box {
    position: relative;
    display: inline-block;
    flex: none;
    width: 16px;
    height: 16px;
    border: 1.5px solid var(--mkf-text-3);
    border-radius: 3px;
    background-color: var(--mkf-surface);
}

.mkf-ft .mkf-ft-lista .mkf-ft-box.mkf-ft-box--todos,
.mkf-ft .mkf-ft-lista .mkf-ft-box.mkf-ft-box--parcial {
    border-color: var(--mkf-brand);
    background-color: var(--mkf-brand);
}

.mkf-ft .mkf-ft-lista .mkf-ft-box.mkf-ft-box--todos::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 0;
    width: 5px;
    height: 9px;
    border: solid var(--mkf-text-on-brand);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.mkf-ft .mkf-ft-lista .mkf-ft-box.mkf-ft-box--parcial::after {
    content: "";
    position: absolute;
    left: 2px;
    right: 2px;
    top: 5.5px;
    height: 2px;
    background-color: var(--mkf-text-on-brand);
}

.mkf-ft .mkf-ft-opcao .mkf-ft-opcao-sku {
    font-family: var(--mkf-mono-numeric-family);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.mkf-ft .mkf-ft-opcao .mkf-ft-opcao-tem {
    margin-left: 6px;
    font-family: var(--mkf-font-sans);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--mkf-text-3);
}

.mkf-ft .mkf-ft-opcao .mkf-ft-opcao-titulo {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    color: var(--mkf-text-2);
}

.mkf-ft .mkf-ft-opcao .mkf-ft-opcao-mlb {
    font-family: var(--mkf-mono-numeric-family);
    font-size: 11px;
    color: var(--mkf-text-3);
    white-space: nowrap;
}

.mkf-ft .mkf-ft-lista .mkf-ft-rodape {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 12px;
    padding: 5px 10px;
    border-top: 1px solid var(--mkf-line);
    background-color: var(--mkf-surface-2);
    font-size: 11px;
    line-height: 1.4;
    color: var(--mkf-text-2);
    font-variant-numeric: tabular-nums;
}

.mkf-ft .mkf-ft-rodape .mkf-ft-rodape-teclas {
    margin-left: auto;
    color: var(--mkf-text-3);
}

.mkf-ft .mkf-ft-lista .mkf-ft-dica {
    padding: 8px 10px;
    font-size: 12px;
    color: var(--mkf-text-2);
}

.mkf-ft .mkf-ft-dica .mkf-ft-dica-erro {
    color: var(--mkf-lose);
}

.mkf-ft .mkf-ft-dica .mkf-ft-usar-padrao {
    margin-left: 6px;
}

.mkf-ft .mkf-ft-lista .mkf-ft-mono {
    font-family: var(--mkf-mono-numeric-family);
}

.mkf-ft > .mkf-ft-aviso,
.mkf-ft > .mkf-ft-contagem {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    line-height: 1.4;
}

.mkf-ft > .mkf-ft-aviso {
    color: var(--mkf-lose);
}

.mkf-ft > .mkf-ft-contagem {
    color: var(--mkf-text-2);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 600px) {
    .mkf-ft .mkf-ft-lista .mkf-ft-opcao {
        grid-template-columns: 16px 1fr auto;
    }

    .mkf-ft .mkf-ft-opcao .mkf-ft-opcao-titulo {
        grid-column: 2 / -1;
        grid-row: 2;
    }

    .mkf-ft .mkf-ft-rodape .mkf-ft-rodape-teclas {
        display: none;
    }
}

.mkf-pauto-dialog .mkf-pauto-form .mkf-pauto-grupo {
    border: 1px solid var(--mkf-line);
    border-radius: 8px;
    padding: 8px 12px 10px;
    margin: 0;
}

.mkf-pauto-dialog .mkf-pauto-form .mkf-pauto-grupo legend {
    padding: 0 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--mkf-text-2);
}

.mkf-pauto-dialog .mkf-pauto-form .mkf-pauto-vendas {
    align-items: flex-end;
}

/* Indicador na linha da listagem e no Histórico de adesões. */
.mkf-promo-sub.mkf-promo-auto {
    color: var(--mkf-brand);
    font-weight: 600;
    opacity: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mkf-vendas-table.mkf-promo-table .mud-table-body .mkf-promo-sub.mkf-promo-auto {
    color: var(--mkf-brand);
    font-weight: 600;
    opacity: 1;
}

.mkf-vendas-table.mkf-promo-table .mud-table-body .mkf-promo-sub.mkf-promo-auto.mkf-promo-auto--sim {
    color: var(--mkf-text-3);
    font-weight: 500;
    font-style: italic;
}

@media (max-width: 600px) {
    .mkf-pauto-dialog .mkf-pauto-form .mkf-pauto-f-nome {
        width: 100%;
    }
}

/* 2026-09-24 — chat da Shopee: encerramento (figurinha, emoji, "obrigado") e o portão do modo automático. */
.mkf-chat-chip.mkf-chat-chip--encerramento {
    background: var(--mkf-idle-soft);
    color: var(--mkf-text-2);
}

.mkf-chat-portao ul {
    margin: 6px 0 10px;
    padding-left: 18px;
}

.mkf-chat-portao .mkf-chat-portao-ciente {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 12px;
    padding: 10px;
    border: 1px solid var(--mkf-line);
    border-radius: var(--mkf-radius-control);
    font-weight: 600;
    cursor: pointer;
}

.mkf-chat-cfg .mkf-chat-cfg-regras .mkf-chat-cfg-texto {
    width: 100%;
    max-width: 560px;
    height: var(--mkf-control-height);
    padding: 0 10px;
    border: 1px solid var(--mkf-line);
    border-radius: var(--mkf-radius-control);
    background: var(--mkf-surface);
    color: var(--mkf-text);
    font: inherit;
}

.mkf-chat-painel .mkf-chat-encerramento-ajuda {
    margin: 0 0 8px;
    color: var(--mkf-text-2);
    font-size: 12.5px;
    white-space: normal;
}

/* ==========================================================================
   Chat da Shopee — rodada 5 (2026-09-26): prazo de 12 h, item da lista em três linhas, cabeçalho da conversa,
   linha do tempo com lados e o compositor. Só tokens --mkf-*. Três faixas na conversa: contexto (surface),
   conversa (shell), resposta (surface).
   ========================================================================== */

/* Tempo esperando, na cor do prazo: folgado texto-2, perto warn, vencido lose. */
.mkf-chat-tempo--ok { color: var(--mkf-text-2); }
.mkf-chat-tempo--warn { color: var(--mkf-warn); }
.mkf-chat-tempo--lose { color: var(--mkf-lose); }

/* ---- Item da lista: três linhas, tudo à esquerda, ellipsis por linha, nada de rolagem horizontal ---- */
.mkf-chat-itens .mkf-chat-item .mkf-chat-item-l1,
.mkf-chat-itens .mkf-chat-item .mkf-chat-item-l3 {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.mkf-chat-itens .mkf-chat-item .mkf-chat-item-nome {
    flex: 1 1 auto;
    min-width: 0;
}

.mkf-chat-itens .mkf-chat-item .mkf-chat-item-tempo {
    flex: 0 0 auto;
    font-family: var(--mkf-mono-numeric-family);
    font-size: 11.5px;
    color: var(--mkf-text-3);
    white-space: nowrap;
}

.mkf-chat-itens .mkf-chat-item .mkf-chat-item-tempo.mkf-chat-tempo--ok { color: var(--mkf-text-2); }
.mkf-chat-itens .mkf-chat-item .mkf-chat-item-tempo.mkf-chat-tempo--warn { color: var(--mkf-warn); }
.mkf-chat-itens .mkf-chat-item .mkf-chat-item-tempo.mkf-chat-tempo--lose { color: var(--mkf-lose); }

.mkf-chat-itens .mkf-chat-item .mkf-chat-item-l2 {
    min-width: 0;
    font-size: 12.5px;
    color: var(--mkf-text-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mkf-chat-itens .mkf-chat-item .mkf-chat-item-l3 {
    font-size: 11.5px;
    color: var(--mkf-text-3);
}

.mkf-chat-itens .mkf-chat-item .mkf-chat-item-ctx {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}

.mkf-chat-itens .mkf-chat-item .mkf-chat-ref {
    flex: 0 0 auto;
    color: var(--mkf-text-2);
}

.mkf-chat-itens .mkf-chat-item .mkf-chat-item-titulo {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--mkf-text-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mkf-chat-item-sem {
    color: var(--mkf-text-3);
    font-size: 11.5px;
}

.mkf-chat-itens .mkf-chat-item .mkf-chat-chip,
.mkf-chat-itens .mkf-chat-item .mkf-chat-estado,
.mkf-chat-itens .mkf-chat-item .mkf-chat-erro-linha {
    flex: 0 0 auto;
    margin-left: 0;
    white-space: nowrap;
}

.mkf-chat-erro-linha {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Prazo vencido = a linha "perdendo" do Sistema de Design (regra 3). Depois da zebra, antes do selecionado. */
.mkf-chat-itens .mkf-chat-item.mkf-chat-item--vencida {
    background-color: var(--mkf-lose-row);
}

.mkf-chat-itens .mkf-chat-item.mkf-chat-item--vencida:hover {
    background-color: var(--mkf-lose-row-hover);
}

/* Selecionada: --mkf-select + faixa da marca; o tempo continua na cor do prazo. */
.mkf-chat-lista .mkf-chat-itens .mkf-chat-item.mkf-chat-item--on,
.mkf-chat-lista .mkf-chat-itens .mkf-chat-item.mkf-chat-item--on:hover {
    background-color: var(--mkf-select);
    border-left-color: var(--mkf-brand);
}

/* Chips com cor só onde exige ação. */
.mkf-chat-chip.mkf-chat-chip--win {
    background-color: var(--mkf-win-soft);
    color: var(--mkf-win);
}

.mkf-chat-chip.mkf-chat-chip--lose {
    background-color: var(--mkf-lose-soft);
    color: var(--mkf-lose);
}

/* ---- Cabeçalho da conversa ---- */
.mkf-chat-cab {
    padding: 12px 14px;
    background-color: var(--mkf-surface);
    border-bottom: 1px solid var(--mkf-line);
}

.mkf-chat-cab .mkf-chat-cab-l1 {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.mkf-chat-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background-color: var(--mkf-surface-3);
    color: var(--mkf-text-2);
    font-size: 12px;
    font-weight: 600;
}

.mkf-chat-avatar.mkf-chat-avatar--p {
    width: 18px;
    height: 18px;
    font-size: 10px;
}

.mkf-chat-cab .mkf-chat-cab-nome {
    min-width: 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--mkf-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mkf-chat-cab .mkf-chat-cab-tempo {
    flex: 0 0 auto;
    font-family: var(--mkf-mono-numeric-family);
    font-size: 12px;
    color: var(--mkf-text-3);
}

.mkf-chat-cab .mkf-chat-cab-tempo.mkf-chat-tempo--ok { color: var(--mkf-text-2); }
.mkf-chat-cab .mkf-chat-cab-tempo.mkf-chat-tempo--warn { color: var(--mkf-warn); }
.mkf-chat-cab .mkf-chat-cab-tempo.mkf-chat-tempo--lose { color: var(--mkf-lose); }

.mkf-chat-cab .mkf-chat-cab-l2 {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    margin-top: 6px;
    font-size: 12px;
    color: var(--mkf-text-3);
    white-space: nowrap;
}

.mkf-chat-cab .mkf-chat-cab-l2 > * {
    flex: 0 0 auto;
}

/* A fonte do contexto é a primeira a encolher: o título do anúncio vale mais que ela. */
.mkf-chat-cab .mkf-chat-cab-l2 .mkf-chat-fonte,
.mkf-chat-cab .mkf-chat-cab-l2 .mkf-chat-fonte--alerta {
    flex: 0 1000 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mkf-chat-cab .mkf-chat-cab-l2 .mkf-chat-cab-titulo {
    flex: 0 1 auto;
    min-width: 120px;
    font-size: 13px;
    font-weight: 500;
    color: var(--mkf-text);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mkf-chat-cab .mkf-chat-cab-l2 a.mkf-chat-cab-titulo:hover {
    text-decoration: underline;
}

.mkf-chat-cab .mkf-chat-cab-dev {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 0;
    margin-top: 8px;
    padding: 6px 10px;
    border-left: 3px solid var(--mkf-warn);
    border-radius: var(--mkf-radius-control);
    background-color: var(--mkf-surface-2);
    font-size: 12.5px;
    color: var(--mkf-text);
}

.mkf-chat-cab .mkf-chat-cab-dev > span:not(.mkf-chat-cab-dev-rot) + span::before {
    content: "·";
    margin: 0 7px;
    color: var(--mkf-text-3);
}

.mkf-chat-cab .mkf-chat-cab-dev .mkf-chat-cab-dev-rot {
    margin-right: 10px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mkf-warn);
}

.mkf-chat-cab .mkf-chat-ped {
    margin-top: 8px;
    padding: 8px 10px;
    border-radius: var(--mkf-radius-control);
    background-color: var(--mkf-surface-2);
}

.mkf-chat-cab .mkf-chat-ped .mkf-chat-ped-topo {
    font-size: 13px;
    font-weight: 500;
    color: var(--mkf-text);
}

/* ---- Linha do tempo ---- */
.mkf-chat-falas .mkf-chat-dia {
    align-self: center;
}

.mkf-chat-falas .mkf-chat-dia span {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 6px;
    background-color: var(--mkf-surface-3);
    color: var(--mkf-text-2);
    font-family: var(--mkf-mono-numeric-family);
    font-size: 11px;
}

.mkf-chat-falas .mkf-chat-grupo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.mkf-chat-falas .mkf-chat-grupo.mkf-chat-grupo--loja {
    align-items: flex-end;
}

.mkf-chat-falas .mkf-chat-grupo .mkf-chat-grupo-cab {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--mkf-text-2);
}

.mkf-chat-falas .mkf-chat-grupo .mkf-chat-grupo-rot {
    font-weight: 500;
}

.mkf-chat-falas .mkf-chat-grupo.mkf-chat-grupo--loja .mkf-chat-grupo-rot {
    color: var(--mkf-brand);
}

.mkf-chat-falas .mkf-chat-grupo .mkf-chat-grupo-glifo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: 1px solid var(--mkf-brand-dim);
    border-radius: 4px;
    background-color: var(--mkf-brand-soft);
    color: var(--mkf-brand);
    font-size: 10px;
    font-weight: 600;
}

/* Balões: comprador à esquerda (surface-2, canto superior esquerdo reto), loja à direita (brand-soft com borda
   brand-dim, canto superior direito reto). */
.mkf-chat-falas .mkf-chat-grupo .mkf-chat-msg {
    max-width: min(520px, 85%);
    padding: 7px 10px;
    border: 1px solid transparent;
    border-radius: 2px 8px 8px 8px;
    background-color: var(--mkf-surface-2);
    color: var(--mkf-text);
    font-size: 13px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.mkf-chat-falas .mkf-chat-grupo.mkf-chat-grupo--loja .mkf-chat-msg {
    border-color: var(--mkf-brand-dim);
    border-radius: 8px 2px 8px 8px;
    background-color: var(--mkf-brand-soft);
}

.mkf-chat-falas .mkf-chat-msg .mkf-chat-msg-txt {
    white-space: pre-wrap;
}

/* Hora DENTRO do balão, no fim da linha. */
.mkf-chat-falas .mkf-chat-msg-hora {
    float: right;
    margin: 3px 0 0 10px;
    font-family: var(--mkf-mono-numeric-family);
    font-size: 11px;
    line-height: 1.45;
    color: var(--mkf-text-2);
    white-space: nowrap;
}

/* Cartão ≠ balão: borda de linha, rótulo em caixa alta, miniatura 32 px. */
.mkf-chat-falas .mkf-chat-grupo .mkf-chat-cartao {
    max-width: min(520px, 85%);
    min-width: 220px;
    padding: 8px 10px;
    border: 1px solid var(--mkf-line);
    border-radius: 8px;
    background-color: var(--mkf-surface);
    color: var(--mkf-text);
    font-size: 12.5px;
}

.mkf-chat-falas .mkf-chat-cartao .mkf-chat-cartao-rot {
    margin-bottom: 5px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--mkf-text-3);
}

.mkf-chat-falas .mkf-chat-cartao .mkf-chat-cartao-corpo {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.mkf-chat-falas .mkf-chat-cartao .mkf-chat-cartao-img {
    display: inline-block;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 4px;
    background-color: var(--mkf-surface-3);
    object-fit: cover;
}

.mkf-chat-falas .mkf-chat-cartao .mkf-chat-cartao-txt {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mkf-chat-falas .mkf-chat-cartao .mkf-chat-cartao-txt:empty {
    display: none;
}

.mkf-chat-falas .mkf-chat-cartao .mkf-chat-msg-hora {
    display: block;
    float: none;
    margin: 4px 0 0;
    text-align: right;
}

.mkf-chat-falas .mkf-chat-grupo .mkf-chat-cartao.mkf-chat-cartao--dev {
    border-left: 3px solid var(--mkf-warn);
}

.mkf-chat-falas .mkf-chat-cartao.mkf-chat-cartao--dev .mkf-chat-cartao-rot {
    color: var(--mkf-warn);
}

.mkf-chat-falas .mkf-chat-cartao .mkf-chat-cartao-grade {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr) max-content minmax(0, 1fr);
    gap: 3px 10px;
    margin: 0;
}

.mkf-chat-falas .mkf-chat-cartao .mkf-chat-cartao-grade dt {
    font-size: 11.5px;
    color: var(--mkf-text-3);
}

.mkf-chat-falas .mkf-chat-cartao .mkf-chat-cartao-grade dd {
    margin: 0;
    color: var(--mkf-text);
}

/* Linha do sistema do prazo: centralizada, mono, com relógio. */
.mkf-chat-falas .mkf-chat-prazo {
    display: inline-flex;
    align-items: center;
    align-self: center;
    gap: 6px;
    font-family: var(--mkf-mono-numeric-family);
    font-size: 11.5px;
}

/* ---- Compositor ---- */
.mkf-chat-comp {
    padding: 12px 14px;
    background-color: var(--mkf-surface);
}

.mkf-chat-comp .mkf-chat-comp-top {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    margin-bottom: 8px;
}

.mkf-chat-comp .mkf-chat-comp-motivo {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 12.5px;
    color: var(--mkf-text-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mkf-chat-comp .mkf-chat-comp-nota {
    margin: 0 0 8px;
    font-family: inherit;
    font-size: 12.5px;
    color: var(--mkf-text-2);
    white-space: normal;
}

.mkf-chat-comp .mkf-chat-encerramento-ajuda {
    margin: 0 0 8px;
    color: var(--mkf-text-2);
    font-size: 12.5px;
}

.mkf-chat-comp textarea {
    width: 100%;
    min-height: 92px;
    padding: 9px 11px;
    border: 1px solid var(--mkf-line);
    border-radius: var(--mkf-radius-control);
    background-color: var(--mkf-surface-2);
    color: var(--mkf-text);
    font-family: inherit;
    font-size: 13px;
    line-height: 1.45;
    resize: vertical;
}

.mkf-chat-comp .mkf-chat-proxima {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 6px;
    font-size: 12.5px;
    color: var(--mkf-text-2);
    cursor: pointer;
}

.mkf-chat-comp .mkf-chat-proxima input {
    width: 15px;
    height: 15px;
    accent-color: var(--mkf-brand);
}

.mkf-chat-comp .mkf-chat-atalhos {
    font-family: var(--mkf-mono-numeric-family);
    font-size: 11px;
    color: var(--mkf-text-3);
}

/* Botão fantasma (Marcar como resolvida, Voltar ao chat na barra) e botão-link (Configurações). */
.mkf-bba-btn.mkf-chat-btn-fantasma {
    background-color: transparent;
    border-color: transparent;
    color: var(--mkf-text-2);
}

.mkf-bba-btn.mkf-chat-btn-fantasma:hover:not(:disabled) {
    background-color: var(--mkf-surface-2);
    color: var(--mkf-text);
}

a.mkf-bba-btn.mkf-chat-btn-cfg,
a.mkf-bba-btn.mkf-chat-btn-voltar {
    color: var(--mkf-text);
    text-decoration: none;
}

/* ---- Configurações → Integrações → Shopee: cabeçalho fixo, barra de ações fixa, aviso de salvo ---- */
.mkf-integ-topo {
    position: sticky;
    top: 0;
    z-index: var(--mkf-z-pagina-fixa);
    margin: -22px -32px 0;
    padding: 14px 32px 0;
    background-color: var(--mkf-bg);
    border-bottom: 1px solid var(--mkf-line);
}

.mkf-integ-topo .mkf-integ-topo-l1 {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mkf-integ-topo .mkf-integ-topo-l1 .mkf-chat-espaco {
    flex: 1 1 auto;
}

.mkf-integ-topo .mkf-integ-abas {
    display: flex;
    gap: 2px;
    margin-top: 10px;
}

.mkf-integ-topo .mkf-integ-abas .mkf-integ-aba {
    padding: 8px 14px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--mkf-text-2);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

.mkf-integ-topo .mkf-integ-abas .mkf-integ-aba:hover {
    color: var(--mkf-text);
}

.mkf-integ-topo .mkf-integ-abas .mkf-integ-aba.mkf-integ-aba--on {
    border-bottom-color: var(--mkf-brand);
    color: var(--mkf-text);
}

.mkf-integ-corpo {
    padding-top: var(--mkf-space-4);
}

.mkf-chat-cfg-pagina .mkf-chat-cfg-barra {
    position: sticky;
    bottom: 0;
    z-index: var(--mkf-z-pagina-fixa);
    display: flex;
    align-items: center;
    gap: var(--mkf-space-2);
    flex-wrap: wrap;
    margin: 0 -32px -24px;
    padding: 10px 32px;
    border-top: 1px solid var(--mkf-line);
    background-color: var(--mkf-bg);
}

.mkf-chat-cfg-pagina .mkf-chat-cfg-barra .mkf-chat-cfg-alterada {
    margin-left: auto;
    font-family: var(--mkf-mono-numeric-family);
    font-size: 11.5px;
    color: var(--mkf-text-3);
}

.mkf-chat-cfg-pagina .mkf-chat-cfg-salvo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 5px 10px;
    border: 1px solid var(--mkf-win);
    border-radius: var(--mkf-radius-control);
    background-color: var(--mkf-surface-3);
    color: var(--mkf-text);
    font-size: 12.5px;
}

.mkf-chat-cfg-pagina .mkf-chat-cfg-salvo a {
    color: var(--mkf-text-2);
}

/* Regras da loja crescem com o texto em vez de rolar numa caixa pequena (field-sizing; onde não houver, a caixa
   fica com os 160 px mínimos e redimensionável). */
.mkf-chat-cfg .mkf-chat-cfg-regras textarea#regras {
    min-height: 160px;
    field-sizing: content;
}

.mkf-chat-cfg .mkf-chat-cfg-prazo {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--mkf-text);
}

@media (max-width: 600px) {
    .mkf-chat-comp .mkf-chat-atalhos {
        display: none;
    }

    .mkf-chat-cfg-pagina .mkf-chat-cfg-barra {
        flex-wrap: wrap;
    }
}

/* ==== Monitor de Vendas — Geral (2026-09-24) ====================================================
   A tela reaproveita tudo do Monitor de Vendas (.mkf-vendas-*); aqui só o que ela tem a mais: o seletor de
   canal, a cor de canal (--mkf-ch-*, as mesmas do menu), 4 cards em vez de 7, a quebra por canal nos cards e
   a coluna SKU própria. 3+ classes onde encosta no MudBlazor (o MudBlazor.min.css carrega DEPOIS deste). */
.mkf-vendas-periodo .mkf-seg.mkf-vendas-geral-canal {
    flex: none;
}

.mkf-vendas-periodo .mkf-seg.mkf-vendas-geral-canal .mkf-seg-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 12px;
    font-size: 12.5px;
    height: 28px;
}

/* 2026-09-24 — ícone de canal (ChannelIcon): cores da marca, fixas nos três temas. */
.mkf-channel-icon {
    display: inline-block;
    flex: none;
    vertical-align: middle;
}

/* O símbolo do ML é <img> (arquivo do logo), mais baixo que a caixa quadrada do menu: centraliza. */
.mkf-nav-item .mkf-nav-icon .mkf-channel-icon.mkf-channel-icon--ml {
    align-self: center;
}

.mkf-vendas-periodo .mkf-seg.mkf-vendas-geral-canal .mkf-seg-btn:disabled .mkf-channel-icon {
    filter: grayscale(1);
    opacity: 0.5;
}

/* Um indicador "ao vivo" por canal, cada um levando ao monitor do canal. */
.mkf-vendas-geral-aovivo {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px 14px;
}

.mkf-vendas-geral-aovivo a.mkf-vendas-aovivo {
    text-decoration: none;
}

.mkf-vendas-geral-aovivo a.mkf-vendas-aovivo:hover {
    color: var(--mkf-brand);
}

.mkf-vendas-tiles.mkf-vendas-tiles--geral {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr);
}

/* Telas estreitas: a barra de períodos rola dentro dela mesma em vez de empurrar a página. */
.mkf-vendas-periodo.mkf-vendas-periodo--geral {
    flex-wrap: wrap;
    min-width: 0;
}

.mkf-vendas-periodo.mkf-vendas-periodo--geral .mkf-seg.mkf-vendas-periodo-seg {
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: thin;
}

/* 4 → 2×2 → 1 coluna. */
@media (max-width: 1100px) {
    .mkf-vendas-tiles.mkf-vendas-tiles--geral {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .mkf-vendas-tiles.mkf-vendas-tiles--geral {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* 2026-09-24 — hierarquia dos cards do Geral: valor principal maior, quebra por canal numa linha só, comparação
   com seta colorida. Mesmo teto de 12,5cqi do valor (dinheiro nunca é truncado). */
.mkf-vendas-tiles.mkf-vendas-tiles--geral .mkf-vendas-tile {
    gap: 6px;
}

.mkf-vendas-tiles.mkf-vendas-tiles--geral .mkf-vendas-tile .mkf-vendas-tile-rot {
    font-weight: 500;
}

.mkf-vendas-tiles.mkf-vendas-tiles--geral .mkf-vendas-tile .mkf-vendas-tile-val {
    font-size: min(1.75rem, 12.5cqi);
}

.mkf-vendas-tiles.mkf-vendas-tiles--geral .mkf-vendas-tile.mkf-vendas-tile--lucro .mkf-vendas-tile-val {
    font-size: min(2rem, 12.5cqi);
}

.mkf-vendas-tiles.mkf-vendas-tiles--geral .mkf-vendas-tile .mkf-vendas-tile-base.mkf-vendas-geral-quebra {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 2px 14px;
    font-size: 12px;
    color: var(--mkf-text-2);
}

.mkf-vendas-tile .mkf-vendas-tile-base.mkf-vendas-geral-quebra > span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.mkf-vendas-tiles.mkf-vendas-tiles--geral .mkf-vendas-tile .mkf-vendas-tile-cmp {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    font-size: 12px;
}

.mkf-vendas-tiles.mkf-vendas-tiles--geral .mkf-vendas-tile .mkf-vendas-tile-cmp b {
    font-size: 13px;
    font-weight: 700;
}

.mkf-vendas-tiles.mkf-vendas-tiles--geral .mkf-vendas-tile .mkf-vendas-tile-cmp.mkf-vendas-tile-cmp--sobe {
    color: var(--mkf-win);
}

.mkf-vendas-tiles.mkf-vendas-tiles--geral .mkf-vendas-tile .mkf-vendas-tile-cmp.mkf-vendas-tile-cmp--desce {
    color: var(--mkf-lose);
}

/* Lucro parcial: bloco de aviso com o link para Custos pendentes (antes, só um ⚠ na linha da margem). */
.mkf-vendas-tiles.mkf-vendas-tiles--geral .mkf-vendas-tile .mkf-vendas-parcial-aviso {
    display: flex;
    gap: 6px;
    padding: 6px 8px;
    border-left: 3px solid var(--mkf-warn);
    border-radius: 4px;
    background-color: var(--mkf-warn-soft);
    color: var(--mkf-text);
    font-size: 12px;
    line-height: 1.4;
    cursor: help;
}

.mkf-vendas-tiles.mkf-vendas-tiles--geral .mkf-vendas-tile .mkf-vendas-parcial-aviso > span[aria-hidden] {
    color: var(--mkf-warn);
}

.mkf-vendas-tiles.mkf-vendas-tiles--geral .mkf-vendas-tile .mkf-vendas-parcial-aviso a {
    color: var(--mkf-brand);
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
}

/* Chips de status do Geral: são filtros da tabela — o ligado ganha a cor da marca e um ✓. */
.mkf-vendas-contadores.mkf-vendas-contadores--geral .mkf-vendas-contador {
    transition: border-color 0.12s, background-color 0.12s;
}

.mkf-vendas-contadores.mkf-vendas-contadores--geral .mkf-vendas-contador.mkf-vendas-contador--on {
    border-color: var(--mkf-brand);
    background-color: var(--mkf-brand-soft);
    color: var(--mkf-text);
    box-shadow: inset 0 0 0 1px var(--mkf-brand);
}

.mkf-vendas-contadores.mkf-vendas-contadores--geral .mkf-vendas-contador.mkf-vendas-contador--on::before {
    content: "✓";
    font-weight: 700;
    color: var(--mkf-brand);
}

.mkf-vendas-contadores.mkf-vendas-contadores--geral .mkf-vendas-contador:focus-visible {
    outline: 2px solid var(--mkf-brand);
    outline-offset: 1px;
}

/* Tabela do Geral: hover um degrau acima da zebra (surface-2 e row-alt quase não se distinguiam). */
.mkf-data-table.mkf-vendas-table--geral .mud-table-row:hover td,
.mkf-data-table.mkf-vendas-table--geral .mud-table-row:hover td.mkf-col-acoes {
    background-color: var(--mkf-surface-3);
}

.mkf-vendas-table.mkf-vendas-table--geral td .mkf-channel-icon {
    display: block;
}

/* Status por cor: Paga verde, Pendente âmbar, Cancelada neutra tracejada, Devolvida vermelha. */
.mkf-vendas-table.mkf-vendas-table--geral .mkf-vendas-status.mkf-vendas-status--paga {
    border-color: transparent;
    background-color: var(--mkf-win-soft);
    color: var(--mkf-win);
}

.mkf-vendas-table.mkf-vendas-table--geral .mkf-vendas-status.mkf-vendas-status--pendente {
    border-color: transparent;
    background-color: var(--mkf-warn-soft);
    color: var(--mkf-warn);
}

.mkf-vendas-table.mkf-vendas-table--geral .mkf-vendas-status.mkf-vendas-status--cancelada {
    border-style: dashed;
    color: var(--mkf-text-3);
}

.mkf-vendas-table.mkf-vendas-table--geral .mkf-vendas-status.mkf-vendas-status--devolvida {
    border-color: transparent;
    background-color: var(--mkf-lose-soft);
    color: var(--mkf-lose);
}


/* Tabela: soma fixa 1186px + folga do Produto. */
.mkf-vendas-table.mkf-vendas-table--geral .mud-table-root {
    min-width: 1400px;
}

/* 2026-09-27 — painel Colunas nos monitores de vendas (Geral, ML, Shopee): o min-width vem do C# pelas colunas visíveis
   (--mkf-table-min-width no Style do MudTable; o fallback é o valor fixo de antes) e a densidade vira a altura da linha
   (--mkf-vendas-row-height; o Padrão dá os 44px de sempre). Depois da regra do --geral: mesma especificidade, vence. */
.mkf-vendas-table.mkf-vendas-table--colunas .mud-table-root {
    min-width: var(--mkf-table-min-width, 1350px);
}

.mkf-vendas-table.mkf-vendas-table--colunas .mud-table-container .mud-table-body .mud-table-cell {
    height: var(--mkf-vendas-row-height, 44px);
}

/* SKU em coluna própria: o mesmo SkuComCopia compactado da linha de SKU do Monitor de Vendas, com o ícone
   aparecendo no hover da CÉLULA (ele ocupa o espaço mesmo invisível — a tabela não pula). */
.mkf-vendas-table.mkf-vendas-table--geral td.mkf-vendas-geral-sku .mkf-sku-cell.mkf-sku-cell--linha {
    gap: 4px;
    min-width: 0;
}

.mkf-vendas-table.mkf-vendas-table--geral td.mkf-vendas-geral-sku .mkf-sku-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--mkf-font-mono);
    font-size: 12px;
}

.mkf-vendas-table.mkf-vendas-table--geral td.mkf-vendas-geral-sku .mkf-sku-cell--linha > div {
    display: flex;
    line-height: 0;
}

.mkf-vendas-table.mkf-vendas-table--geral td.mkf-vendas-geral-sku .mkf-sku-cell--linha .mkf-sku-copy-btn {
    padding: 0;
    width: 14px;
    height: 14px;
    color: var(--mkf-text-2);
}

.mkf-vendas-table.mkf-vendas-table--geral td.mkf-vendas-geral-sku .mkf-sku-cell--linha .mkf-sku-copy-btn .mud-icon-root {
    font-size: 13px;
    width: 13px;
    height: 13px;
}

.mkf-vendas-table.mkf-vendas-table--geral td.mkf-vendas-geral-sku:hover .mkf-sku-cell--linha .mkf-sku-copy-btn {
    opacity: 1;
}

/* ==== Monitor de Vendas — Geral, rodada 2026-09-25 ================================================
   Comparativo escolhível (vs. ontem / vs. semana passada), variação por canal nos cards, margem em destaque,
   barra de share ML/Shopee, card "Projeção do dia" e o gráfico próprio do Geral (GraficoVendasGeral). */
.mkf-vendas-periodo .mkf-seg.mkf-vendas-geral-cmp {
    flex: none;
}

.mkf-vendas-periodo .mkf-seg.mkf-vendas-geral-cmp .mkf-seg-btn {
    padding: 0 12px;
    font-size: 12.5px;
    height: 28px;
}

.mkf-vendas-periodo .mkf-seg.mkf-vendas-geral-cmp .mkf-seg-btn:disabled {
    color: var(--mkf-text-3);
    cursor: not-allowed;
}

/* Com a projeção (só em Hoje) são 5 cards. */
.mkf-vendas-tiles.mkf-vendas-tiles--geral.mkf-vendas-tiles--projecao {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
}

@media (max-width: 1280px) {
    .mkf-vendas-tiles.mkf-vendas-tiles--geral.mkf-vendas-tiles--projecao {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1100px) {
    .mkf-vendas-tiles.mkf-vendas-tiles--geral.mkf-vendas-tiles--projecao {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .mkf-vendas-tiles.mkf-vendas-tiles--geral.mkf-vendas-tiles--projecao {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Variação compacta ao lado do valor de cada canal (e da margem). */
.mkf-vendas-tile .mkf-vendas-tile-base .mkf-vendas-geral-var,
.mkf-vendas-tile .mkf-vendas-geral-margem .mkf-vendas-geral-var {
    font-family: var(--mkf-font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 11px;
    font-weight: 600;
    color: var(--mkf-text-3);
    white-space: nowrap;
    cursor: help;
}

.mkf-vendas-tile .mkf-vendas-tile-base .mkf-vendas-geral-var.mkf-vendas-geral-var--sobe,
.mkf-vendas-tile .mkf-vendas-geral-margem .mkf-vendas-geral-var.mkf-vendas-geral-var--sobe {
    color: var(--mkf-win);
}

.mkf-vendas-tile .mkf-vendas-tile-base .mkf-vendas-geral-var.mkf-vendas-geral-var--desce,
.mkf-vendas-tile .mkf-vendas-geral-margem .mkf-vendas-geral-var.mkf-vendas-geral-var--desce {
    color: var(--mkf-lose);
}

/* Margem: o número secundário do card Lucro. */
.mkf-vendas-tiles.mkf-vendas-tiles--geral .mkf-vendas-tile .mkf-vendas-geral-margem {
    display: inline-flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
    cursor: help;
}

.mkf-vendas-tiles.mkf-vendas-tiles--geral .mkf-vendas-tile .mkf-vendas-geral-margem .mkf-vendas-geral-margem-rot {
    font-size: 12px;
    color: var(--mkf-text-2);
}

.mkf-vendas-tiles.mkf-vendas-tiles--geral .mkf-vendas-tile .mkf-vendas-geral-margem b {
    font-family: var(--mkf-font-mono);
    font-variant-numeric: tabular-nums;
    font-size: min(1.125rem, 9cqi);
    font-weight: 600;
    color: var(--mkf-text);
}

.mkf-vendas-tiles.mkf-vendas-tiles--geral .mkf-vendas-tile .mkf-vendas-geral-margem b.mkf-venda-neg {
    color: var(--mkf-lose);
}

.mkf-vendas-tiles.mkf-vendas-tiles--geral .mkf-vendas-tile .mkf-vendas-geral-margem .mkf-vendas-geral-var {
    font-size: 12px;
}

/* Share ML/Shopee: barra de 4 px nas cores de canal + as porcentagens embaixo. */
.mkf-vendas-tile .mkf-vendas-geral-share {
    display: flex;
    flex-direction: column;
    gap: 3px;
    cursor: help;
}

.mkf-vendas-tile .mkf-vendas-geral-share .mkf-vendas-geral-share-barra {
    display: flex;
    height: 4px;
    overflow: hidden;
    border-radius: 2px;
    background-color: var(--mkf-line-soft);
}

.mkf-vendas-tile .mkf-vendas-geral-share .mkf-vendas-geral-share-barra i {
    display: block;
    height: 100%;
}

.mkf-vendas-tile .mkf-vendas-geral-share .mkf-vendas-geral-share-barra i + i {
    border-left: 1px solid var(--mkf-surface-2);
}

.mkf-vendas-tile .mkf-vendas-geral-share .mkf-vendas-geral-share-rot {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--mkf-text-3);
}

.mkf-vendas-tile .mkf-vendas-geral-share .mkf-vendas-geral-share-rot b {
    font-family: var(--mkf-font-mono);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--mkf-text-2);
}

/* Projeção do dia: card tracejado + selo "estimado" — nunca se confunde com um número apurado. */
.mkf-vendas-tiles.mkf-vendas-tiles--geral .mkf-vendas-tile.mkf-vendas-geral-projecao {
    border-style: dashed;
    background-color: var(--mkf-surface);
    cursor: help;
}

.mkf-vendas-tiles.mkf-vendas-tiles--geral .mkf-vendas-tile.mkf-vendas-geral-projecao .mkf-vendas-tile-val {
    color: var(--mkf-text-2);
}

.mkf-vendas-tiles.mkf-vendas-tiles--geral .mkf-vendas-tile.mkf-vendas-geral-projecao .mkf-vendas-tile-val small {
    font-size: 0.7em;
    color: var(--mkf-text-3);
}

.mkf-vendas-tile .mkf-vendas-tile-rot .mkf-state-badge.mkf-vendas-estimado {
    --mkf-state-color: var(--mkf-text-3);
    --mkf-state-soft: var(--mkf-surface-3);
    gap: 4px;
    padding: 0 6px;
    font-size: 11px;
    line-height: 16px;
}

.mkf-vendas-tiles.mkf-vendas-tiles--geral .mkf-vendas-tile.mkf-vendas-geral-projecao .mkf-vendas-geral-projecao-vendas {
    font-size: 12.5px;
    color: var(--mkf-text-2);
}

.mkf-vendas-tiles.mkf-vendas-tiles--geral .mkf-vendas-tile.mkf-vendas-geral-projecao .mkf-vendas-tile-cmp {
    display: inline;
    white-space: normal;
}

.mkf-vendas-tiles.mkf-vendas-tiles--geral .mkf-vendas-tile.mkf-vendas-geral-projecao .mkf-vendas-tile-cmp .mkf-vendas-tile-num {
    font-family: var(--mkf-font-mono);
    white-space: nowrap;
}

/* ---- Gráfico do Geral ---- */
.mkf-vendas-grafico-card.mkf-vendas-grafico-card--geral {
    padding-top: var(--mkf-space-2);
}

.mkf-grafico-vendas.mkf-grafico-geral .mkf-grafico-geral-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin-bottom: 4px;
}

.mkf-grafico-vendas.mkf-grafico-geral .mkf-seg.mkf-grafico-geral-modo {
    flex: none;
}

.mkf-grafico-vendas.mkf-grafico-geral .mkf-seg.mkf-grafico-geral-modo .mkf-seg-btn {
    height: 24px;
    padding: 0 10px;
    font-size: 12px;
}

.mkf-grafico-vendas.mkf-grafico-geral .mkf-grafico-geral-legenda {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin-left: auto;
    font-size: 11.5px;
    color: var(--mkf-text-2);
}

.mkf-grafico-vendas.mkf-grafico-geral .mkf-grafico-geral-legenda span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.mkf-grafico-vendas.mkf-grafico-geral .mkf-grafico-geral-legenda small {
    color: var(--mkf-text-3);
    font-size: 10.5px;
}

.mkf-grafico-vendas.mkf-grafico-geral .mkf-grafico-geral-legenda .mkf-grafico-legenda-cor {
    width: 9px;
    height: 9px;
    border-radius: 2px;
}

.mkf-grafico-vendas.mkf-grafico-geral .mkf-grafico-geral-traco {
    display: inline-block;
    width: 16px;
    height: 0;
    border-top: 2px solid currentColor;
}

.mkf-grafico-vendas.mkf-grafico-geral .mkf-grafico-geral-traco.mkf-grafico-geral-traco--receita {
    color: var(--mkf-brand);
}

.mkf-grafico-vendas.mkf-grafico-geral .mkf-grafico-geral-traco.mkf-grafico-geral-traco--lucro {
    color: var(--mkf-win);
}

.mkf-grafico-vendas.mkf-grafico-geral .mkf-grafico-geral-traco.mkf-grafico-geral-traco--cmp {
    color: var(--mkf-text-3);
    border-top-style: dashed;
}

.mkf-grafico-geral .mkf-grafico-svg .mkf-grafico-geral-receita {
    fill: none;
    stroke: var(--mkf-brand);
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
    pointer-events: none;
}

.mkf-grafico-geral .mkf-grafico-svg .mkf-grafico-geral-area {
    fill: var(--mkf-brand);
    fill-opacity: 0.08;
    pointer-events: none;
}

.mkf-grafico-geral .mkf-grafico-svg .mkf-grafico-geral-lucro {
    fill: none;
    stroke: var(--mkf-win);
    stroke-width: 1.5;
    stroke-linejoin: round;
    stroke-linecap: round;
    pointer-events: none;
}

.mkf-grafico-geral .mkf-grafico-svg .mkf-grafico-geral-cmp {
    fill: none;
    stroke: var(--mkf-text-3);
    stroke-width: 1.5;
    stroke-dasharray: 5 4;
    stroke-linejoin: round;
    pointer-events: none;
}

.mkf-grafico-geral .mkf-grafico-svg .mkf-grafico-geral-cmp-marca {
    stroke: var(--mkf-text-2);
    stroke-width: 1.5;
    stroke-dasharray: 3 2;
    pointer-events: none;
}

.mkf-grafico-geral .mkf-grafico-svg .mkf-grafico-eixo.mkf-grafico-eixo--lucro {
    fill: var(--mkf-win);
}

.mkf-grafico-geral .mkf-grafico-svg .mkf-grafico-ponto.mkf-grafico-geral-ponto-receita {
    fill: var(--mkf-brand);
}

.mkf-grafico-geral .mkf-grafico-svg .mkf-grafico-ponto.mkf-grafico-geral-ponto-lucro {
    fill: var(--mkf-win);
}

.mkf-grafico-geral .mkf-grafico-svg .mkf-grafico-ponto.mkf-grafico-geral-ponto-cmp {
    fill: var(--mkf-text-3);
}

.mkf-grafico-geral .mkf-grafico-tooltip span.mkf-grafico-geral-dica-total {
    padding-top: 2px;
    border-top: 1px solid var(--mkf-line);
    font-weight: 600;
}

.mkf-grafico-geral .mkf-grafico-tooltip span.mkf-grafico-geral-dica-cmp {
    padding-top: 2px;
    border-top: 1px dashed var(--mkf-line);
    color: var(--mkf-text-2);
}

.mkf-grafico-geral .mkf-grafico-tooltip span.mkf-grafico-geral-dica-cmp > span {
    display: inline;
    color: var(--mkf-text-2);
}

.mkf-grafico-geral .mkf-grafico-tooltip span.mkf-grafico-geral-dica-cmp b {
    margin: 0 0 0 4px;
    font-weight: 600;
}

.mkf-grafico-geral .mkf-grafico-tooltip span.mkf-grafico-geral-dica-cmp b.mkf-venda-pos {
    color: var(--mkf-win);
}

.mkf-grafico-geral .mkf-grafico-tooltip span.mkf-grafico-geral-dica-cmp b.mkf-venda-neg {
    color: var(--mkf-lose);
}

/* Com 5 cards o "vs. sexta passada até 10h34" não cabe numa linha: quebra em vez de reticências. */
.mkf-vendas-tiles.mkf-vendas-tiles--geral .mkf-vendas-tile .mkf-vendas-tile-cmp {
    white-space: normal;
}

/* ================================================================================
   HISTÓRICO DE PROMOÇÕES (2026-09-26) — coluna "Efeito" da lista, "desde" das ativas e a aba "Desempenho".
   Cor nunca sozinha: o ponto vem com o número/sinal ao lado. 3+ classes onde disputa com o MudBlazor.
   ================================================================================ */
.mkf-vendas-table.mkf-promo-table .mud-table-body .mkf-promo-efeito {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mkf-vendas-table.mkf-promo-table .mud-table-body .mkf-promo-efeito-ponto {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 5px;
    border-radius: 50%;
    background: currentColor;
    vertical-align: 1px;
}

.mkf-vendas-table.mkf-promo-table .mud-table-body .mkf-promo-efeito.mkf-promo-efeito--ajudou {
    color: var(--mkf-win);
}

.mkf-vendas-table.mkf-promo-table .mud-table-body .mkf-promo-efeito.mkf-promo-efeito--atrapalhou {
    color: var(--mkf-lose);
}

.mkf-vendas-table.mkf-promo-table .mud-table-body .mkf-promo-efeito.mkf-promo-efeito--neutro,
.mkf-vendas-table.mkf-promo-table .mud-table-body .mkf-promo-efeito.mkf-promo-efeito--sem {
    color: var(--mkf-text-3);
}

/* Sem dado não é "indiferente": sem o ponto cinza, só o "—" e o motivo curto. */
.mkf-vendas-table.mkf-promo-table .mud-table-body .mkf-promo-efeito--sem .mkf-promo-efeito-ponto {
    display: none;
}

/* A sub-linha do efeito leva a mesma cor da de cima (o "+140%" é o que se lê primeiro). */
.mkf-vendas-table.mkf-promo-table .mud-table-body .mkf-promo-sub.mkf-promo-efeito--ajudou,
.mkf-vendas-table.mkf-promo-table .mud-table-body .mkf-promo-sub.mkf-promo-efeito--atrapalhou {
    opacity: 1;
}

/* Aba Desempenho: ocupa o que sobra da página travada; a tabela rola por dentro, a paginação fica visível. */
.mkf-page-flex.mkf-promo-page > .mkf-pdes {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.mkf-promo-page .mkf-pdes > .mkf-vendas-periodo,
.mkf-promo-page .mkf-pdes > .mkf-vendas-tiles,
.mkf-promo-page .mkf-pdes > .mkf-toolbar,
.mkf-promo-page .mkf-pdes > .mkf-table-rodape {
    flex: none;
}

.mkf-promo-page .mkf-pdes > .mkf-table-flex-wrapper.mkf-pdes-tabela-area {
    flex: 1 1 0;
    min-height: 280px;
}

.mkf-promo-page .mkf-pdes .mkf-vendas-table.mkf-pdes-table .mud-table-root {
    min-width: 1180px;
}

/* Tiles de indicador são botões (filtram a tabela). */
.mkf-pdes .mkf-vendas-tiles .mkf-vendas-tile.mkf-pdes-tile {
    font: inherit;
    align-items: flex-start;
    text-align: left;
    color: var(--mkf-text);
    cursor: pointer;
}

.mkf-pdes .mkf-vendas-tiles .mkf-vendas-tile.mkf-pdes-tile:hover {
    border-color: var(--mkf-text-3);
}

.mkf-pdes .mkf-vendas-tiles .mkf-vendas-tile.mkf-pdes-tile--on {
    border-color: var(--mkf-brand);
    box-shadow: inset 0 0 0 1px var(--mkf-brand);
}

/* 2026-09-27 — Pix pendente (ShopeePixPendente.razor): placar do histórico numa linha que quebra. */
.mkf-pix-placar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
    margin-bottom: 12px;
    font-size: 13px;
    color: var(--mkf-text-2);
}

.mkf-pix-placar b {
    color: var(--mkf-text);
    font-family: var(--mkf-font-mono, inherit);
}

/* Cards de tabela (não pagos agora, histórico): a largura das tabelas da Precificação Automática (1280px). */
.mkf-pa-card.mkf-bba-card.mkf-pix-largo {
    max-width: 1280px;
}

.mkf-pix-periodo {
    width: 280px;
    max-width: 100%;
    margin-bottom: 12px;
}

/* Motivo quebra linha (é a coluna que explica o ajuste); as outras seguem numa linha. */
.mkf-bba-tabela td.mkf-pix-motivo {
    white-space: normal;
    min-width: 220px;
    font-size: 12px;
}


/* =====================================================================================================
   Tela Início (2026-09-27) — mockup aprovado em 27/09. HTML puro (sem Mud* nos blocos): nenhuma briga de
   especificidade com o MudBlazor.min.css, que carrega depois deste arquivo. Cor só onde identifica ou pede ação;
   zero sempre em --mkf-text-3; números em mono com tabular-nums. Sem sombra nos cards.
   ===================================================================================================== */
.mkf-inicio {
    display: flex;
    flex-direction: column;
    gap: 26px;
    min-width: 0;
    color: var(--mkf-text);
    font-size: 13.5px;
    line-height: 1.35;
}

.mkf-inicio .mkf-inicio-num,
.mkf-inicio .mkf-inicio-bb-num,
.mkf-inicio .mkf-inicio-rank {
    font-family: var(--mkf-font-mono);
    font-variant-numeric: tabular-nums;
}

.mkf-inicio .mkf-inicio-zero { color: var(--mkf-text-3); }
.mkf-inicio .mkf-inicio-win { color: var(--mkf-win); }
.mkf-inicio .mkf-inicio-lose { color: var(--mkf-lose); }
.mkf-inicio .mkf-inicio-fight { color: var(--mkf-fight); }
.mkf-inicio .mkf-inicio-warn { color: var(--mkf-warn); }
.mkf-inicio .mkf-inicio-stock { color: var(--mkf-stock); }

.mkf-inicio .mkf-inicio-ell {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mkf-inicio a.mkf-inicio-lnk,
.mkf-inicio .mkf-inicio-lnk {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--mkf-brand);
    text-decoration: none;
    white-space: nowrap;
}

.mkf-inicio a.mkf-inicio-lnk:hover { text-decoration: underline; }

/* ---- 0. Cabeçalho ---- */
.mkf-inicio .mkf-inicio-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.mkf-inicio .mkf-inicio-head-id {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mkf-inicio .mkf-inicio-head-id h1 {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.2;
}

.mkf-inicio .mkf-inicio-head-sub {
    font-size: 12.5px;
    color: var(--mkf-text-2);
}

.mkf-inicio .mkf-inicio-head-acts {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.mkf-inicio .mkf-inicio-rep {
    display: flex;
    align-items: center;
    height: 34px;
    padding: 0 4px 0 0;
    box-sizing: border-box;
    background-color: var(--mkf-surface);
    border: 1px solid var(--mkf-line);
    border-radius: 6px;
}

.mkf-inicio .mkf-inicio-rep .mkf-inicio-rep-link {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 100%;
    padding: 0 8px 0 12px;
    color: inherit;
    text-decoration: none;
    border-radius: 6px 0 0 6px;
}

.mkf-inicio .mkf-inicio-rep .mkf-inicio-rep-link:hover { background-color: var(--mkf-surface-2); }

.mkf-inicio .mkf-inicio-rep-rot {
    font-size: 11.5px;
    color: var(--mkf-text-2);
}

.mkf-inicio .mkf-inicio-rep .mkf-inicio-rep-nivel {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 8px;
    border-radius: 4px;
    font-size: 11.5px;
    font-weight: 500;
    background-color: var(--mkf-surface-3);
    color: var(--mkf-text-2);
}

.mkf-inicio .mkf-inicio-rep .mkf-inicio-rep-nivel--win { background-color: var(--mkf-win-soft); color: var(--mkf-win); }
.mkf-inicio .mkf-inicio-rep .mkf-inicio-rep-nivel--warn { background-color: var(--mkf-warn-soft); color: var(--mkf-warn); }
.mkf-inicio .mkf-inicio-rep .mkf-inicio-rep-nivel--lose { background-color: var(--mkf-lose-soft); color: var(--mkf-lose); }

.mkf-inicio .mkf-inicio-rep-quando {
    font-size: 11.5px;
    color: var(--mkf-text-3);
}

.mkf-inicio .mkf-inicio-rep .mkf-inicio-rep-quando--velha { color: var(--mkf-warn); }

.mkf-inicio .mkf-inicio-rep .mkf-inicio-rep-atualizar {
    height: 26px;
    padding: 0 8px;
    border: 0;
    border-radius: 4px;
    background: none;
    color: var(--mkf-brand);
    font: inherit;
    font-size: 11.5px;
    font-weight: 500;
    cursor: pointer;
}

.mkf-inicio .mkf-inicio-rep .mkf-inicio-rep-atualizar:hover:not(:disabled) { background-color: var(--mkf-surface-2); }
.mkf-inicio .mkf-inicio-rep .mkf-inicio-rep-atualizar:disabled { color: var(--mkf-text-3); cursor: default; }

.mkf-inicio .mkf-inicio-periodo {
    display: flex;
    gap: 2px;
    padding: 2px;
    background-color: var(--mkf-surface-2);
    border: 1px solid var(--mkf-line);
    border-radius: 6px;
}

.mkf-inicio .mkf-inicio-periodo .mkf-inicio-periodo-btn {
    height: 26px;
    padding: 0 12px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--mkf-text-2);
    font: inherit;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
}

.mkf-inicio .mkf-inicio-periodo .mkf-inicio-periodo-btn:hover { color: var(--mkf-text); }

.mkf-inicio .mkf-inicio-periodo .mkf-inicio-periodo-btn--on {
    background-color: var(--mkf-surface-3);
    color: var(--mkf-text);
}

/* Papel: a opção ativa vira pílula. */
:root[data-theme="paper"] .mkf-inicio .mkf-inicio-periodo .mkf-inicio-periodo-btn--on {
    background-color: var(--mkf-surface);
    border-radius: 999px;
    box-shadow: 0 0 0 1px var(--mkf-line);
}

.mkf-inicio .mkf-inicio-aviso {
    padding: 10px 14px;
    border: 1px solid var(--mkf-line);
    border-radius: 8px;
    background-color: var(--mkf-warn-soft);
    color: var(--mkf-text);
    font-size: 12.5px;
}

.mkf-inicio .mkf-inicio-aviso a { color: var(--mkf-brand); font-weight: 500; }

/* ---- Seções e cards ---- */
.mkf-inicio .mkf-inicio-sec {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.mkf-inicio .mkf-inicio-sec-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
}

.mkf-inicio .mkf-inicio-sec-head h2 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.25;
}

.mkf-inicio .mkf-inicio-sec-nota {
    font-size: 11.5px;
    color: var(--mkf-text-3);
}

.mkf-inicio .mkf-inicio-card {
    min-width: 0;
    background-color: var(--mkf-surface);
    border: 1px solid var(--mkf-line);
    border-radius: 8px;
    box-sizing: border-box;
}

.mkf-inicio .mkf-inicio-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    height: 44px;
    padding: 0 16px;
    border-bottom: 1px solid var(--mkf-line);
}

.mkf-inicio .mkf-inicio-card-head--start { justify-content: flex-start; }

.mkf-inicio .mkf-inicio-card-tit {
    font-size: 13.5px;
    font-weight: 600;
}

.mkf-inicio .mkf-inicio-card-foot {
    display: flex;
    align-items: center;
    height: 40px;
    margin-top: auto;
    padding: 0 16px;
    border-top: 1px solid var(--mkf-line);
}

.mkf-inicio .mkf-inicio-th {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--mkf-text-2);
    white-space: nowrap;
}

.mkf-inicio .mkf-inicio-num {
    text-align: right;
    font-size: 13px;
    white-space: nowrap;
}

.mkf-inicio .mkf-inicio-vazio,
.mkf-inicio .mkf-inicio-vazio-conta {
    padding: 16px;
    font-size: 12.5px;
    color: var(--mkf-text-2);
}

.mkf-inicio .mkf-inicio-vazio-conta a { color: var(--mkf-brand); font-weight: 500; }

.mkf-inicio .mkf-inicio-erro {
    padding: 14px 16px;
    font-size: 12.5px;
    color: var(--mkf-text-2);
}

.mkf-inicio .mkf-inicio-erro .mkf-inicio-erro-btn {
    padding: 0;
    border: 0;
    background: none;
    color: var(--mkf-brand);
    font: inherit;
    font-weight: 500;
    cursor: pointer;
}

/* Skeleton por bloco — só o fundo --mkf-surface-2, sem animação chamativa. */
.mkf-inicio .mkf-inicio-skel {
    display: block;
    border-radius: 4px;
    background-color: var(--mkf-surface-2);
}

.mkf-inicio .mkf-inicio-skel--num { width: 40px; height: 29px; }
.mkf-inicio .mkf-inicio-skel--linha { grid-column: 1 / -1; width: 100%; height: 14px; }
.mkf-inicio .mkf-inicio-skel-card { height: 160px; background-color: var(--mkf-surface-2); border-color: var(--mkf-line-soft); }

/* ---- 2. Vendas ---- */
.mkf-inicio .mkf-inicio-vendas-row {
    display: grid;
    /* 2026-09-27: + "Atraso %" (90 px) depois de Margem; Canal 220 → 200 pra caber em 1440. */
    grid-template-columns: 200px 90px 120px 110px 80px 90px 150px minmax(96px, 1fr);
    align-items: center;
    height: 46px;
    padding: 0 16px;
    border-top: 1px solid var(--mkf-line-soft);
}

.mkf-inicio .mkf-inicio-vendas-row--head { height: 36px; border-top: 0; }

.mkf-inicio .mkf-inicio-vendas-row--total {
    border-top: 1px solid var(--mkf-line);
    font-weight: 600;
}

.mkf-inicio .mkf-inicio-vendas-row--total .mkf-inicio-num { font-weight: 600; }

.mkf-inicio .mkf-inicio-canal {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
}

.mkf-inicio .mkf-inicio-vendas-row--total .mkf-inicio-canal { font-weight: 600; }

.mkf-inicio .mkf-inicio-canal-ponto {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: none;
}

.mkf-inicio .mkf-inicio-canal-ponto--ml { background-color: var(--mkf-ch-ml); }
.mkf-inicio .mkf-inicio-canal-ponto--shopee { background-color: var(--mkf-ch-shopee); }

.mkf-inicio .mkf-inicio-spark {
    display: block;
    justify-self: end;
    overflow: visible;
}

.mkf-inicio .mkf-inicio-spark polyline {
    fill: none;
    stroke-width: 1.5;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.mkf-inicio .mkf-inicio-spark--ml polyline { stroke: var(--mkf-ch-ml); }
.mkf-inicio .mkf-inicio-spark--shopee polyline { stroke: var(--mkf-ch-shopee); }
.mkf-inicio .mkf-inicio-spark--total polyline { stroke: var(--mkf-text-2); }

/* ---- 3. Mais vendidos ---- */
.mkf-inicio .mkf-inicio-top-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.mkf-inicio .mkf-inicio-top {
    display: flex;
    flex-direction: column;
}

.mkf-inicio .mkf-inicio-top-row {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr) 36px 72px 66px 100px;
    gap: 10px;
    align-items: center;
    height: 46px;
    padding: 0 16px;
    border-top: 1px solid var(--mkf-line-soft);
}

/* Zebra: 1º filho é o cabeçalho do card, 2º o cabeçalho da tabela — a 2ª, 4ª… linha de item ganham o fundo. */
.mkf-inicio .mkf-inicio-top .mkf-inicio-top-row:nth-child(2n+4) { background-color: var(--mkf-row-alt); }

.mkf-inicio .mkf-inicio-top-row--head { height: 32px; border-top: 0; }

.mkf-inicio .mkf-inicio-top-row .mkf-inicio-num { font-size: 12.5px; }

/* Mais vendidos (2026-10-04): ordem + quantidade à direita do título, antes da nota; a coluna ordenada na cor da marca. */
.mkf-inicio .mkf-inicio-sec-head .mkf-inicio-top-ctrl {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px 12px;
}

.mkf-inicio .mkf-inicio-top-row--head .mkf-inicio-th.mkf-inicio-th--ord { color: var(--mkf-brand); }
.mkf-inicio .mkf-inicio-sec-head .mkf-inicio-top-ctrl .mkf-inicio-sec-nota { text-align: right; }

.mkf-inicio .mkf-inicio-rank {
    font-size: 12px;
    color: var(--mkf-text-3);
}

.mkf-inicio .mkf-inicio-produto {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.mkf-inicio .mkf-inicio-produto-tit {
    font-size: 13px;
    font-weight: 450;
}

.mkf-inicio .mkf-inicio-produto-sku {
    font-family: var(--mkf-font-mono);
    font-size: 11.5px;
}

/* SkuComCopia compacto (mesma receita do Monitor de Vendas): o MudIconButton Small de fábrica tem 34 px e esticaria
   a linha; encolhido pra altura do texto, aparece no hover. */
.mkf-inicio .mkf-sku-cell.mkf-inicio-sku {
    gap: 4px;
    min-width: 0;
}

.mkf-inicio .mkf-sku-cell.mkf-inicio-sku .mkf-sku-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--mkf-font-mono);
    font-size: 11.5px;
    color: var(--mkf-text-2);
}

.mkf-inicio .mkf-inicio-op-row .mkf-sku-cell.mkf-inicio-sku .mkf-sku-text { font-size: 13px; }

.mkf-inicio .mkf-sku-cell.mkf-inicio-sku > div {
    display: flex;
    line-height: 0;
}

.mkf-inicio .mkf-sku-cell.mkf-inicio-sku .mkf-sku-copy-btn {
    padding: 0;
    width: 14px;
    height: 14px;
    color: var(--mkf-text-2);
}

.mkf-inicio .mkf-sku-cell.mkf-inicio-sku .mkf-sku-copy-btn .mud-icon-root {
    font-size: 13px;
    width: 13px;
    height: 13px;
}

.mkf-inicio .mkf-inicio-sinais {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-size: 12.5px;
}

.mkf-inicio .mkf-inicio-sinal {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 7px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
}

.mkf-inicio .mkf-inicio-sinal--lose { background-color: var(--mkf-lose-soft); color: var(--mkf-lose); }
.mkf-inicio .mkf-inicio-sinal--warn { background-color: var(--mkf-warn-soft); color: var(--mkf-warn); }
.mkf-inicio .mkf-inicio-sinal--stock { background-color: var(--mkf-stock-soft); color: var(--mkf-stock); }

/* ---- 4. Buy Box ---- */
.mkf-inicio .mkf-inicio-bb {
    display: flex;
    align-items: center;
    gap: 40px;
    min-height: 72px;
    padding: 0 20px;
    flex-wrap: wrap;
}

.mkf-inicio a.mkf-inicio-bb-cont {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 0;
    color: inherit;
    text-decoration: none;
}

.mkf-inicio a.mkf-inicio-bb-cont:hover .mkf-inicio-bb-rot { color: var(--mkf-text); text-decoration: underline; }

.mkf-inicio .mkf-inicio-bb-num {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.1;
}

.mkf-inicio .mkf-inicio-bb-rot {
    font-size: 11.5px;
    color: var(--mkf-text-2);
    white-space: nowrap;
}

.mkf-inicio .mkf-inicio-bb-meta {
    margin-left: auto;
    font-size: 11.5px;
    color: var(--mkf-text-3);
}

.mkf-inicio .mkf-inicio-op-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 120px 100px 116px 96px;
    gap: 12px;
    align-items: center;
    height: 40px;
    padding: 0 16px;
    border-top: 1px solid var(--mkf-line-soft);
}

/* Zebra neutra (1º filho = cabeçalho do card, 2º = cabeçalho da tabela). Sem cor de estado na linha: aqui toda linha
   é "perdendo", o vermelho fica só no número da diferença. */
.mkf-inicio .mkf-inicio-card .mkf-inicio-op-row:nth-child(2n+4) { background-color: var(--mkf-row-alt); }

.mkf-inicio .mkf-inicio-op-row--head { height: 32px; border-top: 0; }

/* ---- 3b. Produtos em atraso — Shopee (2026-09-27) — contadores no padrão do Buy Box + tabela produto × semana ---- */
.mkf-inicio .mkf-inicio-pa-causa { display: flex; gap: 4px; }

.mkf-inicio .mkf-inicio-sec-head .mkf-inicio-pa-chip {
    height: 24px;
    padding: 0 10px;
    border: 1px solid var(--mkf-line);
    border-radius: 12px;
    background: none;
    color: var(--mkf-text-2);
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}

.mkf-inicio .mkf-inicio-sec-head .mkf-inicio-pa-chip.mkf-inicio-pa-chip--on {
    border-color: var(--mkf-brand);
    background-color: var(--mkf-surface-2);
    color: var(--mkf-text);
    font-weight: 500;
}

.mkf-inicio .mkf-inicio-bb button.mkf-inicio-pa-cont {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 6px 10px;
    margin: 0 -10px;
    border: 0;
    border-radius: 6px;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.mkf-inicio .mkf-inicio-bb button.mkf-inicio-pa-cont:hover .mkf-inicio-bb-rot { color: var(--mkf-text); text-decoration: underline; }
.mkf-inicio .mkf-inicio-bb button.mkf-inicio-pa-cont.mkf-inicio-pa-cont--on { background-color: var(--mkf-surface-2); }

.mkf-inicio .mkf-inicio-pa-cont .mkf-inicio-bb-num { font-family: var(--mkf-font-mono); font-variant-numeric: tabular-nums; }

.mkf-inicio .mkf-inicio-pa-cont .mkf-inicio-pa-ped {
    margin-left: 6px;
    font-size: 15px;
    font-weight: 500;
    color: var(--mkf-text-2);
}

.mkf-inicio .mkf-inicio-pa-cont .mkf-inicio-pa-ped.mkf-inicio-zero { color: var(--mkf-text-3); }

.mkf-inicio .mkf-inicio-pa-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) repeat(var(--mkf-pa-semanas, 8), 52px) 60px 56px 70px 180px;
    gap: 0 8px;
    align-items: stretch;
    min-height: 44px;
    padding: 0 16px;
    border-top: 1px solid var(--mkf-line-soft);
}

.mkf-inicio .mkf-inicio-pa-row > * { display: flex; align-items: center; min-width: 0; }
.mkf-inicio .mkf-inicio-pa-row > .mkf-inicio-num { justify-content: flex-end; }
.mkf-inicio .mkf-inicio-pa-row > .mkf-inicio-produto { flex-direction: column; align-items: flex-start; justify-content: center; }

.mkf-inicio .mkf-inicio-card .mkf-inicio-pa-row:nth-child(2n+4) { background-color: var(--mkf-row-alt); }

.mkf-inicio .mkf-inicio-pa-row.mkf-inicio-pa-row--head { min-height: 32px; border-top: 0; }

/* A semana corrente (previsão) em fundo próprio, de ponta a ponta da coluna. */
.mkf-inicio .mkf-inicio-pa-row > .mkf-inicio-pa-atual {
    margin: 0 -4px;
    padding: 0 4px;
    background-color: var(--mkf-surface-2);
}

.mkf-inicio .mkf-inicio-pa-row > .mkf-inicio-pa-total { font-weight: 600; }

/* Linha de Total: soma de todos os produtos da lista. Sem zebra, separada por linha cheia. */
.mkf-inicio .mkf-inicio-card .mkf-inicio-pa-row.mkf-inicio-pa-row--total {
    min-height: 40px;
    border-top: 1px solid var(--mkf-line);
    background-color: transparent;
    font-weight: 600;
}

.mkf-inicio .mkf-inicio-pa-row--total > .mkf-inicio-pa-total-rot { font-size: 13px; }

.mkf-inicio .mkf-inicio-card-foot .mkf-inicio-pa-todos,
.mkf-inicio .mkf-inicio-vazio .mkf-inicio-pa-ocultos {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    cursor: pointer;
}

.mkf-inicio .mkf-inicio-vazio .mkf-inicio-pa-ocultos {
    display: block;
    margin-top: 6px;
    color: var(--mkf-text-2);
    font-size: 12px;
    text-decoration: underline;
}

@media (max-width: 1280px) {
    .mkf-inicio .mkf-inicio-pa-row { grid-template-columns: minmax(180px, 1fr) repeat(var(--mkf-pa-semanas, 8), 44px) 52px 48px 60px 150px; }
}

/* Telas estreitas: 5 cards → 3 → 2; os dois "Mais vendidos" empilham. A tabela de vendas rola dentro do card. */
@media (max-width: 1280px) {
        .mkf-inicio .mkf-inicio-top-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 1100px) {
    .mkf-inicio .mkf-inicio-card.mkf-inicio-vendas { overflow-x: auto; }
    .mkf-inicio .mkf-inicio-vendas-row { min-width: 900px; }
}



/* Cabeçalho numérico da Início: continua cabeçalho (sans 10,5 px caixa alta), só alinhado à direita — sem isto a
   .mkf-inicio-num (declarada depois, mesma especificidade) trocava pra mono 13 px e "MARGEM" encostava em "VS.". */
.mkf-inicio .mkf-inicio-th.mkf-inicio-num {
    font-family: inherit;
    font-size: 10.5px;
    font-variant-numeric: normal;
}

/* "vs. 30 dias anteriores" não cabe em 150 px numa linha: no cabeçalho da tabela de vendas o rótulo pode quebrar. */
.mkf-inicio .mkf-inicio-vendas-row--head .mkf-inicio-th {
    white-space: normal;
    line-height: 1.2;
}

/* Dois sinais não cabem lado a lado em 100 px: empilham (2 × 20 px + 2 px cabem na linha de 46 px). */
.mkf-inicio .mkf-inicio-top-row .mkf-inicio-sinais {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

/* =====================================================================================================
   Configurações → Notificações (2026-09-27). HTML puro, só tokens.
   ===================================================================================================== */
.mkf-notif {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 760px;
}

.mkf-notif h1 {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
}

.mkf-notif .mkf-notif-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px 20px;
    background-color: var(--mkf-surface);
    border: 1px solid var(--mkf-line);
    border-radius: 8px;
}

.mkf-notif .mkf-notif-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.mkf-notif .mkf-notif-card-head h2 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
}

.mkf-notif .mkf-notif-estado {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    background-color: var(--mkf-surface-3);
    color: var(--mkf-text-2);
}

.mkf-notif .mkf-notif-estado.mkf-notif-estado--on { background-color: var(--mkf-win-soft); color: var(--mkf-win); }
.mkf-notif .mkf-notif-estado.mkf-notif-estado--erro { background-color: var(--mkf-lose-soft); color: var(--mkf-lose); }

.mkf-notif .mkf-notif-nota {
    margin: 0;
    font-size: 13px;
    color: var(--mkf-text-2);
    line-height: 1.45;
}

.mkf-notif .mkf-notif-aviso {
    margin: 0;
    padding: 8px 12px;
    border-radius: 6px;
    background-color: var(--mkf-warn-soft);
    color: var(--mkf-text);
    font-size: 12.5px;
}

.mkf-notif .mkf-notif-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.mkf-notif .mkf-notif-acoes:empty { display: none; }

.mkf-notif .mkf-notif-chaves {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mkf-notif .mkf-notif-campos {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 12px;
}

.mkf-notif .mkf-notif-campo {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    color: var(--mkf-text-2);
}

.mkf-notif .mkf-notif-campo .mkf-pop-input { width: 100%; box-sizing: border-box; }

.mkf-notif .mkf-notif-rodape {
    margin: 0;
    font-size: 12px;
    color: var(--mkf-text-3);
}

.mkf-notif .mkf-notif-rodape.mkf-notif-rodape--erro { color: var(--mkf-lose); }

@media (max-width: 640px) {
    .mkf-notif .mkf-notif-campos { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Painel lateral "Pedidos atrasados" (2026-09-27) — 520 px à direita, sem sombra, fecha com Esc/fora/× ---- */
.mkf-inicio .mkf-inicio-drawer-fundo {
    position: fixed;
    inset: 0;
    z-index: var(--mkf-z-dropdown-fundo);
    background: transparent;
}

.mkf-inicio .mkf-inicio-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 520px;
    max-width: 100vw;
    z-index: var(--mkf-z-dropdown);
    display: flex;
    flex-direction: column;
    background-color: var(--mkf-surface);
    border-left: 1px solid var(--mkf-line);
    outline: none;
}

.mkf-inicio .mkf-inicio-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 48px;
    padding: 10px 16px 8px 20px;
    box-sizing: border-box;
}

.mkf-inicio .mkf-inicio-drawer-id {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.mkf-inicio .mkf-inicio-drawer-id h2 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

.mkf-inicio .mkf-inicio-drawer-sub {
    font-size: 11.5px;
    color: var(--mkf-text-2);
}

.mkf-inicio .mkf-inicio-drawer .mkf-inicio-drawer-fechar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--mkf-text-2);
    cursor: pointer;
}

.mkf-inicio .mkf-inicio-drawer .mkf-inicio-drawer-fechar:hover { background-color: var(--mkf-surface-2); color: var(--mkf-text); }

.mkf-inicio .mkf-inicio-drawer-fechar svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}

.mkf-inicio .mkf-inicio-drawer-abas {
    display: flex;
    gap: 4px;
    padding: 0 16px;
    border-bottom: 1px solid var(--mkf-line);
}

.mkf-inicio .mkf-inicio-drawer .mkf-inicio-drawer-aba {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 10px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    color: var(--mkf-text-2);
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

.mkf-inicio .mkf-inicio-drawer .mkf-inicio-drawer-aba.mkf-inicio-drawer-aba--on {
    color: var(--mkf-text);
    border-bottom-color: var(--mkf-brand);
}

.mkf-inicio .mkf-inicio-drawer .mkf-inicio-drawer-aba.mkf-inicio-drawer-aba--breve { color: var(--mkf-text-3); }

.mkf-inicio .mkf-inicio-drawer-aba-pct {
    font-family: var(--mkf-font-mono);
    font-size: 12px;
    color: var(--mkf-text-2);
}

.mkf-inicio .mkf-inicio-drawer-corpo {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.mkf-inicio .mkf-inicio-drawer-vazio {
    padding: 24px 20px;
    font-size: 13px;
    color: var(--mkf-text-2);
}

.mkf-inicio .mkf-inicio-drawer-pedido {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 72px;
    padding: 12px 20px;
    box-sizing: border-box;
    border-bottom: 1px solid var(--mkf-line-soft);
}

.mkf-inicio .mkf-inicio-drawer-pedido:nth-child(even) { background-color: var(--mkf-row-alt); }

.mkf-inicio .mkf-inicio-drawer-l1 {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.mkf-inicio .mkf-sku-cell.mkf-inicio-sku.mkf-inicio-drawer-sn .mkf-sku-text {
    font-size: 13px;
    color: var(--mkf-text);
    font-weight: 500;
}

.mkf-inicio .mkf-inicio-drawer-comprador {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    color: var(--mkf-text-2);
}

.mkf-inicio .mkf-inicio-drawer-atraso {
    margin-left: auto;
    font-family: var(--mkf-font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 14px;
    font-weight: 600;
    color: var(--mkf-lose);
    white-space: nowrap;
}

.mkf-inicio .mkf-inicio-drawer-l2 {
    font-size: 11.5px;
    color: var(--mkf-text-2);
}

.mkf-inicio .mkf-inicio-drawer-item {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr) 32px 84px;
    gap: 8px;
    align-items: center;
    padding-left: 12px;
    font-size: 12.5px;
}

.mkf-inicio .mkf-inicio-drawer-item .mkf-inicio-num { font-size: 12px; }

.mkf-inicio .mkf-inicio-drawer-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

.mkf-inicio .mkf-inicio-drawer-acoes .mkf-bba-btn { text-decoration: none; }

.mkf-inicio .mkf-inicio-drawer-rodape {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 48px;
    padding: 8px 20px;
    box-sizing: border-box;
    border-top: 1px solid var(--mkf-line);
    font-size: 12px;
    color: var(--mkf-text-2);
}

/* ---- Pedidos atrasados v2 (2026-09-27): TEA, causa, isenção, visão Produtos ---- */
.mkf-inicio .mkf-inicio-drawer.mkf-inicio-drawer--largo { width: 880px; }

.mkf-inicio .mkf-atr-rodape-txt { min-width: 0; line-height: 1.5; }

.mkf-inicio .mkf-atr-tea {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 20px 10px;
    border-bottom: 1px solid var(--mkf-line-soft);
}

.mkf-inicio .mkf-atr-tea-l1 {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
}

.mkf-inicio .mkf-atr-tea-pct {
    font-family: var(--mkf-font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.1;
}

.mkf-inicio .mkf-atr-tea-chip {
    display: inline-flex;
    align-items: center;
    height: 18px;
    padding: 0 6px;
    border-radius: 4px;
    background-color: var(--mkf-surface-2);
    color: var(--mkf-text-2);
    font-size: 11px;
    font-weight: 500;
}

.mkf-inicio .mkf-atr-tea-meta { font-size: 12px; color: var(--mkf-text-2); }

.mkf-inicio .mkf-atr-tea-info {
    font-size: 12px;
    color: var(--mkf-text-3);
    cursor: help;
}

.mkf-inicio .mkf-atr-tea-l2 { font-size: 12px; color: var(--mkf-text-2); }

.mkf-inicio .mkf-atr-tea-aviso { font-size: 12px; font-weight: 500; color: var(--mkf-lose); }

.mkf-inicio .mkf-atr-seg {
    display: inline-flex;
    gap: 2px;
    margin: 10px 20px 0;
    padding: 2px;
    border: 1px solid var(--mkf-line);
    border-radius: 6px;
}

.mkf-inicio .mkf-atr-seg.mkf-atr-seg--lista { margin-top: 8px; }

.mkf-inicio .mkf-inicio-drawer .mkf-atr-seg-btn {
    height: 26px;
    padding: 0 12px;
    border: 0;
    border-radius: 4px;
    background: none;
    color: var(--mkf-text-2);
    font: inherit;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
}

.mkf-inicio .mkf-inicio-drawer .mkf-atr-seg-btn.mkf-atr-seg-btn--on {
    background-color: var(--mkf-surface-2);
    color: var(--mkf-text);
}

.mkf-inicio .mkf-atr-resumo {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    padding: 10px 20px 0;
    font-size: 12px;
}

.mkf-inicio .mkf-atr-sep { color: var(--mkf-text-3); }

.mkf-inicio .mkf-inicio-drawer .mkf-atr-parcela {
    padding: 1px 4px;
    border: 0;
    border-radius: 4px;
    background: none;
    color: var(--mkf-text-2);
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}

.mkf-inicio .mkf-inicio-drawer .mkf-atr-parcela.mkf-inicio-lose { color: var(--mkf-lose); }
.mkf-inicio .mkf-inicio-drawer .mkf-atr-parcela.mkf-inicio-warn { color: var(--mkf-warn); }
.mkf-inicio .mkf-inicio-drawer .mkf-atr-parcela.mkf-inicio-stock { color: var(--mkf-stock); }
.mkf-inicio .mkf-inicio-drawer .mkf-atr-parcela.mkf-inicio-zero { color: var(--mkf-text-3); }
.mkf-inicio .mkf-inicio-drawer .mkf-atr-parcela:hover { background-color: var(--mkf-surface-2); }

.mkf-inicio .mkf-inicio-drawer .mkf-atr-parcela.mkf-atr-parcela--on {
    background-color: var(--mkf-surface-2);
    font-weight: 600;
}

.mkf-inicio .mkf-inicio-drawer .mkf-atr-exportar { margin-left: auto; }

.mkf-inicio .mkf-atr-lista { margin-top: 8px; border-top: 1px solid var(--mkf-line-soft); }

.mkf-inicio .mkf-atr-nota { padding: 8px 20px 0; font-size: 11.5px; color: var(--mkf-text-3); }

.mkf-inicio .mkf-atr-chip {
    display: inline-flex;
    align-items: center;
    height: 18px;
    margin-left: 6px;
    padding: 0 6px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
    vertical-align: 1px;
}

.mkf-inicio .mkf-atr-chip.mkf-atr-chip--lose { background-color: var(--mkf-lose-soft); color: var(--mkf-lose); }
.mkf-inicio .mkf-atr-chip.mkf-atr-chip--warn { background-color: var(--mkf-warn-soft); color: var(--mkf-warn); cursor: help; }
.mkf-inicio .mkf-atr-chip.mkf-atr-chip--zero { background-color: var(--mkf-surface-2); color: var(--mkf-text-3); }

.mkf-inicio .mkf-atr-cancela { font-size: 11.5px; font-weight: 500; color: var(--mkf-text-2); }
.mkf-inicio .mkf-atr-cancela.mkf-inicio-lose { color: var(--mkf-lose); }

.mkf-inicio .mkf-inicio-drawer-pedido.mkf-atr-pedido--isento .mkf-inicio-drawer-l2 { color: var(--mkf-text-3); }

.mkf-inicio .mkf-atr-isento { font-size: 11.5px; color: var(--mkf-text-3); }

.mkf-inicio .mkf-atr-isentar {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
}

.mkf-inicio .mkf-inicio-drawer .mkf-atr-isentar-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 28px;
    padding: 0 8px;
    border: 1px solid var(--mkf-line);
    border-radius: 6px;
    background-color: var(--mkf-surface);
    color: var(--mkf-text);
    font: inherit;
    font-size: 12.5px;
}

.mkf-inicio .mkf-inicio-drawer .mkf-atr-isentar-input:focus { outline: none; border-color: var(--mkf-brand); }

/* Visão Produtos */
.mkf-inicio .mkf-atr-filtros {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 20px 0;
}

.mkf-inicio .mkf-atr-chips { display: flex; flex-wrap: wrap; gap: 4px; }

.mkf-inicio .mkf-inicio-drawer .mkf-atr-chip-btn {
    height: 24px;
    padding: 0 10px;
    border: 1px solid var(--mkf-line);
    border-radius: 12px;
    background: none;
    color: var(--mkf-text-2);
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}

.mkf-inicio .mkf-inicio-drawer .mkf-atr-chip-btn.mkf-atr-chip-btn--on {
    border-color: var(--mkf-brand);
    background-color: var(--mkf-surface-2);
    color: var(--mkf-text);
    font-weight: 500;
}

.mkf-inicio .mkf-atr-prod-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 80px 70px 110px 90px 90px 120px;
    gap: 8px;
    align-items: center;
    min-height: 46px;
    padding: 0 20px;
    box-sizing: border-box;
    border-bottom: 1px solid var(--mkf-line-soft);
    font-size: 12.5px;
}

.mkf-inicio .mkf-atr-prod-row.mkf-atr-prod-row--head { min-height: 32px; margin-top: 10px; border-top: 1px solid var(--mkf-line-soft); }
.mkf-inicio .mkf-atr-prod-row.mkf-atr-prod-row--item { cursor: pointer; }
.mkf-inicio .mkf-atr-prod-row.mkf-atr-prod-row--item:nth-of-type(even) { background-color: var(--mkf-row-alt); }
.mkf-inicio .mkf-atr-prod-row.mkf-atr-prod-row--item:hover,
.mkf-inicio .mkf-atr-prod-row.mkf-atr-prod-row--item.mkf-atr-prod-row--aberto { background-color: var(--mkf-surface-2); }

.mkf-inicio .mkf-atr-prod { display: flex; flex-direction: column; min-width: 0; }

.mkf-inicio .mkf-sku-cell.mkf-inicio-sku.mkf-atr-prod-sku .mkf-sku-text { font-size: 11.5px; }

.mkf-inicio .mkf-atr-rec { display: flex; flex-direction: column; gap: 3px; }

.mkf-inicio .mkf-atr-rec .mkf-inicio-num { text-align: left; }

.mkf-inicio .mkf-atr-faixa { display: flex; gap: 2px; }

.mkf-inicio .mkf-atr-faixa i {
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 1px;
    background-color: var(--mkf-line);
}

.mkf-inicio .mkf-atr-faixa i.mkf-atr-faixa--on { background-color: var(--mkf-lose); }

.mkf-inicio .mkf-atr-quando { color: var(--mkf-text-2); font-size: 12px; }

.mkf-inicio .mkf-atr-prod-pedidos {
    border-bottom: 1px solid var(--mkf-line);
    background-color: var(--mkf-surface);
    padding-left: 16px;
}

.mkf-inicio .mkf-inicio-drawer .mkf-atr-ocultos {
    display: block;
    margin: 10px 20px 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--mkf-text-2);
    font: inherit;
    font-size: 12px;
    text-decoration: underline;
    cursor: pointer;
}

@media (max-width: 900px) {
    .mkf-inicio .mkf-inicio-drawer.mkf-inicio-drawer--largo { width: 100vw; }
    .mkf-inicio .mkf-atr-prod-row { grid-template-columns: minmax(0, 1fr) 56px 44px 96px 60px; }
    .mkf-inicio .mkf-atr-prod-row > :nth-child(6),
    .mkf-inicio .mkf-atr-prod-row > :nth-child(7) { display: none; }
}

/* Nº do pedido Shopee + "copiar" (PedidoShopeeComCopia, 2026-09-28) */
.mkf-ped-shopee {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    white-space: nowrap;
}

/* Link "Instruções da loja" no cabeçalho do Chat da Shopee — mesmo tamanho/alinhamento do das Perguntas (2026-09-28). */
.mkf-page-head .mkf-page-head-acoes .mkf-perg-link {
    align-self: center;
    font-size: var(--mkf-type-body-size);
}

/* ---- Instruções da loja em abas (InstrucoesLojaEditor, 2026-09-28) ------------------------------------------------
   Mesmo desenho das abas da página (.mkf-integ-aba), menores. Seletores com 3 classes: o MudBlazor.min.css vem
   depois do app.css e o bloco do ML mora dentro de um MudPaper. */
.mkf-instr {
    width: 100%;
    scroll-margin-top: 190px;
}

.mkf-instr .mkf-instr-abas {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 2px;
    border-bottom: 1px solid var(--mkf-line);
}

.mkf-instr .mkf-instr-abas .mkf-integ-aba.mkf-instr-aba {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-bottom: -1px;
    padding: 5px 10px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--mkf-text-2);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
}

.mkf-instr .mkf-instr-abas .mkf-integ-aba.mkf-instr-aba:hover {
    color: var(--mkf-text);
}

.mkf-instr .mkf-instr-abas .mkf-integ-aba.mkf-integ-aba--on {
    border-bottom-color: var(--mkf-brand);
    color: var(--mkf-text);
}

.mkf-instr .mkf-instr-abas .mkf-instr-aba[draggable="true"] {
    cursor: grab;
}

.mkf-instr .mkf-instr-abas .mkf-instr-aba.mkf-instr-aba--arrastando {
    opacity: 0.5;
}

.mkf-instr .mkf-instr-aba .mkf-instr-ponto {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--mkf-brand);
}

.mkf-instr .mkf-instr-aba .mkf-instr-lacuna {
    padding: 0 4px;
    border-radius: var(--mkf-radius-control);
    background-color: var(--mkf-warn-soft);
    color: var(--mkf-warn);
    font-family: var(--mkf-mono-numeric-family);
    font-size: 11px;
    line-height: 1.4;
}

.mkf-instr .mkf-instr-abas .mkf-link-btn.mkf-instr-nova {
    margin: 0 0 4px 8px;
    font-size: 12.5px;
}

.mkf-instr .mkf-instr-nome,
.mkf-instr .mkf-instr-acoes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    font-size: 12.5px;
}

.mkf-instr .mkf-instr-nome input {
    width: 220px;
    max-width: 100%;
    height: var(--mkf-control-height);
    padding: 0 10px;
    border: 1px solid var(--mkf-line);
    border-radius: var(--mkf-radius-control);
    background: var(--mkf-surface);
    color: var(--mkf-text);
    font: inherit;
}

.mkf-instr .mkf-instr-acoes .mkf-link-btn.mkf-instr-excluir {
    color: var(--mkf-lose);
}

.mkf-instr .mkf-instr-erro {
    color: var(--mkf-lose);
}

.mkf-instr textarea.mkf-instr-texto {
    display: block;
    width: 100%;
    min-height: 160px;
    margin-top: 8px;
    padding: 10px 12px;
    border: 1px solid var(--mkf-line);
    border-radius: var(--mkf-radius-control);
    background-color: var(--mkf-surface);
    color: var(--mkf-text);
    font-family: inherit;
    font-size: 13px;
    line-height: 1.5;
    resize: vertical;
    field-sizing: content;
}

.mkf-instr .mkf-instr-contagem {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 4px;
    font-family: var(--mkf-mono-numeric-family);
    font-size: 11.5px;
    color: var(--mkf-text-3);
}

.mkf-instr .mkf-instr-ajuda {
    margin: 6px 0 0;
    font-size: 12px;
    color: var(--mkf-text-3);
}

/* ---- Devoluções (Vendas › Devoluções, 2026-09-28) ------------------------------------------------------------
   Cards do Monitor de Vendas (.mkf-vendas-tile) e tabelas simples (.mkf-bba-tabela) — HTML puro, seletores com
   3 classes onde a regra encosta em componente do MudBlazor. */
.mkf-dev-filtros {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--mkf-space-2) var(--mkf-space-3);
    margin-bottom: var(--mkf-space-3);
}

.mkf-dev-tiles {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.5fr) minmax(0, 1.2fr);
    align-items: start;
    gap: var(--mkf-space-3);
    margin-bottom: var(--mkf-space-3);
}

.mkf-dev-tiles .mkf-dev-tiles-pilha {
    display: grid;
    gap: var(--mkf-space-3);
    min-width: 0;
}

@media (max-width: 1100px) {
    .mkf-dev-tiles {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .mkf-dev-tiles .mkf-dev-tiles-pilha {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-column: 1 / -1;
    }
}

@media (max-width: 600px) {
    .mkf-dev-tiles,
    .mkf-dev-tiles .mkf-dev-tiles-pilha {
        grid-template-columns: minmax(0, 1fr);
    }
}

.mkf-dev-tiles .mkf-vendas-tile .mkf-dev-info {
    color: var(--mkf-text-3);
    font-size: 11px;
    cursor: help;
}

.mkf-dev-tiles .mkf-vendas-tile .mkf-dev-canais {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    font-size: 12px;
    color: var(--mkf-text-2);
}

.mkf-dev-tiles .mkf-dev-canais .mkf-dev-canal {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.mkf-dev-tiles .mkf-vendas-tile .mkf-dev-composicao {
    margin: 6px 0 0;
    padding: 6px 0 0;
    list-style: none;
    border-top: 1px solid var(--mkf-line-soft);
    font-size: 11.5px;
    color: var(--mkf-text-2);
}

.mkf-dev-tiles .mkf-dev-composicao li {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    line-height: 1.6;
}

.mkf-dev-tiles .mkf-dev-composicao li b {
    font-family: var(--mkf-mono-numeric-family);
    font-weight: 500;
    color: var(--mkf-text);
}

.mkf-bba-card.mkf-dev-card {
    max-width: none;
    margin-bottom: var(--mkf-space-3);
}

.mkf-dev-card .mkf-bba-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
}

.mkf-dev-card .mkf-bba-card-head .mkf-dev-limite {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--mkf-text-2);
}

.mkf-dev-card .mkf-bba-card-head .mkf-dev-busca {
    width: 280px;
    max-width: 100%;
}

.mkf-dev-card .mkf-dev-tabela .mkf-dev-linha {
    cursor: pointer;
}

.mkf-dev-card .mkf-dev-tabela tr.mkf-dev-linha--alerta td {
    background-color: var(--mkf-lose-soft);
}

.mkf-dev-card .mkf-dev-tabela tr.mkf-dev-linha--on td {
    box-shadow: inset 0 -2px 0 var(--mkf-brand);
}

.mkf-dev-card .mkf-dev-tabela tr.mkf-dev-linha--cancelada td {
    color: var(--mkf-text-3);
}

.mkf-dev-card .mkf-dev-tabela .mkf-dev-produto {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    max-width: 560px;
}

.mkf-dev-card .mkf-dev-tabela .mkf-dev-produto .mkf-bba-trunc {
    max-width: 520px;
}

.mkf-dev-card .mkf-dev-produto img,
.mkf-dev-card .mkf-dev-produto .mkf-dev-produto-sem {
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: var(--mkf-radius-control);
    object-fit: cover;
    background-color: var(--mkf-surface-2);
}

.mkf-dev-card .mkf-dev-tabela .mkf-sku-cell.mkf-dev-sku {
    font-size: 11.5px;
    color: var(--mkf-text-3);
}

.mkf-dev-card .mkf-dev-tabela .mkf-dev-perdido {
    height: 28px;
    padding: 0 6px;
    font-size: 12px;
}

.mkf-dev-card .mkf-link-btn.mkf-dev-mais {
    margin-top: 8px;
}

.mkf-dev-card .mkf-bba-vazio.mkf-dev-vazio {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Situação: texto + fundo suave; a cor só reforça o rótulo. */
.mkf-dev-tabela .mkf-dev-sit {
    display: inline-block;
    padding: 1px 8px;
    border-radius: var(--mkf-radius-pill);
    background-color: var(--mkf-surface-3);
    color: var(--mkf-text-2);
    font-size: 11.5px;
    white-space: nowrap;
}

.mkf-dev-tabela .mkf-dev-sit.mkf-dev-sit--aberta {
    background-color: var(--mkf-warn-soft);
    color: var(--mkf-text);
}

.mkf-dev-tabela .mkf-dev-sit.mkf-dev-sit--emtransito,
.mkf-dev-tabela .mkf-dev-sit.mkf-dev-sit--recebida {
    background-color: var(--mkf-brand-soft);
    color: var(--mkf-text);
}

.mkf-dev-tabela .mkf-dev-sit.mkf-dev-sit--finalizada {
    background-color: var(--mkf-win-soft);
    color: var(--mkf-text);
}

/* Motivos: barras horizontais de UMA medida (quantidade), rótulo direto; o custo é texto ao lado. */
.mkf-dev-card .mkf-dev-motivos {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mkf-dev-motivos .mkf-dev-motivo {
    display: grid;
    grid-template-columns: 170px minmax(0, 1fr) 48px 110px;
    align-items: center;
    gap: 10px;
    padding: 3px 0;
    font-size: 12.5px;
}

.mkf-dev-motivos .mkf-dev-motivo:hover {
    background-color: var(--mkf-surface-2);
}

.mkf-dev-motivos .mkf-dev-motivo .mkf-dev-motivo-trilho {
    height: 12px;
}

.mkf-dev-motivos .mkf-dev-motivo .mkf-dev-motivo-barra {
    display: block;
    height: 100%;
    min-width: 2px;
    border-radius: 0 4px 4px 0;
    background-color: var(--mkf-brand);
}

.mkf-dev-motivos .mkf-dev-motivo .mkf-dev-motivo-qtd,
.mkf-dev-motivos .mkf-dev-motivo .mkf-dev-motivo-custo {
    font-family: var(--mkf-mono-numeric-family);
    text-align: right;
    color: var(--mkf-text);
}

.mkf-dev-motivos .mkf-dev-motivo .mkf-dev-motivo-custo {
    color: var(--mkf-text-2);
}

@media (max-width: 600px) {
    .mkf-dev-motivos .mkf-dev-motivo {
        grid-template-columns: 110px minmax(0, 1fr) 36px;
    }

    .mkf-dev-motivos .mkf-dev-motivo .mkf-dev-motivo-custo {
        display: none;
    }
}

/* ---- Devoluções — rodada 2 (2026-09-28): seletores, selo, zeros, larguras da lista ---- */

/* 9. O .mkf-seg-btn não tem respiro lateral próprio (o Monitor de Vendas põe o dele só na tela dele). */
.mkf-seg.mkf-dev-seg {
    flex: none;
}

.mkf-seg.mkf-dev-seg .mkf-seg-btn {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 12px;
    font-size: 12.5px;
}

/* 2. Selo "N sem custo do produto": clicável, filtra a lista. */
.mkf-dev-tiles .mkf-vendas-tile .mkf-dev-selo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    margin-top: 2px;
    padding: 3px 10px;
    border: 1px solid var(--mkf-warn);
    border-radius: var(--mkf-radius-pill);
    background-color: var(--mkf-warn-soft);
    color: var(--mkf-text);
    font: inherit;
    font-size: 11.5px;
    text-align: left;
    cursor: pointer;
}

.mkf-dev-tiles .mkf-vendas-tile .mkf-dev-selo.mkf-dev-selo--on {
    box-shadow: inset 0 0 0 1px var(--mkf-warn);
    font-weight: 500;
}

/* 11. Termo zerado do detalhamento: esmaecido (zero sempre cinza). */
.mkf-dev-tiles .mkf-dev-composicao li.mkf-dev-zero,
.mkf-dev-tiles .mkf-dev-composicao li.mkf-dev-zero b {
    color: var(--mkf-text-3);
}

.mkf-dev-tiles .mkf-dev-composicao li.mkf-dev-nota {
    font-size: 11px;
    color: var(--mkf-text-3);
}

.mkf-dev-card .mkf-bba-card-head .mkf-dev-medias {
    white-space: nowrap;
}

.mkf-dev-card .mkf-bba-card-head .mkf-link-btn.mkf-dev-atalho {
    font-size: 12.5px;
}

/* 7. Lista: larguras fixas nas colunas curtas; Produto fica com o resto e o Motivo quebra em até 2 linhas. */
.mkf-dev-card .mkf-bba-tabela.mkf-dev-tabela--lista {
    table-layout: fixed;
    min-width: 1180px;
}

.mkf-dev-tabela--lista col.mkf-dev-col-data { width: 96px; }
.mkf-dev-tabela--lista col.mkf-dev-col-canal { width: 44px; }
.mkf-dev-tabela--lista col.mkf-dev-col-pedido { width: 200px; }
.mkf-dev-tabela--lista col.mkf-dev-col-motivo { width: 260px; }
.mkf-dev-tabela--lista col.mkf-dev-col-sit { width: 104px; }
.mkf-dev-tabela--lista col.mkf-dev-col-valor { width: 112px; }
.mkf-dev-tabela--lista col.mkf-dev-col-perdido { width: 150px; }

.mkf-dev-card .mkf-dev-tabela--lista td {
    overflow: hidden;
}

.mkf-dev-card .mkf-dev-tabela--lista .mkf-bba-trunc {
    max-width: 100%;
}

.mkf-dev-card .mkf-dev-tabela--lista .mkf-dev-motivo-texto {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: normal;
    font-size: 11.5px;
    line-height: 1.35;
}

.mkf-dev-card .mkf-dev-tabela--lista .mkf-link-btn.mkf-dev-cadastrar {
    display: block;
    margin-left: auto;
    font-size: 11.5px;
}

/* ---- Ads (2026-09-29) — aba/bloco Ads do modal: nota à direita da memória do ROAS ---- */
.mkf-ads-nota {
    font-size: 12px;
    color: var(--mkf-text-3);
    white-space: nowrap;
}

/* Ads (2026-09-29) — gasto de Ads do dia no gráfico de lucro: faixa fina abaixo do zero, neutra. */
.mkf-grafico-barra-ads {
    fill: var(--mkf-text-3);
    opacity: 0.55;
}

/* Ads (2026-09-29) — Monitor de Vendas com Ads: 9 tiles (Ads R$ depois de Tarifas; Lucro depois de Ads depois de Lucro). */
.mkf-vendas-tiles.mkf-vendas-tiles--ads {
    grid-template-columns: repeat(5, minmax(0, 1fr)) minmax(0, 1.4fr) minmax(0, 1.2fr) repeat(2, minmax(0, 1fr));
}

@media (max-width: 1600px) {
    .mkf-vendas-tiles.mkf-vendas-tiles--ads {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

@media (max-width: 1280px) {
    .mkf-vendas-tiles.mkf-vendas-tiles--ads {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .mkf-vendas-tiles.mkf-vendas-tiles--ads {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ================================================================================
   Vendas › Ads (2026-09-29, parte 2) — tiles, gráfico, tabelas de Campanhas/Anúncios, Ajustes.
   Cor só onde exige ação (lucro < 0, ROAS abaixo do empate/mínima, ⚠ de orçamento); nunca verde.
   ================================================================================ */
.mkf-ads-atualizado {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-right: var(--mkf-space-3);
    color: var(--mkf-text-2);
}

.mkf-ads-neutro {
    color: var(--mkf-text-3);
}

.mkf-vendas-tiles.mkf-ads-tiles {
    grid-template-columns: repeat(8, minmax(0, 1fr));
}

@media (max-width: 1440px) {
    .mkf-vendas-tiles.mkf-ads-tiles {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .mkf-vendas-tiles.mkf-ads-tiles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.mkf-ads-direto {
    font-size: 12px;
    font-weight: 400;
    color: var(--mkf-text-3);
}

.mkf-ads-divisao {
    display: flex;
    flex-direction: column;
    gap: 1px;
    font-family: var(--mkf-font-mono, "IBM Plex Mono", monospace);
    font-variant-numeric: tabular-nums;
}

.mkf-ads-divisao > span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.mkf-ads-grafico {
    position: relative;
}

.mkf-ads-grafico svg {
    width: 100%;
    height: 230px;
    display: block;
}

.mkf-ads-gasto-barra {
    fill: var(--mkf-text-3);
}

.mkf-ads-linha {
    fill: none;
    stroke: var(--mkf-text);
    stroke-width: 1.5;
    vector-effect: non-scaling-stroke;
}

.mkf-ads-grafico-dica {
    position: absolute;
    top: 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 10px;
    border: 1px solid var(--mkf-border);
    border-radius: 6px;
    background: var(--mkf-surface);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
    white-space: nowrap;
}

.mkf-ads-grafico-aviso,
.mkf-ads-rodape {
    font-size: 12px;
    color: var(--mkf-text-3);
    margin-top: 4px;
}

.mkf-ads-contadores {
    margin-bottom: var(--mkf-space-3);
}

.mkf-ads-contador-ponto {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    margin-right: 4px;
    vertical-align: middle;
}

.mkf-ads-barra {
    display: flex;
    align-items: center;
    gap: var(--mkf-space-3);
    flex-wrap: wrap;
    margin-bottom: var(--mkf-space-3);
}

.mkf-ads-busca {
    min-width: 280px;
}

.mkf-ads-barra-acoes {
    margin-left: auto;
    display: flex;
    gap: var(--mkf-space-2, 8px);
    position: relative;
}

.mkf-ads-barra-acoes .mkf-pop-anchor {
    position: relative;
}

.mkf-ads-barra-acoes .mkf-pop-anchor .mkf-pop {
    right: 0;
    left: auto;
}

.mkf-filter-chip-x {
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font-size: 14px;
    padding: 0 0 0 4px;
}

.mkf-ads-tabela-wrap {
    overflow-x: auto;
    border: 1px solid var(--mkf-border);
    border-radius: 8px;
    background: var(--mkf-surface);
}

.mkf-ads-tabela {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    min-width: 1280px;
    font-size: 13px;
}

.mkf-ads-tabela th {
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--mkf-text-2);
    padding: 8px;
    border-bottom: 1px solid var(--mkf-border);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mkf-ads-tabela td {
    padding: 7px 8px;
    border-bottom: 1px solid var(--mkf-border-soft, var(--mkf-border));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mkf-ads-tabela .num {
    text-align: right;
    font-family: var(--mkf-font-mono, "IBM Plex Mono", monospace);
    font-variant-numeric: tabular-nums;
}

.mkf-ads-tabela th.num {
    font-family: inherit;
}

.mkf-ads-th-btn {
    border: 0;
    background: transparent;
    padding: 0;
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    cursor: pointer;
}

.mkf-ads-col-canal {
    width: 56px;
}

.mkf-ads-col-nome {
    width: 260px;
}

.mkf-ads-texto2 {
    color: var(--mkf-text-2);
}

.mkf-ads-linha-clicavel {
    cursor: pointer;
}

.mkf-ads-linha-clicavel:hover td {
    background: var(--mkf-surface-2);
}

.mkf-ads-anuncio {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.mkf-ads-anuncio-titulo {
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.mkf-ads-paginacao {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 8px;
    font-size: 12px;
    color: var(--mkf-text-2);
}

.mkf-ads-ajustes {
    display: grid;
    grid-template-columns: minmax(0, 640px) minmax(0, 640px);
    gap: var(--mkf-space-4, 16px);
    align-items: start;
}

@media (max-width: 1360px) {
    .mkf-ads-ajustes {
        grid-template-columns: minmax(0, 1fr);
    }
}

.mkf-ads-ajuste {
    display: grid;
    grid-template-columns: 220px 1fr;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 13px;
}

.mkf-ads-ajuste label {
    color: var(--mkf-text-2);
}

.mkf-ads-ajuste .mkf-pop-input--num {
    width: 72px;
}

.mkf-inicio-vendas-ads {
    display: block;
    font-size: 11px;
    color: var(--mkf-text-3);
    font-variant-numeric: tabular-nums;
}

/* Campanhas: poucas linhas e muitas colunas numéricas — largura pelo conteúdo (fixa cortava "-306,…"). */
.mkf-ads-tabela.mkf-ads-tabela--auto {
    table-layout: auto;
    min-width: 100%;
}

.mkf-ads-tabela.mkf-ads-tabela--auto .mkf-ads-col-nome {
    width: auto;
    max-width: 280px;
}

.mkf-ads-tabela .mkf-ads-anuncio .mkf-selo-catalogo {
    flex-shrink: 0;
}

/* Ads parte 2b — cabeçalho, tile Lucro depois de Ads, gráfico com ROAS e marcadores. */
.mkf-ads-atualizado-canal {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: 8px;
}

.mkf-ads-lucro-canais {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Valor numa linha só (nunca parte "R$" do número); cobertura embaixo, pequena. */
.mkf-ads-lucro-canal {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 5px;
    align-items: center;
    font-family: var(--mkf-font-mono, "IBM Plex Mono", monospace);
    font-variant-numeric: tabular-nums;
    font-size: 13px;
}

.mkf-ads-lucro-canal b {
    white-space: nowrap;
}

.mkf-ads-lucro-canal small {
    grid-column: 2;
    font-family: var(--mkf-font-sans, "IBM Plex Sans", sans-serif);
    font-size: 11px;
    line-height: 1.2;
    color: var(--mkf-text-3);
}

.mkf-ads-cobertura-baixa {
    --mkf-state-color: var(--mkf-warn);
    color: var(--mkf-warn);
}

.mkf-ads-lucro-canal small.mkf-ads-cobertura-baixa-txt,
.mkf-ads-cobertura-baixa-txt {
    color: var(--mkf-warn);
}

.mkf-ads-gasto-parcial {
    fill: url(#mkf-ads-hachura);
    stroke: var(--mkf-text-3);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
    pointer-events: none;
}

.mkf-ads-hachura-linha {
    stroke: var(--mkf-text-3);
    stroke-width: 2;
}

/* Parte 2b: marcador de campanha fino em --mkf-line; rótulo só no hover (a faixa larga transparente é o alvo). */
.mkf-ads-evento {
    stroke: var(--mkf-line);
    stroke-width: 1;
    stroke-dasharray: 3 3;
    vector-effect: non-scaling-stroke;
    pointer-events: none;
}

.mkf-ads-evento-alvo {
    stroke: transparent;
    stroke-width: 8;
}

.mkf-ads-evento-rot {
    font-size: 10px;
    fill: var(--mkf-text-2);
    opacity: 0;
    pointer-events: none;
}

.mkf-ads-evento-g:hover .mkf-ads-evento-rot {
    opacity: 1;
}

.mkf-ads-evento-g:hover .mkf-ads-evento {
    stroke: var(--mkf-text-2);
}

.mkf-ads-gasto-ml {
    fill: var(--mkf-ch-ml);
}

.mkf-ads-gasto-shopee {
    fill: var(--mkf-ch-shopee);
}

.mkf-ads-grade {
    stroke: var(--mkf-line);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.mkf-ads-eixo-num {
    font-family: var(--mkf-font-mono, "IBM Plex Mono", monospace);
}

.mkf-ads-grafico-alvo {
    cursor: pointer;
}

.mkf-ads-dica-acao {
    color: var(--mkf-text-3);
}

.mkf-ads-legenda {
    display: flex;
    flex-wrap: nowrap;
    gap: 16px;
    font-size: 12px;
    color: var(--mkf-text-2);
    white-space: nowrap;
    overflow: hidden;
    margin-top: 4px;
}

.mkf-ads-legenda span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.mkf-ads-leg-barra {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
}

.mkf-ads-leg-hachura {
    background: repeating-linear-gradient(45deg, var(--mkf-text-3) 0 2px, transparent 2px 4px);
    border: 1px solid var(--mkf-text-3);
}

.mkf-ads-leg-linha {
    display: inline-block;
    width: 16px;
    height: 0;
    border-top: 1.5px solid var(--mkf-text);
}

.mkf-ads-leg-evento {
    display: inline-block;
    width: 0;
    height: 12px;
    border-left: 1px dashed var(--mkf-text-2);
}

.mkf-ads-inatingivel {
    color: var(--mkf-text-3);
    font-family: var(--mkf-font-sans, "IBM Plex Sans", sans-serif);
    font-size: 12px;
}

/* ---- Ads automático (2026-09-30): abas Automação e Histórico, coluna Auto, bloco no modal ---- */
.mkf-ads-auto {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: var(--mkf-space-4, 16px);
    align-items: start;
}

@media (max-width: 1360px) {
    .mkf-ads-auto {
        grid-template-columns: minmax(0, 1fr);
    }
}

.mkf-ads-auto-regra {
    display: grid;
    grid-template-columns: 180px 1fr;
    align-items: baseline;
    gap: 8px;
    padding: 8px 0;
    border-top: 1px solid var(--mkf-line);
    font-size: 13px;
    line-height: 1.7;
}

.mkf-ads-auto-regra > b {
    color: var(--mkf-text-2);
    font-weight: 500;
}

.mkf-ads-auto-regra .mkf-pop-input--num {
    width: 64px;
}

.mkf-ads-auto-regra select.mkf-pop-input {
    max-width: 200px;
}

.mkf-ads-auto-nota {
    display: block;
    font-size: 12px;
    color: var(--mkf-text-3);
}

.mkf-ads-auto-canal {
    display: block;
    font-size: 11px;
    font-weight: 400;
    color: var(--mkf-text-3);
}

.mkf-ads-auto-chave {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.mkf-ads-auto-faixas {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.mkf-ads-auto-confirma {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 4px 0 8px;
    padding: 8px 12px;
    border: 1px solid var(--mkf-warn);
    border-radius: 6px;
    font-size: 13px;
}

.mkf-ads-auto-erro {
    color: var(--mkf-warn);
}

.mkf-ads-tabela .mkf-ads-auto-ponto {
    border: 0;
    background: none;
    padding: 0 4px;
    font-size: 14px;
    line-height: 1;
    color: var(--mkf-text-3);
    cursor: pointer;
}

.mkf-ads-tabela .mkf-ads-auto-ponto.mkf-ads-auto-ponto--on {
    color: var(--mkf-text);
}

.mkf-ads-tabela .mkf-ads-auto-ponto:disabled {
    cursor: default;
}

.mkf-ads-auto-bloco {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--mkf-line);
    font-size: 13px;
}

.mkf-ads-auto-bloco-topo {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mkf-ads-auto-ultimas {
    margin: 6px 0 0;
    padding-left: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mkf-ads-hist-barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 13px;
}

.mkf-ads-hist-barra .mkf-pop-input,
.mkf-ads-hist-barra label {
    width: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.mkf-ads-hist-barra .mkf-pop-input.mkf-ads-hist-busca {
    width: 260px;
}

.mkf-ads-hist-total {
    margin-left: auto;
    color: var(--mkf-text-3);
}

.mkf-ads-tabela.mkf-ads-hist-tabela {
    table-layout: auto;
    width: 100%;
}

.mkf-ads-hist-titulo {
    display: inline-block;
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

.mkf-ads-hist-motivo {
    display: inline-block;
    max-width: 420px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

/* ---- Aba Efeito + gráfico do modal (2026-09-30, prompt-ads-3 Parte 2) ---- */
.mkf-ads-tabela.mkf-ads-efeito-tabela {
    table-layout: auto;
    width: 100%;
}

.mkf-ads-efeito-aviso {
    margin-top: 10px;
    font-size: 12px;
    color: var(--mkf-text-3);
}

.mkf-ads-efeito-modal {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--mkf-line);
}

.mkf-ads-efeito-modal svg {
    width: 100%;
    height: 150px;
    display: block;
}

.mkf-ads-efeito-org {
    fill: var(--mkf-text-3);
}

.mkf-ads-efeito-ads {
    fill: var(--mkf-text);
}

.mkf-ads-efeito-texto {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 6px;
    font-size: 13px;
}

.mkf-ads-efeito-periodo {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 4px 0;
}

/* Chat Shopee (2026-09-30): opção de encerramento automático e o motivo de não ter saído sozinho. */
.mkf-chat-cfg-regras .mkf-chat-cfg-chave {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    cursor: pointer;
}

.mkf-chat-comp .mkf-chat-comp-nota.mkf-chat-nao-enviado {
    color: var(--mkf-text-3);
    font-size: 12px;
    margin: 2px 0 4px;
}

/* ==========================================================================================
   2026-10-03 — Início: Despacho de hoje + Saúde da conta (prompt-inicio-saude-da-conta-e-despacho).
   Só tokens --mkf-*; todo número em mono (mkf-inicio-num). Cor só onde identifica ou exige ação.
   ========================================================================================== */

/* Chip do cabeçalho: um badge por canal. */
.mkf-inicio .mkf-inicio-rep .mkf-inicio-rep-canal {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* ---- Despacho (2026-10-03; rodada 2 em 05/10: card Hoje + card Amanhã + faixa dos próximos 7 dias) ---- */
.mkf-inicio .mkf-inicio-card.mkf-inicio-dsp {
    overflow-x: auto;
}

.mkf-inicio .mkf-inicio-card.mkf-inicio-dsp.mkf-inicio-dsp--amanha { margin-top: 12px; }

.mkf-inicio .mkf-inicio-dsp .mkf-inicio-dsp-cab {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    min-width: 960px;
    padding: 10px 16px 6px;
}

.mkf-inicio .mkf-inicio-dsp .mkf-inicio-dsp-cab .mkf-inicio-dsp-cab-tit {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}

.mkf-inicio .mkf-inicio-dsp .mkf-inicio-dsp-cab .mkf-inicio-dsp-cab-nota {
    font-size: 11.5px;
    color: var(--mkf-text-3);
    text-align: right;
}

.mkf-inicio .mkf-inicio-dsp .mkf-inicio-dsp-cab .mkf-inicio-dsp-cab-nota a { color: var(--mkf-text-3); text-decoration: none; }
.mkf-inicio .mkf-inicio-dsp .mkf-inicio-dsp-cab .mkf-inicio-dsp-cab-nota a:hover { color: var(--mkf-brand); }

/* Hoje (rodada 3, 20/10): canal · corte · despachar até · faltam · a despachar · a fazer · vencidos · ação. A coluna
   "a fazer" absorve a sobra; a linha do dia saiu. */
.mkf-inicio .mkf-inicio-dsp .mkf-inicio-dsp-row {
    display: grid;
    grid-template-columns: 240px 64px 100px 76px 84px minmax(0, 1fr) 70px 90px;
    align-items: center;
    gap: 0 10px;
    min-width: 960px;
    height: 56px;
    padding: 0 16px;
    border-top: 1px solid var(--mkf-line-soft);
    box-sizing: border-box;
}

/* Amanhã: canal · corte · despachar até · já na fila · previsão · como chegamos nisso · ação. */
.mkf-inicio .mkf-inicio-dsp .mkf-inicio-dsp-row2 {
    display: grid;
    grid-template-columns: 240px 80px 104px 80px 90px minmax(0, 1fr) 92px;
    align-items: center;
    gap: 0 10px;
    min-width: 960px;
    height: 62px;
    padding: 0 16px;
    border-top: 1px solid var(--mkf-line-soft);
    box-sizing: border-box;
}

.mkf-inicio .mkf-inicio-dsp .mkf-inicio-dsp-row:nth-of-type(2n+4),
.mkf-inicio .mkf-inicio-dsp .mkf-inicio-dsp-row2:nth-of-type(2n+4) { background-color: var(--mkf-row-alt); }

.mkf-inicio .mkf-inicio-dsp .mkf-inicio-dsp-row.mkf-inicio-dsp-row--head,
.mkf-inicio .mkf-inicio-dsp .mkf-inicio-dsp-row2.mkf-inicio-dsp-row--head {
    height: 36px;
    border-top: 1px solid var(--mkf-line);
    background-color: transparent;
}

.mkf-inicio .mkf-inicio-dsp .mkf-inicio-dsp-row--head .mkf-inicio-th {
    white-space: normal;
    line-height: 1.2;
}

.mkf-inicio .mkf-inicio-dsp .mkf-inicio-dsp-n,
.mkf-inicio .mkf-inicio-dsp .mkf-inicio-dsp-row > .mkf-inicio-num,
.mkf-inicio .mkf-inicio-dsp .mkf-inicio-dsp-row2 > .mkf-inicio-num { text-align: right; }

.mkf-inicio .mkf-inicio-dsp .mkf-inicio-dsp-canal {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.mkf-inicio .mkf-inicio-dsp .mkf-inicio-dsp-tit {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
    white-space: nowrap;
}

/* Sublinha: até 2 linhas, o resto some. */
.mkf-inicio .mkf-inicio-dsp .mkf-inicio-dsp-canal .mkf-inicio-dsp-sub {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 11px;
    line-height: 1.3;
    color: var(--mkf-text-3);
}

.mkf-inicio .mkf-inicio-dsp .mkf-inicio-dsp-canal .mkf-inicio-dsp-sub.mkf-inicio-warn { color: var(--mkf-warn); }
.mkf-inicio .mkf-inicio-dsp .mkf-inicio-dsp-canal .mkf-inicio-dsp-sub a { color: var(--mkf-brand); text-decoration: none; }

.mkf-inicio .mkf-inicio-dsp .mkf-inicio-dsp-row > .mkf-inicio-dsp-corte,
.mkf-inicio .mkf-inicio-dsp .mkf-inicio-dsp-row2 > .mkf-inicio-dsp-corte { color: var(--mkf-text-2); font-weight: 500; }
.mkf-inicio .mkf-inicio-dsp .mkf-inicio-dsp-row > .mkf-inicio-dsp-corte.mkf-inicio-zero,
.mkf-inicio .mkf-inicio-dsp .mkf-inicio-dsp-row2 > .mkf-inicio-dsp-corte.mkf-inicio-zero { color: var(--mkf-text-3); }

.mkf-inicio .mkf-inicio-dsp .mkf-inicio-dsp-row > .mkf-inicio-dsp-hoje { font-size: 15px; font-weight: 600; }
.mkf-inicio .mkf-inicio-dsp .mkf-inicio-dsp-row > .mkf-inicio-dsp-hoje.mkf-inicio-dsp-cor--fight { color: var(--mkf-fight); }
.mkf-inicio .mkf-inicio-dsp .mkf-inicio-dsp-row > .mkf-inicio-dsp-hoje.mkf-inicio-dsp-cor--warn { color: var(--mkf-warn); }
.mkf-inicio .mkf-inicio-dsp .mkf-inicio-dsp-row > .mkf-inicio-dsp-hoje.mkf-inicio-dsp-cor--lose { color: var(--mkf-lose); }

/* Situação: até 3 linhas. Número em mono e na cor do texto; rótulo em text-2. Ação segue a régua (neutra → warn → lose). */
.mkf-inicio .mkf-inicio-dsp .mkf-inicio-dsp-sit {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    font-size: 12px;
    line-height: 1.3;
}

.mkf-inicio .mkf-inicio-dsp .mkf-inicio-dsp-sit .mkf-inicio-dsp-sit-l {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--mkf-text-2);
}

.mkf-inicio .mkf-inicio-dsp .mkf-inicio-dsp-sit .mkf-inicio-dsp-sit-l .mkf-inicio-num { font-weight: 600; color: var(--mkf-text); }
.mkf-inicio .mkf-inicio-dsp .mkf-inicio-dsp-sit .mkf-inicio-dsp-sit-l.mkf-inicio-dsp-sit--zero,
.mkf-inicio .mkf-inicio-dsp .mkf-inicio-dsp-sit .mkf-inicio-dsp-sit-l.mkf-inicio-dsp-sit--zero .mkf-inicio-num { color: var(--mkf-text-3); font-weight: 400; }
.mkf-inicio .mkf-inicio-dsp .mkf-inicio-dsp-sit .mkf-inicio-dsp-sit-l.mkf-inicio-dsp-sit--warn,
.mkf-inicio .mkf-inicio-dsp .mkf-inicio-dsp-sit .mkf-inicio-dsp-sit-l.mkf-inicio-dsp-sit--warn .mkf-inicio-num { color: var(--mkf-warn); }
.mkf-inicio .mkf-inicio-dsp .mkf-inicio-dsp-sit .mkf-inicio-dsp-sit-l.mkf-inicio-dsp-sit--lose,
.mkf-inicio .mkf-inicio-dsp .mkf-inicio-dsp-sit .mkf-inicio-dsp-sit-l.mkf-inicio-dsp-sit--lose .mkf-inicio-num { color: var(--mkf-lose); }

.mkf-inicio .mkf-inicio-dsp .mkf-inicio-dsp-row > .mkf-inicio-dsp-acao,
.mkf-inicio .mkf-inicio-dsp .mkf-inicio-dsp-row2 > .mkf-inicio-dsp-acao {
    justify-self: end;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
}

/* Card Amanhã. */
.mkf-inicio .mkf-inicio-dsp .mkf-inicio-dsp-row2 > .mkf-inicio-dsp-hora2 { font-size: 15px; font-weight: 600; }
.mkf-inicio .mkf-inicio-dsp .mkf-inicio-dsp-row2 > .mkf-inicio-dsp-fila { color: var(--mkf-text-2); font-weight: 500; }
.mkf-inicio .mkf-inicio-dsp .mkf-inicio-dsp-row2 > .mkf-inicio-dsp-prev { font-size: 15px; font-weight: 600; }
.mkf-inicio .mkf-inicio-dsp .mkf-inicio-dsp-row2 > .mkf-inicio-num.mkf-inicio-zero { color: var(--mkf-text-3); }

.mkf-inicio .mkf-inicio-dsp .mkf-inicio-dsp-row2 > .mkf-inicio-dsp-semcoleta {
    grid-column: span 2;
    font-size: 12px;
    color: var(--mkf-text-3);
    text-align: right;
}

.mkf-inicio .mkf-inicio-dsp .mkf-inicio-dsp-row2 > .mkf-inicio-dsp-expl {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 12px;
    line-height: 1.35;
    color: var(--mkf-text-2);
}

/* Faixa dos próximos 7 dias. */
.mkf-inicio .mkf-inicio-dsp .mkf-inicio-dsp-dias {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 8px;
    min-width: 1040px;
    margin: 0;
    padding: 12px 16px 14px;
    border-top: 1px solid var(--mkf-line);
    box-sizing: border-box;
    list-style: none;
}

.mkf-inicio .mkf-inicio-dsp .mkf-inicio-dsp-dias .mkf-inicio-dsp-diac {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid var(--mkf-line);
    border-radius: 6px;
    background-color: var(--mkf-surface-2);
}

.mkf-inicio .mkf-inicio-dsp .mkf-inicio-dsp-dias .mkf-inicio-dsp-diac.mkf-inicio-dsp-diac--off {
    border-style: dashed;
    background-color: var(--mkf-surface);
}

.mkf-inicio .mkf-inicio-dsp .mkf-inicio-dsp-diac .mkf-inicio-dsp-diac-d { font-size: 11.5px; font-weight: 600; color: var(--mkf-text-2); }
.mkf-inicio .mkf-inicio-dsp .mkf-inicio-dsp-diac .mkf-inicio-dsp-diac-v { font-size: 15px; font-weight: 600; text-align: left; }
.mkf-inicio .mkf-inicio-dsp .mkf-inicio-dsp-diac .mkf-inicio-dsp-diac-v.mkf-inicio-zero { color: var(--mkf-text-3); }

.mkf-inicio .mkf-inicio-dsp .mkf-inicio-dsp-diac .mkf-inicio-dsp-diac-s {
    font-size: 10.5px;
    line-height: 1.3;
    color: var(--mkf-text-3);
}

.mkf-inicio .mkf-inicio-dsp .mkf-inicio-dsp-diac .mkf-inicio-dsp-diac-s.mkf-inicio-warn { color: var(--mkf-warn); }
.mkf-inicio .mkf-inicio-dsp .mkf-inicio-dsp-diac .mkf-inicio-dsp-diac-s a { color: var(--mkf-brand); text-decoration: none; }

/* Rodapés. */
.mkf-inicio .mkf-inicio-dsp .mkf-inicio-card-foot.mkf-inicio-dsp-foot {
    justify-content: space-between;
    gap: 16px;
    min-width: 1040px;
    height: auto;
    min-height: 40px;
    box-sizing: border-box;
    font-size: 12px;
    color: var(--mkf-text-2);
}

.mkf-inicio .mkf-inicio-dsp .mkf-inicio-card-foot.mkf-inicio-dsp-foot.mkf-inicio-dsp-foot--amanha {
    border-top: 0;
    color: var(--mkf-text-3);
}

.mkf-inicio .mkf-inicio-dsp .mkf-inicio-dsp-foot .mkf-inicio-dsp-retirada { color: var(--mkf-text-3); white-space: nowrap; }

.mkf-inicio .mkf-inicio-dsp .mkf-inicio-dsp-foot .mkf-inicio-dsp-cfg {
    color: var(--mkf-text-3);
    text-decoration: none;
    white-space: nowrap;
}

.mkf-inicio .mkf-inicio-dsp .mkf-inicio-dsp-foot .mkf-inicio-dsp-cfg:hover { color: var(--mkf-brand); }

/* ---- Saúde da conta ---- */
.mkf-inicio .mkf-inicio-sau-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.mkf-inicio .mkf-inicio-sau-grid.mkf-inicio-sau-grid--um { grid-template-columns: minmax(0, 1fr); }

.mkf-inicio .mkf-inicio-card.mkf-inicio-sau-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.mkf-inicio .mkf-inicio-sau-card .mkf-inicio-sau-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 44px;
    padding: 8px 16px;
    border-bottom: 1px solid var(--mkf-line);
    box-sizing: border-box;
}

.mkf-inicio .mkf-inicio-sau-card .mkf-inicio-sau-canal {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
}

.mkf-inicio .mkf-inicio-sau-card .mkf-inicio-sau-badge {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 8px;
    border-radius: 4px;
    font-size: 11.5px;
    font-weight: 500;
}

.mkf-inicio .mkf-inicio-sau-card .mkf-inicio-sau-badge--win { background-color: var(--mkf-win-soft); color: var(--mkf-win); }
.mkf-inicio .mkf-inicio-sau-card .mkf-inicio-sau-badge--fight { background-color: var(--mkf-fight-soft); color: var(--mkf-fight); }
.mkf-inicio .mkf-inicio-sau-card .mkf-inicio-sau-badge--warn { background-color: var(--mkf-warn-soft); color: var(--mkf-warn); }
.mkf-inicio .mkf-inicio-sau-card .mkf-inicio-sau-badge--lose { background-color: var(--mkf-lose-soft); color: var(--mkf-lose); }
.mkf-inicio .mkf-inicio-sau-card .mkf-inicio-sau-badge--idle { background-color: var(--mkf-idle-soft); color: var(--mkf-idle); }

.mkf-inicio .mkf-inicio-sau-card .mkf-inicio-sau-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 20px;
    padding: 0 8px;
    border: 1px solid var(--mkf-line);
    border-radius: 4px;
    font-size: 11.5px;
    color: var(--mkf-text-2);
}

.mkf-inicio .mkf-inicio-sau-card .mkf-inicio-sau-chip.mkf-inicio-sau-chip--warn { border-color: var(--mkf-warn); color: var(--mkf-warn); }
.mkf-inicio .mkf-inicio-sau-card .mkf-inicio-sau-chip.mkf-inicio-sau-chip--lose { border-color: var(--mkf-lose); color: var(--mkf-lose); }

.mkf-inicio .mkf-inicio-sau-card .mkf-inicio-sau-dir {
    margin-left: auto;
    font-size: 11.5px;
    color: var(--mkf-text-3);
}

.mkf-inicio .mkf-inicio-sau-card .mkf-inicio-sau-dir b { color: var(--mkf-text-2); font-weight: 600; }

.mkf-inicio .mkf-inicio-sau-card .mkf-inicio-sau-row {
    display: grid;
    align-items: center;
    gap: 0 12px;
    min-height: 52px;
    padding: 6px 16px;
    border-bottom: 1px solid var(--mkf-line-soft);
    box-sizing: border-box;
}

.mkf-inicio .mkf-inicio-sau-card .mkf-inicio-sau-row.mkf-inicio-sau-row--ml { grid-template-columns: 136px 68px minmax(64px, 1fr) 52px 140px; }
.mkf-inicio .mkf-inicio-sau-card .mkf-inicio-sau-row.mkf-inicio-sau-row--sh { grid-template-columns: 136px 72px minmax(48px, 1fr) 84px 108px; }

/* Rótulos do cabeçalho em duas linhas quando a coluna é estreita. */
.mkf-inicio .mkf-inicio-sau-card .mkf-inicio-sau-row--head .mkf-inicio-th {
    white-space: normal;
    line-height: 1.2;
}

.mkf-inicio .mkf-inicio-sau-card .mkf-inicio-sau-row.mkf-inicio-sau-row--head {
    min-height: 32px;
    padding-top: 0;
    padding-bottom: 0;
    border-bottom: 1px solid var(--mkf-line);
}

.mkf-inicio .mkf-inicio-sau-card .mkf-inicio-sau-row > .mkf-inicio-sau-n { text-align: right; }

.mkf-inicio .mkf-inicio-sau-card .mkf-inicio-sau-met {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.mkf-inicio .mkf-inicio-sau-card .mkf-inicio-sau-sub {
    font-size: 11px;
    color: var(--mkf-text-3);
}

.mkf-inicio .mkf-inicio-sau-card .mkf-inicio-sau-sub .mkf-inicio-sau-diverge { color: var(--mkf-text-3); cursor: help; }

.mkf-inicio .mkf-inicio-sau-card .mkf-inicio-sau-row > .mkf-inicio-sau-taxa { font-size: 15px; font-weight: 600; }
.mkf-inicio .mkf-inicio-sau-card .mkf-inicio-sau-row > .mkf-inicio-sau-lim { color: var(--mkf-text-2); }

.mkf-inicio .mkf-inicio-sau-card .mkf-inicio-sau-folga,
.mkf-inicio .mkf-inicio-sau-card .mkf-inicio-sau-situ {
    font-size: 12px;
    color: var(--mkf-text-2);
}

.mkf-inicio .mkf-inicio-sau-card .mkf-inicio-sau-situ.mkf-inicio-warn { color: var(--mkf-warn); }
.mkf-inicio .mkf-inicio-sau-card .mkf-inicio-sau-situ.mkf-inicio-lose { color: var(--mkf-lose); }

.mkf-inicio .mkf-inicio-sau-card .mkf-inicio-sau-tiles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    padding: 12px 16px;
}

.mkf-inicio .mkf-inicio-sau-card .mkf-inicio-sau-tile {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid var(--mkf-line-soft);
    border-radius: 6px;
    background-color: var(--mkf-surface-2);
}

.mkf-inicio .mkf-inicio-sau-card .mkf-inicio-sau-tile .mkf-inicio-sau-tile-rot { font-size: 11.5px; color: var(--mkf-text-2); }
.mkf-inicio .mkf-inicio-sau-card .mkf-inicio-sau-tile .mkf-inicio-sau-tile-val { font-size: 15px; font-weight: 600; text-align: left; }

.mkf-inicio .mkf-inicio-sau-card .mkf-inicio-card-foot.mkf-inicio-sau-foot {
    justify-content: space-between;
    gap: 12px;
    height: auto;
    min-height: 40px;
    padding-top: 6px;
    padding-bottom: 6px;
    font-size: 12px;
    color: var(--mkf-text-2);
}

@media (max-width: 1280px) {
    .mkf-inicio .mkf-inicio-sau-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Painel de Pedidos atrasados — aba Mercado Livre ---- */
.mkf-inicio .mkf-inicio-drawer-corpo .mkf-inicio-drawer-resumo {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--mkf-line);
    font-size: 12.5px;
}

.mkf-inicio .mkf-inicio-drawer-resumo .mkf-inicio-drawer-nota { font-size: 11px; color: var(--mkf-text-3); }

.mkf-inicio .mkf-inicio-drawer-corpo .mkf-inicio-drawer-lista {
    margin: 0;
    padding: 0;
    list-style: none;
}

.mkf-inicio .mkf-inicio-drawer-lista .mkf-inicio-drawer-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 3px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--mkf-line-soft);
}

.mkf-inicio .mkf-inicio-drawer-lista .mkf-inicio-drawer-item .mkf-inicio-drawer-item-tit { font-weight: 500; }
.mkf-inicio .mkf-inicio-drawer-lista .mkf-inicio-drawer-item .mkf-inicio-drawer-item-sub { font-size: 11.5px; color: var(--mkf-text-2); }

/* ---- Configurações › Integrações › Despacho ---- */
.mkf-desp-cfg {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 960px;
}

.mkf-desp-cfg .mkf-desp-cfg-intro { margin: 0; font-size: 13px; color: var(--mkf-text-2); }
.mkf-desp-cfg .mkf-desp-cfg-vazio { font-size: 13px; color: var(--mkf-text-3); }

.mkf-desp-cfg .mkf-desp-cfg-bloco {
    padding: 12px 16px;
    border: 1px solid var(--mkf-line);
    border-radius: 8px;
    background-color: var(--mkf-surface);
}

.mkf-desp-cfg .mkf-desp-cfg-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.mkf-desp-cfg .mkf-desp-cfg-head h3 { margin: 0; font-size: 14px; font-weight: 600; }
.mkf-desp-cfg .mkf-desp-cfg-head .mkf-desp-cfg-nota { font-size: 11.5px; color: var(--mkf-text-3); }

.mkf-desp-cfg .mkf-desp-cfg-bloco .mkf-desp-cfg-tabela { width: 100%; border-collapse: collapse; font-size: 13px; }

.mkf-desp-cfg .mkf-desp-cfg-bloco .mkf-desp-cfg-tabela th {
    padding: 6px 8px;
    border-bottom: 1px solid var(--mkf-line);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-align: left;
    text-transform: uppercase;
    color: var(--mkf-text-2);
}

.mkf-desp-cfg .mkf-desp-cfg-bloco .mkf-desp-cfg-tabela td { padding: 4px 8px; border-bottom: 1px solid var(--mkf-line-soft); }
.mkf-desp-cfg .mkf-desp-cfg-tabela tr.mkf-desp-cfg-linha--off td { color: var(--mkf-text-3); }

.mkf-desp-cfg .mkf-desp-cfg-tabela td .mkf-desp-cfg-hora {
    height: 28px;
    padding: 0 6px;
    border: 1px solid var(--mkf-line);
    border-radius: 6px;
    background-color: var(--mkf-surface);
    color: var(--mkf-text);
    font-family: var(--mkf-font-mono);
    font-variant-numeric: tabular-nums;
}

.mkf-desp-cfg .mkf-desp-cfg-bloco .mkf-desp-cfg-acoes { display: flex; justify-content: flex-end; margin-top: 10px; }

/* 2026-10-05 — Transportadoras e modalidades · Dias sem coleta e coletas especiais. */
.mkf-desp-cfg .mkf-desp-cfg-bloco .mkf-desp-cfg-acoes { gap: 8px; }
.mkf-desp-cfg .mkf-desp-cfg-bloco .mkf-desp-cfg-tabela .mkf-desp-cfg-num { font-family: var(--mkf-font-mono); font-variant-numeric: tabular-nums; }
.mkf-desp-cfg .mkf-desp-cfg-bloco .mkf-desp-cfg-tabela th.mkf-desp-cfg-num,
.mkf-desp-cfg .mkf-desp-cfg-bloco .mkf-desp-cfg-tabela td.mkf-desp-cfg-num { text-align: right; }
.mkf-desp-cfg .mkf-desp-cfg-bloco .mkf-desp-cfg-tabela td.mkf-desp-cfg-zero { color: var(--mkf-text-3); }
.mkf-desp-cfg .mkf-desp-cfg-bloco .mkf-desp-cfg-tabela td.mkf-desp-cfg-data { font-family: var(--mkf-font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }

.mkf-desp-cfg .mkf-desp-cfg-bloco .mkf-desp-cfg-tabela .mkf-desp-cfg-nova {
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 6px;
    font-size: 11px;
    background-color: var(--mkf-warn-soft);
    color: var(--mkf-warn);
}

.mkf-desp-cfg .mkf-desp-cfg-bloco .mkf-desp-cfg-sel,
.mkf-desp-cfg .mkf-desp-cfg-bloco .mkf-desp-cfg-form select,
.mkf-desp-cfg .mkf-desp-cfg-bloco .mkf-desp-cfg-form input {
    height: 28px;
    padding: 0 6px;
    border: 1px solid var(--mkf-line);
    border-radius: 6px;
    background-color: var(--mkf-surface);
    color: var(--mkf-text);
    font-family: inherit;
    font-size: 13px;
}

.mkf-desp-cfg .mkf-desp-cfg-bloco .mkf-desp-cfg-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px 14px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--mkf-line-soft);
}

.mkf-desp-cfg .mkf-desp-cfg-bloco .mkf-desp-cfg-form label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 11.5px;
    color: var(--mkf-text-2);
}

.mkf-desp-cfg .mkf-desp-cfg-bloco .mkf-desp-cfg-form .mkf-desp-cfg-form-obs { flex: 1 1 240px; }
.mkf-desp-cfg .mkf-desp-cfg-bloco .mkf-desp-cfg-form .mkf-desp-cfg-acoes { margin-top: 0; margin-left: auto; }

/* Configurações › Integrações › Mercado Livre › Reputação */
.mkf-desp-cfg .mkf-desp-cfg-tabela td .mkf-rep-cfg-num { width: 80px; text-align: right; }
.mkf-desp-cfg .mkf-desp-cfg-tabela td.mkf-desp-cfg-sem { color: var(--mkf-text-3); font-size: 12px; }
.mkf-desp-cfg .mkf-desp-cfg-bloco .mkf-rep-cfg-acoes { align-items: center; justify-content: space-between; gap: 12px; }
.mkf-desp-cfg .mkf-rep-cfg-acoes .mkf-rep-cfg-data { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--mkf-text-2); }
.mkf-desp-cfg .mkf-rep-cfg-acoes .mkf-rep-cfg-erro { font-size: 12px; color: var(--mkf-lose); }

/* ==========================================================================================
   2026-10-04 — Início › Oportunidades (substitui Buy Box / Oportunidades de preço) + linha de status do Buy Box + drawer.
   ========================================================================================== */
.mkf-inicio .mkf-inicio-opo .mkf-inicio-opo-row {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) 110px 150px 150px;
    align-items: center;
    gap: 0 12px;
    min-height: 62px;
    padding: 0 16px;
    border-bottom: 1px solid var(--mkf-line-soft);
    box-sizing: border-box;
}

.mkf-inicio .mkf-inicio-opo .mkf-inicio-opo-row:nth-child(2n+3) { background-color: var(--mkf-row-alt); }

.mkf-inicio .mkf-inicio-opo .mkf-inicio-opo-row.mkf-inicio-opo-row--head {
    min-height: 36px;
    border-bottom: 1px solid var(--mkf-line);
    background-color: transparent;
}

.mkf-inicio .mkf-inicio-opo .mkf-inicio-opo-row.mkf-inicio-opo-row--clicavel { cursor: pointer; }
.mkf-inicio .mkf-inicio-opo .mkf-inicio-opo-row.mkf-inicio-opo-row--clicavel:hover { background-color: var(--mkf-surface-2); }
.mkf-inicio .mkf-inicio-opo .mkf-inicio-opo-row.mkf-inicio-opo-row--clicavel:focus-visible { outline: 2px solid var(--mkf-brand); outline-offset: -2px; }

.mkf-inicio .mkf-inicio-opo .mkf-inicio-opo-n { text-align: right; }

.mkf-inicio .mkf-inicio-opo .mkf-inicio-opo-canais { display: inline-flex; align-items: center; gap: 4px; }

.mkf-inicio .mkf-inicio-opo .mkf-inicio-opo-txt {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.mkf-inicio .mkf-inicio-opo .mkf-inicio-opo-tit {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 500;
}

.mkf-inicio .mkf-inicio-opo .mkf-inicio-opo-sub {
    font-size: 12px;
    color: var(--mkf-text-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mkf-inicio .mkf-inicio-opo .mkf-inicio-opo-tag {
    display: inline-flex;
    align-items: center;
    height: 18px;
    padding: 0 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background-color: var(--mkf-surface-3);
    color: var(--mkf-text-2);
}

.mkf-inicio .mkf-inicio-opo .mkf-inicio-opo-tag.mkf-inicio-opo-tag--preco { background-color: var(--mkf-win-soft); color: var(--mkf-win); }
.mkf-inicio .mkf-inicio-opo .mkf-inicio-opo-tag.mkf-inicio-opo-tag--ads { background-color: var(--mkf-fight-soft); color: var(--mkf-fight); }
.mkf-inicio .mkf-inicio-opo .mkf-inicio-opo-tag.mkf-inicio-opo-tag--estoque { background-color: var(--mkf-stock-soft); color: var(--mkf-stock); }
.mkf-inicio .mkf-inicio-opo .mkf-inicio-opo-tag.mkf-inicio-opo-tag--conta { background-color: var(--mkf-warn-soft); color: var(--mkf-warn); }

.mkf-inicio .mkf-inicio-opo .mkf-inicio-opo-row > .mkf-inicio-opo-qtd { font-size: 15px; font-weight: 600; text-align: right; }

.mkf-inicio .mkf-inicio-opo .mkf-inicio-opo-impacto {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
}

.mkf-inicio .mkf-inicio-opo .mkf-inicio-opo-impacto .mkf-inicio-opo-valor { font-size: 15px; font-weight: 600; }
.mkf-inicio .mkf-inicio-opo .mkf-inicio-opo-impacto .mkf-inicio-opo-valor--lucro { color: var(--mkf-win); }
.mkf-inicio .mkf-inicio-opo .mkf-inicio-opo-impacto .mkf-inicio-opo-valor--receita { color: var(--mkf-fight); }
.mkf-inicio .mkf-inicio-opo .mkf-inicio-opo-impacto .mkf-inicio-opo-valor--risco { color: var(--mkf-warn); }
.mkf-inicio .mkf-inicio-opo .mkf-inicio-opo-impacto .mkf-inicio-opo-rot { font-size: 11px; color: var(--mkf-text-3); }

.mkf-inicio .mkf-inicio-opo .mkf-inicio-opo-row > .mkf-inicio-opo-acao { justify-self: end; font-weight: 600; }

.mkf-inicio .mkf-inicio-opo .mkf-inicio-card-foot.mkf-inicio-opo-foot {
    justify-content: space-between;
    gap: 16px;
    height: auto;
    min-height: 40px;
    padding-top: 6px;
    padding-bottom: 6px;
    font-size: 12px;
    color: var(--mkf-text-2);
}

/* Linha de status do Buy Box */
.mkf-inicio .mkf-inicio-card.mkf-inicio-bbst {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-top: -4px;
    padding: 10px 16px;
    font-size: 12.5px;
    color: var(--mkf-text-2);
}

.mkf-inicio .mkf-inicio-bbst .mkf-inicio-bbst-l { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.mkf-inicio .mkf-inicio-bbst .mkf-inicio-bbst-l > b { color: var(--mkf-text); }
.mkf-inicio .mkf-inicio-bbst .mkf-inicio-bbst-c { color: var(--mkf-text-2); text-decoration: none; }
.mkf-inicio .mkf-inicio-bbst .mkf-inicio-bbst-c:hover { text-decoration: underline; }
.mkf-inicio .mkf-inicio-bbst .mkf-inicio-bbst-r { color: var(--mkf-text-3); }

/* Drawer das oportunidades — 720 px */
.mkf-inicio .mkf-inicio-drawer.mkf-inicio-drawer--opo { width: 720px; max-width: 100vw; }

.mkf-inicio .mkf-inicio-drawer--opo .mkf-inicio-drawer-corpo { overflow-x: auto; }
.mkf-inicio .mkf-inicio-drawer--opo .mkf-opo-tabela { width: 100%; border-collapse: collapse; font-size: 12px; }

.mkf-inicio .mkf-inicio-drawer--opo .mkf-opo-tabela th {
    position: sticky;
    top: 0;
    padding: 8px 6px;
    border-bottom: 1px solid var(--mkf-line);
    background-color: var(--mkf-surface);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-align: left;
    text-transform: uppercase;
    color: var(--mkf-text-2);
}

.mkf-inicio .mkf-inicio-drawer--opo .mkf-opo-tabela td { padding: 7px 6px; border-bottom: 1px solid var(--mkf-line-soft); vertical-align: middle; }
.mkf-inicio .mkf-inicio-drawer--opo .mkf-opo-tabela tbody tr:nth-child(2n) td { background-color: var(--mkf-row-alt); }
.mkf-inicio .mkf-inicio-drawer--opo .mkf-opo-tabela .mkf-opo-n { text-align: right; white-space: nowrap; }
.mkf-inicio .mkf-inicio-drawer--opo .mkf-opo-tabela th.mkf-opo-n { white-space: normal; line-height: 1.2; }
.mkf-inicio .mkf-inicio-drawer--opo .mkf-opo-tabela .mkf-opo-antes,
.mkf-inicio .mkf-inicio-drawer--opo .mkf-opo-tabela .mkf-opo-depois { display: block; }
.mkf-inicio .mkf-inicio-drawer--opo .mkf-opo-tabela .mkf-opo-antes { color: var(--mkf-text-2); }
.mkf-inicio .mkf-inicio-drawer--opo .mkf-opo-tabela .mkf-opo-chk { width: 28px; text-align: center; }
.mkf-inicio .mkf-inicio-drawer--opo .mkf-opo-tabela .mkf-opo-incl { color: var(--mkf-win); }

.mkf-inicio .mkf-inicio-drawer--opo .mkf-opo-anuncio { max-width: 190px; }
.mkf-inicio .mkf-inicio-drawer--opo .mkf-opo-anuncio .mkf-opo-tit {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}

.mkf-inicio .mkf-inicio-drawer--opo .mkf-opo-anuncio .mkf-opo-sub { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--mkf-text-3); }
.mkf-inicio .mkf-inicio-drawer--opo .mkf-opo-anuncio .mkf-opo-travado { color: var(--mkf-warn); }
.mkf-inicio .mkf-inicio-drawer--opo .mkf-opo-acoes { white-space: nowrap; text-align: right; }

.mkf-inicio .mkf-inicio-drawer--opo .mkf-opo-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    border-top: 1px solid var(--mkf-line);
    font-size: 12.5px;
    color: var(--mkf-text-2);
}

.mkf-inicio .mkf-inicio-drawer--opo .mkf-opo-foot .mkf-opo-botoes,
.mkf-inicio .mkf-inicio-drawer--opo .mkf-opo-foot .mkf-opo-lote { display: inline-flex; align-items: center; gap: 8px; }
.mkf-inicio .mkf-inicio-drawer--opo .mkf-opo-foot .mkf-opo-aviso { font-size: 11.5px; color: var(--mkf-warn); }

/* Prateleira Vonder — selo "ST ressarcível" na célula CST interestadual (2026-10-15). 3 classes pra ganhar do
   MudBlazor.min.css, que vem depois do app.css. */
.mkf-data-table .mud-table-body .mkf-selo-st {
    display: inline-block;
    margin-left: 6px;
    padding: 0 6px;
    border: 1px solid var(--mkf-warn);
    border-radius: var(--mkf-radius-pill);
    color: var(--mkf-warn);
    font-family: inherit;
    font-size: 11px;
    line-height: 16px;
    white-space: nowrap;
    vertical-align: middle;
}

/* Fiscal › Conferência de cadastro (2026-10-17). 3 classes no seletor da tabela: o MudBlazor.min.css vem depois do app.css. */
.mkf-fconf .mkf-fconf-sec {
    color: var(--mkf-text-3);
}
.mkf-fconf .mud-table-body .mkf-fconf-status,
.mkf-fconf .mkf-fconf-status {
    display: inline-block;
    padding: 0 8px;
    border-radius: var(--mkf-radius-pill);
    background: var(--mkf-idle-soft);
    color: var(--mkf-text-2);
    font-size: 12px;
    white-space: nowrap;
}
.mkf-fconf .mud-table-body .mkf-fconf-status--div {
    background: var(--mkf-lose-soft);
    color: var(--mkf-lose);
}
.mkf-fconf .mud-table-body .mkf-fconf-status--ok {
    background: var(--mkf-win-soft);
    color: var(--mkf-win);
}
/* Precificação — memória do motor Lucro Real (2026-10-17). */
.mkf-preco-card pre.mkf-preco-motor-memoria {
    margin: 12px 0 0;
    padding: 8px 12px;
    border-radius: 6px;
    background: var(--mkf-surface-2);
    color: var(--mkf-text);
    font-family: var(--mkf-font-mono);
    font-size: 12px;
    white-space: pre-wrap;
}
/* Fiscal › Preço com imposto correto (2026-10-17) — mesmas regras de 3 classes da Conferência. */
.mkf-fconf .mud-table-root th.mkf-col-numeric,
.mkf-fconf .mud-table-root td.mkf-col-numeric,
.mkf-fconf .mud-simple-table th.mkf-col-numeric,
.mkf-fconf .mud-simple-table td.mkf-col-numeric {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.mkf-fconf .mkf-fimp-chaves label,
.mkf-fconf .mkf-fimp-campos label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    color: var(--mkf-text);
    font-size: 14px;
}
.mkf-fconf .mkf-fimp-campos input,
.mkf-fconf .mud-simple-table input.mkf-fimp-num {
    width: 88px;
    padding: 2px 6px;
    border: 1px solid var(--mkf-line);
    border-radius: 6px;
    background: var(--mkf-surface);
    color: var(--mkf-text);
    font: inherit;
    text-align: right;
}
.mkf-fconf .mud-table-body pre.mkf-fconf-memoria,
.mkf-fconf pre.mkf-fconf-memoria {
    margin: 0 0 12px;
    padding: 8px 12px;
    border-radius: 6px;
    background: var(--mkf-surface-2);
    color: var(--mkf-text);
    font-family: var(--mkf-font-mono);
    font-size: 12px;
    white-space: pre-wrap;
}
.mkf-fconf .mkf-regra-filtros .mkf-fconf-busca {
    max-width: 280px;
    margin-top: 0;
}

/* ---- Shopee › Melhor Oferta (2026-10-19) ---- */
.mkf-pa-card.mkf-bba-card.mkf-mo-largo {
    max-width: 1600px;
}
.mkf-bba-card .mkf-bba-input.mkf-mo-busca {
    width: 280px;
    max-width: 100%;
}
.mkf-bba-tabela .mkf-bba-trunc.mkf-mo-titulo,
.mkf-bba-tabela .mkf-bba-trunc.mkf-mo-ref {
    max-width: 280px;
}
.mkf-bba-tabela td.mkf-mo-veredito {
    min-width: 220px;
    max-width: 360px;
}
.mkf-bba-tabela .mkf-bba-apoio.mkf-mo-motivo {
    white-space: normal;
    font-size: 12px;
    line-height: 1.35;
}
.mkf-bba-tabela .mkf-mo-tag {
    display: inline-block;
    padding: 0 6px;
    border-radius: var(--mkf-radius-pill);
    background: var(--mkf-surface-2);
    color: var(--mkf-text-2);
    font-size: 11px;
    line-height: 18px;
}
.mkf-bba-tabela .mkf-mo-tag.mkf-mo-tag--alerta {
    background: var(--mkf-warn-soft);
    color: var(--mkf-warn);
}
.mkf-bba-tabela .mkf-mo-tag.mkf-mo-tag--ok {
    background: var(--mkf-win-soft);
    color: var(--mkf-win);
}
.mkf-bba-tabela .mkf-mo-v {
    display: inline-block;
    padding: 0 8px;
    border-radius: var(--mkf-radius-pill);
    font-size: 12px;
    font-weight: 600;
    line-height: 20px;
    background: var(--mkf-idle-soft);
    color: var(--mkf-idle);
}
.mkf-bba-tabela .mkf-mo-v.mkf-mo-v--enviar {
    background: var(--mkf-win-soft);
    color: var(--mkf-win);
}
.mkf-bba-tabela .mkf-mo-v.mkf-mo-v--naoenviar {
    background: var(--mkf-lose-soft);
    color: var(--mkf-lose);
}
.mkf-bba-tabela .mkf-mo-v.mkf-mo-v--revisar {
    background: var(--mkf-warn-soft);
    color: var(--mkf-warn);
}
.mkf-bba-tabela td.mkf-mo-zero,
.mkf-bba-tabela .mkf-mo-zero {
    color: var(--mkf-text-3);
}
.mkf-bba-tabela .mkf-mo-aviso {
    color: var(--mkf-warn);
    cursor: help;
    margin-left: 4px;
}
.mkf-bba-tabela .mkf-mo-incluir {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    font-size: 12px;
    color: var(--mkf-text-2);
    cursor: pointer;
}
.mkf-bba-tabela tr.mkf-mo-inativa td {
    color: var(--mkf-text-3);
}
.mkf-bba-card .mkf-bba-f.mkf-mo-filtro {
    width: 100%;
    max-width: 640px;
}
.mkf-bba-card .mkf-bba-card-body .mkf-mo-sub {
    margin: 20px 0 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--mkf-text);
}
.mkf-bba-tabela td.mkf-bba-num.mkf-mo-base {
    font-weight: 600;
    background: var(--mkf-surface-2);
}

/* ---- Melhor Oferta › Itens: ordenação, chips e rodapé (2026-10-19) ---- */
.mkf-bba-tabela.mkf-mo-tabela th .mkf-mo-sort {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    cursor: pointer;
    white-space: nowrap;
}
.mkf-bba-tabela.mkf-mo-tabela th .mkf-mo-sort.mkf-mo-sort--on {
    color: var(--mkf-text);
}
.mkf-bba-tabela.mkf-mo-tabela th .mkf-mo-sort .mkf-sort-icon {
    font-size: 16px;
    opacity: 0;
    transition: opacity 120ms ease;
}
.mkf-bba-tabela.mkf-mo-tabela th .mkf-mo-sort:hover .mkf-sort-icon,
.mkf-bba-tabela.mkf-mo-tabela th .mkf-mo-sort:focus-visible .mkf-sort-icon,
.mkf-bba-tabela.mkf-mo-tabela th .mkf-mo-sort .mkf-sort-icon.mkf-sort-icon-active {
    opacity: 1;
}
.mkf-bba-tabela.mkf-mo-tabela th .mkf-mo-sort-grupo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.mkf-bba-tabela.mkf-mo-tabela th .mkf-mo-sort.mkf-mo-sort--alvo {
    padding: 0 3px;
    border-radius: var(--mkf-radius-control);
    text-transform: none;
}
.mkf-bba-tabela.mkf-mo-tabela th .mkf-mo-sort.mkf-mo-sort--alvo:hover,
.mkf-bba-tabela.mkf-mo-tabela th .mkf-mo-sort.mkf-mo-sort--alvo.mkf-mo-sort--on {
    background: var(--mkf-surface-3);
}
.mkf-bba-card .mkf-vendas-contadores.mkf-mo-chips {
    margin-bottom: 0;
}
.mkf-bba-card .mkf-bba-card-body .mkf-mo-rodape {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    margin-top: 10px;
    font-size: 13px;
    color: var(--mkf-text-2);
}
.mkf-bba-card .mkf-bba-card-body .mkf-mo-rodape b {
    font-family: var(--mkf-mono-numeric-family);
    font-variant-numeric: var(--mkf-mono-numeric-variant);
    color: var(--mkf-text);
}
.mkf-bba-card .mkf-bba-card-body .mkf-mo-rodape b.mkf-venda-pos {
    color: var(--mkf-win);
}
.mkf-bba-card .mkf-bba-card-body .mkf-mo-rodape b.mkf-venda-neg {
    color: var(--mkf-lose);
}

/* ---- Tabela de Custos: ajuda "Convenções de SKU reconhecidas" (2026-10-19) ---- */
.mkf-sortable-th .mkf-sku-conv .mkf-info-icon {
    top: 0;
    font-size: 16px;
    text-transform: none;
}
.mud-tooltip .mkf-sku-conv-tip {
    max-width: 360px;
    text-align: left;
    white-space: normal;
    font-size: 12.5px;
    line-height: 1.45;
    text-transform: none;
    letter-spacing: normal;
}
.mud-tooltip .mkf-sku-conv-tip ul {
    margin: 6px 0;
    padding-left: 16px;
}
.mud-tooltip .mkf-sku-conv-tip code {
    font-family: var(--mkf-font-mono);
    font-size: 12px;
}


/* =====================================================================================================
   2026-10-20 — Início, rodada 3: "Precisa de você" vira fila de problemas · Despacho e Saúde enxutos.
   HTML puro, 3 classes onde o MudBlazor poderia brigar. Cor só no ponto e no número principal (perda/atenção);
   sem fundo nem borda colorida. Números em mono (tabular).
   ===================================================================================================== */
.mkf-inicio .mkf-inicio-card.mkf-inicio-fila { overflow: hidden; }

.mkf-inicio .mkf-inicio-fila .mkf-inicio-fila-lista {
    margin: 0;
    padding: 0;
    list-style: none;
}

.mkf-inicio .mkf-inicio-fila .mkf-inicio-fila-li {
    display: grid;
    grid-template-columns: 16px 20px minmax(0, 1fr) auto;
    align-items: center;
    gap: 0 10px;
    min-height: 44px;
    padding: 5px 14px;
    border-top: 1px solid var(--mkf-line-soft);
    box-sizing: border-box;
}

.mkf-inicio .mkf-inicio-fila .mkf-inicio-fila-li:first-child { border-top: 0; }
.mkf-inicio .mkf-inicio-fila .mkf-inicio-fila-li:nth-child(2n) { background-color: var(--mkf-row-alt); }

.mkf-inicio .mkf-inicio-fila .mkf-inicio-fila-ponto {
    justify-self: center;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.mkf-inicio .mkf-inicio-fila .mkf-inicio-fila-ponto.mkf-inicio-fila-ponto--lose { background-color: var(--mkf-lose); }
.mkf-inicio .mkf-inicio-fila .mkf-inicio-fila-ponto.mkf-inicio-fila-ponto--warn { background-color: var(--mkf-warn); }
.mkf-inicio .mkf-inicio-fila .mkf-inicio-fila-ponto.mkf-inicio-fila-ponto--neutra { background-color: var(--mkf-text-3); }

.mkf-inicio .mkf-inicio-fila .mkf-inicio-fila-canal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mkf-inicio .mkf-inicio-fila .mkf-inicio-fila-txt {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.mkf-inicio .mkf-inicio-fila .mkf-inicio-fila-tit {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--mkf-text);
}

.mkf-inicio .mkf-inicio-fila .mkf-inicio-fila-det {
    overflow: hidden;
    font-size: 12px;
    line-height: 1.3;
    color: var(--mkf-text-2);
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Números dentro do texto corrido: mono, mas no tamanho e alinhamento do texto (sem o right/13 px da tabela). */
.mkf-inicio .mkf-inicio-fila .mkf-inicio-fila-txt .mkf-inicio-num {
    font-size: inherit;
    text-align: inherit;
}

.mkf-inicio .mkf-inicio-fila .mkf-inicio-fila-nota { color: var(--mkf-text-3); }

.mkf-inicio .mkf-inicio-fila .mkf-inicio-fila-acoes {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-size: 12px;
}

.mkf-inicio .mkf-inicio-fila .mkf-inicio-fila-acoes .mkf-inicio-lnk { font-size: 12px; }

.mkf-inicio .mkf-inicio-fila .mkf-inicio-fila-acoes button.mkf-inicio-lnk {
    padding: 0;
    border: 0;
    background: none;
    font-family: inherit;
    cursor: pointer;
}

.mkf-inicio .mkf-inicio-fila .mkf-inicio-fila-acoes .mkf-inicio-lnk.mkf-inicio-fila-sec { color: var(--mkf-text-2); font-weight: 400; }
.mkf-inicio .mkf-inicio-fila .mkf-inicio-fila-acoes .mkf-inicio-lnk:hover { text-decoration: underline; }

.mkf-inicio .mkf-inicio-fila .mkf-inicio-fila-li.mkf-inicio-fila-emdia {
    display: flex;
    gap: 8px;
    min-height: 34px;
    font-size: 12px;
    color: var(--mkf-text-3);
}

.mkf-inicio .mkf-inicio-fila .mkf-inicio-fila-emdia .mkf-inicio-fila-emdia-ok { color: var(--mkf-win); }

.mkf-inicio .mkf-inicio-fila .mkf-inicio-fila-li.mkf-inicio-fila-mais {
    display: flex;
    min-height: 34px;
}

.mkf-inicio .mkf-inicio-fila .mkf-inicio-fila-mais button.mkf-inicio-lnk {
    padding: 0;
    border: 0;
    background: none;
    font-family: inherit;
    cursor: pointer;
}

.mkf-inicio .mkf-inicio-fila .mkf-inicio-fila-ok {
    padding: 14px 16px;
    font-size: 14px;
    font-weight: 500;
    color: var(--mkf-win);
}

.mkf-inicio .mkf-inicio-fila .mkf-inicio-fila-skel {
    display: flex;
    align-items: center;
    height: 44px;
    padding: 0 14px;
    border-top: 1px solid var(--mkf-line-soft);
}

.mkf-inicio .mkf-inicio-fila .mkf-inicio-fila-skel:first-child { border-top: 0; }

/* ---- Chip do cabeçalho: a palavra do pior estado ao lado do nível ---- */
.mkf-inicio .mkf-inicio-rep .mkf-inicio-rep-estado {
    font-size: 11.5px;
    font-weight: 500;
    white-space: nowrap;
}

.mkf-inicio .mkf-inicio-rep .mkf-inicio-rep-estado.mkf-inicio-win { color: var(--mkf-win); }
.mkf-inicio .mkf-inicio-rep .mkf-inicio-rep-estado.mkf-inicio-warn { color: var(--mkf-warn); }
.mkf-inicio .mkf-inicio-rep .mkf-inicio-rep-estado.mkf-inicio-lose { color: var(--mkf-lose); }

/* ---- Seletor de período na linha de título de Vendas ---- */
.mkf-inicio .mkf-inicio-sec-head .mkf-inicio-sec-dir {
    display: flex;
    align-items: center;
    gap: 16px;
}

.mkf-inicio .mkf-inicio-sec-dir .mkf-inicio-periodo-grupo {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.mkf-inicio .mkf-inicio-sec-dir .mkf-inicio-periodo-grupo .mkf-inicio-periodo-nota {
    font-size: 10.5px;
    color: var(--mkf-text-3);
}

/* ---- Despacho, rodada 3: células sem a linha do dia ---- */
.mkf-inicio .mkf-inicio-dsp .mkf-inicio-dsp-cab { align-items: center; justify-content: flex-start; gap: 8px; }

.mkf-inicio .mkf-inicio-dsp .mkf-inicio-dsp-cab .mkf-inicio-dsp-info {
    display: inline-flex;
    width: 14px;
    height: 14px;
    color: var(--mkf-text-3);
    cursor: help;
}

.mkf-inicio .mkf-inicio-dsp .mkf-inicio-dsp-info svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
}

.mkf-inicio .mkf-inicio-dsp .mkf-inicio-dsp-row > .mkf-inicio-dsp-hora { font-size: 15px; font-weight: 600; }
.mkf-inicio .mkf-inicio-dsp .mkf-inicio-dsp-row > .mkf-inicio-dsp-hora.mkf-inicio-dsp-cor--fight { color: var(--mkf-text); }
.mkf-inicio .mkf-inicio-dsp .mkf-inicio-dsp-row > .mkf-inicio-dsp-hora.mkf-inicio-dsp-cor--warn { color: var(--mkf-warn); }
.mkf-inicio .mkf-inicio-dsp .mkf-inicio-dsp-row > .mkf-inicio-dsp-hora.mkf-inicio-dsp-cor--lose { color: var(--mkf-lose); }
.mkf-inicio .mkf-inicio-dsp .mkf-inicio-dsp-row > .mkf-inicio-dsp-falta { font-size: 12px; color: var(--mkf-text-2); }
.mkf-inicio .mkf-inicio-dsp .mkf-inicio-dsp-row > .mkf-inicio-dsp-falta.mkf-inicio-warn { color: var(--mkf-warn); }
.mkf-inicio .mkf-inicio-dsp .mkf-inicio-dsp-row > .mkf-inicio-dsp-falta.mkf-inicio-lose { color: var(--mkf-lose); }
.mkf-inicio .mkf-inicio-dsp .mkf-inicio-dsp-row > .mkf-inicio-dsp-falta.mkf-inicio-zero { color: var(--mkf-text-3); }
.mkf-inicio .mkf-inicio-dsp .mkf-inicio-dsp-row > .mkf-inicio-dsp-sem { font-size: 12px; color: var(--mkf-text-3); text-align: right; white-space: nowrap; }
.mkf-inicio .mkf-inicio-dsp .mkf-inicio-dsp-row > .mkf-inicio-dsp-hoje.mkf-inicio-dsp-cor--fight { color: var(--mkf-text); }

/* A fazer: só os itens de ação, na régua de cor; o resto vira sufixo cinza. */
.mkf-inicio .mkf-inicio-dsp .mkf-inicio-dsp-row > .mkf-inicio-dsp-sit {
    display: block;
    overflow: hidden;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mkf-inicio .mkf-inicio-dsp .mkf-inicio-dsp-sit .mkf-inicio-dsp-sit-l { display: inline; }
.mkf-inicio .mkf-inicio-dsp .mkf-inicio-dsp-sit .mkf-inicio-dsp-sit-l + .mkf-inicio-dsp-sit-l::before { content: " · "; color: var(--mkf-text-3); }
.mkf-inicio .mkf-inicio-dsp .mkf-inicio-dsp-sit .mkf-inicio-dsp-sit-l.mkf-inicio-dsp-sit--neutro { color: var(--mkf-text); }
.mkf-inicio .mkf-inicio-dsp .mkf-inicio-dsp-sit .mkf-inicio-dsp-sit-info { color: var(--mkf-text-3); }
.mkf-inicio .mkf-inicio-dsp .mkf-inicio-dsp-sit .mkf-inicio-dsp-sit-info .mkf-inicio-num,
.mkf-inicio .mkf-inicio-dsp .mkf-inicio-dsp-sit .mkf-inicio-dsp-sit-l .mkf-inicio-num { font-size: inherit; }
.mkf-inicio .mkf-inicio-dsp .mkf-inicio-dsp-sit .mkf-inicio-dsp-sit--zero { color: var(--mkf-text-3); }

.mkf-inicio .mkf-inicio-dsp .mkf-inicio-dsp-foot .mkf-inicio-dsp-foot-dir {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-left: auto;
}

/* Amanhã recolhido: uma linha de 48 px dentro do card Hoje. */
.mkf-inicio .mkf-inicio-dsp .mkf-inicio-dsp-amanha-linha {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 960px;
    height: 48px;
    padding: 0 16px;
    border-top: 1px solid var(--mkf-line);
    box-sizing: border-box;
    font-size: 12.5px;
}

.mkf-inicio .mkf-inicio-dsp .mkf-inicio-dsp-amanha-linha .mkf-inicio-dsp-amanha-rot { font-weight: 600; }
.mkf-inicio .mkf-inicio-dsp .mkf-inicio-dsp-amanha-linha .mkf-inicio-dsp-amanha-data { color: var(--mkf-text-2); white-space: nowrap; }

.mkf-inicio .mkf-inicio-dsp .mkf-inicio-dsp-amanha-linha .mkf-inicio-dsp-amanha-itens {
    flex: 1 1 auto;
    min-width: 0;
}

.mkf-inicio .mkf-inicio-dsp .mkf-inicio-dsp-amanha-itens .mkf-inicio-dsp-amanha-item + .mkf-inicio-dsp-amanha-item::before {
    content: " · ";
    color: var(--mkf-text-3);
}

.mkf-inicio .mkf-inicio-dsp .mkf-inicio-dsp-amanha-itens .mkf-inicio-dsp-amanha-item b { font-weight: 500; }
.mkf-inicio .mkf-inicio-dsp .mkf-inicio-dsp-amanha-itens .mkf-inicio-dsp-amanha-n { font-size: 13px; font-weight: 600; }
.mkf-inicio .mkf-inicio-dsp .mkf-inicio-dsp-amanha-itens .mkf-inicio-dsp-amanha-par { color: var(--mkf-text-2); }

.mkf-inicio .mkf-inicio-dsp .mkf-inicio-dsp-amanha-linha button.mkf-inicio-dsp-amanha-btn {
    padding: 0;
    border: 0;
    background: none;
    font-family: inherit;
    font-size: 12px;
    cursor: pointer;
}

/* ---- Saúde da conta, rodada 3: sem barras; métrica · taxa · limite · estado · folga ---- */
.mkf-inicio .mkf-inicio-sau-card .mkf-inicio-sau-row.mkf-inicio-sau-row--ml { grid-template-columns: minmax(130px, 1.6fr) 64px 52px 64px minmax(96px, 1fr); min-height: 44px; }
.mkf-inicio .mkf-inicio-sau-card .mkf-inicio-sau-row.mkf-inicio-sau-row--sh { grid-template-columns: minmax(120px, 1.2fr) 76px 64px 92px minmax(120px, 1.3fr); min-height: 44px; }
.mkf-inicio .mkf-inicio-sau-card .mkf-inicio-sau-semana .mkf-inicio-sau-semana-l { display: block; }
.mkf-inicio .mkf-inicio-sau-card .mkf-inicio-sau-row > .mkf-inicio-sau-lim { text-align: right; }

.mkf-inicio .mkf-inicio-sau-card .mkf-inicio-sau-row > .mkf-inicio-sau-atual {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
}

.mkf-inicio .mkf-inicio-sau-card .mkf-inicio-sau-atual .mkf-inicio-sau-taxa { font-size: 15px; font-weight: 600; }
.mkf-inicio .mkf-inicio-sau-card .mkf-inicio-sau-atual .mkf-inicio-sau-sub { max-width: 76px; white-space: normal; text-align: right; line-height: 1.25; }

.mkf-inicio .mkf-inicio-sau-card .mkf-inicio-sau-row > .mkf-inicio-sau-semana {
    font-size: 11.5px;
    line-height: 1.3;
    color: var(--mkf-text-3);
}

.mkf-inicio .mkf-inicio-sau-card .mkf-inicio-sau-semana b { font-weight: 600; color: var(--mkf-text); }
.mkf-inicio .mkf-inicio-sau-card .mkf-inicio-sau-semana b.mkf-inicio-warn { color: var(--mkf-warn); }
.mkf-inicio .mkf-inicio-sau-card .mkf-inicio-sau-semana b.mkf-inicio-lose { color: var(--mkf-lose); }
.mkf-inicio .mkf-inicio-sau-card .mkf-inicio-sau-semana .mkf-inicio-num,
.mkf-inicio .mkf-inicio-sau-card .mkf-inicio-sau-folga .mkf-inicio-num { font-size: inherit; }

.mkf-inicio .mkf-inicio-sau-card .mkf-inicio-sau-folga b { font-weight: 600; }

.mkf-inicio .mkf-inicio-sau-card .mkf-inicio-sau-nota {
    padding: 8px 16px;
    border-bottom: 1px solid var(--mkf-line-soft);
    font-size: 11.5px;
    color: var(--mkf-text-3);
}

.mkf-inicio .mkf-inicio-sau-card .mkf-inicio-sau-nota a { color: var(--mkf-text-3); }
.mkf-inicio .mkf-inicio-sau-card .mkf-inicio-sau-nota a:hover { color: var(--mkf-brand); }

.mkf-inicio .mkf-inicio-sau-card .mkf-inicio-sau-tiles.mkf-inicio-sau-tiles--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Cabeçalho de colunas do Despacho numa linha só e mais baixo (a 1ª dobra tem de caber em 900 px). */
.mkf-inicio .mkf-inicio-dsp .mkf-inicio-dsp-row.mkf-inicio-dsp-row--head { height: 32px; }
.mkf-inicio .mkf-inicio-dsp .mkf-inicio-dsp-row.mkf-inicio-dsp-row--head .mkf-inicio-th { white-space: nowrap; }

/* Configurações › Impostos (Lucro Real) — Parte 3A (2026-10-20). Tudo HTML puro (input/table), prefixo .mkf-imp: sem
   disputa de especificidade com o MudBlazor.min.css. */
.mkf-imp { display: flex; flex-direction: column; gap: 16px; max-width: 1280px; }
.mkf-imp h1 { margin: 0; font-size: 22px; font-weight: 600; }
.mkf-imp .mkf-imp-nota { margin: -8px 0 0; font-size: 13px; color: var(--mkf-text-2); line-height: 1.45; }
.mkf-imp .mkf-imp-grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 16px; align-items: start; }
@media (max-width: 1100px) { .mkf-imp .mkf-imp-grade { grid-template-columns: minmax(0, 1fr); } }
.mkf-imp .mkf-imp-card {
    display: flex; flex-direction: column; gap: 10px; min-width: 0;
    padding: 16px 18px; background-color: var(--mkf-surface); border: 1px solid var(--mkf-line); border-radius: 8px;
}
.mkf-imp .mkf-imp-painel { position: sticky; top: 72px; }
@media (max-width: 1100px) { .mkf-imp .mkf-imp-painel { position: static; } }
.mkf-imp .mkf-imp-card h2 { margin: 6px 0 0; font-size: 14px; font-weight: 600; color: var(--mkf-text); }
.mkf-imp .mkf-imp-card h2:first-child { margin-top: 0; }
.mkf-imp .mkf-imp-sec { font-size: 12px; color: var(--mkf-text-3); }
.mkf-imp .mkf-imp-regra { margin: 0; font-size: 12.5px; color: var(--mkf-text-2); }
.mkf-imp .mkf-imp-campo { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13.5px; color: var(--mkf-text); }
.mkf-imp .mkf-imp-campo--sub { padding-left: 24px; }
.mkf-imp .mkf-imp-campo--largo { flex-wrap: wrap; }
.mkf-imp .mkf-imp-num { display: inline-flex; align-items: center; gap: 4px; color: var(--mkf-text-2); font-size: 13px; }
.mkf-imp input[type="number"], .mkf-imp input.mkf-imp-texto {
    padding: 3px 6px; border: 1px solid var(--mkf-line); border-radius: 6px; background: var(--mkf-surface-2);
    color: var(--mkf-text); font: inherit; font-size: 13px; font-variant-numeric: tabular-nums;
}
.mkf-imp input[type="number"] { width: 84px; text-align: right; }
.mkf-imp input.mkf-imp-texto { flex: 1 1 260px; min-width: 0; font-family: var(--mkf-font-mono); font-size: 12px; }
.mkf-imp input:disabled { opacity: 0.6; }
.mkf-imp input:focus-visible { outline: 2px solid var(--mkf-brand); outline-offset: 1px; }
.mkf-imp .mkf-imp-chave, .mkf-imp .mkf-imp-radio label { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--mkf-text); }
.mkf-imp .mkf-imp-radio { display: flex; flex-direction: column; gap: 6px; }
.mkf-imp .mkf-imp-selo {
    padding: 0 7px; border: 1px solid var(--mkf-line); border-radius: 999px; font-size: 11px; color: var(--mkf-text-3);
}
.mkf-imp details.mkf-imp-outras { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--mkf-text-2); }
.mkf-imp details.mkf-imp-outras summary { cursor: pointer; margin-bottom: 6px; }
.mkf-imp details.mkf-imp-outras .mkf-imp-chave { margin-bottom: 6px; }
.mkf-imp .mkf-imp-acoes {
    display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px;
    margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--mkf-line);
}
.mkf-imp .mkf-imp-acoes .mkf-imp-sec { margin-right: auto; }
.mkf-imp .mkf-imp-acoes--esq { justify-content: flex-start; border-top: 0; padding-top: 0; }
.mkf-imp .mkf-imp-acoes--esq .mkf-imp-sec { margin-right: 0; }
.mkf-imp table.mkf-imp-tabela { width: 100%; border-collapse: collapse; font-size: 13px; color: var(--mkf-text); }
.mkf-imp table.mkf-imp-tabela th {
    padding: 6px 8px; border-bottom: 1px solid var(--mkf-line); text-align: left; font-size: 11.5px; font-weight: 600;
    color: var(--mkf-text-2); white-space: nowrap;
}
.mkf-imp table.mkf-imp-tabela td { padding: 5px 8px; border-bottom: 1px solid var(--mkf-line-soft, var(--mkf-line)); vertical-align: top; }
.mkf-imp table.mkf-imp-tabela .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mkf-imp table.mkf-imp-tabela .mono { font-family: var(--mkf-font-mono); font-size: 12px; white-space: nowrap; }
.mkf-imp table.mkf-imp-tabela tr.sub td { color: var(--mkf-text-2); }
.mkf-imp table.mkf-imp-tabela tr.total td { font-weight: 600; border-top: 1px solid var(--mkf-text-3); }
.mkf-imp table.mkf-imp-tabela tr.desligado td { color: var(--mkf-text-3); }
.mkf-imp table.mkf-imp-tabela td.neg { color: var(--mkf-lose); }
.mkf-imp table.mkf-imp-tabela tr.alerta td:first-child { box-shadow: inset 3px 0 0 var(--mkf-warn); }
.mkf-imp table.mkf-imp-tabela--skus td.titulo { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mkf-imp table.mkf-imp-tabela tr.memoria td { background: var(--mkf-surface-2); }
.mkf-imp table.mkf-imp-tabela tr.memoria pre {
    margin: 0; font-family: var(--mkf-font-mono); font-size: 12px; white-space: pre-wrap; color: var(--mkf-text);
}
.mkf-imp .mkf-imp-alerta { margin: 0 0 6px; font-size: 12.5px; color: var(--mkf-warn); }
.mkf-imp .mkf-imp-leg { margin: 4px 0 0; padding-left: 18px; font-size: 12.5px; color: var(--mkf-text-2); line-height: 1.5; }
.mkf-imp .mkf-imp-filtros { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.mkf-imp .mkf-imp-chip {
    display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 11px; border: 1px solid var(--mkf-line);
    border-radius: 999px; background: var(--mkf-surface-2); color: var(--mkf-text-2); font-family: inherit; font-size: 12px; cursor: pointer;
}
.mkf-imp .mkf-imp-chip[aria-pressed="true"] { border-color: var(--mkf-brand); background: var(--mkf-brand-soft); color: var(--mkf-brand); font-weight: 600; }
.mkf-imp .mkf-imp-chip:focus-visible, .mkf-imp .mkf-imp-link:focus-visible { outline: 2px solid var(--mkf-brand); outline-offset: 2px; }
.mkf-imp .mkf-imp-chip-n { font-variant-numeric: tabular-nums; opacity: 0.8; }
.mkf-imp .mkf-imp-link {
    padding: 0; border: 0; background: none; color: var(--mkf-brand); font: inherit; font-size: 12.5px; cursor: pointer; white-space: nowrap;
}
.mkf-imp .mkf-imp-link:hover { text-decoration: underline; }
@media (max-width: 700px) {
    .mkf-imp .mkf-imp-card { overflow-x: auto; }
}

/* Parte 3A, Etapa 2 (2026-10-21) — Importados: título em 2 linhas no máximo, para caberem margem, mínimo e diferença. */
.mkf-fconf .mud-table-body .mkf-fimp-titulo,
.mkf-fconf .mkf-fimp-titulo {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-width: 240px;
    white-space: normal;
}

/* Parte 3B (2026-10-21) — Fiscal › Preço com imposto correto (tela única): faixa do estimado, totais em palavras, situação. */
.mkf-fconf div.mkf-fpic-faixa {
    padding: 8px 12px;
    border-radius: 6px;
    border-left: 3px solid var(--mkf-warn);
    background: var(--mkf-warn-soft);
    color: var(--mkf-text);
    font-size: 13px;
}
.mkf-fconf .mkf-surface-card .mkf-fpic-totais { display: flex; flex-direction: column; gap: 6px; }
.mkf-fconf .mkf-surface-card .mkf-fpic-totais p { margin: 0; font-size: 14px; color: var(--mkf-text); line-height: 1.45; }
.mkf-fconf .mkf-fpic-tabela .mkf-fpic-situacao { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.mkf-fconf .mkf-fpic-tabela .mkf-fpic-alerta {
    margin-top: 4px;
    max-width: 260px;
    font-size: 12px;
    line-height: 1.35;
    color: var(--mkf-text-2);
    white-space: normal;
}
.mkf-imp .mkf-imp-rolagem { overflow-x: auto; }
/* Cabeçalhos numéricos quebram em 2 linhas (o nowrap de 3 classes da Conferência deixava a tabela mais larga que a tela). */
.mkf-fconf .mkf-fpic-tabela .mud-table-root th.mkf-col-numeric,
.mkf-fconf .mkf-fpic-tabela .mud-table-root th {
    white-space: normal;
    vertical-align: bottom;
    line-height: 1.25;
}
.mkf-fconf .mkf-fpic-tabela .mud-table-root th.mkf-col-numeric { min-width: 72px; max-width: 120px; }
.mkf-fconf .mkf-fpic-tabela .mud-table-body .mkf-fpic-anuncio {
    font-family: var(--mkf-font-sans, inherit);
    font-size: 11.5px;
    color: var(--mkf-text-3);
    white-space: normal;
    max-width: 130px;
}
.mkf-fconf .mkf-fpic-tabela .mud-table-body .mkf-fimp-titulo { max-width: 140px; }
.mkf-fconf .mkf-fpic-tabela .mud-table-body .mkf-fpic-memoria { min-width: 0; padding: 2px 6px; text-transform: none; letter-spacing: 0; font-size: 12.5px; }
.mkf-fconf .mkf-fpic-tabela .mud-table-body .mkf-fpic-quebra { display: inline-block; max-width: 110px; white-space: normal; text-align: right; line-height: 1.3; }
.mkf-fconf .mkf-fpic-tabela .mud-table-body td.mkf-col-numeric .mkf-fconf-sec { font-size: 12px; }
/* 2026-10-21 — 12 colunas: células um pouco mais justas só nesta tabela, para caber em 1440 px com o menu aberto. */
.mkf-fconf .mkf-fpic-tabela.mkf-tabela-compacta .mud-table-container .mud-table-root th,
.mkf-fconf .mkf-fpic-tabela.mkf-tabela-compacta .mud-table-container .mud-table-root td { padding-left: 6px !important; padding-right: 6px !important; }

/* 2026-10-21 — cabeçalho ordenável da Preço com imposto correto: o texto do th vira botão (mesma fonte/caixa do th). */
.mkf-fconf .mkf-fpic-tabela .mud-table-root th .mkf-fpic-ordem {
    background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; letter-spacing: inherit;
    text-transform: inherit; text-align: inherit; cursor: pointer; line-height: inherit;
}
.mkf-fconf .mkf-fpic-tabela .mud-table-root th .mkf-fpic-ordem:hover { color: var(--mkf-text); text-decoration: underline; }
.mkf-fconf .mkf-fpic-tabela .mud-table-root th .mkf-fpic-ordem:focus-visible { outline: 2px solid var(--mkf-accent, currentColor); outline-offset: 2px; }
.mkf-fconf .mkf-fpic-tabela .mud-table-root th .mkf-fpic-seta { white-space: nowrap; }

/* 2026-10-22 — seleção + ações do imposto correto, selo de pausado, histórico e o modal de confirmação. */
.mkf-fconf .mkf-fpic-tabela .mud-table-root input[type="checkbox"].mkf-fpic-check {
    width: 14px; height: 14px; margin: 0 5px 0 0; vertical-align: -2px; cursor: pointer; accent-color: var(--mkf-text-2);
}
.mkf-fconf .mkf-regra-filtros.mkf-fpic-selecao { align-items: center; gap: 8px; flex-wrap: wrap; }
.mkf-fconf .mkf-fpic-selecao .mkf-fpic-sel-n {
    min-width: 28px; padding: 0 8px; border-radius: var(--mkf-radius-pill); background: var(--mkf-surface-2);
    font-family: var(--mkf-mono-numeric-family); font-variant-numeric: var(--mkf-mono-numeric-variant); font-size: 13px; text-align: center;
}
.mkf-fconf .mkf-fpic-selecao .mkf-fpic-sel-acoes { display: inline-flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.mkf-fconf .mud-table-body .mkf-fconf-status.mkf-fpic-pausado { background: var(--mkf-warn-soft); color: var(--mkf-text); }
.mkf-fconf .mkf-surface-card .mkf-fpic-hist-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mkf-fconf .mkf-surface-card table.mkf-fpic-hist { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 12.5px; }
.mkf-fconf .mkf-surface-card table.mkf-fpic-hist th {
    padding: 4px 8px; border-bottom: 1px solid var(--mkf-line); text-align: left; color: var(--mkf-text-3);
    font-size: var(--mkf-type-header-size); font-weight: var(--mkf-type-header-weight); letter-spacing: var(--mkf-type-header-tracking); text-transform: uppercase;
}
.mkf-fconf .mkf-surface-card table.mkf-fpic-hist td { padding: 5px 8px; border-bottom: 1px solid var(--mkf-line-soft); color: var(--mkf-text); vertical-align: top; }
.mkf-fconf .mkf-surface-card table.mkf-fpic-hist .mkf-col-numeric { text-align: right; font-family: var(--mkf-mono-numeric-family); font-variant-numeric: var(--mkf-mono-numeric-variant); white-space: nowrap; }
/* 2026-10-22 (tarde) — Verificar no ML/Shopee: selo "verificar" (botão com cara de selo), preço cheio embaixo do promocional,
   quadro do resultado e o detalhe da verificação no histórico. */
.mkf-fconf .mud-table-body button.mkf-fconf-status.mkf-fpic-verificar,
.mkf-fconf .mud-table-body span.mkf-fconf-status.mkf-fpic-verificar {
    background: var(--mkf-warn-soft); color: var(--mkf-text); border: 0; font: inherit; font-size: 11.5px; line-height: inherit;
}
.mkf-fconf .mud-table-body button.mkf-fconf-status.mkf-fpic-verificar { cursor: pointer; }
.mkf-fconf .mud-table-body button.mkf-fconf-status.mkf-fpic-verificar:hover:not(:disabled) { text-decoration: underline; }
.mkf-fconf .mud-table-body button.mkf-fconf-status.mkf-fpic-verificar:focus-visible { outline: 2px solid var(--mkf-accent, currentColor); outline-offset: 1px; }
.mkf-fconf .mud-table-body .mkf-fconf-status.mkf-fpic-skudiv { display: inline-block; margin-top: 3px; background: var(--mkf-warn-soft); color: var(--mkf-text); font-family: var(--mkf-font-sans, inherit); font-size: 11px; white-space: normal; max-width: 110px; }
.mkf-fconf .mkf-fpic-tabela .mud-table-body .mkf-fpic-promo { white-space: nowrap; font-size: 11.5px; line-height: 1.3; }
.mkf-fconf .mkf-fpic-tabela .mud-table-body .mkf-fpic-memoria.mkf-fpic-verificar-btn { display: block; white-space: normal; line-height: 1.25; max-width: 76px; text-align: left; }
.mkf-fconf .mkf-surface-card.mkf-fpic-verif .mkf-fpic-verif-lista { margin: 8px 0 0; padding-left: 18px; font-size: 13px; line-height: 1.5; color: var(--mkf-text); }
.mkf-fconf .mkf-surface-card.mkf-fpic-verif .mkf-fpic-verif-lista li.mkf-fpic-verif-erro { color: var(--mkf-lose); }
.mkf-fconf .mkf-surface-card table.mkf-fpic-hist td.mkf-fpic-hist-det { white-space: normal; line-height: 1.4; }

.mkf-aprovar-dialog.mkf-ic-dialog .mkf-ic-resumo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 8px; font-size: 13px; }
.mkf-aprovar-dialog.mkf-ic-dialog .mkf-ic-resumo .mkf-ic-acoes-sel { display: inline-flex; gap: 6px; margin-left: auto; }
.mkf-aprovar-dialog.mkf-ic-dialog .mkf-ic-sec { color: var(--mkf-text-3); font-size: 12px; }
.mkf-aprovar-dialog.mkf-ic-dialog .mkf-ic-aviso { color: var(--mkf-text); font-size: 12px; font-weight: 500; }
.mkf-aprovar-dialog.mkf-ic-dialog .mkf-ic-rolagem { max-height: 56vh; overflow: auto; border: 1px solid var(--mkf-line-soft); border-radius: 6px; }
.mkf-aprovar-dialog.mkf-ic-dialog .mkf-ic-rolagem .mkf-ic-tabela thead th { position: sticky; top: 0; background: var(--mkf-surface); z-index: 1; }
.mkf-aprovar-dialog.mkf-ic-dialog .mkf-ic-tabela .mkf-ic-num { text-align: right; white-space: nowrap; }
.mkf-aprovar-dialog.mkf-ic-dialog .mkf-ic-tabela .mkf-ic-obs { max-width: 320px; white-space: normal; line-height: 1.35; }
.mkf-aprovar-dialog.mkf-ic-dialog .mkf-ic-tabela tr.mkf-ic-fora td { color: var(--mkf-text-3); }
.mkf-aprovar-dialog.mkf-ic-dialog .mkf-ic-tabela input[type="checkbox"] { width: 15px; height: 15px; margin: 0; cursor: pointer; accent-color: var(--mkf-text-2); }

/* 2026-10-23 — selo "liquidação" (preço manual, o automático não sobe) e a caixa do modal. */
.mkf-selo-liquidacao {
    display: inline-block; margin-left: 4px; padding: 0 5px; border-radius: 999px; font-size: 10px; font-weight: 600;
    background: var(--mkf-warn-soft); color: var(--mkf-text); white-space: nowrap; vertical-align: middle;
}
.mkf-bba-linha .mkf-bba-liq { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13px; color: var(--mkf-text); }
.mkf-imp .mkf-imp-modo.mkf-imp-correcao { margin-top: 2px; }

/* Buy Box (Monitor de Buy Box): selo do anúncio que usa o imposto correto nos automáticos. */
.mkf-selo-imposto-correto {
    display: inline-block; margin-left: 4px; padding: 0 5px; border-radius: 999px; font-size: 10px; font-weight: 600;
    background: var(--mkf-win-soft); color: var(--mkf-win); white-space: nowrap; vertical-align: middle;
}

/* Configurações › Impostos › Margens do automático (2026-10-22). O modo ativo tem que saltar aos olhos. */
.mkf-imp .mkf-imp-margens { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--mkf-line-soft); scroll-margin-top: 16px; }
.mkf-imp .mkf-imp-margens .mkf-imp-margem-frase { margin-top: -4px; }
.mkf-imp .mkf-imp-margens .mkf-imp-margem-erro { margin: 0; font-size: 13px; color: var(--mkf-lose); font-weight: 500; }
.mkf-imp .mkf-imp-modo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 12px; border-radius: 8px;
    background: var(--mkf-surface-2); border: 1px solid var(--mkf-line-soft); }
.mkf-imp .mkf-imp-modo.mkf-imp-modo--real { background: var(--mkf-warn-soft); border-color: var(--mkf-warn, var(--mkf-line-soft)); }
.mkf-imp .mkf-imp-modo .mkf-imp-modo-ativo { font-size: 14px; color: var(--mkf-text); }
.mkf-imp .mkf-imp-modo .mkf-imp-modo-ativo strong { font-size: 15px; letter-spacing: .04em; }
.mkf-imp .mkf-imp-modo .mkf-imp-modo-botoes { display: inline-flex; border: 1px solid var(--mkf-line); border-radius: 6px; overflow: hidden; }
.mkf-imp .mkf-imp-modo .mkf-imp-modo-btn { padding: 4px 14px; font-size: 13px; background: var(--mkf-surface); color: var(--mkf-text-2); border: 0; cursor: pointer; }
.mkf-imp .mkf-imp-modo .mkf-imp-modo-btn + .mkf-imp-modo-btn { border-left: 1px solid var(--mkf-line); }
.mkf-imp .mkf-imp-modo .mkf-imp-modo-btn.mkf-imp-modo-btn--on { background: var(--mkf-text); color: var(--mkf-surface); font-weight: 600; }
.mkf-imp .mkf-imp-modo .mkf-imp-modo-btn:disabled { cursor: default; opacity: .7; }
.mkf-imp .mkf-imp-modo > .mkf-imp-regra { flex-basis: 100%; }

/* Fiscal › Preço com imposto correto (2026-10-23): filtro de vendas em 90 dias e o piso de cada linha. */
.mkf-fconf .mkf-fpic-vendas { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--mkf-text-2); }
.mkf-fconf .mkf-fpic-vendas .mkf-fpic-vendas-n { width: 64px; height: 30px; padding: 0 6px; border: 1px solid var(--mkf-line); border-radius: 6px;
    background: var(--mkf-surface); color: var(--mkf-text); font: inherit; font-variant-numeric: tabular-nums; }
.mkf-fconf .mkf-fpic-tabela .mud-table-body .mkf-fpic-piso { font-size: 11px; color: var(--mkf-text-3); white-space: nowrap; font-family: var(--mkf-font-sans, inherit); }

/* Margens do automático — faixas por vendas dos importados (2026-10-23). */
.mkf-imp .mkf-imp-margens .mkf-imp-faixas { display: flex; flex-direction: column; gap: 6px; padding-left: 12px; }
.mkf-imp .mkf-imp-margens .mkf-imp-faixas-canais { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px 24px; }
.mkf-imp .mkf-imp-margens .mkf-imp-faixas-canal { font-size: 12px; font-weight: 600; color: var(--mkf-text-2); text-transform: uppercase; letter-spacing: .04em; }
.mkf-imp .mkf-imp-margens .mkf-imp-faixa { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13.5px; color: var(--mkf-text); }
.mkf-imp .mkf-imp-margens .mkf-imp-faixa .mkf-imp-faixa-rot { color: var(--mkf-text-2); }
.mkf-imp .mkf-imp-margens .mkf-imp-faixas > .mkf-link-btn { align-self: flex-start; }
.mkf-imp .mkf-imp-margens .mkf-imp-faixa .mkf-imp-faixa-modo { display: inline-flex; border: 1px solid var(--mkf-line); border-radius: 6px; overflow: hidden; }
.mkf-imp .mkf-imp-margens .mkf-imp-faixa-modo .mkf-imp-modo-btn { padding: 2px 8px; font-size: 12px; background: var(--mkf-surface); color: var(--mkf-text-2); border: 0; cursor: pointer; }
.mkf-imp .mkf-imp-margens .mkf-imp-faixa-modo .mkf-imp-modo-btn + .mkf-imp-modo-btn { border-left: 1px solid var(--mkf-line); }
.mkf-imp .mkf-imp-margens .mkf-imp-faixa-modo .mkf-imp-modo-btn.mkf-imp-modo-btn--on { background: var(--mkf-text); color: var(--mkf-surface); font-weight: 600; }
.mkf-imp .mkf-imp-margens .mkf-imp-faixa-modo .mkf-imp-modo-btn:disabled { cursor: default; opacity: .7; }
/* Alvo das faixas (2026-10-23): estado, prévia e ativação. */
.mkf-imp .mkf-imp-margens .mkf-imp-alvo { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 10px 12px; border-radius: 8px;
    background: var(--mkf-surface-2); border: 1px solid var(--mkf-line-soft); }
.mkf-imp .mkf-imp-margens .mkf-imp-alvo .mkf-imp-modo-ativo { font-size: 14px; color: var(--mkf-text); }
.mkf-imp .mkf-imp-margens .mkf-imp-alvo .mkf-imp-alvo-tabela { max-height: 360px; overflow: auto; width: 100%; border: 1px solid var(--mkf-line-soft); border-radius: 6px; }
.mkf-imp .mkf-imp-margens .mkf-imp-alvo-tabela table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.mkf-imp .mkf-imp-margens .mkf-imp-alvo-tabela th { position: sticky; top: 0; background: var(--mkf-surface); text-align: left; padding: 4px 8px; font-weight: 600; color: var(--mkf-text-2); }
.mkf-imp .mkf-imp-margens .mkf-imp-alvo-tabela td { padding: 3px 8px; border-top: 1px solid var(--mkf-line-soft); color: var(--mkf-text); vertical-align: top; }
.mkf-imp .mkf-imp-margens .mkf-imp-alvo-tabela .mkf-col-numeric { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Monitor de Buy Box (2026-10-22): link "Margens do automático →" e selo "piso próprio" na coluna R$ Piso. */
.mkf-monitor-margens { display: flex; justify-content: flex-end; align-items: center; gap: 16px; font-size: 13px; }
/* 2026-10-23 — travas do modo Real: os dois avisos pedem decisão (cor de atenção, não de erro). */
.mkf-monitor-margens .mkf-link-btn.mkf-trava-link { color: var(--mkf-warn, var(--mkf-lose)); font-weight: 600; }
.mkf-data-table .mud-table-body .mkf-auto-prev--pendente { color: var(--mkf-warn, var(--mkf-text)); font-weight: 600; }
.mkf-data-table .mud-table-body .mkf-selo-piso-proprio {
    display: block; width: fit-content; margin: 2px 0 0 auto; padding: 0 5px; border-radius: 999px; font-size: 10px; font-weight: 600;
    background: var(--mkf-surface-2); color: var(--mkf-text-2); font-family: var(--mkf-font-sans, inherit); white-space: nowrap;
}

/* Monitor de Buy Box (2026-10-22): aviso "N anúncios com imp. correto com o AUTO desligado" e a coluna "R$ do Auto". */
.mkf-catalogo-page .mkf-aviso-impcorreto, .mkf-aviso-impcorreto {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 6px;
    background: var(--mkf-win-soft); color: var(--mkf-text); font-size: 13px;
}
.mkf-data-table .mud-table-body .mkf-auto-prev--mexe { font-weight: 600; }
.mkf-data-table .mud-table-body .mkf-auto-prev--fora { color: var(--mkf-text-3); }
.mkf-data-table .mud-table-body .mkf-auto-prev-tag {
    display: inline-block; margin-left: 4px; padding: 0 4px; border-radius: 999px; font-size: 10px; font-weight: 600;
    background: var(--mkf-surface-2); color: var(--mkf-text-2); font-family: var(--mkf-font-sans, inherit); vertical-align: middle;
}

/* ---- Prateleira Vonder: badge "SKU duplicado no Olist" ao lado do código (2026-10-22). Numa linha só — a tabela
   compacta tem altura fixa por linha. ---- */
.mkf-data-table .mkf-prat-codigo-conflito {
    display: inline-flex;
    align-items: center;
    gap: var(--mkf-space-2);
    white-space: nowrap;
}

.mud-tooltip .mkf-prat-conflito-tip {
    text-align: left;
    max-width: 560px;
}

.mud-tooltip .mkf-prat-conflito-tip .mkf-prat-conflito-tip-item {
    margin-top: 2px;
    padding-left: var(--mkf-space-2);
}

/* Monitor de Buy Box (2026-10-25): em promoção, o preço cheio (base) ao lado do efetivo na coluna R$ Atual. */
.mkf-data-table .mud-table-body .mkf-preco-base {
    margin-left: 4px; font-size: 10px; color: var(--mkf-text-3); white-space: nowrap; font-family: var(--mkf-font-sans, inherit);
}