/* /Components/Layout/MainLayout.razor.rz.scp.css */
.mkf-app[b-cykcnf5d4k] {
    min-height: 100vh;
}

/* A regra `.mkf-sidebar ::deep .mud-drawer-content { display:flex; flex-direction:column }`
   que ficava aqui foi REMOVIDA (2026-09-08): ela nunca podia bater. `.mkf-sidebar` é a
   classe do <MudDrawer>, um COMPONENTE FILHO — o compilador Razor não põe o atributo de
   escopo deste arquivo em tag de componente, então `.mkf-sidebar[b-xxx]` (o que ::deep
   compila) não existe no DOM. Era código morto: o próprio MudBlazor já declara
   `.mud-drawer-content{height:100%;display:flex;flex-direction:column}`, que é exatamente o
   que a regra tentava impor. */

/* ---- Logo (A1, 2026-09-08) ---- sem caixa/borda: só o glifo âmbar + o wordmark em texto
   (ver comentário no .razor sobre o <rect> de fundo que morava dentro do SVG antigo). */
.mkf-sidebar-logo[b-cykcnf5d4k] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 16px 14px 18px;
}

.mkf-sidebar-mark[b-cykcnf5d4k] {
    display: block;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    flex: none;
}

.mkf-sidebar-name[b-cykcnf5d4k] {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--mkf-text);
}

/* Modo compacto (rail, 72px) — só o glifo, centrado. O wordmark nem é renderizado (ver
   .razor), então não há nada pra esconder aqui. */
.mkf-sidebar-logo--compact[b-cykcnf5d4k] {
    justify-content: center;
    padding: 16px 12px 18px;
}

/* ---- Rodapé (A5) ---- margin-top:auto encosta na base; quem libera o espaço pra isso é o
   flex:1 da lista de navegação (NavMenu.razor.css, .mkf-nav). */
.mkf-sidebar-footer[b-cykcnf5d4k] {
    flex-shrink: 0;
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px 14px;
    border-top: 1px solid var(--mkf-line-soft);
}

.mkf-sidebar-footer--compact[b-cykcnf5d4k] {
    align-items: center;
    padding: 12px 6px;
}

/* ---- "Fixar menu" (A5) ---- trilho de 28x16 com o botão deslizando; ligado = --mkf-brand,
   desligado = --mkf-surface-3, pra o estado ser óbvio à distância. 9px entre o controle e o
   rótulo (antes o rótulo do MudSwitch vinha colado no controle). */
.mkf-pin-switch[b-cykcnf5d4k] {
    display: flex;
    align-items: center;
    /* MEDIDO com Playwright: sem estes dois, o computed style saía justify-content:center
       (regra de <button> do reset/UA herdada pelo container flex) e o switch aparecia no meio
       do rodapé, desalinhado do avatar logo abaixo. */
    justify-content: flex-start;
    align-self: flex-start;
    gap: 9px;
    padding: 0;
    border: 0;
    background: none;
    font-family: inherit;
    font-size: 12.5px;
    color: var(--mkf-text-2);
    cursor: pointer;
}

.mkf-pin-switch:hover[b-cykcnf5d4k] {
    color: var(--mkf-text);
}

/* A borda de 1px NÃO é decoração: no tema claro o trilho desligado (--mkf-surface-3,
   #c2d3e6) fica a um passo do fundo da própria sidebar (--mkf-shell, #c1d2e6) e o controle
   some — o usuário não vê que existe um switch ali. Com a borda, o desligado se lê nos dois
   temas. (Os dois hex ficaram AINDA mais próximos na revisão "mais azul" de 2026-09-08: 1
   ponto de diferença em cada canal, então a borda passou a ser a única coisa que desenha o
   controle apagado.) box-sizing pra os 28x16 continuarem sendo a caixa inteira. */
.mkf-pin-track[b-cykcnf5d4k] {
    position: relative;
    box-sizing: border-box;
    width: 28px;
    height: 16px;
    flex: none;
    border: 1px solid var(--mkf-line);
    border-radius: 9px;
    background-color: var(--mkf-surface-3);
    transition: background-color 120ms ease, border-color 120ms ease;
}

.mkf-pin-track[b-cykcnf5d4k]::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--mkf-text-2);
    transition: transform 120ms ease, background-color 120ms ease;
}

.mkf-pin-switch--on .mkf-pin-track[b-cykcnf5d4k] {
    background-color: var(--mkf-brand);
    border-color: var(--mkf-brand);
}

.mkf-pin-switch--on .mkf-pin-track[b-cykcnf5d4k]::after {
    transform: translateX(12px);
    background-color: var(--mkf-text-on-brand);
}

.mkf-pin-label[b-cykcnf5d4k] {
    white-space: nowrap;
}

/* ---- Seletor de tema (2026-09-23) — Aço · Papel · Grafite ----
   Segmentado de 3 no mesmo desenho dos segmentados do app (trilho --mkf-surface-3, opção
   ligada em --mkf-surface com contorno). No rail vira coluna de três amostras. */
.mkf-tema[b-cykcnf5d4k] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mkf-tema-rotulo[b-cykcnf5d4k] {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--mkf-text-3);
}

.mkf-tema-seg[b-cykcnf5d4k] {
    display: flex;
    gap: 2px;
    padding: 2px;
    border: 1px solid var(--mkf-line);
    border-radius: var(--mkf-radius-pill);
    background-color: var(--mkf-surface-3);
}

.mkf-tema-opcao[b-cykcnf5d4k] {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 26px;
    padding: 0 6px;
    border: 0;
    border-radius: var(--mkf-radius-pill);
    background: none;
    font-family: inherit;
    font-size: 12px;
    color: var(--mkf-text-2);
    cursor: pointer;
    white-space: nowrap;
}

.mkf-tema-opcao:hover[b-cykcnf5d4k] {
    color: var(--mkf-text);
}

/* A opção ligada sai do data-theme do <html>, não do estado do Blazor: no primeiro paint
   (prerender) o Blazor ainda não leu a preferência e marcaria Aço com a tela em Grafite. O
   atributo é estampado pelo <script> do <head>, então o realce já nasce certo. */
:root[data-theme="steel"] .mkf-tema-opcao[data-tema="steel"][b-cykcnf5d4k],
:root[data-theme="paper"] .mkf-tema-opcao[data-tema="paper"][b-cykcnf5d4k],
:root[data-theme="graphite"] .mkf-tema-opcao[data-tema="graphite"][b-cykcnf5d4k] {
    background-color: var(--mkf-surface);
    box-shadow: 0 0 0 1px var(--mkf-line);
    color: var(--mkf-text);
    font-weight: 500;
}

/* Amostra = cor de FUNDO de cada tema, fixa nos três (--mkf-amostra-*, app.css). A borda é o
   que a desenha quando a amostra coincide com o fundo em volta (Grafite dentro do Grafite). */
.mkf-tema-amostra[b-cykcnf5d4k] {
    width: 10px;
    height: 10px;
    flex: none;
    border-radius: 3px;
    border: 1px solid var(--mkf-text-3);
}

.mkf-tema-amostra--steel[b-cykcnf5d4k] { background-color: var(--mkf-amostra-steel); }
.mkf-tema-amostra--paper[b-cykcnf5d4k] { background-color: var(--mkf-amostra-paper); }
.mkf-tema-amostra--graphite[b-cykcnf5d4k] { background-color: var(--mkf-amostra-graphite); }

.mkf-tema--rail[b-cykcnf5d4k] {
    align-self: center;
}

.mkf-tema--rail .mkf-tema-seg[b-cykcnf5d4k] {
    flex-direction: column;
    border-radius: var(--mkf-radius-control);
}

.mkf-tema--rail .mkf-tema-opcao[b-cykcnf5d4k] {
    width: 26px;
    padding: 0;
    border-radius: 4px;
}

.mkf-tema--rail .mkf-tema-amostra[b-cykcnf5d4k] {
    width: 12px;
    height: 12px;
}

/* ---- Bloco do usuário (A5) ---- */
.mkf-user-row[b-cykcnf5d4k] {
    display: flex;
    align-items: center;
    gap: 9px;
}

.mkf-sidebar-footer--compact .mkf-user-row[b-cykcnf5d4k] {
    flex-direction: column;
}

/* No rail o rótulo não é renderizado, sobra só o trilho — que precisa voltar a centralizar
   (o align-self:flex-start acima, necessário no modo expandido, sobrepõe o align-items:center
   do rodapé compacto e deixava o trilho encostado na borda esquerda). */
.mkf-sidebar-footer--compact .mkf-pin-switch[b-cykcnf5d4k] {
    align-self: center;
}

/* Avatar neutro — nunca âmbar (o âmbar é o sinal de item ativo da navegação). */
.mkf-user-avatar[b-cykcnf5d4k] {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    flex: none;
    border-radius: 50%;
    /* Por tema (2026-09-23): Aço azul-pálido, Papel azul da marca com texto branco, Grafite
       neutro — ver --mkf-avatar-* em app.css. Nunca o laranja: é o sinal de item ativo. */
    background-color: var(--mkf-avatar-bg);
    color: var(--mkf-avatar-text);
    font-size: 11.5px;
    font-weight: 600;
}

.mkf-user-info[b-cykcnf5d4k] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.mkf-user-name[b-cykcnf5d4k] {
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.35;
    color: var(--mkf-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mkf-user-role[b-cykcnf5d4k] {
    font-size: 11px;
    line-height: 1.35;
    color: var(--mkf-text-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mkf-logout-form[b-cykcnf5d4k] {
    flex-shrink: 0;
    margin-left: auto;
    display: flex;
}

.mkf-sidebar-footer--compact .mkf-logout-form[b-cykcnf5d4k] {
    margin-left: 0;
}

.mkf-logout-btn[b-cykcnf5d4k] {
    display: flex;
    padding: 5px;
    border: 0;
    border-radius: 5px;
    background: none;
    color: var(--mkf-text-3);
    cursor: pointer;
}

.mkf-logout-btn:hover[b-cykcnf5d4k] {
    background-color: var(--mkf-surface-2);
    color: var(--mkf-text);
}

.mkf-logout-btn svg[b-cykcnf5d4k] {
    display: block;
    width: 15px;
    height: 15px;
}

/* A regra de .mkf-main-content mudou pra app.css: todo o markup de nível superior deste
   componente é feito só de tags de componente filho (MudLayout, MudMainContent...), sem
   nenhum elemento HTML puro envolvendo tudo — então não existe NENHUM ancestral que carregue
   o atributo de escopo deste arquivo, e nem ::deep alcança .mud-main-content (::deep exige
   um ancestral escopado; aqui não há nenhum). CSS isolado não consegue atingir esse elemento
   de jeito nenhum, só uma regra global resolve. */

.mkf-content[b-cykcnf5d4k] {
    /* Mesmo padding-top da logo na sidebar (.mkf-sidebar-logo), pra alinhar o breadcrumb
       com o título da página na mesma linha horizontal. */
    padding: 22px 32px 24px;
}

#blazor-error-ui[b-cykcnf5d4k] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-cykcnf5d4k] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* Sidebar v3 (2026-09-08, "acabamento", A2–A4) — a lista de nível 1 virou markup próprio
   (<nav>/<div>/<a>/<button> escritos em NavMenu.razor, ver comentário lá), então TODAS as
   regras dela abaixo são CSS isolado normal: o atributo de escopo cai no próprio elemento,
   sem ::deep e sem !important pra vencer o CSS interno do MudNavLink.
   O painel de flyout (fim do arquivo) continua com MudNavMenu/MudNavLink dentro — aquelas
   regras precisam de ::deep e continuam como estavam. */

/* ---- Lista de navegação ---- flex:1 é o que empurra o rodapé da sidebar pra base
   (MainLayout.razor.css, .mkf-sidebar-footer{margin-top:auto}) — a regra antiga mirava
   `.mkf-nav` DENTRO do MudNavMenu, que era um neto e não o item flex do .mud-drawer-content;
   por isso a lista tinha altura de conteúdo e sobrava ~40% de sidebar vazia embaixo (A5). */
.mkf-nav[b-i9wkofl26y] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding: 0 0 8px;
}

/* ---- Grupos (A3) ---- padding lateral de 8px é o que dá a folga onde a faixa de item
   ativo (::before, left:-8px) encosta na borda esquerda da sidebar. */
.mkf-nav-grp[b-i9wkofl26y] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 0 8px;
}

.mkf-nav-grp + .mkf-nav-grp[b-i9wkofl26y] {
    margin-top: 15px;
}

.mkf-nav-grp-label[b-i9wkofl26y] {
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--mkf-text-3);
    padding: 0 8px 6px;
}

/* ---- Item (A4) ---- mesma altura dos controles do app (34px). O recuo é o MESMO pra item
   com e sem seta de submenu porque a seta usa margin-left:auto (não é um terceiro elemento
   no fluxo empurrando o rótulo) e porque <a> e <button> aqui compartilham exatamente esta
   regra — antes um era MudNavLink e o outro um <a> "imitando" MudNavLink, com paddings
   diferentes, que era a causa de "Loja Integrada"/"Precificação" saírem desalinhados. */
.mkf-nav-item[b-i9wkofl26y] {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 34px;
    padding: 0 8px;
    width: 100%;
    border: 0;
    background: none;
    border-radius: var(--mkf-radius-control);
    font-family: inherit;
    font-size: 13px;
    text-align: left;
    text-decoration: none;
    color: var(--mkf-text-2);
    cursor: pointer;
    position: relative;
    flex: none;
}

.mkf-nav-icon[b-i9wkofl26y] {
    display: flex;
    width: 16px;
    height: 16px;
    flex: none;
    color: var(--mkf-text-3);
}

.mkf-nav-icon svg[b-i9wkofl26y] {
    width: 16px;
    height: 16px;
    display: block;
}

.mkf-nav-item:hover[b-i9wkofl26y] {
    background-color: var(--mkf-surface);
    color: var(--mkf-text);
}

.mkf-nav-item:hover .mkf-nav-icon[b-i9wkofl26y] {
    color: var(--mkf-text-2);
}

.mkf-nav-text[b-i9wkofl26y] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mkf-nav-chevron[b-i9wkofl26y] {
    margin-left: auto;
    display: flex;
    width: 12px;
    height: 12px;
    flex: none;
    opacity: 0.45;
    transition: transform 150ms ease;
}

.mkf-nav-chevron svg[b-i9wkofl26y] {
    width: 12px;
    height: 12px;
    display: block;
}

.mkf-nav-chevron--open[b-i9wkofl26y] {
    transform: rotate(90deg);
}

/* ---- Item ativo (A2) ---- fundo + faixa de 2px + ícone na cor da marca. Por tema
   (2026-09-23), via --mkf-nav-on-*: Aço = fundo branco com contorno de 1px; Papel =
   azul-pálido, texto azul, faixa transparente; Grafite = --mkf-surface-2 como sempre. SEM `border` em volta do
   item: o contorno completo competia com a faixa e duplicava o mesmo sinal (era o defeito
   reportado). A faixa vive num ::before posicionado a -8px (o padding do grupo), então
   encosta na borda esquerda da sidebar sem deslocar o conteúdo do item. */
.mkf-nav-item--on[b-i9wkofl26y] {
    background-color: var(--mkf-nav-on-bg);
    box-shadow: 0 0 0 1px var(--mkf-nav-on-ring);
    color: var(--mkf-nav-on-text);
    font-weight: 500;
}

/* Cor de INTEGRAÇÃO (regra 1, ajustada em 2026-09-27) — ícone colorido = integração externa (Mercado Livre,
   Shopee, Loja Integrada, Vonder, Olist), em qualquer grupo; só esses itens carregam data-canal (ver
   NavMenu.razor). Início, Atendimento, Monitor Geral, Preços e custos e Configurações continuam cinza. A cor identifica o canal, por isso
   vale também no hover. Duas classes + atributo: ganha do hover genérico acima e perde para
   o item ativo logo abaixo, que tem o mesmo peso e vem depois. */
.mkf-nav-item[data-canal="mercadolivre"] .mkf-nav-icon[b-i9wkofl26y] { color: var(--mkf-ch-ml); }
.mkf-nav-item[data-canal="vonder"] .mkf-nav-icon[b-i9wkofl26y] { color: var(--mkf-ch-vonder); }
.mkf-nav-item[data-canal="olist"] .mkf-nav-icon[b-i9wkofl26y] { color: var(--mkf-ch-olist); }
.mkf-nav-item[data-canal="lojaintegrada"] .mkf-nav-icon[b-i9wkofl26y] { color: var(--mkf-ch-li); }
.mkf-nav-item[data-canal="shopee"] .mkf-nav-icon[b-i9wkofl26y] { color: var(--mkf-ch-shopee); }

.mkf-nav-item.mkf-nav-item--on .mkf-nav-icon[b-i9wkofl26y] {
    color: var(--mkf-nav-on-icon);
}

.mkf-nav-item--on[b-i9wkofl26y]::before {
    content: "";
    position: absolute;
    left: -8px;
    top: 6px;
    bottom: 6px;
    width: 2px;
    border-radius: 0 2px 2px 0;
    background-color: var(--mkf-nav-on-stripe);
}

/* ---- Modo recolhido / rail ("Fixar menu" desligado, sidebar em 72px) ----
   Os rótulos de grupo e de item nem são renderizados (ver .razor) — aqui só o que é de
   fato layout: item centrado sem padding lateral, e os grupos separados por um divisor de
   1px no lugar do rótulo que sumiu (A3). */
.mkf-nav--rail .mkf-nav-grp[b-i9wkofl26y] {
    padding: 0 6px;
}

.mkf-nav--rail .mkf-nav-grp + .mkf-nav-grp[b-i9wkofl26y] {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid var(--mkf-line-soft);
}

.mkf-nav--rail .mkf-nav-item[b-i9wkofl26y] {
    justify-content: center;
    padding: 0;
}

.mkf-nav--rail .mkf-nav-item--on[b-i9wkofl26y]::before {
    left: -6px;
}

/* ---- Painel flyout (divs escritos diretamente aqui, sem ::deep) ----
   left usa a custom property --mkf-sidebar-width, declarada via Style inline no MudDrawer
   (MainLayout.razor) com o valor atual de LarguraSidebar (240px fixado / 72px compacto) —
   custom properties herdam pela árvore do DOM normalmente, então atravessam o limite de
   componente sem precisar repassar a largura como Parameter só pra isso. O fallback 240px
   só entra em jogo se por algum motivo a var não estiver definida (não deveria acontecer). */
.mkf-flyout-overlay[b-i9wkofl26y] {
    position: fixed;
    top: 0;
    left: var(--mkf-sidebar-width, 240px);
    right: 0;
    bottom: 0;
    z-index: var(--mkf-z-dropdown-fundo);
    background: transparent;
}

.mkf-flyout-panel[b-i9wkofl26y] {
    position: fixed;
    top: 0;
    bottom: 0;
    left: var(--mkf-sidebar-width, 240px);
    /* 300 (era 230) desde 2026-09-27: "Perguntas — Mercado Livre" + contagem cabe sem cortar. */
    width: 300px;
    background-color: var(--mkf-sidebar-flyout-bg);
    border-right: 1px solid var(--mkf-line);
    z-index: var(--mkf-z-dropdown);
    padding: 20px 12px;
    overflow-y: auto;
    animation: mkf-flyout-in-b-i9wkofl26y 160ms ease-out;
}

@keyframes mkf-flyout-in-b-i9wkofl26y {
    from {
        opacity: 0;
        transform: translateX(-8px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.mkf-flyout-title[b-i9wkofl26y] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mkf-text-3);
    padding: 6px 12px 14px;
}

/* Os links dentro do flyout são MudNavLink (componente filho) dentro de um MudNavMenu
   (componente filho) — ambos exigem ::deep. O ancestral com o atributo de escopo é o
   próprio .mkf-flyout-panel, escrito direto neste componente. */
[b-i9wkofl26y] .mkf-flyout-nav .mud-nav-link {
    margin: 2px 4px;
    border-radius: var(--mkf-radius-control);
    color: var(--mkf-sidebar-text);
}

[b-i9wkofl26y] .mkf-flyout-nav .mud-nav-link:hover:not(.mud-nav-link-disabled) {
    background-color: var(--mkf-surface-2);
    color: var(--mkf-sidebar-text-hover);
}

[b-i9wkofl26y] .mkf-flyout-nav .mud-nav-link.active:not(.mud-nav-link-disabled) {
    background-color: var(--mkf-surface-2) !important;
    color: var(--mkf-sidebar-text-hover) !important;
}

[b-i9wkofl26y] .mkf-flyout-nav .mud-nav-link .mud-icon-root {
    color: var(--mkf-text-3);
}

[b-i9wkofl26y] .mkf-flyout-nav .mud-nav-link:hover:not(.mud-nav-link-disabled) .mud-icon-root {
    color: var(--mkf-text-2);
}

[b-i9wkofl26y] .mkf-flyout-nav .mud-nav-link.active:not(.mud-nav-link-disabled) .mud-icon-root {
    color: var(--mkf-sidebar-accent);
}


/* ---- Contagem da fila (2026-09-27) ---- Atendimento (e cada filho) e Custos pendentes. É DADO: mono, cor de texto,
   fundo neutro — nunca a cor da marca (o âmbar é o sinal de item ativo). Zero não renderiza. Antes da seta. */
.mkf-nav-badge[b-i9wkofl26y] {
    margin-left: auto;
    flex: none;
    padding: 1px 6px;
    border-radius: 4px;
    background-color: var(--mkf-surface-3);
    color: var(--mkf-text);
    font-family: var(--mkf-font-mono);
    font-size: 11.5px;
    font-weight: 500;
    line-height: 16px;
    font-variant-numeric: tabular-nums;
}

.mkf-nav-badge + .mkf-nav-chevron[b-i9wkofl26y] {
    margin-left: 6px;
}

/* Rail (menu recolhido): um ponto de 6 px no canto do ícone; o número vai no tooltip e no flyout. */
.mkf-nav-icon[b-i9wkofl26y] {
    position: relative;
}

.mkf-nav-dot[b-i9wkofl26y] {
    position: absolute;
    top: -2px;
    right: -3px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--mkf-text-2);
    box-shadow: 0 0 0 1.5px var(--mkf-shell);
}

/* Filho do flyout com contagem: rótulo + badge na mesma linha, badge encostado à direita. O conteúdo é do NavMenu (tem
   o atributo de escopo), só o MudNavLink em volta é de fora. */
.mkf-flyout-item[b-i9wkofl26y] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
}

.mkf-flyout-item-text[b-i9wkofl26y] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* O texto do MudNavLink ocupa o resto da linha e encolhe (senão o rótulo longo empurra a contagem pra fora do painel). */
[b-i9wkofl26y] .mkf-flyout-nav .mud-nav-link .mud-nav-link-text {
    flex: 1 1 auto;
    min-width: 0;
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-21izaqj8mz],
.components-reconnect-repeated-attempt-visible[b-21izaqj8mz],
.components-reconnect-failed-visible[b-21izaqj8mz],
.components-pause-visible[b-21izaqj8mz],
.components-resume-failed-visible[b-21izaqj8mz],
.components-rejoining-animation[b-21izaqj8mz] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-21izaqj8mz],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-21izaqj8mz],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-21izaqj8mz],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-21izaqj8mz],
#components-reconnect-modal.components-reconnect-retrying[b-21izaqj8mz],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-21izaqj8mz],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-21izaqj8mz],
#components-reconnect-modal.components-reconnect-failed[b-21izaqj8mz],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-21izaqj8mz] {
    display: block;
}


#components-reconnect-modal[b-21izaqj8mz] {
    /* v2 (2026-09-08, Sistema de Design) — tema único escuro agora: o template padrão do
       Blazor (fundo branco, sombra) destoava do resto do app inteiro. Superfície + borda em
       vez de sombra (regra "sem sombras — elevação vem da superfície"). */
    background-color: var(--mkf-surface-3);
    color: var(--mkf-text);
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 1px solid var(--mkf-line);
    border-radius: var(--mkf-radius-panel);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-21izaqj8mz 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-21izaqj8mz 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-21izaqj8mz 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-21izaqj8mz]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-21izaqj8mz 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-21izaqj8mz {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-21izaqj8mz {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-21izaqj8mz {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-21izaqj8mz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-21izaqj8mz] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-21izaqj8mz] {
    border: 0;
    background-color: var(--mkf-brand);
    color: var(--mkf-text-on-brand);
    padding: 4px 24px;
    border-radius: var(--mkf-radius-control);
}

    #components-reconnect-modal button:hover[b-21izaqj8mz] {
        background-color: var(--mkf-brand-hover);
    }

    #components-reconnect-modal button:active[b-21izaqj8mz] {
        background-color: var(--mkf-brand);
    }

.components-rejoining-animation[b-21izaqj8mz] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-21izaqj8mz] {
        position: absolute;
        border: 3px solid var(--mkf-brand);
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-21izaqj8mz 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-21izaqj8mz] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-21izaqj8mz {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/Precificacao.razor.rz.scp.css */
/* ================================================================================
   PRECIFICAÇÃO — v2 (2026-09-08, reorganização)
   ================================================================================
   Todo o markup desta tela é escrito no próprio .razor (os campos deixaram de ser
   MudTextField e viraram <input> puros), então TODAS as regras abaixo são CSS isolado
   normal: nenhum ::deep, nenhum !important, nada que a lib possa sobrescrever em silêncio.
   Isso não é preferência de estilo — esta MESMA tela já perdeu uma briga de especificidade
   contra o `font: inherit` do MudBlazor em 2026-09-07, e o bug só apareceu medindo com
   getComputedStyle ao vivo (o CSS-fonte "parecia" certo). Sem componente da lib nos campos,
   a classe inteira de bug deixa de existir aqui. */

/* ---- Item 7: cabeçalho da página ---------------------------------------------------- */
.mkf-preco-head[b-crtz1ffmzr] {
    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-preco-head h1[b-crtz1ffmzr] {
    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);
}

.mkf-preco-head-meta[b-crtz1ffmzr] {
    max-width: 56ch;
    margin-bottom: 3px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--mkf-text-3);
}

/* ---- Cards ---- */
.mkf-preco-card[b-crtz1ffmzr] {
    background-color: var(--mkf-surface);
    border: 1px solid var(--mkf-line);
    border-radius: var(--mkf-radius-panel);
}

.mkf-preco-card + .mkf-preco-card[b-crtz1ffmzr] {
    margin-top: var(--mkf-space-3);
}

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

.mkf-preco-card-title[b-crtz1ffmzr] {
    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-preco-card-note[b-crtz1ffmzr] {
    font-size: 11.5px;
    color: var(--mkf-text-3);
}

.mkf-preco-card-actions[b-crtz1ffmzr] {
    margin-left: auto;
    display: flex;
    gap: var(--mkf-space-2);
}

/* ---- Item 2: painel "Este cálculo" -------------------------------------------------- */
.mkf-preco-inputs[b-crtz1ffmzr] {
    display: flex;
    align-items: flex-start;
    gap: var(--mkf-space-3);
    flex-wrap: wrap;
    padding: 15px var(--mkf-space-4) var(--mkf-space-4);
    max-width: 1180px;
}

.mkf-preco-f[b-crtz1ffmzr] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 158px;
}

.mkf-preco-f > label[b-crtz1ffmzr] {
    font-size: 11.5px;
    line-height: 1.25;
    color: var(--mkf-text-2);
    white-space: nowrap;
}

.mkf-preco-f > small[b-crtz1ffmzr] {
    font-size: 11px;
    line-height: 1.4;
    color: var(--mkf-text-3);
    white-space: nowrap;
}

/* Divisor entre "Custo do produto" (do produto) e os três da empresa. */
.mkf-preco-vdiv[b-crtz1ffmzr] {
    width: 1px;
    align-self: stretch;
    flex: none;
    background-color: var(--mkf-line);
    margin: 2px 6px;
}

/* ---- Item 1: campo editável vira CAMPO DE VERDADE ----------------------------------
   Era a queixa principal: números sublinhados soltos, visualmente idênticos aos valores
   calculados, sem indicação de onde clicar. Caixa + fundo + borda + foco resolvem isso. */
.mkf-preco-wrap[b-crtz1ffmzr] {
    position: relative;
    display: block;
}

.mkf-preco-input[b-crtz1ffmzr] {
    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-preco-input[b-crtz1ffmzr]::placeholder {
    color: var(--mkf-text-3);
}

.mkf-preco-input:hover[b-crtz1ffmzr] {
    border-color: var(--mkf-surface-3);
}

.mkf-preco-input:focus[b-crtz1ffmzr] {
    outline: none;
    border-color: var(--mkf-brand);
    box-shadow: 0 0 0 3px var(--mkf-brand-soft);
}

/* Unidade COLADA no número, dentro do campo — antes o "%" flutuava na ponta direita da
   célula, a meio palmo do valor que ele qualificava. */
.mkf-preco-input--pre[b-crtz1ffmzr] {
    padding-left: 30px;
}

.mkf-preco-input--suf[b-crtz1ffmzr] {
    padding-right: 28px;
}

.mkf-preco-unit[b-crtz1ffmzr] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--mkf-font-mono);
    font-size: 12px;
    color: var(--mkf-text-3);
    pointer-events: none;
}

.mkf-preco-unit--left[b-crtz1ffmzr] {
    left: 11px;
}

.mkf-preco-unit--right[b-crtz1ffmzr] {
    right: 11px;
}

/* ---- Botões (secundário; "Salvar como padrão" e "Adicionar canal") ---- */
.mkf-preco-btn[b-crtz1ffmzr] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: var(--mkf-control-height);
    padding: 0 14px;
    flex: none;
    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;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.12s ease, border-color 0.12s ease;
}

.mkf-preco-btn:hover:not(:disabled)[b-crtz1ffmzr] {
    background-color: var(--mkf-surface-3);
    border-color: var(--mkf-surface-3);
}

.mkf-preco-btn:disabled[b-crtz1ffmzr] {
    opacity: 0.45;
    cursor: not-allowed;
}

.mkf-preco-btn svg[b-crtz1ffmzr] {
    width: 14px;
    height: 14px;
}

/* Compensa a altura do rótulo dos campos à esquerda, pra o botão ficar na linha dos inputs. */
.mkf-preco-btn--salvar[b-crtz1ffmzr] {
    margin-top: 21px;
}

/* ---- Itens 3, 4 e 6: tabela ---------------------------------------------------------- */
.mkf-preco-tw[b-crtz1ffmzr] {
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--mkf-surface-3) transparent;
}

.mkf-preco-tw[b-crtz1ffmzr]::-webkit-scrollbar {
    height: 9px;
}

.mkf-preco-tw[b-crtz1ffmzr]::-webkit-scrollbar-thumb {
    background-color: var(--mkf-surface-3);
    border-radius: 5px;
    border: 2px solid var(--mkf-surface);
}

.mkf-preco-table[b-crtz1ffmzr] {
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--mkf-type-body-size);
}

.mkf-preco-table th[b-crtz1ffmzr],
.mkf-preco-table td[b-crtz1ffmzr] {
    padding: 0 12px;
}

.mkf-preco-table thead th[b-crtz1ffmzr] {
    height: 44px;
    background-color: var(--mkf-surface-2);
    border-bottom: 1px solid var(--mkf-line);
    font-size: 13px;
    font-weight: 500;
    color: var(--mkf-text);
    text-align: right;
    white-space: nowrap;
}

/* Coluna de rótulos FIXA (item 6) — com muitos canais a tabela rola na horizontal e sem isso
   se perde a referência de qual linha se está lendo. Precisa de background próprio: sem ele,
   o conteúdo rolando passa por baixo e fica legível através da célula. */
.mkf-preco-table thead th.mkf-preco-label-col[b-crtz1ffmzr] {
    width: 214px;
    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);
    position: sticky;
    left: 0;
    z-index: var(--mkf-z-tabela-canto);
}

.mkf-preco-table tbody td.mkf-preco-label-col[b-crtz1ffmzr] {
    text-align: left;
    font-size: 13px;
    color: var(--mkf-text-2);
    background-color: var(--mkf-surface);
    position: sticky;
    left: 0;
    z-index: var(--mkf-z-tabela-corpo-fixo);
}

/* Nome do canal + ✕ colado nele (antes o ✕ ficava solto na ponta direita da célula). */
.mkf-preco-ch[b-crtz1ffmzr] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.mkf-preco-nome-input[b-crtz1ffmzr] {
    width: 118px;
    padding: 2px 4px;
    border: 1px solid transparent;
    border-radius: var(--mkf-radius-control);
    background: transparent;
    color: var(--mkf-text);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    text-align: right;
}

.mkf-preco-nome-input:hover[b-crtz1ffmzr] {
    border-color: var(--mkf-line);
}

.mkf-preco-nome-input:focus[b-crtz1ffmzr] {
    outline: none;
    background-color: var(--mkf-surface);
    border-color: var(--mkf-brand);
    box-shadow: 0 0 0 3px var(--mkf-brand-soft);
    text-align: left;
}

/* Só aparece no hover do cabeçalho — uma ação destrutiva visível em toda coluna, o tempo
   todo, compete com o nome do canal e não é o que a pessoa veio fazer. */
.mkf-preco-x[b-crtz1ffmzr] {
    display: grid;
    place-items: center;
    padding: 3px;
    border: 0;
    border-radius: 4px;
    background: none;
    color: var(--mkf-text-3);
    opacity: 0;
    cursor: pointer;
    transition: opacity 0.12s ease;
}

.mkf-preco-table thead th:hover .mkf-preco-x[b-crtz1ffmzr],
.mkf-preco-x:focus-visible[b-crtz1ffmzr] {
    opacity: 1;
}

.mkf-preco-x:hover[b-crtz1ffmzr] {
    background-color: var(--mkf-lose-soft);
    color: var(--mkf-lose);
}

.mkf-preco-x svg[b-crtz1ffmzr] {
    display: block;
    width: 12px;
    height: 12px;
}

/* ---- Item 3: faixas de seção ---- respondem, em uma linha, a pergunta que a tela nunca
   respondia: o que fica salvo e o que é só deste cálculo. */
/* text-align explícito: a regra geral de `tbody td` alinha tudo à direita (é uma tabela de
   números), e sem isto a faixa de seção saía encostada na borda direita — MEDIDO no primeiro
   print, o rótulo "TAXAS DO CANAL" aparecia do lado oposto ao da coluna que ele rotula. */
.mkf-preco-table tbody tr.mkf-preco-grp td[b-crtz1ffmzr] {
    height: 30px;
    text-align: left;
    background-color: var(--mkf-surface-2);
    border-top: 1px solid var(--mkf-line);
    border-bottom: 1px solid var(--mkf-line);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--mkf-text-3);
}

.mkf-preco-table tbody tr.mkf-preco-grp td:first-child[b-crtz1ffmzr] {
    position: sticky;
    left: 0;
    z-index: var(--mkf-z-tabela-corpo-fixo);
    background-color: var(--mkf-surface-2);
}

.mkf-preco-grp-hint[b-crtz1ffmzr] {
    margin-left: 10px;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--mkf-text-3);
}

.mkf-preco-table tbody td[b-crtz1ffmzr] {
    height: 44px;
    border-bottom: 1px solid var(--mkf-line-soft);
    text-align: right;
    white-space: nowrap;
}

.mkf-preco-table tbody tr:hover td[b-crtz1ffmzr],
.mkf-preco-table tbody tr:hover td.mkf-preco-label-col[b-crtz1ffmzr] {
    background-color: var(--mkf-surface-2);
}

/* ---- Item 4, tratamento 1: campo digitável dentro da tabela (32px) ---- */
.mkf-preco-cell-in[b-crtz1ffmzr] {
    position: relative;
    display: inline-block;
    width: 118px;
}

.mkf-preco-cell-in .mkf-preco-input[b-crtz1ffmzr] {
    height: 32px;
}

/* ---- Item 4, tratamento 2: valor calculado — sem caixa, cinza ---- */
.mkf-preco-calc[b-crtz1ffmzr] {
    font-family: var(--mkf-mono-numeric-family);
    font-size: 13px;
    font-variant-numeric: var(--mkf-mono-numeric-variant);
    color: var(--mkf-text-2);
}

/* ---- Item 4, tratamento 3: resultado principal — linha elevada de 52px ----
   Divergência deliberada da spec (que pedia âmbar): neste app a laranja da marca é reservada
   a interação — botão, foco, item ativo — e nunca significa um dado. O destaque aqui vem de
   ELEVAÇÃO de superfície + tamanho do número, o mesmo princípio usado no resto do app. */
.mkf-preco-table tbody tr.mkf-preco-key td[b-crtz1ffmzr] {
    height: 52px;
    background-color: var(--mkf-surface-2);
    border-bottom: 1px solid var(--mkf-line);
}

.mkf-preco-table tbody tr.mkf-preco-key td.mkf-preco-label-col[b-crtz1ffmzr] {
    background-color: var(--mkf-surface-2);
    color: var(--mkf-text);
    font-weight: 500;
}

.mkf-preco-table tbody tr.mkf-preco-key:hover td[b-crtz1ffmzr],
.mkf-preco-table tbody tr.mkf-preco-key:hover td.mkf-preco-label-col[b-crtz1ffmzr] {
    background-color: var(--mkf-surface-3);
}

.mkf-preco-big[b-crtz1ffmzr] {
    font-family: var(--mkf-mono-numeric-family);
    font-size: 16px;
    font-weight: 600;
    font-variant-numeric: var(--mkf-mono-numeric-variant);
    letter-spacing: -0.01em;
    color: var(--mkf-text);
}

.mkf-preco-sub[b-crtz1ffmzr] {
    display: block;
    margin-top: 1px;
    font-size: 11px;
    font-weight: 400;
    color: var(--mkf-text-3);
}

/* Valor indisponível — CINZA, nunca vermelho. A tela antiga pintava o "—" da Margem real de
   vermelho, como se ausência de dado fosse erro. Vermelho é perda de verdade. */
.mkf-preco-off[b-crtz1ffmzr] {
    color: var(--mkf-text-3);
    font-weight: 400;
}

.mkf-preco-pos[b-crtz1ffmzr] {
    color: var(--mkf-win);
}

.mkf-preco-neg[b-crtz1ffmzr] {
    color: var(--mkf-lose);
}

/* ---- Legenda: diz que os três tratamentos são três COISAS diferentes ---- */
.mkf-preco-legend[b-crtz1ffmzr] {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    padding: 11px var(--mkf-space-4);
    border-top: 1px solid var(--mkf-line);
    font-size: 11.5px;
    color: var(--mkf-text-3);
}

.mkf-preco-legend span[b-crtz1ffmzr] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.mkf-preco-lk[b-crtz1ffmzr] {
    width: 22px;
    height: 14px;
    flex: none;
    border: 1px solid var(--mkf-line);
    border-radius: 4px;
    background-color: var(--mkf-surface-2);
}

.mkf-preco-lk--calc[b-crtz1ffmzr] {
    background: transparent;
    border-style: dashed;
}

.mkf-preco-lk--key[b-crtz1ffmzr] {
    background-color: var(--mkf-surface-3);
    border-color: var(--mkf-surface-3);
}

/* ---- Faixas de preço por canal (2026-09-19) ------------------------------------------- */
.mkf-preco-btn--primario[b-crtz1ffmzr] {
    background-color: var(--mkf-brand);
    border-color: var(--mkf-brand);
    color: var(--mkf-text-on-brand);
}

.mkf-preco-btn--primario:hover:not(:disabled)[b-crtz1ffmzr] {
    background-color: var(--mkf-brand-hover);
    border-color: var(--mkf-brand-hover);
}

/* Faixa aplicada sob o preço praticado / PDV — texto de apoio, nunca cor de julgamento. */
.mkf-preco-faixa-nota[b-crtz1ffmzr] {
    display: block;
    margin-top: 3px;
    font-family: var(--mkf-mono-numeric-family);
    font-variant-numeric: var(--mkf-mono-numeric-variant);
    font-size: 11px;
    line-height: 1.35;
    color: var(--mkf-text-3);
    text-align: right;
}

.mkf-preco-faixa-nota--warn[b-crtz1ffmzr] {
    color: var(--mkf-warn);
}

.mkf-faixas-canais[b-crtz1ffmzr] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 12px var(--mkf-space-4) 0;
}

.mkf-faixas-chip[b-crtz1ffmzr] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 11px;
    border: 1px solid var(--mkf-line);
    border-radius: 999px;
    background-color: transparent;
    color: var(--mkf-text-2);
    font-family: inherit;
    font-size: 12.5px;
    cursor: pointer;
}

.mkf-faixas-chip:hover[b-crtz1ffmzr] {
    border-color: var(--mkf-surface-3);
    color: var(--mkf-text);
}

.mkf-faixas-chip--on[b-crtz1ffmzr] {
    border-color: var(--mkf-brand);
    background-color: var(--mkf-brand-soft);
    color: var(--mkf-text);
}

.mkf-faixas-chip-n[b-crtz1ffmzr] {
    min-width: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background-color: var(--mkf-surface-3);
    font-family: var(--mkf-font-mono);
    font-size: 10.5px;
    text-align: center;
}

.mkf-faixas-corpo[b-crtz1ffmzr] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px var(--mkf-space-4) var(--mkf-space-4);
    max-width: 820px;
}

.mkf-faixas-uso[b-crtz1ffmzr],
.mkf-faixas-vazio[b-crtz1ffmzr] {
    font-size: 12px;
    color: var(--mkf-text-3);
}

.mkf-faixas-uso a[b-crtz1ffmzr] {
    color: var(--mkf-brand);
}

.mkf-faixas-tabela[b-crtz1ffmzr] {
    border: 1px solid var(--mkf-line);
    border-radius: var(--mkf-radius-control);
    padding: 9px 12px;
}

.mkf-faixas-tabela--anterior[b-crtz1ffmzr] {
    opacity: 0.75;
}

.mkf-faixas-tabela-cab[b-crtz1ffmzr] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 7px;
    font-size: 12px;
    color: var(--mkf-text-2);
}

.mkf-faixas-badge[b-crtz1ffmzr] {
    padding: 1px 7px;
    border-radius: 4px;
    background-color: var(--mkf-surface-2);
    color: var(--mkf-text-2);
    font-size: 11px;
    font-weight: 500;
}

.mkf-faixas-badge--vigente[b-crtz1ffmzr] {
    background-color: var(--mkf-idle-soft);
    color: var(--mkf-text);
}

.mkf-faixas-badge--futura[b-crtz1ffmzr] {
    background-color: var(--mkf-warn-soft);
    color: var(--mkf-warn);
}

.mkf-faixas-tabela-data[b-crtz1ffmzr] {
    font-family: var(--mkf-font-mono);
    font-size: 11.5px;
}

.mkf-faixas-tabela-obs[b-crtz1ffmzr] {
    color: var(--mkf-text-3);
}

.mkf-faixas-tabela-acoes[b-crtz1ffmzr] {
    margin-left: auto;
    display: inline-flex;
    gap: 10px;
}

.mkf-faixas-link[b-crtz1ffmzr] {
    padding: 0;
    border: none;
    background: none;
    color: var(--mkf-brand);
    font-family: inherit;
    font-size: 12px;
    cursor: pointer;
    align-self: flex-start;
}

.mkf-faixas-link:disabled[b-crtz1ffmzr] {
    color: var(--mkf-text-3);
    cursor: not-allowed;
}

.mkf-faixas-lista[b-crtz1ffmzr] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 4px 16px;
}

.mkf-faixas-item[b-crtz1ffmzr] {
    display: flex;
    flex-direction: column;
    font-family: var(--mkf-mono-numeric-family);
    font-variant-numeric: var(--mkf-mono-numeric-variant);
    font-size: 12px;
}

.mkf-faixas-item-int[b-crtz1ffmzr] {
    color: var(--mkf-text-3);
    font-size: 11px;
}

.mkf-faixas-item-tx[b-crtz1ffmzr] {
    color: var(--mkf-text);
}

.mkf-faixas-editor[b-crtz1ffmzr] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mkf-faixas-editor-cab[b-crtz1ffmzr] {
    display: flex;
    gap: var(--mkf-space-3);
    flex-wrap: wrap;
}

.mkf-faixas-campo[b-crtz1ffmzr] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 11.5px;
    color: var(--mkf-text-2);
}

.mkf-faixas-data[b-crtz1ffmzr] {
    width: 160px;
    text-align: left;
}

.mkf-faixas-campo--obs[b-crtz1ffmzr] {
    flex: 1;
    min-width: 200px;
}

.mkf-faixas-obs[b-crtz1ffmzr] {
    text-align: left;
    font-family: inherit;
}

.mkf-faixas-aviso[b-crtz1ffmzr] {
    padding: 8px 11px;
    border-radius: var(--mkf-radius-control);
    background-color: var(--mkf-warn-soft);
    color: var(--mkf-text);
    font-size: 12px;
}

.mkf-faixas-erro[b-crtz1ffmzr] {
    color: var(--mkf-lose);
    font-size: 12px;
}

.mkf-faixas-grade[b-crtz1ffmzr] {
    width: 100%;
    max-width: 620px;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0 5px;
}

.mkf-faixas-grade th[b-crtz1ffmzr] {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--mkf-text-2);
    text-align: right;
    padding: 0 6px;
}

.mkf-faixas-grade th:last-child[b-crtz1ffmzr] {
    width: 34px;
}

.mkf-faixas-grade td[b-crtz1ffmzr] {
    padding: 0 6px;
}

.mkf-faixas-x[b-crtz1ffmzr] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 4px;
    background: none;
    color: var(--mkf-text-3);
    cursor: pointer;
}

.mkf-faixas-x:hover:not(:disabled)[b-crtz1ffmzr] {
    color: var(--mkf-lose);
    background-color: var(--mkf-lose-soft);
}

.mkf-faixas-x:disabled[b-crtz1ffmzr] {
    opacity: 0.35;
    cursor: not-allowed;
}

.mkf-faixas-x svg[b-crtz1ffmzr] {
    width: 13px;
    height: 13px;
}

.mkf-faixas-acoes[b-crtz1ffmzr] {
    display: flex;
    gap: var(--mkf-space-2);
    flex-wrap: wrap;
    align-items: center;
}

.mkf-faixas-acoes-sep[b-crtz1ffmzr] {
    flex: 1;
}
/* /Components/Pages/VendasAdsCustoPorVenda.razor.rz.scp.css */
.cav[b-qx7gty6v65] { display: flex; flex-direction: column; gap: 12px; padding-bottom: 24px; min-width: 0; }
.cav-barra[b-qx7gty6v65] { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cav-sep[b-qx7gty6v65] { width: 1px; height: 20px; background: var(--mkf-line-soft); margin: 0 4px; }
.cav-chip[b-qx7gty6v65] { border: 1px solid var(--mkf-line-soft); background: var(--mkf-surface); color: var(--mkf-text-2); border-radius: 999px; padding: 3px 12px; font: inherit; font-size: 12.5px; cursor: pointer; }
.cav-chip--on[b-qx7gty6v65] { border-color: var(--mkf-brand); color: var(--mkf-text); font-weight: 600; }
.cav-chip:focus-visible[b-qx7gty6v65], .cav-btn:focus-visible[b-qx7gty6v65] { outline: 2px solid var(--mkf-brand); outline-offset: 2px; }
.cav-check[b-qx7gty6v65] { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.cav-btn[b-qx7gty6v65] { border: 1px solid var(--mkf-brand); background: var(--mkf-brand); color: var(--mkf-text-on-brand); border-radius: 6px; padding: 5px 12px; font: inherit; font-size: 13px; cursor: pointer; }
.cav-btn:disabled[b-qx7gty6v65] { opacity: 0.45; cursor: default; }
.cav-nota[b-qx7gty6v65] { color: var(--mkf-text-2); font-size: 12.5px; margin: 0; }
.cav-tabela[b-qx7gty6v65] { overflow: auto; max-height: calc(100vh - 260px); border: 1px solid var(--mkf-line-soft); border-radius: 6px; background: var(--mkf-surface); }
.cav-tabela table[b-qx7gty6v65] { border-collapse: collapse; width: 100%; font-size: 12.5px; }
.cav-tabela th[b-qx7gty6v65] { position: sticky; top: 0; z-index: 1; background: var(--mkf-surface); text-align: left; padding: 6px 8px; font-weight: 600; color: var(--mkf-text-2); white-space: nowrap; border-bottom: 1px solid var(--mkf-line-soft); }
.cav-tabela td[b-qx7gty6v65] { padding: 4px 8px; border-bottom: 1px solid var(--mkf-line-soft); vertical-align: middle; }
.cav-tabela .num[b-qx7gty6v65] { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cav-tabela .mono[b-qx7gty6v65] { white-space: nowrap; font-variant-numeric: tabular-nums; }
.cav-tabela .titulo[b-qx7gty6v65] { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cav-selo[b-qx7gty6v65] { font-size: 11px; padding: 1px 6px; border-radius: 4px; background: var(--mkf-surface-2); color: var(--mkf-text-2); white-space: nowrap; }
.cav-selo--mau[b-qx7gty6v65] { color: var(--mkf-lose); font-weight: 600; }
.cav-selo--alerta[b-qx7gty6v65] { color: var(--mkf-warn); font-weight: 600; }