/* ============================================================================
   XControl — VISUAL NOVO (Parâmetros → Exibição, V549)
   Ativado por  body.visual-novo  (o MainLayout liga pelo parâmetro bo_visual_novo e tira ao sair do layout:
   loja pública, relatório de impressão e outras telas de layout próprio ficam fora). Sem a classe no body,
   NADA aqui tem efeito: desligar o parâmetro devolve o visual de sempre.

   POR QUE: clientes comentavam que o desenho do sistema parecia de modelo pronto, igual ao de muitos
   outros (degradê, pílulas, cartões flutuando, ícone em tudo). O dono aprovou um modelo "com cara de
   sistema" — denso, tela inteira, controles baixos, grade de verdade — e pediu esse estilo no sistema
   INTEIRO, popups inclusive ("nesse estilo, popups etc., tudo"). Esta pele leva o modelo para todas as
   telas sem mexer em cada uma:
     • moldura de sistema: barra do topo escura e baixa, abas de telas abertas como guias de documento,
       barra de situação no rodapé;
     • topo das telas numa linha só (título, descrição e botões), sem ícone em caixa;
     • abas das telas à esquerda, sem ícone, com o traço embaixo da aba ativa;
     • campos em caixa compacta com o rótulo em cima (26 a 28 px), botões baixos e de canto reto;
     • grades densas com cabeçalho cinza; situação como quadradinho colorido + texto, não pílula;
     • popups como janela: faixa de título cinza, rodapé de botões com linha em cima;
     • sem sombra (só no que flutua), sem degradê, sem vidro fosco, sem animação de entrada.
   As cores continuam as do tema escolhido no Personalizar (claro e escuro): as fichas abaixo saem das
   variáveis do MudBlazor misturadas (color-mix), então o tema escuro também fica certo sem segunda lista.
   Vem DEPOIS do erp-theme.css; as telas redesenhadas (ex.: Simular pedido) têm desenho próprio.

   FORA DA PELE — BI, dashboards e painéis de TV (dono: "os BI acredito que não precisa", "porque aí mantém o
   layout bonito"). O miolo dessas telas vem marcado com .vn-fora (Services/VisualNovoForaDe, pelo MainLayout e
   pelo KeepAliveHost), e TODA regra daqui que pega conteúdo de tela leva  :not(.vn-fora *)  no alvo — regra
   nova também tem de levar, senão alcança o BI. A moldura e os popups seguem no visual novo.
   ============================================================================ */

/* Valores do tema guardados na raiz antes de o visual novo trocá-los no body: o miolo das telas de fora
   (.vn-fora) volta a eles, com a fonte e o tamanho de letra de sempre. */
:root {
    --vn-orig-default-family: var(--mud-typography-default-family);
    --vn-orig-h-family: var(--mud-typography-h6-family);
    --vn-orig-body1-family: var(--mud-typography-body1-family);
    --vn-orig-body2-family: var(--mud-typography-body2-family);
    --vn-orig-button-family: var(--mud-typography-button-family);
    --vn-orig-caption-family: var(--mud-typography-caption-family);
    --vn-orig-default-size: var(--mud-typography-default-size);
    --vn-orig-body1-size: var(--mud-typography-body1-size);
    --vn-orig-body2-size: var(--mud-typography-body2-size);
    --vn-orig-subtitle1-size: var(--mud-typography-subtitle1-size);
    --vn-orig-subtitle2-size: var(--mud-typography-subtitle2-size);
    --vn-orig-caption-size: var(--mud-typography-caption-size);
    --vn-orig-overline-size: var(--mud-typography-overline-size);
    --vn-orig-h3-size: var(--mud-typography-h3-size);
    --vn-orig-h4-size: var(--mud-typography-h4-size);
    --vn-orig-h4-lineheight: var(--mud-typography-h4-lineheight);
    --vn-orig-h5-size: var(--mud-typography-h5-size);
    --vn-orig-h5-lineheight: var(--mud-typography-h5-lineheight);
    --vn-orig-h6-size: var(--mud-typography-h6-size);
    --vn-orig-h6-lineheight: var(--mud-typography-h6-lineheight);
    --vn-orig-button-size: var(--mud-typography-button-size);
    --vn-orig-button-lineheight: var(--mud-typography-button-lineheight);
    --vn-orig-button-text-transform: var(--mud-typography-button-text-transform);
    --vn-orig-button-letterspacing: var(--mud-typography-button-letterspacing);
    --vn-orig-overline-text-transform: var(--mud-typography-overline-text-transform);
}

body.visual-novo {
    /* ---- Fichas (tokens) ------------------------------------------------------------------------- */
    --vn-painel: var(--mud-palette-surface);
    --vn-tinta: var(--mud-palette-text-primary);
    --vn-tinta-2: color-mix(in srgb, var(--mud-palette-text-primary) 86%, var(--mud-palette-surface));
    --vn-tinta-3: var(--mud-palette-text-secondary);
    /* Cabeçalho de grade, faixas de título e de botões: um cinza de papel, levemente puxado para a cor do tema. */
    --vn-painel-2: color-mix(in srgb, var(--mud-palette-primary) 3%, color-mix(in srgb, var(--mud-palette-text-primary) 4%, var(--mud-palette-surface)));
    /* Moldura: o fundo atrás das guias de telas abertas e da divisória. */
    --vn-moldura: color-mix(in srgb, var(--mud-palette-primary) 5%, color-mix(in srgb, var(--mud-palette-text-primary) 10%, var(--mud-palette-surface)));
    --vn-moldura-2: color-mix(in srgb, var(--mud-palette-primary) 7%, color-mix(in srgb, var(--mud-palette-text-primary) 17%, var(--mud-palette-surface)));
    --vn-linha: color-mix(in srgb, var(--mud-palette-primary) 5%, color-mix(in srgb, var(--mud-palette-text-primary) 16%, var(--mud-palette-surface)));
    --vn-linha-2: color-mix(in srgb, var(--mud-palette-primary) 6%, color-mix(in srgb, var(--mud-palette-text-primary) 30%, var(--mud-palette-surface)));
    --vn-sobre: color-mix(in srgb, var(--mud-palette-primary) 7%, var(--mud-palette-surface));
    --vn-sel: color-mix(in srgb, var(--mud-palette-primary) 15%, var(--mud-palette-surface));
    --vn-seg-sel: color-mix(in srgb, var(--mud-palette-text-primary) 58%, var(--mud-palette-surface));
    --vn-barra: color-mix(in srgb, var(--mud-palette-appbar-background) 88%, #000);
    --vn-sombra: 0 10px 30px rgba(15, 28, 45, .22);
    --vn-cinza: color-mix(in srgb, var(--mud-palette-text-primary) 45%, var(--mud-palette-surface));
    /* Nomes antigos desta pele (telas e componentes já usam): apontam para as fichas novas. */
    --vn-fundo-2: var(--vn-painel-2);
    --vn-apag: var(--vn-tinta-3);
    --vn-hover: var(--vn-sobre);
    --vn-fonte: 'IBM Plex Sans', 'Segoe UI', Roboto, Arial, sans-serif;
    --vn-fonte-grade: 'IBM Plex Sans Condensed', 'IBM Plex Sans', 'Arial Narrow', Arial, sans-serif;
    /* Alturas da moldura: a barra do topo e a faixa das guias (o conteúdo começa logo abaixo das duas). */
    --vn-h-barra: 36px;
    --vn-h-guias: 31px;
    --vn-h-rodape: 22px;
    /* Ajustes do Personalizar (V552, Services/AjustesVisualNovo): o fator do tamanho da letra, o canto e o espaço
       da linha da grade. As classes vn-texto-*, vn-cantos-* e vn-linhas-* do fim do arquivo trocam estes valores. */
    --vn-escala: 1;
    --vn-canto: 3px;
    --vn-pad-linha: 5px;
    /* Canto padrão de todo componente do MudBlazor: o canto reto do sistema. */
    --mud-default-borderradius: var(--vn-canto);

    /* ---- Fonte e escala: a do modelo (13 px), para caber mais na tela ---------------------------- */
    --mud-typography-default-family: var(--vn-fonte);
    --mud-typography-h1-family: var(--vn-fonte);
    --mud-typography-h2-family: var(--vn-fonte);
    --mud-typography-h3-family: var(--vn-fonte);
    --mud-typography-h4-family: var(--vn-fonte);
    --mud-typography-h5-family: var(--vn-fonte);
    --mud-typography-h6-family: var(--vn-fonte);
    --mud-typography-subtitle1-family: var(--vn-fonte);
    --mud-typography-subtitle2-family: var(--vn-fonte);
    --mud-typography-body1-family: var(--vn-fonte);
    --mud-typography-body2-family: var(--vn-fonte);
    --mud-typography-button-family: var(--vn-fonte);
    --mud-typography-caption-family: var(--vn-fonte);
    --mud-typography-overline-family: var(--vn-fonte);
    --mud-typography-default-size: calc(13px * var(--vn-escala));
    --mud-typography-body1-size: calc(13.5px * var(--vn-escala));
    --mud-typography-body2-size: calc(13px * var(--vn-escala));
    --mud-typography-subtitle1-size: calc(14px * var(--vn-escala));
    --mud-typography-subtitle2-size: calc(13px * var(--vn-escala));
    --mud-typography-caption-size: calc(12px * var(--vn-escala));
    --mud-typography-overline-size: calc(11.5px * var(--vn-escala));
    --mud-typography-h6-size: calc(15px * var(--vn-escala));
    --mud-typography-h6-lineheight: 1.45;
    --mud-typography-h5-size: calc(17px * var(--vn-escala));
    --mud-typography-h5-lineheight: 1.4;
    --mud-typography-h4-size: calc(21px * var(--vn-escala));
    --mud-typography-h4-lineheight: 1.3;
    --mud-typography-h3-size: calc(26px * var(--vn-escala));
    --mud-typography-button-size: calc(13px * var(--vn-escala));
    --mud-typography-button-lineheight: 20px;
    --mud-typography-button-text-transform: none;
    --mud-typography-button-letterspacing: normal;
    --mud-typography-overline-text-transform: none;

    font-family: var(--vn-fonte);
    font-variant-numeric: tabular-nums;
    /* Fundo liso por padrão; papel de parede só se o usuário escolher no Personalizar (o MainLayout decide:
       "none" no visual novo, a imagem escolhida com ele ligado). A cor de baixo é a do tema. */
    background-color: var(--mud-palette-background) !important;
}

/* Vidro fosco e animação de entrada: enfeite que não diz nada (e o fosco pesa na máquina fraca). */
body.visual-novo *:not(.vn-fora *),
body.visual-novo *:not(.vn-fora *)::before,
body.visual-novo *:not(.vn-fora *)::after {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}
body.visual-novo.fade-in,
body.visual-novo .fade-in:not(.vn-fora *),
body.visual-novo .fade-in-up:not(.vn-fora *),
body.visual-novo .page-transition:not(.vn-fora *) { animation: none !important; }

/* Barra de rolagem fina, de sistema. */
body.visual-novo { scrollbar-color: var(--vn-linha-2) transparent; }
body.visual-novo :not(.vn-fora *)::-webkit-scrollbar { width: 10px; height: 10px; }
body.visual-novo :not(.vn-fora *)::-webkit-scrollbar-track { background: transparent; }
body.visual-novo :not(.vn-fora *)::-webkit-scrollbar-thumb { background: var(--vn-linha-2); border: 2px solid transparent; background-clip: padding-box; border-radius: 5px; }
body.visual-novo :not(.vn-fora *)::-webkit-scrollbar-thumb:hover { background-color: var(--vn-cinza); }

/* ---- Abertura (tela de carga): sem órbitas, anel e brilho; logo parada e uma barra simples ---------- */
body.visual-novo .loader-container:not(.vn-fora *) { background: #16273a; }
body.visual-novo .loader-orb:not(.vn-fora *),
body.visual-novo .loader-grid:not(.vn-fora *),
body.visual-novo .loader-ring:not(.vn-fora *),
body.visual-novo .loader-ring-outer:not(.vn-fora *),
body.visual-novo .loader-logo-glow:not(.vn-fora *),
body.visual-novo .loader-dots:not(.vn-fora *) { display: none !important; }
body.visual-novo .loader-ring-wrapper:not(.vn-fora *) { width: auto; height: auto; margin-bottom: 28px; }
body.visual-novo .loader-logo:not(.vn-fora *) { height: 64px; animation: none !important; filter: none !important; }
body.visual-novo .loader-subtitle:not(.vn-fora *) { font-style: normal; color: rgba(255, 255, 255, .6); animation: none !important; }
body.visual-novo .progress-container:not(.vn-fora *) { border-radius: 0; height: 3px; background: rgba(255, 255, 255, .15); }
body.visual-novo .progress-bar:not(.vn-fora *) { background: rgba(255, 255, 255, .75); border-radius: 0; }
body.visual-novo .loader-footer:not(.vn-fora *) { letter-spacing: normal; color: rgba(255, 255, 255, .45); }

/* ============================================================================================
   MOLDURA DO SISTEMA
   ============================================================================================ */

/* ---- Barra do topo: escura, 36 px, sem sombra; ícones em quadrado, sem pulo nem brilho --------- */
body.visual-novo .mud-appbar:not(.vn-fora *) {
    box-shadow: none !important;
    background-color: var(--vn-barra) !important;
}
body.visual-novo .mud-appbar .mud-toolbar:not(.vn-fora *) {
    height: var(--vn-h-barra) !important;
    min-height: var(--vn-h-barra) !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
    gap: 2px;
}
body.visual-novo .mud-appbar .mud-icon-button:not(.vn-fora *) {
    padding: 5px !important;
    margin: 0 1px !important;
    border-radius: var(--vn-canto, 3px) !important;
    transition: background-color .1s ease !important;
}
body.visual-novo .mud-appbar .mud-icon-button:hover:not(.vn-fora *),
body.visual-novo .mud-appbar .mud-icon-button:active:not(.vn-fora *) {
    background: rgba(255, 255, 255, .14) !important;
    transform: none !important;
    box-shadow: none !important;
}
body.visual-novo .mud-appbar .mud-icon-button .mud-icon-root:not(.vn-fora *) { font-size: calc(19px * var(--vn-escala, 1)) !important; transition: none !important; }
body.visual-novo .mud-appbar .mud-icon-button:hover .mud-icon-root:not(.vn-fora *) { filter: none !important; transform: none !important; }
body.visual-novo .mud-appbar .mud-icon-button-edge-start:not(.vn-fora *) { margin-left: 0 !important; }
body.visual-novo .mud-appbar .mud-image.rounded-circle:not(.vn-fora *) { width: 24px !important; height: 24px !important; }
/* A empresa: botão de contorno fino dentro da barra (como no modelo), não campo com traço embaixo. */
body.visual-novo .mud-appbar .mud-input-control:not(.vn-fora *) { margin: 0 !important; flex: 0 0 auto; }
body.visual-novo .mud-appbar .mud-input-control .mud-input:not(.vn-fora *) {
    min-height: 28px;
    background: transparent !important;
    border-color: rgba(255, 255, 255, .28) !important;
    color: var(--mud-palette-appbar-text, #fff) !important;
    box-shadow: none !important;
}
body.visual-novo .mud-appbar .mud-input-control .mud-input:hover:not(.vn-fora *) { background: rgba(255, 255, 255, .08) !important; }
body.visual-novo .mud-appbar .mud-input-control .mud-input.mud-disabled:not(.vn-fora *) { opacity: .85; background: transparent !important; }
body.visual-novo .mud-appbar .mud-input-control .mud-input .mud-input-slot:not(.vn-fora *),
body.visual-novo .mud-appbar .mud-input-control .mud-input input:not(.vn-fora *) { color: inherit !important; font-weight: 500; text-align: left !important; }
body.visual-novo .mud-appbar .mud-input-control .mud-icon-root:not(.vn-fora *) { color: inherit !important; }

/* ---- Guias das telas abertas: faixa de moldura com a guia ativa branca, colada na tela ------------ */
body.visual-novo .sticky-nav-shell:not(.vn-fora *) {
    top: var(--vn-h-barra) !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: var(--vn-moldura) !important;
    background-image: none !important;
    border-bottom: 1px solid var(--vn-linha) !important;
    box-shadow: none !important;
    animation: none !important;
    transition: left .2s ease !important;
    will-change: auto !important;
}
body.visual-novo .sticky-nav-shell.scrolled:not(.vn-fora *) { box-shadow: none !important; }
body.visual-novo .sticky-nav-glow:not(.vn-fora *),
body.visual-novo .sticky-nav-line:not(.vn-fora *),
body.visual-novo .sticky-nav-shell:not(.vn-fora *)::after { display: none !important; }
body.visual-novo .tabs-bar:not(.vn-fora *) {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    scrollbar-width: none;
    gap: 2px !important;
    padding: 4px 10px 0 !important;
    align-items: flex-end !important;
    border-bottom: 0 !important;
    background: transparent !important;
}
body.visual-novo .tabs-bar:not(.vn-fora *)::-webkit-scrollbar { display: none; }
body.visual-novo .tab:not(.vn-fora *) {
    flex: 0 0 auto;
    height: 26px;
    padding: 0 5px 0 12px !important;
    gap: 8px !important;
    max-width: 240px !important;
    border-radius: var(--vn-canto, 3px) 3px 0 0 !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-bottom: 0 !important;
    color: var(--vn-tinta-2) !important;
    font-size: calc(13px * var(--vn-escala, 1)) !important;
    font-weight: 400 !important;
    animation: none !important;
    transition: background-color .1s ease !important;
    box-shadow: none !important;
    transform: none !important;
}
body.visual-novo .tab:not(.vn-fora *)::before { display: none !important; }
body.visual-novo .tab:hover:not(.vn-fora *) { background: var(--vn-moldura-2) !important; color: var(--vn-tinta) !important; transform: none !important; box-shadow: none !important; }
body.visual-novo .tab-ativa:not(.vn-fora *),
body.visual-novo .tab-ativa:hover:not(.vn-fora *) {
    height: 27px;
    margin-bottom: -1px;
    background: var(--vn-painel) !important;
    background-image: none !important;
    border-color: var(--vn-linha) !important;
    color: var(--vn-tinta) !important;
    font-weight: 500 !important;
    box-shadow: none !important;
    animation: none !important;
}
body.visual-novo .tab-label:not(.vn-fora *) { line-height: 1.2 !important; letter-spacing: normal !important; }
body.visual-novo .tab .tab-close:not(.vn-fora *),
body.visual-novo .tab-ativa .tab-close:not(.vn-fora *),
body.visual-novo .tab .tab-refresh:not(.vn-fora *) {
    width: 18px !important;
    height: 18px !important;
    border-radius: 2px !important;
    background: transparent !important;
    color: var(--vn-tinta-3) !important;
    opacity: 1 !important;
    transform: none !important;
}
body.visual-novo .tab .tab-close:hover:not(.vn-fora *) { background: var(--vn-moldura-2) !important; color: var(--vn-tinta) !important; transform: none !important; }
body.visual-novo .tab-refresh:hover .mud-icon-root:not(.vn-fora *) { animation: none !important; }
body.visual-novo .tab-fechar-tudo:not(.vn-fora *) {
    align-self: center;
    margin-left: 4px;
    border-radius: var(--vn-canto, 3px) !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--vn-tinta-3) !important;
    border: 0 !important;
}
body.visual-novo .tab-fechar-tudo:hover:not(.vn-fora *) { background: var(--vn-moldura-2) !important; transform: none !important; }

/* ---- Área da tela: começa logo abaixo das guias e usa a largura inteira -------------------------- */
body.visual-novo .mud-main-content:not(.vn-fora *) { padding-top: calc(var(--vn-h-barra) + var(--vn-h-guias)) !important; padding-bottom: calc(var(--vn-h-rodape) + 6px) !important; }
body.visual-novo .mud-main-content:not(:has(.tabs-bar)):not(.vn-fora *) { padding-top: calc(var(--vn-h-barra) + 4px) !important; }
body.visual-novo .mud-main-content > .mud-container:not(.vn-fora *) { margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 8px !important; }
body.visual-novo .mud-container.mud-container-maxwidth-lg:not(.vn-fora *),
body.visual-novo .mud-container.mud-container-maxwidth-xl:not(.vn-fora *),
body.visual-novo .mud-container.mud-container-maxwidth-xxl:not(.vn-fora *) { max-width: none !important; }
body.visual-novo .mud-main-content .mud-container:not(.vn-fora *) { padding-left: 12px !important; padding-right: 12px !important; }

/* ---- Barra de situação no rodapé (empresa, usuário, versão) ------------------------------------ */
.vn-status { display: none; }
body.visual-novo .vn-status:not(.vn-fora *) {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    height: var(--vn-h-rodape);
    background: var(--vn-moldura);
    border-top: 1px solid var(--vn-linha);
    color: var(--vn-tinta-2);
    font-size: calc(12px * var(--vn-escala, 1));
    white-space: nowrap;
    overflow: hidden;
    transition: left .2s ease;
    margin: 0 !important;
}
/* À esquerda, a mesma conta da faixa de guias (MainLayout: .xc-drawer-open .sticky-nav-shell). O margin: 0 acima
   anula a margem que o MudBlazor dá a todo div irmão da gaveta aberta (somava duas vezes a largura dela). */
body.visual-novo .xc-drawer-open .vn-status:not(.vn-fora *) { left: var(--mud-drawer-width-left, 240px); }
body.visual-novo .vn-status > span:not(.vn-fora *) { padding: 0 10px; border-right: 1px solid var(--vn-linha); overflow: hidden; text-overflow: ellipsis; }
body.visual-novo .vn-status > .dir:not(.vn-fora *) { margin-left: auto; border-right: 0; border-left: 1px solid var(--vn-linha); }
@media (max-width: 700px) { body.visual-novo .vn-status > .some-estreito:not(.vn-fora *) { display: none; } }

/* ---- Menu lateral: liso, itens baixos, ícones de uma cor só ------------------------------------- */
body.visual-novo .mud-drawer:not(.vn-fora *) {
    box-shadow: none !important;
    border-right: 1px solid var(--vn-linha);
    background-color: var(--vn-painel) !important;
}
body.visual-novo .mud-drawer .mud-drawer-header:not(.vn-fora *) {
    min-height: 0 !important;
    height: auto !important;
    padding: 10px 12px !important;
}
body.visual-novo .mud-drawer .mud-drawer-header .mud-image:not(.vn-fora *) { max-height: 52px !important; width: auto !important; box-shadow: none !important; border-radius: var(--vn-canto, 3px) !important; }
body.visual-novo .mud-drawer .mud-drawer-header .mud-icon-root:not(.vn-fora *) { font-size: 2.2rem !important; }
body.visual-novo .mud-drawer .mud-divider:not(.vn-fora *) { margin-top: 0 !important; margin-bottom: 0 !important; }
body.visual-novo .mud-drawer .mud-navmenu:not(.vn-fora *) { margin-top: 4px !important; font-size: calc(13px * var(--vn-escala, 1)); }
body.visual-novo .mud-drawer .mud-stack .mud-image:not(.vn-fora *) { max-height: 30px !important; width: auto !important; }
body.visual-novo .mud-drawer .mud-stack .mud-button-root:not(.vn-fora *) { border-radius: var(--vn-canto, 3px) !important; }
body.visual-novo .selo-advanced:not(.vn-fora *) {
    background: transparent !important;
    border: 1px solid var(--vn-linha-2) !important;
    color: var(--vn-tinta-2) !important;
    border-radius: var(--vn-canto, 3px) !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    font-size: calc(11px * var(--vn-escala, 1)) !important;
    font-weight: 600 !important;
}
body.visual-novo .mud-navmenu .mud-icon-root:not(.vn-fora *),
body.visual-novo .mud-nav-link .mud-icon-root:not(.vn-fora *) { color: var(--vn-tinta-3) !important; font-size: calc(18px * var(--vn-escala, 1)) !important; }
body.visual-novo .mud-nav-link:not(.vn-fora *) {
    min-height: 30px !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    font-size: calc(13px * var(--vn-escala, 1)) !important;
    border-radius: 0 !important;
}
body.visual-novo .mud-nav-link .mud-nav-link-text:not(.vn-fora *) { font-size: calc(13px * var(--vn-escala, 1)) !important; letter-spacing: normal !important; }
body.visual-novo .mud-nav-link:hover:not(.vn-fora *) { background: var(--vn-sobre) !important; }
body.visual-novo .mud-nav-link.active:not(.vn-fora *),
body.visual-novo .mud-nav-link.mud-nav-link-active:not(.vn-fora *) {
    background: var(--vn-sel) !important;
    color: var(--vn-tinta) !important;
    border-left: 0 !important;
    box-shadow: inset 2px 0 0 var(--mud-palette-primary);
    font-weight: 600;
}
body.visual-novo .mud-nav-group > .mud-nav-link:not(.vn-fora *) { font-weight: 500; }

/* ============================================================================================
   TOPO DAS TELAS (hero-banner e FiscalHero): uma linha só, como a barra de título de uma janela
   ============================================================================================ */
body.visual-novo .hero-banner:not(.vn-fora *),
body.visual-novo .fh-banner:not(.vn-fora *) {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-bottom: 1px solid var(--vn-linha) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 2px 0 6px !important;
    margin: 0 0 8px !important;
    min-height: 0 !important;
    color: var(--vn-tinta) !important;
    overflow: visible !important;
}
body.visual-novo .hero-banner:not(.vn-fora *)::before,
body.visual-novo .hero-banner:not(.vn-fora *)::after,
body.visual-novo .fh-banner:not(.vn-fora *)::before,
body.visual-novo .fh-banner:not(.vn-fora *)::after { display: none !important; }
/* O texto do topo era branco sobre o degradê (inclusive em style inline): no fundo liso, a tinta do tema. */
body.visual-novo .hero-banner *:not(.vn-fora *),
body.visual-novo .fh-banner *:not(.vn-fora *) { color: var(--vn-tinta) !important; }
/* Título e descrição na mesma linha: o título diz o que é a tela, a descrição vem ao lado, apagada. */
body.visual-novo .hero-banner div:has(> .hero-greeting):not(.vn-fora *),
body.visual-novo .fh-banner div:has(> .fh-titulo):not(.vn-fora *) {
    display: flex !important;
    align-items: baseline;
    flex-wrap: wrap;
    column-gap: 12px;
    row-gap: 0;
    min-width: 0;
}
body.visual-novo .hero-greeting:not(.vn-fora *),
body.visual-novo .fh-titulo:not(.vn-fora *) {
    font-size: calc(15px * var(--vn-escala, 1)) !important;
    font-weight: 600 !important;
    line-height: 26px !important;
    letter-spacing: normal !important;
    margin: 0 !important;
}
body.visual-novo .hero-sub:not(.vn-fora *),
body.visual-novo .fh-subtitulo:not(.vn-fora *) {
    color: var(--vn-tinta-3) !important;
    opacity: 1 !important;
    font-size: calc(12.5px * var(--vn-escala, 1)) !important;
    line-height: 18px !important;
    margin: 0 !important;
    max-width: none !important;
    -webkit-line-clamp: 1 !important;
}
body.visual-novo .fh-badges:not(.vn-fora *) { margin-top: 0 !important; }
/* O ícone em caixa (avatar) sai: o título já diz a tela. */
body.visual-novo .hero-banner .mud-avatar:has(.mud-icon-root):not(:has(img)):not(.vn-fora *),
body.visual-novo .fh-icon-box:not(.vn-fora *) { display: none !important; }
body.visual-novo .hero-banner .d-flex.gap-4:not(.vn-fora *),
body.visual-novo .hero-banner .d-flex.gap-3:not(.vn-fora *) { gap: 8px !important; }
/* Selos do topo: texto com o quadradinho (ver etiquetas) ou contorno fino. */
body.visual-novo .hero-badge:not(.vn-fora *),
body.visual-novo .premium-header .header-badge:not(.vn-fora *) {
    background: transparent !important;
    border: 1px solid var(--vn-linha-2) !important;
    border-radius: var(--vn-canto, 3px) !important;
    color: var(--vn-tinta-2) !important;
    font-weight: 500 !important;
    font-size: calc(12px * var(--vn-escala, 1)) !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    padding: 1px 7px !important;
    box-shadow: none !important;
}
/* Botões do topo: os de sempre (superfície e contorno); o principal na cor do sistema, com texto branco. */
body.visual-novo .hero-banner .mud-button-root:not(.mud-icon-button):not(.vn-fora *),
body.visual-novo .fh-banner .mud-button-root:not(.mud-icon-button):not(.vn-fora *),
body.visual-novo .hero-btn-secondary:not(.vn-fora *),
body.visual-novo .hero-btn-secondary .mud-menu-activator .mud-button-root:not(.vn-fora *) {
    background: var(--vn-painel) !important;
    border: 1px solid var(--vn-linha-2) !important;
    border-radius: var(--vn-canto, 3px) !important;
    color: var(--vn-tinta) !important;
    box-shadow: none !important;
    transform: none !important;
    filter: none !important;
    height: 28px !important;
    min-height: 28px !important;
    padding: 0 11px !important;
    font-weight: 500 !important;
    font-size: calc(13px * var(--vn-escala, 1)) !important;
    transition: background-color .1s ease !important;
}
body.visual-novo .hero-banner .mud-button-root:hover:not(.vn-fora *),
body.visual-novo .fh-banner .mud-button-root:hover:not(.vn-fora *),
body.visual-novo .hero-btn-secondary:hover:not(.vn-fora *) { background: var(--vn-sobre) !important; transform: none !important; box-shadow: none !important; }
body.visual-novo .hero-banner .mud-button-root .mud-icon-root:not(.vn-fora *),
body.visual-novo .fh-banner .mud-button-root .mud-icon-root:not(.vn-fora *) { font-size: calc(17px * var(--vn-escala, 1)) !important; color: var(--vn-tinta-3) !important; }
/* O principal do topo, na cor do sistema com texto branco. Seletor com .mud-button-root:not(.mud-icon-button) para
   pesar mais que a regra dos botões comuns logo acima (com o mesmo peso, o branco dela vencia: branco sobre branco). */
body.visual-novo .hero-banner .mud-button-root.mud-button-filled-primary:not(.mud-icon-button):not(.vn-fora *),
body.visual-novo .hero-banner .mud-button-root.hero-btn-primary:not(.mud-icon-button):not(.vn-fora *),
body.visual-novo .fh-banner .mud-button-root.mud-button-filled-primary:not(.mud-icon-button):not(.vn-fora *),
body.visual-novo .fh-banner .mud-button-root.hero-btn-primary:not(.mud-icon-button):not(.vn-fora *) {
    background: var(--mud-palette-primary) !important;
    border-color: var(--mud-palette-primary) !important;
    color: var(--mud-palette-primary-text) !important;
}
body.visual-novo .hero-banner .mud-button-root.mud-button-filled-primary:not(.mud-icon-button) *:not(.vn-fora *),
body.visual-novo .hero-banner .mud-button-root.hero-btn-primary:not(.mud-icon-button) *:not(.vn-fora *),
body.visual-novo .fh-banner .mud-button-root.mud-button-filled-primary:not(.mud-icon-button) *:not(.vn-fora *),
body.visual-novo .fh-banner .mud-button-root.hero-btn-primary:not(.mud-icon-button) *:not(.vn-fora *) { color: var(--mud-palette-primary-text) !important; }
body.visual-novo .hero-banner .mud-icon-button:not(.vn-fora *),
body.visual-novo .fh-banner .mud-icon-button:not(.vn-fora *) {
    background: transparent !important;
    border-radius: var(--vn-canto, 3px) !important;
    transform: none !important;
}
body.visual-novo .hero-banner .mud-icon-button .mud-icon-root:not(.vn-fora *),
body.visual-novo .fh-banner .mud-icon-button .mud-icon-root:not(.vn-fora *) { color: var(--vn-tinta-3) !important; }

/* ============================================================================================
   ABAS DAS TELAS (MudTabs): à esquerda, sem ícone, traço embaixo da ativa
   ============================================================================================ */
body.visual-novo .mud-tabs-tabbar:not(.vn-fora *) {
    background: var(--vn-painel) !important;
    background-color: var(--vn-painel) !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    border-bottom: 1px solid var(--vn-linha) !important;
}
body.visual-novo .mud-tabs-tabbar .mud-tabs-tabbar-inner:not(.vn-fora *) { min-height: 32px !important; }
body.visual-novo .mud-tabs-tabbar-content .mud-tabs-tabbar-wrapper.mud-tabs-centered:not(.vn-fora *) { margin: 0 !important; }
body.visual-novo .mud-tabs-tabbar-content:not(.vn-fora *) { padding-left: 0 !important; }
body.visual-novo .mud-tab:not(.vn-fora *) {
    min-height: 32px !important;
    min-width: 0 !important;
    width: auto !important;
    padding: 0 12px !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    font-size: calc(13px * var(--vn-escala, 1)) !important;
    font-weight: 400 !important;
    line-height: 20px !important;
    border-radius: 0 !important;
}
body.visual-novo .mud-tabs-tabbar .mud-tab:not(.vn-fora *),
body.visual-novo .mud-tabs-tabbar .mud-tab .mud-icon-root:not(.vn-fora *) { color: var(--vn-tinta-2) !important; }
body.visual-novo .mud-tabs-tabbar .mud-tab:hover:not(.vn-fora *) { background: var(--vn-sobre) !important; color: var(--vn-tinta) !important; }
body.visual-novo .mud-tabs-tabbar .mud-tab.mud-tab-active:not(.vn-fora *),
body.visual-novo .mud-tabs-tabbar .mud-tab.mud-tab-active .mud-icon-root:not(.vn-fora *) {
    color: var(--vn-tinta) !important;
    font-weight: 500 !important;
    background: transparent !important;
}
/* O ícone ao lado do texto da aba sai (enfeite); aba só de ícone continua com ele. */
body.visual-novo .mud-tab .mud-tab-icon-text:not(.vn-fora *) { display: none !important; }
body.visual-novo .mud-tab .mud-icon-root:not(.vn-fora *) { font-size: calc(18px * var(--vn-escala, 1)) !important; }
body.visual-novo .mud-tab-slider:not(.vn-fora *) { background: var(--mud-palette-primary) !important; height: 2px !important; border-radius: 0 !important; }
body.visual-novo .mud-tabs-tabbar .mud-tabs-scroll-button .mud-button-root:not(.vn-fora *) { border-radius: 0 !important; }
/* Abas dentro de popup (premium-dialog): mesma aba, sem o recuo do cabeçalho antigo. */
body.visual-novo .premium-dialog .mud-tabs > .mud-tabs-tabbar:not(.vn-fora *),
body.visual-novo .mud-tabs:has(.premium-dialog) > .mud-tabs-tabbar:not(.vn-fora *) { min-height: 32px !important; }
body.visual-novo .premium-dialog .mud-tabs-tabbar-content:not(.vn-fora *),
body.visual-novo .mud-tabs:has(.premium-dialog) .mud-tabs-tabbar-content:not(.vn-fora *) { padding-left: 4px !important; }
body.visual-novo .premium-dialog .mud-tabs > .mud-tabs-tabbar .mud-tab:not(.vn-fora *),
body.visual-novo .mud-tabs:has(.premium-dialog) > .mud-tabs-tabbar .mud-tab:not(.vn-fora *) { min-height: 32px !important; color: var(--vn-tinta-2) !important; font-weight: 400 !important; font-size: calc(13px * var(--vn-escala, 1)) !important; }
body.visual-novo .premium-dialog .mud-tabs > .mud-tabs-tabbar .mud-tab.mud-tab-active:not(.vn-fora *),
body.visual-novo .mud-tabs:has(.premium-dialog) > .mud-tabs-tabbar .mud-tab.mud-tab-active:not(.vn-fora *) { color: var(--vn-tinta) !important; font-weight: 500 !important; }

/* ============================================================================================
   CAMPOS (MudTextField, MudSelect, MudAutocomplete, MudNumericField, datas): caixa compacta com o
   rótulo em cima, como formulário de sistema. O rótulo que "flutuava" dentro do campo fica parado
   em cima: nada se mexe quando o campo ganha o foco.
   ============================================================================================ */
body.visual-novo .mud-input-control > .mud-input-control-input-container > label.mud-input-label-inputcontrol:not(.vn-fora *) {
    position: static !important;
    order: -1;
    transform: none !important;
    transition: none !important;
    max-width: 100% !important;
    margin: 0 0 2px !important;
    padding: 0 !important;
    font-size: calc(12px * var(--vn-escala, 1)) !important;
    line-height: 16px !important;
    letter-spacing: normal !important;
    color: var(--vn-tinta-3) !important;
    background: none !important;
    pointer-events: none;
}
body.visual-novo .mud-input-control > .mud-input-control-input-container > label.mud-input-label-inputcontrol.mud-input-error:not(.vn-fora *) { color: var(--mud-palette-error) !important; }
body.visual-novo .mud-input-control .mud-input:not(.vn-fora *) {
    margin-top: 0 !important;
    min-height: 28px;
    /* Sem folga na caixa: a folga fica no próprio campo (abaixo), para o campo que a tela pinta por dentro
       (ex.: o amarelo do Simulador) encostar na borda, sem faixa branca dos lados. */
    padding: 0 !important;
    border: 1px solid var(--vn-linha-2) !important;
    border-radius: var(--vn-canto, 3px) !important;
    font-size: calc(13px * var(--vn-escala, 1));
    line-height: 18px;
    box-shadow: none;
    transition: border-color .1s ease;
}
/* Fundo da caixa com peso baixo (:where): a tela que pinta a caixa inteira vence (ex.: o Simulador pinta de
   amarelo o campo editável e de cinza o calculado; com !important aqui o amarelo ficava só no miolo, "meio
   cortado"). O Filled do MudBlazor (cinza) perde por vir antes, com o mesmo peso. */
:where(body.visual-novo) .mud-input:not(.vn-fora *) { background-color: var(--vn-painel); }
/* O traço de baixo (Variant.Text/Filled) e a borda desenhada à parte (Outlined) dão lugar à caixa. */
body.visual-novo .mud-input-control .mud-input:not(.vn-fora *)::before,
body.visual-novo .mud-input-control .mud-input:not(.vn-fora *)::after { display: none !important; }
body.visual-novo .mud-input-control .mud-input > .mud-input-outlined-border:not(.vn-fora *) { display: none !important; }
body.visual-novo .mud-input-control .mud-input:hover:not(.mud-disabled):not(.vn-fora *) { border-color: var(--vn-cinza) !important; }
body.visual-novo .mud-input-control .mud-input:focus-within:not(.vn-fora *) {
    border-color: var(--mud-palette-primary) !important;
    box-shadow: inset 0 0 0 1px var(--mud-palette-primary);
}
body.visual-novo .mud-input-control .mud-input.mud-input-error:not(.vn-fora *) { border-color: var(--mud-palette-error) !important; }
body.visual-novo .mud-input-control .mud-input.mud-disabled:not(.vn-fora *) { background: var(--vn-painel-2) !important; border-style: solid !important; }
body.visual-novo .mud-input-control .mud-input > input.mud-input-root:not(.vn-fora *),
body.visual-novo .mud-input-control .mud-input > div.mud-input-slot.mud-input-root:not(.vn-fora *) {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    /* Os lados sem !important: o MudBlazor abre 24 px à direita quando o número tem setinhas (showspin). */
    padding-left: 6px;
    padding-right: 6px;
    line-height: 18px;
    font-size: calc(13px * var(--vn-escala, 1));
}
body.visual-novo .mud-input-control .mud-input > input.mud-input-root:not(.vn-fora *) { height: 18px; }
body.visual-novo .mud-input-control .mud-input > div.mud-input-slot.mud-input-root:not(.vn-fora *) { height: auto; min-height: 18px; }
body.visual-novo .mud-input-control .mud-input > textarea.mud-input-root:not(.vn-fora *) {
    margin: 4px 0 !important;
    padding: 0 6px !important;
    line-height: 18px;
    font-size: calc(13px * var(--vn-escala, 1));
    mask-image: none !important;
}
body.visual-novo .mud-input-control .mud-input-adornment:not(.vn-fora *) { max-height: 24px; }
body.visual-novo .mud-input-control .mud-input-adornment-start:not(.vn-fora *) { margin: 0 0 0 6px !important; }
body.visual-novo .mud-input-control .mud-input-adornment-end:not(.vn-fora *) { margin: 0 6px 0 0 !important; }
body.visual-novo .mud-input-control .mud-input-adornment .mud-icon-root:not(.vn-fora *) { font-size: calc(18px * var(--vn-escala, 1)) !important; color: var(--vn-tinta-3); }
body.visual-novo .mud-input-control .mud-input-adornment .mud-icon-button:not(.vn-fora *) { padding: 2px !important; margin: 0 !important; }
body.visual-novo .mud-input-control .mud-input-adornment .mud-icon-button .mud-icon-root:not(.vn-fora *) { font-size: calc(18px * var(--vn-escala, 1)) !important; }
body.visual-novo .mud-input-control .mud-input-helper-text:not(.vn-fora *) { font-size: calc(11.5px * var(--vn-escala, 1)); line-height: 1.4; }
/* Folga entre campos: o contorno reservava espaço para o rótulo em cima da borda; com o rótulo parado em cima,
   a folga cai para a do campo comum. */
body.visual-novo .mud-input-control.mud-input-control-margin-dense:not(.vn-fora *),
body.visual-novo .mud-input-control.mud-input-outlined-with-label:not(.vn-fora *),
body.visual-novo .mud-input-control.mud-input-control-margin-dense.mud-input-outlined-with-label:not(.vn-fora *) { margin-top: 2px; margin-bottom: 2px; }
body.visual-novo .mud-input-control.mud-input-control-margin-normal:not(.vn-fora *),
body.visual-novo .mud-input-control.mud-input-control-margin-normal.mud-input-outlined-with-label:not(.vn-fora *) { margin-top: 4px; margin-bottom: 4px; }
body.visual-novo .mud-input-control .mud-input-control-helper-container:not(.vn-fora *) { margin-top: 2px; }
/* Número com setinhas: as setas cabem na caixa baixa. */
body.visual-novo .mud-input-numeric-spin:not(.vn-fora *) { right: 1px !important; }
body.visual-novo .mud-input-numeric-spin .mud-icon-button:not(.vn-fora *) { padding: 0 2px !important; min-height: 0 !important; }
body.visual-novo .mud-input-numeric-spin .mud-icon-root:not(.vn-fora *) { font-size: calc(14px * var(--vn-escala, 1)) !important; }
/* Caixa de marcar, opção e chave: alvo menor, mesma cor. */
body.visual-novo .mud-checkbox .mud-icon-button:not(.vn-fora *),
body.visual-novo .mud-radio .mud-icon-button:not(.vn-fora *) { padding: 5px !important; }
body.visual-novo .mud-checkbox .mud-icon-root:not(.vn-fora *),
body.visual-novo .mud-radio .mud-icon-root:not(.vn-fora *) { font-size: calc(20px * var(--vn-escala, 1)) !important; }
body.visual-novo .mud-input-control-boolean-input .mud-typography:not(.vn-fora *),
body.visual-novo .mud-switch-label-small:not(.vn-fora *),
body.visual-novo .mud-switch-label-medium:not(.vn-fora *),
body.visual-novo .mud-switch-label-large:not(.vn-fora *),
body.visual-novo .mud-checkbox .mud-typography:not(.vn-fora *),
body.visual-novo .mud-radio .mud-typography:not(.vn-fora *) { font-size: calc(13px * var(--vn-escala, 1)) !important; }  /* o MudBlazor põe 1rem !important no rótulo da chave */

/* ============================================================================================
   BOTÕES: baixos (28 px), canto reto, sem sombra, letra normal
   ============================================================================================ */
body.visual-novo .mud-button-root:not(.vn-fora *) {
    text-transform: none !important;
    letter-spacing: normal !important;
    border-radius: var(--vn-canto, 3px) !important;
    box-shadow: none !important;
}
body.visual-novo .mud-button-root:not(.mud-icon-button):not(.vn-fora *) { font-weight: 500 !important; }
body.visual-novo .mud-button-root:hover:not(.vn-fora *) { box-shadow: none !important; }
body.visual-novo .mud-button-filled:not(.mud-icon-button):not(.vn-fora *) { padding: 4px 12px; }
body.visual-novo .mud-button-outlined:not(.mud-icon-button):not(.vn-fora *) { padding: 3px 11px; }
body.visual-novo .mud-button-text:not(.mud-icon-button):not(.vn-fora *) { padding: 4px 8px; }
body.visual-novo .mud-button-filled-size-small:not(.mud-icon-button):not(.vn-fora *) { padding: 2px 8px; font-size: calc(12.5px * var(--vn-escala, 1)); }
body.visual-novo .mud-button-outlined-size-small:not(.mud-icon-button):not(.vn-fora *) { padding: 1px 7px; font-size: calc(12.5px * var(--vn-escala, 1)); }
body.visual-novo .mud-button-text-size-small:not(.mud-icon-button):not(.vn-fora *) { padding: 2px 6px; font-size: calc(12.5px * var(--vn-escala, 1)); }
body.visual-novo .mud-button-filled-size-large:not(.mud-icon-button):not(.vn-fora *) { padding: 6px 16px; font-size: calc(14px * var(--vn-escala, 1)); }
body.visual-novo .mud-button-outlined-size-large:not(.mud-icon-button):not(.vn-fora *) { padding: 5px 15px; font-size: calc(14px * var(--vn-escala, 1)); }
body.visual-novo .mud-button-text-size-large:not(.mud-icon-button):not(.vn-fora *) { padding: 6px 10px; font-size: calc(14px * var(--vn-escala, 1)); }
/* Contorno: a linha cinza do sistema; a cor do botão fica no texto. */
body.visual-novo .mud-button-outlined:not(.mud-icon-button):not(.vn-fora *) { border-color: var(--vn-linha-2) !important; }
body.visual-novo .mud-button-outlined-error:not(.mud-icon-button):not(.vn-fora *) { border-color: color-mix(in srgb, var(--mud-palette-error) 55%, var(--vn-linha-2)) !important; }
body.visual-novo .mud-button-label .mud-button-icon-start:not(.vn-fora *) { margin-left: -2px !important; margin-right: 6px !important; }
body.visual-novo .mud-button-label .mud-button-icon-end:not(.vn-fora *) { margin-left: 6px !important; margin-right: -2px !important; }
body.visual-novo .mud-button-label .mud-icon-root:not(.vn-fora *) { font-size: calc(17px * var(--vn-escala, 1)) !important; }
body.visual-novo .mud-button-label .mud-icon-size-small:not(.vn-fora *) { font-size: calc(15px * var(--vn-escala, 1)) !important; }
body.visual-novo .mud-button-group-root:not(.vn-fora *) { box-shadow: none !important; border-radius: var(--vn-canto, 3px) !important; }
/* Botão só de ícone: quadrado baixo (o redondo de 48 px deixava a linha da grade alta). */
/* !important: o site.css põe 7px 20px !important em todo botão de ícone (deixava a linha da grade com 38 px). */
body.visual-novo .mud-icon-button:not(.mud-switch-base):not(.vn-fora *) {
    padding: 5px !important;
    border-radius: var(--vn-canto, 3px) !important;
}
body.visual-novo .mud-icon-button:not(.mud-switch-base) > .mud-icon-button-label > .mud-icon-root.mud-icon-size-medium:not(.vn-fora *) { font-size: calc(20px * var(--vn-escala, 1)); }
body.visual-novo .mud-icon-button.mud-icon-button-size-small:not(.mud-switch-base):not(.vn-fora *) { padding: 3px !important; }
body.visual-novo .mud-icon-button.mud-icon-button-size-small:not(.mud-switch-base) > .mud-icon-button-label > .mud-icon-root:not(.vn-fora *) { font-size: calc(17px * var(--vn-escala, 1)); }
body.visual-novo .mud-icon-button.mud-icon-button-size-large:not(.mud-switch-base):not(.vn-fora *) { padding: 6px !important; }
body.visual-novo .mud-icon-button-edge-start:not(.mud-switch-base):not(.vn-fora *) { margin-left: -5px; }
body.visual-novo .mud-icon-button-edge-end:not(.mud-switch-base):not(.vn-fora *) { margin-right: -5px; }
/* O botão que flutua (FAB) fica com sombra: é o que está por cima da tela. */
body.visual-novo .mud-fab:not(.vn-fora *) { border-radius: 4px !important; box-shadow: 0 2px 8px rgba(0, 0, 0, .2) !important; }
/* Grupo de alternância (MudToggleGroup): o botão segmentado do modelo. */
body.visual-novo .mud-toggle-group:not(.vn-fora *) { border-radius: var(--vn-canto, 3px) !important; border-color: var(--vn-linha-2) !important; box-shadow: none !important; }
body.visual-novo .mud-toggle-group .mud-toggle-item:not(.vn-fora *) { min-height: 26px; padding: 0 11px !important; font-size: calc(13px * var(--vn-escala, 1)) !important; text-transform: none !important; }
body.visual-novo .mud-toggle-group .mud-toggle-item.mud-toggle-item-selected:not(.vn-fora *) { background: var(--vn-seg-sel) !important; color: #fff !important; }

/* ============================================================================================
   ETIQUETAS (MudChip): situação como quadradinho colorido + texto (sem pílula). As que se clicam
   (filtro) viram botão segmentado; as que se fecham (×) viram etiqueta de contorno.
   ============================================================================================ */
body.visual-novo .mud-chip:not(.vn-fora *) { --vn-chip: var(--vn-cinza); letter-spacing: normal !important; text-transform: none !important; box-shadow: none !important; }
body.visual-novo .mud-chip.mud-chip-color-primary:not(.vn-fora *) { --vn-chip: var(--mud-palette-primary); }
body.visual-novo .mud-chip.mud-chip-color-secondary:not(.vn-fora *) { --vn-chip: var(--mud-palette-secondary); }
body.visual-novo .mud-chip.mud-chip-color-tertiary:not(.vn-fora *) { --vn-chip: var(--mud-palette-tertiary); }
body.visual-novo .mud-chip.mud-chip-color-info:not(.vn-fora *) { --vn-chip: var(--mud-palette-info); }
body.visual-novo .mud-chip.mud-chip-color-success:not(.vn-fora *) { --vn-chip: var(--mud-palette-success); }
body.visual-novo .mud-chip.mud-chip-color-warning:not(.vn-fora *) { --vn-chip: var(--mud-palette-warning); }
body.visual-novo .mud-chip.mud-chip-color-error:not(.vn-fora *) { --vn-chip: var(--mud-palette-error); }
body.visual-novo .mud-chip.mud-chip-color-dark:not(.vn-fora *) { --vn-chip: var(--mud-palette-dark); }
body.visual-novo .mud-chip:not(.mud-clickable):not(:has(.mud-chip-close-button)):not(.vn-fora *) {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    height: auto !important;
    min-height: 18px;
    padding: 0 2px 0 0 !important;
    gap: 6px;
    color: var(--vn-tinta) !important;
    font-size: calc(12.5px * var(--vn-escala, 1)) !important;
    font-weight: 400 !important;
    line-height: 18px;
}
body.visual-novo .mud-chip:not(.mud-clickable):not(:has(.mud-chip-close-button)):not(:has(.mud-chip-icon)):not(:has(.mud-avatar)):not(.vn-fora *)::before {
    content: "";
    flex: none;
    width: 8px;
    height: 8px;
    background: var(--vn-chip);
}
body.visual-novo .mud-chip:not(.mud-clickable) .mud-chip-icon:not(.vn-fora *),
body.visual-novo .mud-chip:not(.mud-clickable) .mud-chip-icon.mud-icon-root:not(.vn-fora *) { color: var(--vn-chip) !important; margin: 0 !important; font-size: calc(15px * var(--vn-escala, 1)) !important; }
body.visual-novo .mud-chip .mud-avatar:not(.vn-fora *) { width: 18px !important; height: 18px !important; }
/* As que se clicam: botão de sistema; a escolhida, cinza cheio com letra branca (como no modelo). */
body.visual-novo .mud-chip.mud-clickable:not(.vn-fora *) {
    height: 26px !important;
    padding: 0 10px !important;
    border-radius: var(--vn-canto, 3px) !important;
    border: 1px solid var(--vn-linha-2) !important;
    background: var(--vn-painel) !important;
    color: var(--vn-tinta) !important;
    font-size: calc(13px * var(--vn-escala, 1)) !important;
    font-weight: 400 !important;
}
body.visual-novo .mud-chip.mud-clickable:hover:not(.vn-fora *) { background: var(--vn-sobre) !important; }
body.visual-novo .mud-chip.mud-clickable.mud-chip-selected:not(.vn-fora *) {
    background: var(--vn-seg-sel) !important;
    border-color: var(--vn-seg-sel) !important;
    color: #fff !important;
}
body.visual-novo .mud-chip.mud-clickable .mud-icon-root:not(.vn-fora *) { color: inherit !important; font-size: calc(16px * var(--vn-escala, 1)) !important; }
body.visual-novo .mud-chip:has(.mud-chip-close-button):not(.mud-clickable):not(.vn-fora *) {
    height: 24px !important;
    padding: 0 4px 0 8px !important;
    border-radius: var(--vn-canto, 3px) !important;
    border: 1px solid var(--vn-linha-2) !important;
    background: var(--vn-painel-2) !important;
    color: var(--vn-tinta) !important;
    font-size: calc(12.5px * var(--vn-escala, 1)) !important;
}
body.visual-novo .mud-table-cell .mud-chip:not(.vn-fora *) { margin-top: 0 !important; margin-bottom: 0 !important; }
/* Botão de ícone pequeno dentro da grade (editar, excluir): mais justo, para a linha ficar em 28 px. */
body.visual-novo .mud-table-cell .mud-icon-button.mud-icon-button-size-small:not(.vn-fora *) { padding: 2px !important; }

/* ============================================================================================
   GRADES (MudTable, MudDataGrid, MudSimpleTable): densas, cabeçalho cinza, números alinhados
   ============================================================================================ */
body.visual-novo .mud-table:not(.vn-fora *) { border-radius: var(--vn-canto, 3px) !important; box-shadow: none !important; }
/* O site.css arredonda o contêiner da grade em 20 px: a ponta do cabeçalho cinza saía em curva. */
body.visual-novo .mud-table-container:not(.vn-fora *) { border-radius: var(--vn-canto, 3px); }
body.visual-novo .mud-table[class*="mud-elevation-"]:not(.mud-elevation-0):not(.vn-fora *) { border: 1px solid var(--vn-linha); }
body.visual-novo .mud-table-root:not(.vn-fora *) { font-family: var(--vn-fonte-grade); font-size: calc(13px * var(--vn-escala, 1)); }
body.visual-novo .mud-table-cell:not(.vn-fora *) {
    padding: var(--vn-pad-linha, 5px) 8px !important;
    line-height: 18px;
    font-size: calc(13px * var(--vn-escala, 1));
    /* A célula pega a fonte do corpo do MudBlazor: a Condensed tem de vir aqui, para caber mais coluna. */
    font-family: var(--vn-fonte-grade) !important;
    font-variant-numeric: tabular-nums;
    border-bottom-color: var(--vn-linha) !important;
}
body.visual-novo .mud-table-dense .mud-table-cell:not(.vn-fora *) { padding: max(1px, calc(var(--vn-pad-linha, 5px) - 2px)) 8px !important; }
/* Fonte escolhida no Personalizar (body.font-override) vale também na grade: a condensada é só o padrão. */
body.visual-novo.font-override .mud-table-cell:not(.vn-fora *),
body.visual-novo.font-override .mud-table-root:not(.vn-fora *) { font-family: var(--erp-font) !important; }
body.visual-novo .mud-table-head .mud-table-cell:not(.vn-fora *),
body.visual-novo .mud-table-root thead th:not(.vn-fora *) {
    font-weight: 600 !important;
    font-size: calc(12.5px * var(--vn-escala, 1)) !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    color: var(--vn-tinta-2) !important;
    /* Fundo opaco: o cabeçalho gruda no topo (sticky) e as linhas passam por baixo. */
    background: var(--vn-painel-2) !important;
    border-bottom: 1px solid var(--vn-linha-2) !important;
    white-space: nowrap;
}
body.visual-novo .mud-table-root tbody tr:hover > td:not(.vn-fora *) { background: var(--vn-sobre) !important; }
body.visual-novo .mud-table-foot .mud-table-cell:not(.vn-fora *) { font-weight: 600; background: var(--vn-painel-2); border-top: 1px solid var(--vn-linha-2); }
body.visual-novo .mud-table-toolbar:not(.vn-fora *) { min-height: 40px !important; height: auto !important; padding: 4px 8px !important; }
body.visual-novo .mud-table-pagination-toolbar:not(.vn-fora *) { min-height: 34px !important; height: 34px !important; font-size: calc(12.5px * var(--vn-escala, 1)); }
body.visual-novo .mud-table-pagination .mud-typography:not(.vn-fora *),
body.visual-novo .mud-table-pagination-caption:not(.vn-fora *) { font-size: calc(12.5px * var(--vn-escala, 1)) !important; }
body.visual-novo .mud-simple-table table th:not(.vn-fora *) { background: var(--vn-painel-2); color: var(--vn-tinta-2); font-weight: 600; font-size: calc(12.5px * var(--vn-escala, 1)); }
body.visual-novo .mud-simple-table table td:not(.vn-fora *),
body.visual-novo .mud-simple-table table th:not(.vn-fora *) { padding: max(1px, calc(var(--vn-pad-linha, 5px) - 1px)) 8px !important; border-bottom-color: var(--vn-linha) !important; }

/* ============================================================================================
   SUPERFÍCIES: cartões são quadros de linha fina; o que flutua (menu, lista, aviso) tem sombra
   ============================================================================================ */
body.visual-novo .mud-card:not(.vn-fora *),
body.visual-novo .mud-paper:not(.mud-popover):not(.mud-dialog):not(.mud-snackbar):not(.mud-drawer):not(.vn-fora *) {
    border-radius: var(--vn-canto, 3px) !important;
    box-shadow: none !important;
}
body.visual-novo .mud-paper[class*="mud-elevation-"]:not(.mud-elevation-0):not(.mud-popover):not(.mud-dialog):not(.mud-snackbar):not(.mud-drawer):not(.mud-appbar):not(.vn-fora *),
body.visual-novo .mud-card[class*="mud-elevation-"]:not(.mud-elevation-0):not(.vn-fora *) {
    border: 1px solid var(--vn-linha);
}
body.visual-novo .mud-card-header:not(.vn-fora *) {
    padding: 7px 12px !important;
    background: var(--vn-painel-2);
    border-bottom: 1px solid var(--vn-linha);
}
body.visual-novo .mud-card-header .mud-typography:not(.vn-fora *) { font-size: calc(13.5px * var(--vn-escala, 1)) !important; font-weight: 600 !important; }
body.visual-novo .mud-card-header .mud-card-header-avatar:has(.mud-icon-root):not(:has(img)):not(.vn-fora *) { display: none !important; }
body.visual-novo .mud-card-content:not(.vn-fora *) { padding: 10px 12px !important; }
body.visual-novo .mud-card-actions:not(.vn-fora *) { padding: 6px 10px !important; border-top: 1px solid var(--vn-linha); }
/* O contorno da lista flutuante é desenhado com sombra, não com borda: a lista de dentro (.mud-list) tem a
   mesma altura máxima da caixa (MudBlazor: max-height: inherit), e 2 px de borda faziam a caixa rolar junto
   com a lista (duas barras de rolagem; dono: "2 scroll"). */
body.visual-novo .mud-popover:not(.vn-fora *) {
    border-radius: var(--vn-canto, 3px) !important;
    box-shadow: 0 0 0 1px var(--vn-linha-2), 0 6px 18px rgba(15, 28, 45, .18) !important;
}
body.visual-novo .mud-popover .mud-list-item:not(.vn-fora *) { padding-top: 4px; padding-bottom: 4px; padding-left: 10px; padding-right: 10px; min-height: 28px; }
body.visual-novo .mud-popover .mud-list-item .mud-typography:not(.vn-fora *),
body.visual-novo .mud-popover .mud-list-item-text:not(.vn-fora *) { font-size: calc(13px * var(--vn-escala, 1)); }
body.visual-novo .mud-popover .mud-selected-item:not(.vn-fora *) { background: var(--vn-sel) !important; }
body.visual-novo .mud-alert:not(.vn-fora *) {
    border-radius: var(--vn-canto, 3px) !important;
    box-shadow: none !important;
    padding: 5px 10px !important;
    font-size: calc(13px * var(--vn-escala, 1));
}
body.visual-novo .mud-alert .mud-alert-icon:not(.vn-fora *) { margin-right: 8px !important; padding: 4px 0 !important; }
body.visual-novo .mud-alert .mud-alert-icon .mud-icon-root:not(.vn-fora *) { font-size: calc(18px * var(--vn-escala, 1)) !important; }
body.visual-novo .mud-alert-message:not(.vn-fora *) { padding: 4px 0 !important; font-weight: 400 !important; }
body.visual-novo .mud-expand-panel:not(.vn-fora *) { border-radius: var(--vn-canto, 3px) !important; box-shadow: none !important; border: 1px solid var(--vn-linha); margin-bottom: -1px; }
body.visual-novo .mud-expand-panel .mud-expand-panel-header:not(.vn-fora *) { min-height: 36px !important; padding: 6px 12px !important; }
body.visual-novo .mud-expand-panel .mud-expand-panel-content:not(.vn-fora *) { padding: 8px 12px 12px !important; }
body.visual-novo .mud-snackbar:not(.vn-fora *) { border-radius: var(--vn-canto, 3px) !important; box-shadow: var(--vn-sombra) !important; font-size: calc(13px * var(--vn-escala, 1)); }
body.visual-novo .mud-tooltip:not(.vn-fora *) { border-radius: var(--vn-canto, 3px) !important; font-size: calc(12px * var(--vn-escala, 1)) !important; padding: 4px 8px !important; }
body.visual-novo .mud-progress-linear:not(.vn-fora *) { border-radius: 0 !important; }
body.visual-novo .mud-divider:not(.vn-fora *) { border-color: var(--vn-linha) !important; }

/* ---- Densidade: o espaçamento padrão do MudGrid (24 px) cai para 8 px --------------------------
   Sem !important de propósito: quem pôs mt-4, mb-2… na grade (utilitário com !important) mantém. */
body.visual-novo .mud-grid.mud-grid-spacing-xs-3:not(.vn-fora *),
body.visual-novo .mud-grid.mud-grid-spacing-xs-4:not(.vn-fora *),
body.visual-novo .mud-grid.mud-grid-spacing-xs-5:not(.vn-fora *),
body.visual-novo .mud-grid.mud-grid-spacing-xs-6:not(.vn-fora *),
body.visual-novo .mud-grid.mud-grid-spacing-xs-7:not(.vn-fora *),
body.visual-novo .mud-grid.mud-grid-spacing-xs-8:not(.vn-fora *),
body.visual-novo .mud-grid.mud-grid-spacing-xs-9:not(.vn-fora *),
body.visual-novo .mud-grid.mud-grid-spacing-xs-10:not(.vn-fora *) { width: calc(100% + 8px); margin-left: -8px; margin-top: -8px; }
body.visual-novo .mud-grid.mud-grid-spacing-xs-3 > .mud-grid-item:not(.vn-fora *),
body.visual-novo .mud-grid.mud-grid-spacing-xs-4 > .mud-grid-item:not(.vn-fora *),
body.visual-novo .mud-grid.mud-grid-spacing-xs-5 > .mud-grid-item:not(.vn-fora *),
body.visual-novo .mud-grid.mud-grid-spacing-xs-6 > .mud-grid-item:not(.vn-fora *),
body.visual-novo .mud-grid.mud-grid-spacing-xs-7 > .mud-grid-item:not(.vn-fora *),
body.visual-novo .mud-grid.mud-grid-spacing-xs-8 > .mud-grid-item:not(.vn-fora *),
body.visual-novo .mud-grid.mud-grid-spacing-xs-9 > .mud-grid-item:not(.vn-fora *),
body.visual-novo .mud-grid.mud-grid-spacing-xs-10 > .mud-grid-item:not(.vn-fora *) { padding-left: 8px; padding-top: 8px; }

/* ============================================================================================
   POPUPS (MudDialog): janela de sistema. Faixa de título cinza, conteúdo sem sobra, rodapé de
   botões com linha em cima. O cabeçalho próprio das telas (premium-header, dialogo-grad-*) vira a
   mesma faixa.
   ============================================================================================ */
body.visual-novo .mud-overlay.mud-overlay-dialog .mud-overlay-scrim:not(.vn-fora *),
body.visual-novo .mud-overlay-dialog .mud-overlay-scrim:not(.vn-fora *) { background-color: rgba(15, 28, 45, .38) !important; }
/* Contorno por sombra, como na lista flutuante: borda somaria altura ao que já rola por dentro. */
body.visual-novo .mud-dialog:not(.vn-fora *),
body.visual-novo .premium-dialog:not(.vn-fora *) {
    border-radius: 4px !important;
    box-shadow: 0 0 0 1px var(--vn-linha-2), var(--vn-sombra) !important;
    animation-duration: .01s !important;
}
body.visual-novo .mud-dialog .mud-dialog-title:not(.vn-fora *) {
    padding: 7px 44px 7px 12px !important;
    background: var(--vn-painel-2);
    border-bottom: 1px solid var(--vn-linha);
    border-radius: 4px 4px 0 0 !important;
    font-size: calc(14px * var(--vn-escala, 1));
    font-weight: 600;
}
body.visual-novo .mud-dialog .mud-dialog-title > .mud-typography:not(.vn-fora *),
body.visual-novo .mud-dialog .mud-dialog-title .mud-typography-h4:not(.vn-fora *),
body.visual-novo .mud-dialog .mud-dialog-title .mud-typography-h5:not(.vn-fora *),
body.visual-novo .mud-dialog .mud-dialog-title .mud-typography-h6:not(.vn-fora *) {
    font-size: calc(14px * var(--vn-escala, 1)) !important;
    font-weight: 600 !important;
    line-height: 20px !important;
    letter-spacing: normal !important;
}
body.visual-novo .mud-dialog .mud-dialog-title .mud-button-close:not(.vn-fora *) { top: 4px !important; right: 6px !important; padding: 4px !important; }
body.visual-novo .mud-dialog .mud-dialog-title .mud-button-close .mud-icon-root:not(.vn-fora *) { font-size: calc(18px * var(--vn-escala, 1)) !important; }
body.visual-novo .mud-dialog .mud-dialog-content:not(.mud-dialog-no-side-padding):not(.vn-fora *) { padding: 10px 14px !important; }
body.visual-novo .mud-dialog .mud-dialog-content.mud-dialog-no-side-padding:not(.vn-fora *) { padding-top: 8px !important; padding-bottom: 8px !important; }
body.visual-novo .mud-dialog .mud-dialog-actions:not(.vn-fora *) {
    padding: 6px 10px !important;
    gap: 6px !important;
    background: var(--vn-painel-2);
    border-top: 1px solid var(--vn-linha);
    border-radius: 0 0 4px 4px !important;
}
body.visual-novo .mud-dialog .mud-dialog-actions > *:not(.vn-fora *) { margin: 0 !important; }
/* Rodapé dos popups (dono: "os botões de ação em baixo, ponha um pequeno espaçamento entre eles", "deve ser geral"):
   o grupo de botões ocupa a largura toda. O "w-100" que as telas usam é do Bootstrap, que o sistema não carrega:
   o rodapé ficava do tamanho dos botões, o justify-space-between não abria espaço e o grupo da esquerda (Cancelar,
   Chapas) encostava no Salvar. E todo grupo flex do rodapé tem 8 px entre os botões, mesmo sem folga. */
body.visual-novo .mud-dialog .mud-dialog-actions > .w-100:not(.vn-fora *),
body.visual-novo .mud-dialog .mud-dialog-actions > .premium-actions:not(.vn-fora *) { width: 100%; flex: 1 1 auto; }
body.visual-novo .mud-dialog .mud-dialog-actions:not(.vn-fora *),
body.visual-novo .mud-dialog .mud-dialog-actions .d-flex:not(.vn-fora *),
body.visual-novo .mud-dialog .mud-dialog-actions .premium-actions:not(.vn-fora *) { column-gap: 8px !important; row-gap: 6px !important; }
/* Cabeçalho próprio (premium-header / dialogo-grad-*): some o degradê, o ícone em caixa e a folga. */
body.visual-novo .premium-dialog .mud-dialog-title:not(.vn-fora *) { padding-bottom: 7px !important; }
body.visual-novo .premium-header:not(.vn-fora *),
body.visual-novo [class*="dialogo-grad-"]:not(.vn-fora *) {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
}
body.visual-novo .premium-header:not(.vn-fora *)::before,
body.visual-novo .premium-header:not(.vn-fora *)::after,
body.visual-novo [class*="dialogo-grad-"]:not(.vn-fora *)::before,
body.visual-novo [class*="dialogo-grad-"]:not(.vn-fora *)::after { display: none !important; }
body.visual-novo .premium-header-content:not(.vn-fora *) { padding: 0 !important; gap: 8px !important; }
/* Título e selos numa linha só (o bloco de texto do cabeçalho empilhava os dois). */
body.visual-novo .premium-header-content > .d-flex > div:not(.mud-avatar):not(.vn-fora *) { display: flex; align-items: center; flex-wrap: wrap; column-gap: 10px; row-gap: 2px; }
body.visual-novo .premium-header-content > .d-flex > div:not(.mud-avatar) > div:not(.vn-fora *) { margin-top: 0 !important; }
body.visual-novo .premium-header:not(.vn-fora *),
body.visual-novo .premium-header *:not(.vn-fora *),
body.visual-novo [class*="dialogo-grad-"]:not(.vn-fora *),
body.visual-novo [class*="dialogo-grad-"] *:not(.vn-fora *) { color: var(--vn-tinta) !important; }
body.visual-novo .premium-header .mud-typography-h4:not(.vn-fora *),
body.visual-novo .premium-header .mud-typography-h5:not(.vn-fora *),
body.visual-novo .premium-header .mud-typography-h6:not(.vn-fora *),
body.visual-novo [class*="dialogo-grad-"] .mud-typography-h5:not(.vn-fora *),
body.visual-novo [class*="dialogo-grad-"] .mud-typography-h6:not(.vn-fora *) {
    font-size: calc(14px * var(--vn-escala, 1)) !important;
    font-weight: 600 !important;
    line-height: 20px !important;
    letter-spacing: normal !important;
}
body.visual-novo .premium-header .mud-typography-body2:not(.vn-fora *),
body.visual-novo .premium-header .mud-typography-caption:not(.vn-fora *),
body.visual-novo [class*="dialogo-grad-"] .mud-typography-body2:not(.vn-fora *),
body.visual-novo [class*="dialogo-grad-"] .mud-typography-caption:not(.vn-fora *) { color: var(--vn-tinta-3) !important; font-size: calc(12px * var(--vn-escala, 1)) !important; opacity: 1 !important; }
body.visual-novo .premium-header .mud-avatar:has(.mud-icon-root):not(:has(img)):not(.vn-fora *),
body.visual-novo [class*="dialogo-grad-"] .mud-avatar:has(.mud-icon-root):not(:has(img)):not(.vn-fora *) { display: none !important; }
body.visual-novo .premium-header .mud-icon-button:not(.vn-fora *),
body.visual-novo [class*="dialogo-grad-"] .mud-icon-button:not(.vn-fora *) { background: transparent !important; padding: 4px !important; }
body.visual-novo .premium-header .mud-icon-button .mud-icon-root:not(.vn-fora *),
body.visual-novo [class*="dialogo-grad-"] .mud-icon-button .mud-icon-root:not(.vn-fora *) { color: var(--vn-tinta-3) !important; font-size: calc(18px * var(--vn-escala, 1)) !important; }
body.visual-novo .premium-header .mud-chip:not(.vn-fora *),
body.visual-novo [class*="dialogo-grad-"] .mud-chip:not(.vn-fora *) { color: var(--vn-tinta-2) !important; }

/* ============================================================================================
   QUADROS DE INDICADOR (kpi-card-modern, FiscalKpi, insight-card): compactos, sem ícone de fundo
   ============================================================================================ */
body.visual-novo .kpi-card-modern:not(.vn-fora *),
body.visual-novo .fk-card:not(.vn-fora *),
body.visual-novo .insight-card:not(.vn-fora *) {
    border-radius: var(--vn-canto, 3px) !important;
    box-shadow: none !important;
    border: 1px solid var(--vn-linha) !important;
    background: var(--vn-painel) !important;
    padding: 6px 10px !important;
    min-height: 0 !important;
    transform: none !important;
}
body.visual-novo .kpi-card-modern:hover:not(.vn-fora *),
body.visual-novo .fk-card:hover:not(.vn-fora *),
body.visual-novo .insight-card:hover:not(.vn-fora *) { box-shadow: none !important; transform: none !important; border-color: var(--vn-linha-2) !important; }
body.visual-novo .fk-card.fk-highlight:not(.vn-fora *) { box-shadow: inset 0 0 0 1px var(--mud-palette-primary) !important; border-color: var(--mud-palette-primary) !important; }
body.visual-novo .kpi-icon-bg:not(.vn-fora *),
body.visual-novo .fk-ico:not(.vn-fora *) { display: none !important; }
body.visual-novo .kpi-card-modern:not(.vn-fora *) { grid-template-columns: 1fr !important; column-gap: 0 !important; }
body.visual-novo .kpi-card-modern > :not(.kpi-icon-bg):not(.vn-fora *) { grid-column: 1 !important; }
body.visual-novo .kpi-label:not(.vn-fora *),
body.visual-novo .fk-label:not(.vn-fora *) {
    font-size: calc(12px * var(--vn-escala, 1)) !important;
    font-weight: 400 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    color: var(--vn-tinta-3) !important;
}
body.visual-novo .kpi-value:not(.vn-fora *),
body.visual-novo .fk-valor:not(.vn-fora *) { font-size: calc(17px * var(--vn-escala, 1)) !important; font-weight: 600 !important; line-height: 1.3 !important; }
/* O FiscalKpi pinta o número com a cor do cartão (enfeite, uma por cartão): no visual novo, a tinta do texto. */
body.visual-novo .fk-valor:not(.vn-fora *) { color: var(--vn-tinta) !important; margin: 1px 0 0 !important; }
/* O kpi-card-modern também costuma pintar cada número de uma cor (text-info, text-warning…, ex.: Blocos): tinta
   do texto. O vermelho fica, porque diz algo (negativo, atraso). */
body.visual-novo .kpi-card-modern .kpi-value:not(.text-error):not(.mud-error-text):not([style*="error"]):not(.vn-fora *) { color: var(--vn-tinta) !important; }
body.visual-novo .kpi-sub:not(.vn-fora *),
body.visual-novo .fk-sub:not(.vn-fora *) { font-size: calc(12px * var(--vn-escala, 1)) !important; color: var(--vn-tinta-3) !important; }
body.visual-novo .insight-card .mud-avatar:has(.mud-icon-root):not(:has(img)):not(.vn-fora *) { display: none !important; }
body.visual-novo .insight-card .mud-icon-root:not(.vn-fora *) { color: var(--vn-tinta-3) !important; }

/* ============================================================================================
   TÍTULOS DE SEÇÃO E QUADROS DOS POPUPS (card-premium): letra normal, sem ícone de enfeite
   ============================================================================================ */
body.visual-novo .card-header:not(.vn-fora *) { margin-bottom: 8px !important; padding-bottom: 6px !important; border-bottom-color: var(--vn-linha) !important; gap: 6px !important; }
body.visual-novo .section-title:not(.vn-fora *),
body.visual-novo .card-header:not(.vn-fora *),
body.visual-novo .param-section-title:not(.vn-fora *) {
    text-transform: none !important;
    letter-spacing: normal !important;
    font-size: calc(13px * var(--vn-escala, 1)) !important;
    font-weight: 600 !important;
    color: var(--vn-tinta) !important;
}
body.visual-novo .section-title > .mud-icon-root:not(.vn-fora *),
body.visual-novo .card-header > .mud-icon-root:not(.vn-fora *),
body.visual-novo .param-section-title > .mud-icon-root:not(.vn-fora *) { display: none !important; }
/* Cartões das janelas (card-premium, ~83 telas): quadro de linha fina, sem faixa de enfeite. A faixa
   vermelha (accent-error) fica: ela avisa de algo destrutivo. */
body.visual-novo .card-premium:not(.vn-fora *) {
    border-radius: var(--vn-canto, 3px) !important;
    box-shadow: none !important;
    border: 1px solid var(--vn-linha) !important;
    background: var(--vn-painel) !important;
    padding: 10px 12px !important;
}
body.visual-novo .card-premium:hover:not(.vn-fora *) { box-shadow: none !important; transform: none !important; }
/* Seções da tela de Parâmetros (.param-section): o mesmo quadro de linha fina, sem canto de 12 px nem sombra. */
body.visual-novo .param-section:not(.vn-fora *) {
    border-radius: var(--vn-canto, 3px) !important;
    padding: 10px 12px !important;
    box-shadow: none !important;
    border-color: var(--vn-linha) !important;
}
body.visual-novo .param-section:hover:not(.vn-fora *) { box-shadow: none !important; }
body.visual-novo .param-section-title:not(.vn-fora *) { margin-bottom: 8px !important; padding-bottom: 6px !important; border-bottom-color: var(--vn-linha) !important; }
/* Mesma especificidade da regra do tema ERP (que pinta a faixa com o acento): este arquivo vem depois e vale. */
body.visual-novo .card-premium.accent-primary:not(.vn-fora *),
body.visual-novo .card-premium.accent-info:not(.vn-fora *),
body.visual-novo .card-premium.accent-success:not(.vn-fora *),
body.visual-novo .card-premium.accent-secondary:not(.vn-fora *),
body.visual-novo .card-premium.accent-warning:not(.vn-fora *) { border-left: 1px solid var(--vn-linha) !important; }
body.visual-novo .card-premium.accent-error:not(.vn-fora *) { border-left: 3px solid var(--mud-palette-error) !important; }

/* ---- Atalhos da página inicial (HubCard): retos e sem pulo --------------------------------------- */
body.visual-novo .hub-card:not(.vn-fora *) { border-radius: var(--vn-canto, 3px) !important; box-shadow: none !important; transform: none !important; border: 1px solid var(--vn-linha) !important; }
body.visual-novo .hub-card:not(.vn-fora *)::before { display: none !important; }

/* ---- Pesquisa rápida das grades: campo reto ----------------------------------------------------- */
body.visual-novo .grid-search-pill:not(.vn-fora *),
body.visual-novo .search-pill:not(.vn-fora *) {
    border-radius: var(--vn-canto, 3px) !important;
    border: 1px solid var(--vn-linha-2) !important;
    background: var(--vn-painel) !important;
    box-shadow: none !important;
    padding: 3px 8px !important;
}
body.visual-novo .counter-badge:not(.vn-fora *) { border-radius: var(--vn-canto, 3px) !important; background: transparent !important; border: 1px solid var(--vn-linha) !important; }

/* ---- O que vem escrito direto na tela (style inline) -------------------------------------------- */
/* Maiúsculas espaçadas: os rótulos ficam como foram escritos. */
body.visual-novo [style*="text-transform: uppercase"]:not(.vn-fora *),
body.visual-novo [style*="text-transform:uppercase"]:not(.vn-fora *) { text-transform: none !important; letter-spacing: normal !important; }
/* Faixa lateral grossa de enfeite (4 a 6 px): vira a linha comum. As de 2 e 3 px ficam (marcam situação em lista). */
body.visual-novo [style*="border-left: 4px solid"]:not(.vn-fora *),
body.visual-novo [style*="border-left:4px solid"]:not(.vn-fora *),
body.visual-novo [style*="border-left: 5px solid"]:not(.vn-fora *),
body.visual-novo [style*="border-left:5px solid"]:not(.vn-fora *),
body.visual-novo [style*="border-left: 6px solid"]:not(.vn-fora *),
body.visual-novo [style*="border-left:6px solid"]:not(.vn-fora *) {
    border-left-width: 1px !important;
    border-left-color: var(--vn-linha) !important;
}
/* Degradê escrito na tela como fundo de faixa/cartão: a cor do tema, lisa. */
body.visual-novo .mud-button-root[style*="linear-gradient"]:not(.vn-fora *) { background: var(--mud-palette-primary) !important; color: var(--mud-palette-primary-text) !important; }

/* ---- Simulador Margem: o quadro de filtros de cima sai enquanto a aba Simular pedido está à vista ------
   (a aba não usa período, bloco, tipo nem espessura, e troca a regra pelos próprios botões). */
body.visual-novo .sim-filtros-fora:not(.vn-fora *) { display: none !important; }

/* ---- Modo TV (painéis de produção, comercial e manutenção em tela cheia) --------------------------
   A TV é lida de longe: volta a escala de letra de sempre do MudBlazor e some a barra de situação. */
body.visual-novo.tv-mode-active {
    --mud-typography-default-size: .875rem;
    --mud-typography-body1-size: 1rem;
    --mud-typography-body2-size: .875rem;
    --mud-typography-subtitle1-size: 1rem;
    --mud-typography-subtitle2-size: .875rem;
    --mud-typography-caption-size: .75rem;
    --mud-typography-overline-size: .75rem;
    --mud-typography-h6-size: 1.25rem;
    --mud-typography-h6-lineheight: 1.6;
    --mud-typography-h5-size: 1.5rem;
    --mud-typography-h5-lineheight: 1.334;
    --mud-typography-h4-size: 2.125rem;
    --mud-typography-h4-lineheight: 1.235;
    --mud-typography-h3-size: 3rem;
    --mud-typography-button-size: .875rem;
    --mud-typography-button-lineheight: 1.75;
}
body.visual-novo.tv-mode-active .vn-status:not(.vn-fora *) { display: none !important; }

/* ---- Telas de fora (BI, dashboards, painéis de TV): o miolo volta à fonte e à escala de letra do tema ---- */
body.visual-novo .vn-fora {
    --mud-typography-default-family: var(--vn-orig-default-family);
    --mud-typography-h1-family: var(--vn-orig-h-family);
    --mud-typography-h2-family: var(--vn-orig-h-family);
    --mud-typography-h3-family: var(--vn-orig-h-family);
    --mud-typography-h4-family: var(--vn-orig-h-family);
    --mud-typography-h5-family: var(--vn-orig-h-family);
    --mud-typography-h6-family: var(--vn-orig-h-family);
    --mud-typography-subtitle1-family: var(--vn-orig-body1-family);
    --mud-typography-subtitle2-family: var(--vn-orig-body2-family);
    --mud-typography-body1-family: var(--vn-orig-body1-family);
    --mud-typography-body2-family: var(--vn-orig-body2-family);
    --mud-typography-button-family: var(--vn-orig-button-family);
    --mud-typography-caption-family: var(--vn-orig-caption-family);
    --mud-typography-overline-family: var(--vn-orig-caption-family);
    --mud-typography-default-size: var(--vn-orig-default-size);
    --mud-typography-body1-size: var(--vn-orig-body1-size);
    --mud-typography-body2-size: var(--vn-orig-body2-size);
    --mud-typography-subtitle1-size: var(--vn-orig-subtitle1-size);
    --mud-typography-subtitle2-size: var(--vn-orig-subtitle2-size);
    --mud-typography-caption-size: var(--vn-orig-caption-size);
    --mud-typography-overline-size: var(--vn-orig-overline-size);
    --mud-typography-h3-size: var(--vn-orig-h3-size);
    --mud-typography-h4-size: var(--vn-orig-h4-size);
    --mud-typography-h4-lineheight: var(--vn-orig-h4-lineheight);
    --mud-typography-h5-size: var(--vn-orig-h5-size);
    --mud-typography-h5-lineheight: var(--vn-orig-h5-lineheight);
    --mud-typography-h6-size: var(--vn-orig-h6-size);
    --mud-typography-h6-lineheight: var(--vn-orig-h6-lineheight);
    --mud-typography-button-size: var(--vn-orig-button-size);
    --mud-typography-button-lineheight: var(--vn-orig-button-lineheight);
    --mud-typography-button-text-transform: var(--vn-orig-button-text-transform);
    --mud-typography-button-letterspacing: var(--vn-orig-button-letterspacing);
    --mud-typography-overline-text-transform: var(--vn-orig-overline-text-transform);
    font-family: var(--vn-orig-default-family);
    font-variant-numeric: normal;
}

/* Modo TV: a tela ocupa tudo. As telas de TV zeram o espaço do topo com o peso delas; as regras da área da tela
   acima pesam mais (o :not(.vn-fora *) soma), então o zero vem de novo aqui, com peso maior. */
body.visual-novo.tv-mode-active .mud-main-content:not(.vn-fora *),
body.visual-novo.tv-mode-active .mud-main-content:not(:has(.tabs-bar)):not(.vn-fora *) { padding: 0 !important; margin: 0 !important; }

/* ============================================================================================
   LOGIN (Pages/Login.razor): cartão de sistema sobre fundo liso escuro
   O login é um MudDialog de 600 px deixado transparente, com o cartão (.login-wrapper, 420 px) dentro. A
   borda e a sombra que a pele dá a todo popup desenhavam a caixa invisível em volta do cartão (dono, com o
   print: "veja esse fundo"). E o véu cinza deixava à vista a moldura vazia atrás (barra, menu). Aqui: sem a
   caixa, fundo da cor da tela de abertura (não há nada para ver atrás antes de entrar), cartão reto.
   ============================================================================================ */
body.visual-novo .mud-dialog.login-dialog:not(.vn-fora *) {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}
/* Fundo do login: vidro fosco claro, com a tela do sistema desfocada atrás (dono, 30/09/2026: "deixe somente fosco
   igual era, com a estrutura do sistema atrás, mantendo esse tema claro"). O fosco fica desligado no resto do visual
   novo (a regra do backdrop-filter lá em cima); aqui ele volta, só neste véu. */
body.visual-novo .mud-dialog-container:has(.login-dialog) .mud-overlay-scrim:not(.vn-fora *) {
    /* Um tom acima do quase branco (dono: "pode deixar um tom mais escuro um pouco"): cinza-azulado médio-claro. */
    background-color: rgba(110, 122, 140, .35) !important;
    background-image: none !important;
    -webkit-backdrop-filter: blur(8px) saturate(1.05) !important;
    backdrop-filter: blur(8px) saturate(1.05) !important;
    opacity: 1 !important;
}
body.visual-novo .login-wrapper:not(.vn-fora *) {
    border-radius: 4px !important;
    border: 0 !important;
    box-shadow: var(--vn-sombra) !important;   /* a sombra dos popups: sobre o fosco claro, a escura pesava */
}
/* Cabeçalho do cartão sempre claro, também no tema escuro: o logo tem o "CONTROL" em cinza-escuro e sumia no fundo escuro. */
body.visual-novo .login-header:not(.vn-fora *) {
    background: #ffffff !important;
    border-bottom: 1px solid var(--vn-linha);
    padding: 22px 24px 18px !important;
}
body.visual-novo .login-header:not(.vn-fora *)::before { display: none !important; }
body.visual-novo .login-header .mud-image:not(.vn-fora *) { border-radius: 0 !important; }
body.visual-novo .step-dot:not(.vn-fora *) { border-radius: 1px !important; height: 4px !important; width: 16px !important; }
body.visual-novo .step-dot.active:not(.vn-fora *) { width: 28px !important; }
body.visual-novo .step-title:not(.vn-fora *) { font-size: calc(15px * var(--vn-escala, 1)) !important; font-weight: 600 !important; }
body.visual-novo .step-subtitle:not(.vn-fora *) { font-size: calc(12.5px * var(--vn-escala, 1)) !important; }
body.visual-novo .fade-in-step:not(.vn-fora *) { animation: none !important; }
body.visual-novo .login-wrapper .info-box:not(.vn-fora *) { border-radius: var(--vn-canto, 3px) !important; }
body.visual-novo .login-wrapper .mud-button-root:not(.mud-icon-button):not(.vn-fora *) { border-radius: var(--vn-canto, 3px) !important; }
body.visual-novo .login-wrapper .mud-button-filled:not(.vn-fora *) { height: 36px !important; font-weight: 500 !important; letter-spacing: normal !important; }
body.visual-novo .login-wrapper .divider-text:not(.vn-fora *) { text-transform: none !important; letter-spacing: normal !important; font-weight: 600 !important; font-size: calc(12px * var(--vn-escala, 1)) !important; }
body.visual-novo .login-body:not(.vn-fora *) { padding-top: 10px !important; }
body.visual-novo .login-wrapper .step-indicator:not(.vn-fora *) { margin-bottom: 6px !important; }

/* ============================================================================================
   AJUSTES DO PERSONALIZAR (V552): classes no body postas pelo MainLayout (Services/AjustesVisualNovo)
   Dono, 01/10/2026: "ponha mais personalizações". Sem classe, o desenho aprovado; cada classe muda uma ficha.
   ============================================================================================ */
/* Tamanho do texto: um fator só multiplica toda letra da pele (as variáveis de tipografia e as regras em px). */
body.visual-novo.vn-texto-p { --vn-escala: .92; }
body.visual-novo.vn-texto-g { --vn-escala: 1.08; }
body.visual-novo.vn-texto-gg { --vn-escala: 1.16; }
/* Altura das linhas das grades: o espaço em cima e embaixo da célula. */
body.visual-novo.vn-linhas-c { --vn-pad-linha: 2px; }
body.visual-novo.vn-linhas-f { --vn-pad-linha: 9px; }
/* Cantos: retos ou arredondados (o suave, 3 px, é o padrão). */
body.visual-novo.vn-cantos-r { --vn-canto: 0px; }
body.visual-novo.vn-cantos-a { --vn-canto: 8px; }
/* Barra do topo: grafite, ou clara (a cor da superfície, com letra e ícones escuros e uma linha embaixo). */
body.visual-novo.vn-barra-escura { --vn-barra: #1f2933; }
body.visual-novo.vn-barra-clara { --vn-barra: var(--mud-palette-surface); }
body.visual-novo.vn-barra-clara .mud-appbar:not(.vn-fora *) { color: var(--mud-palette-text-primary) !important; border-bottom: 1px solid var(--vn-linha) !important; }
body.visual-novo.vn-barra-clara .mud-appbar .mud-icon-button:not(.vn-fora *),
body.visual-novo.vn-barra-clara .mud-appbar .mud-icon-root:not(.vn-fora *),
body.visual-novo.vn-barra-clara .mud-appbar .mud-typography:not(.vn-fora *) { color: var(--mud-palette-text-primary) !important; }
body.visual-novo.vn-barra-clara .mud-appbar .mud-icon-button:hover:not(.vn-fora *),
body.visual-novo.vn-barra-clara .mud-appbar .mud-icon-button:active:not(.vn-fora *) { background: var(--vn-sobre) !important; }
body.visual-novo.vn-barra-clara .mud-appbar .mud-input-control .mud-input:not(.vn-fora *) { color: var(--mud-palette-text-primary) !important; border-color: var(--vn-linha-2) !important; }
body.visual-novo.vn-barra-clara .mud-appbar .mud-input-control .mud-input:hover:not(.vn-fora *) { background: var(--vn-sobre) !important; }
/* Grades zebradas: a linha par com um cinza de papel; passar o mouse continua realçando (a regra do hover pesa mais). */
body.visual-novo.vn-zebra .mud-table-root tbody tr:nth-of-type(even) > td:not(.vn-fora *) { background: color-mix(in srgb, var(--mud-palette-text-primary) 3.5%, var(--mud-palette-surface)); }
/* Sem a barra de situação do rodapé: a tela desce até o fim da janela. */
body.visual-novo.vn-sem-status { --vn-h-rodape: 0px; }
body.visual-novo.vn-sem-status .vn-status { display: none !important; }