/* Sobrescrita global de estilos MudBlazor para o Noctua PDV */

/* Safe-area do sistema (barra de navegação/gestos do Android) — evita que conteúdo no rodapé fique sobreposto */
body {
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Headers de tabela no estilo do design — uppercase, small, cinza, compacto */
.mud-table-head .mud-table-cell,
.noctua-table-header th {
    font-size: 11.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    color: var(--noc-cor-texto-terciario) !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

/* Aviso de nova versão do PWA — fixo no topo do conteúdo, acima da página */
.noc-aviso-atualizacao {
    position: sticky;
    top: 0;
    z-index: 10;
    border-radius: 0;
}

/* Botão de opção do seletor de forma de pagamento */
.noc-botao-forma-pagamento {
    text-transform: none;
    font-weight: 600;
    border-radius: 10px;
}

.noc-botao-forma-pagamento.mud-button-outlined-default {
        background-color: var(--mud-palette-surface);
    }

/* Token longo sem espaço (chave de acesso, código) quebra dentro do próprio bloco em vez de passar da borda do cartão */
.noc-texto-quebravel {
    overflow-wrap: anywhere;
}

/* Texto truncado com ellipsis — responsivo */
.noc-texto-truncado {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
}

@media (min-width: 960px) {
    .noc-texto-truncado {
        max-width: 180px;
    }
}

@media (min-width: 1280px) {
    .noc-texto-truncado {
        max-width: 260px;
    }
}

@media (min-width: 1920px) {
    .noc-texto-truncado {
        max-width: 400px;
    }
}

/* Tabela do PDV — padding horizontal reduzido */
.tabela-pdv .mud-table-cell {
    padding-left: 10px !important;
    padding-right: 10px !important;
}

/* Tabela do PDV — toolbar com altura automática para acomodar linha de cliente */
.tabela-pdv .mud-toolbar {
    height: auto;
    min-height: var(--mud-internal-toolbar-height);
    padding-top: 6px;
    padding-bottom: 6px;
}

/* AutoComplete discreto — aparência de texto-link clicável */
.noc-autocomplete-discreto {
    cursor: pointer;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 3px;
    color: var(--mud-palette-text-primary);
}

.noc-autocomplete-discreto--desabilitado {
    cursor: default;
    text-decoration: none;
    color: var(--mud-palette-text-secondary);
}

.noc-autocomplete-discreto--erro {
    color: var(--mud-palette-error);
    text-decoration-color: var(--mud-palette-error);
}

/* Item de navegação do menu lateral (link ou cabeçalho de grupo) */
.noc-nav-item {
    border-radius: 10px;
    margin: 2px 0;
    font-size: 14.5px;
    font-weight: 500;
}

/* NocConferenciaFechamentoCaixa — card de cada forma de pagamento (a grade é um MudGrid) */
.noc-conferencia-pagamento-item {
    background: var(--mud-palette-background-gray);
    border-radius: 10px;
    padding: 12px;
}

/* Linha de total, com filete separando da grade de recebimentos acima */
.noc-conferencia-total {
    padding: 12px 4px;
    margin-top: 16px;
    border-top: 1px solid var(--mud-palette-lines-default);
}

/* Caixa (saldo esperado/valor contado/diferença) — só borda, sem fundo colorido.
   height:100% + flex column centraliza o conteúdo verticalmente, para as três caixas da linha
   ficarem com a mesma altura mesmo quando só uma tem legenda auxiliar (ex.: Diferença não tem). */
.noc-conferencia-caixa {
    height: 100%;
    box-sizing: border-box;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
}

/* Grid de conteúdo do PDV — no desktop, altura travada no espaço restante (a tabela de itens rola por dentro,
   o painel de ação fica sempre visível ao lado). No empilhamento mobile (colunas xs viram xs=12, uma embaixo
   da outra), essa mesma trava esmagava o painel de ação (forma de pagamento + botões) contra o rodapé da tela. */
.noc-pdv-grid-conteudo {
    flex: 1;
    min-height: 0;
}

@media (max-width: 959.98px) {
    .noc-pdv-grid-conteudo {
        flex: none;
        min-height: auto;
    }
}

/* Folha inferior (bottom sheet) — painel que sobe do rodapé sobre um véu escurecido.
   Padrão novo de interação mobile (PDV); reaproveitável por qualquer tela que precise
   mostrar um formulário/ação sem sair do contexto da página em telas pequenas. */
.noc-folha-scrim {
    position: fixed;
    inset: 0;
    background: var(--noc-cor-veu);
    z-index: calc(var(--mud-zindex-drawer) + 1);
}

.noc-folha-inferior {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--mud-palette-surface);
    border-top: 1px solid var(--mud-palette-lines-default);
    border-radius: 16px 16px 0 0;
    box-shadow: var(--noc-sombra-folha);
    padding: 10px 20px calc(20px + env(safe-area-inset-bottom, 0px));
    max-height: 78vh;
    overflow-y: auto;
    z-index: calc(var(--mud-zindex-drawer) + 2);
}

.noc-folha-alca {
    width: 36px;
    height: 4px;
    border-radius: 999px;
    background: var(--mud-palette-lines-default);
    margin: 0 auto 14px;
}

/* Pré-visualização da câmera do leitor de código de barras (NocLeitorCodigoBarras) */
.noc-leitor-video {
    width: 100%;
    max-height: 50vh;
    object-fit: cover;
    border-radius: 12px;
    background: #000;
}

/* Barra fixa no rodapé do PDV mobile — resumo do total + CTA que abre a NocFolhaInferior */
.noc-pdv-barra-inferior {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--mud-palette-surface);
    border-top: 1px solid var(--mud-palette-lines-default);
    box-shadow: var(--noc-sombra-barra);
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    z-index: var(--mud-zindex-drawer);
}

/* Área rolável do PDV mobile — respiro no fim para não ficar atrás da barra fixa */
.noc-pdv-mobile-conteudo {
    padding-bottom: 88px !important;
}

/* Busca de produto (campo + botão do leitor): no ToolBarContent da tabela (desktop) ocupa a largura toda. */
.noc-pdv-busca {
    flex: 1 1 auto;
}

/* No mobile ela é filho direto de um MudStack em coluna: sem essa trava o grow absorve todo o espaço
   vertical livre (o MudBlazor também dá flex-grow:1 ao .mud-select) e empurra os cards de item pra baixo
   do container rolável. */
.noc-pdv-mobile-conteudo > .noc-pdv-busca {
    flex: none;
}

/* Cartão de item da venda no PDV mobile */
.noc-pdv-item-card + .noc-pdv-item-card {
    margin-top: 8px;
}

/* Item do carrinho cujo produto não existe mais: borda à esquerda na cor de erro e o texto "remova" abaixo da descrição */
.noc-item-ausente {
    box-shadow: inset 3px 0 0 var(--mud-palette-error);
}

/* Página Sobre — cartão único em spread: coluna de marca (Deflagra) + coluna de versões */
.noc-sobre-coluna-marca {
    background: var(--mud-palette-background-gray);
    padding: 40px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 16px;
}

.noc-sobre-anel-externo {
    width: 168px;
    height: 168px;
    border-radius: 50%;
    border: 1px solid var(--mud-palette-lines-default);
    display: flex;
    align-items: center;
    justify-content: center;
}

.noc-sobre-anel-interno {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    border: 1px solid var(--mud-palette-divider);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Caixa escura para o logo da Deflagra (traços brancos/verdes, precisa de fundo escuro em qualquer tema —
   cor de marca de terceiro fixa, não é token do projeto) */
.noc-sobre-logo-deflagra {
    width: 92px;
    height: 92px;
    background-color: #1A1A2E;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.noc-sobre-logo-deflagra img {
        width: 52px;
        height: 52px;
        object-fit: contain;
    }

.noc-sobre-marca-nome {
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--noc-cor-texto-terciario);
}

.noc-sobre-texto {
    max-width: 300px;
}

.noc-sobre-coluna-versoes {
    padding: 32px 24px;
}

.noc-sobre-estatistica {
    padding: 12px 0;
}

.noc-sobre-estatistica-rotulo {
    margin-bottom: 8px;
}

.noc-sobre-estatistica-valor {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 44px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
    line-height: 1;
}

.noc-sobre-estatistica-prefixo {
    font-size: 20px;
    color: var(--noc-cor-texto-terciario);
    font-weight: 500;
}

.noc-sobre-estatistica-carregando {
    display: flex;
    align-items: center;
    gap: 12px;
}

.noc-sobre-divisor {
    margin: 4px 0;
}

@media (max-width: 600px) {
    .noc-sobre-coluna-marca {
        padding: 24px 16px;
    }

    .noc-sobre-anel-externo {
        width: 140px;
        height: 140px;
    }

    .noc-sobre-anel-interno {
        width: 108px;
        height: 108px;
    }

    .noc-sobre-logo-deflagra {
        width: 78px;
        height: 78px;
    }

        .noc-sobre-logo-deflagra img {
            width: 44px;
            height: 44px;
        }

    .noc-sobre-coluna-versoes {
        padding: 20px 16px;
    }

    .noc-sobre-estatistica-valor {
        font-size: 36px;
    }
}

/* Formulário que ocupa a altura que sobra no painel lateral (os filhos com flex dividem o resto). */
.noc-form-preenche {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* O MudStack não tem classe própria: o corpo do formulário leva esta. */
.noc-form-preenche-corpo {
    flex: 1 1 auto;
    min-height: 0;
}

/* .mud-input-control tem flex-grow:1 global: filho direto de coluna flex incha e rouba a altura que sobra dos blocos. */
.noc-form-preenche-corpo > .mud-input-control,
.noc-picklist-bloco > .mud-input-control {
    flex: none;
}

/* Picklist (ex.: tags disponíveis × tags do grupo): cada bloco divide por igual a altura restante e a lista rola. */
.noc-picklist-bloco {
    flex: 1 1 0;
    min-height: 160px;
}

.noc-picklist {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
}

/* O ícone do item (+ / −) fica à direita do texto. */
.noc-picklist-lista .mud-list-item-icon {
    order: 2;
    min-width: 0;
    margin-inline-start: auto;
}

/* Coluna de ações da tabela: estreita e na extremidade direita (cabeçalho e célula). */
.mud-table .mud-table-cell.noc-tabela-acoes {
    width: 1%;
    white-space: nowrap;
    text-align: center;
}

/* Célula secundária de tabela — texto discreto (ex.: unidade, código de barras) */
.noc-tabela-secundario {
    color: var(--mud-palette-text-secondary);
}

/* Texto numérico tabular — alinhamento consistente de dígitos */
.noc-tabela-numerico {
    font-variant-numeric: tabular-nums;
}

/* Texto com peso 600 — recorrente em células e labels de destaque */
.noc-texto-forte {
    font-weight: 600;
}

/* Texto com peso 500 — destaque discreto (ex.: nome em linha de tabela) */
.noc-texto-medio {
    font-weight: 500;
}

/* Botão de texto com altura fixa (alinhamento com NocBotaoProcessar ao lado) */
.noc-botao-altura-46 {
    height: 46px;
}

/* Grid de cards de conferência do caixa (Operação de Caixa) — 5 cards: 5 colunas a partir de 1200px;
   abaixo, 2 colunas com o card de recebimento total ocupando a última linha inteira (sem card sobrando). */
.noc-caixa-resumo {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}

@media (max-width: 1199.98px) {
    .noc-caixa-resumo {
        grid-template-columns: 1fr 1fr;
    }

    .noc-caixa-resumo > .noc-caixa-resumo-card--destaque {
        grid-column: 1 / -1;
    }
}

.noc-caixa-resumo-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.noc-caixa-resumo-card--destaque {
    background: var(--mud-palette-primary-lighten);
    border-color: transparent;
}

.noc-caixa-resumo-card--alerta {
    border-color: var(--mud-palette-error);
}

.noc-caixa-resumo-icone {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.noc-caixa-resumo-icone--neutro {
    background: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-secondary);
}

.noc-caixa-resumo-icone--info {
    background: var(--mud-palette-info-lighten);
    color: var(--mud-palette-info);
}

.noc-caixa-resumo-icone--perigo {
    background: var(--mud-palette-error-lighten);
    color: var(--mud-palette-error);
}

.noc-caixa-resumo-icone--sucesso {
    background: var(--mud-palette-success-lighten);
    color: var(--mud-palette-success);
}

.noc-caixa-resumo-icone--primario {
    background: var(--mud-palette-surface);
    color: var(--noc-cor-primario-tinta);
}

/* Alerta de vendas não pagas no caixa fechado */
.noc-caixa-alerta {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    background: var(--mud-palette-warning-lighten);
    border: 1px solid var(--mud-palette-warning);
    border-radius: 10px;
}

/* Caixa de saldo esperado no dialog de fechamento de caixa */
.noc-caixa-saldo-esperado {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    background: var(--mud-palette-background);
    border-radius: 10px;
    margin-top: 16px;
}

/* Linha de opção com switch (ex.: "Vendido por peso") — borda e fundo sutil */
.noc-linha-opcao {
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-background-gray);
}

/* Conteúdo com overflow oculto (ex.: cartão com lista rolável) */
.noc-overflow-oculto {
    overflow: hidden;
}

/* Item de lista com borda inferior (ex.: linha de item de venda) */
.noc-item-com-borda {
    border-bottom: 1px solid var(--mud-palette-table-lines);
}

/* Item com borda completa e cantos arredondados (ex.: linha de pagamento) */
.noc-item-com-borda-completa {
    border: 1px solid var(--mud-palette-divider);
    border-radius: 10px;
}

/* Linha de fechamento de uma lista (ex.: total de itens, troco) — só a borda superior separa do restante */
.noc-linha-total {
    border-top: 1px solid var(--mud-palette-divider);
}

/* Texto terciário — mais discreto que o secundário (ex.: multiplicador de quantidade) */
.noc-texto-terciario {
    color: var(--noc-cor-texto-terciario);
}

/* Elemento flexível que ocupa o espaço restante numa MudStack Row */
.noc-flex-1 {
    flex: 1;
}

/* Botão de editar peso (produto fracionado) — sem uppercase, peso 600, largura mínima */
.noc-botao-peso {
    text-transform: none;
    font-weight: 600;
    min-width: 84px;
}

/* Linha de forma de pagamento (pagamento misto) — fundo sutil */
.noc-linha-pagamento {
    background: var(--mud-palette-background-gray);
}

/* Caixa de destaque do troco (pagamento único) */
.noc-caixa-troco {
    background: var(--mud-palette-primary-lighten);
}

/* Entrelinha apertada (ex.: valor total em destaque grande) */
.noc-linha-apertada {
    line-height: 1.1;
}

/* Ícone vazio suave (ex.: lista sem registros) */
.noc-icone-vazio {
    font-size: 52px;
    color: var(--noc-cor-icone-vazio);
}

/* Fonte monoespaçada para valores monetários (--font-mono do mock) — alinhamento visual de dígitos */
.noc-fonte-mono {
    font-family: var(--noc-fonte-mono);
}

/* Tela de Login — split-screen (marketing + chamada para o Entra External ID) */
.noc-login-tela {
    min-height: 100vh;
    width: 100%;
    display: flex;
    position: relative;
    overflow: hidden;
    background: var(--mud-palette-primary-lighten);
}

/* Marca d'água — mosaico do símbolo da coruja, repetido e inclinado, fundo só do painel de login
   (.noc-login-acao recorta via overflow: hidden — no mobile as colunas empilham, então isso já limita
   a marca d'água à área abaixo do carrossel, sem tocar a coluna de marketing). */
.noc-login-marca-dagua {
    position: absolute;
    inset: -20%;
    background-image: url('../assets/coruja-mark.png');
    background-repeat: repeat;
    background-size: 52px 80px;
    opacity: .1;
    transform: rotate(-12deg);
    pointer-events: none;
}

.noc-login-marketing {
    flex: 1.1;
    padding: 48px 44px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    z-index: 1;
}

.noc-login-marca {
    margin-bottom: 20px;
}

.noc-login-marca-badge {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--mud-palette-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.noc-login-marca-logo {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

.noc-login-marca-nome {
    color: var(--mud-palette-text-primary);
}

.noc-login-frase {
    max-width: 420px;
    margin: 0;
    line-height: 1.35;
    color: var(--mud-palette-text-primary);
}

.noc-login-carrossel {
    margin-top: auto;
    max-width: 420px;
}

.noc-login-carrossel-viewport {
    overflow: hidden;
}

.noc-login-carrossel-trilha {
    display: flex;
    transition: transform .5s cubic-bezier(.4, 0, .2, 1);
}

.noc-login-carrossel-card {
    flex: 0 0 100%;
    width: 100%;
    box-sizing: border-box;
}

.noc-login-carrossel-icone {
    font-size: 26px;
    margin-bottom: 12px;
}

.noc-login-dots {
    gap: 6px !important;
    margin-top: 16px;
}

.noc-login-dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--mud-palette-primary);
    opacity: .3;
    transition: width .2s, opacity .2s;
}

.noc-login-dot--ativo {
    width: 18px;
    opacity: 1;
}

.noc-login-acao {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px;
    position: relative;
    overflow: hidden;
}

.noc-login-cartao-login {
    width: 100%;
    max-width: 360px;
    position: relative;
    z-index: 1;
}

.noc-login-lockup {
    display: block;
    width: 84px;
    margin: 0 auto 20px;
    object-fit: contain;
}

.noc-login-subtitulo {
    line-height: 1.5;
}

.noc-login-confianca {
    margin: 20px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--mud-palette-divider);
}

.noc-login-confianca-ponto {
    font-size: 20px;
    line-height: 1;
}

.noc-login-termos {
    display: block;
    text-align: center;
    margin-top: 16px;
    line-height: 1.6;
}

@media (max-width: 599.98px) {
    .noc-login-tela {
        flex-direction: column;
    }

    .noc-login-marketing {
        order: 2;
        padding: 24px 20px;
        flex: none;
    }

    .noc-login-marca {
        display: none !important;
    }

    .noc-login-marca-badge {
        width: 32px;
        height: 32px;
    }

    .noc-login-marca-logo {
        width: 18px;
        height: 18px;
    }

    .noc-login-frase {
        display: none;
    }

    .noc-login-carrossel {
        margin-top: 0;
        max-width: 100%;
    }


    .noc-login-carrossel-icone {
        font-size: 20px;
        margin-bottom: 0;
        flex: none;
    }

    .noc-login-carrossel-titulo {
        font-size: 13.5px;
    }

    .noc-login-acao {
        order: 1;
        padding: 24px 20px 28px;
        align-items: flex-start;
    }

    .noc-login-cartao-login {
        max-width: 100%;
        padding: 24px 20px !important;
    }

    .noc-login-subtitulo-extra {
        display: none;
    }

    .noc-login-confianca {
        display: none !important;
    }
}

/* Dialog de quantidade fracionada — dois campos (peso/valor) fortemente diferenciados por cor */
.noc-quantidade-grupo {
    border-left: 3px solid transparent;
    padding-left: 10px;
}

.noc-quantidade-rotulo {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 2px;
}

.noc-quantidade-grupo:has(.noc-quantidade-rotulo--peso) {
    border-color: var(--mud-palette-primary);
}

.noc-quantidade-grupo:has(.noc-quantidade-rotulo--valor) {
    border-color: var(--mud-palette-secondary);
}

.noc-quantidade-conversor {
    padding-left: 10px;
}

/* Cartão de identificação do usuário (avatar + nome + email) — fundo sutil */
.noc-caixa-usuario {
    background: var(--mud-palette-background-gray);
}

/* Campo de entrada de dado técnico (ex.: máscara de etiqueta, código de barras) */
.noc-input-monospace input {
    font-family: monospace;
}

/* Botão de acordeão (ex.: seção de Tributação expansível) — flat, sem fundo/borda */
.noc-botao-acordeon {
    justify-content: space-between;
    padding: 8px 4px;
}

/* Avatar de iniciais do usuário (ShellAutenticado) */
.noc-avatar-usuario {
    background: var(--mud-palette-primary-lighten);
    color: var(--noc-cor-primario-tinta);
    font-weight: 700;
    font-size: 12px;
}

/* Cabeçalho de nome/papel dentro do menu do usuário (mobile) — só visualização, sem ação */
.noc-menu-usuario-cabecalho,
.noc-menu-usuario-cabecalho * {
    cursor: default;
}

.noc-menu-usuario-cabecalho {
    align-items: flex-start;
}

/* Texto/ícone de erro (ex.: item "Sair" do menu) */
.noc-texto-erro {
    color: var(--mud-palette-error);
}

/* Cabeçalho de seção do menu de navegação lateral (acordeão) */
.noc-nav-grupo {
    margin-bottom: 4px;
}

.noc-nav-secao {
    font-weight: 700;
    color: var(--noc-cor-texto-terciario);
}

.noc-nav-secao-icone {
    margin: 0 auto;
    color: var(--noc-cor-texto-terciario);
}

/* Marca no cabeçalho do menu lateral (ShellAutenticado) — fica fixa mesmo se a navegação rolar */
.noc-drawer-marca {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--mud-palette-drawer-background);
}

.mud-drawer--closed.mud-drawer-mini .noc-drawer-marca {
    justify-content: center;
    padding: 16px 8px;
}

.noc-drawer-marca-icone {
    width: 28px;
    height: 28px;
    object-fit: contain;
    flex: none;
    border-radius: 6px;
}

/* Chip discreto de papel do usuário (Administrador/Gerente/Operador) — app bar e menu de identidade */
.noc-chip-papel {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    font-size: 11px;
    font-weight: 700;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--mud-palette-primary-lighten);
    color: var(--noc-cor-primario-tinta);
}

/* Stepper da importação no celular: só o passo ativo mostra o rótulo (os três não cabem em 390px) */
@media (max-width: 599.98px) {
    .noc-stepper-compacto .mud-step:not(.active) .mud-step-label-content {
        display: none;
    }
}

/* Cartão de atalho da Dashboard — ícone + título (+ subtítulo opcional) */
.noc-atalho {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 20px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 14px;
    background: var(--mud-palette-surface);
    text-decoration: none;
    transition: background .15s ease;
    height: 100%;
}

/* O título herda a cor do <a>, e MudLink injeta `mud-primary-text` com `!important`
   (Color default Primary) — um `color: inherit` nunca vence, o título saía roxo. Precisa de
   `!important` + especificidade, como a variante --destaque abaixo. */
a.noc-atalho {
    color: var(--mud-palette-text-primary) !important;
}

.noc-atalho:hover {
        background: var(--mud-palette-background-gray);
    }

.noc-atalho-icone {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mud-palette-primary-lighten);
    color: var(--noc-cor-primario-tinta);
    flex: none;
}

.noc-atalho-subtitulo {
    color: var(--mud-palette-text-secondary);
}

/* Atalho em destaque (ação mais frequente da tela — PDV). Especificidade composta + !important:
   MudLink sempre injeta `mud-{Color}-text` com `color: ... !important` (default Color.Primary). */
.noc-atalho.noc-atalho--destaque {
    flex-direction: row;
    align-items: center;
    gap: 16px;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text) !important;
}

.noc-atalho--destaque .noc-atalho-icone {
    width: 52px;
    height: 52px;
    background: var(--mud-palette-primary-darken);
    color: var(--mud-palette-primary-text);
}

.noc-atalho--destaque .noc-atalho-subtitulo {
    color: var(--mud-palette-primary-text);
    opacity: .85;
}

/* Pílula arredondada do item de navegação (hover e ativo) — igual ao mock */
.noc-nav-item .mud-nav-link {
    border-radius: 10px;
}

/* Item ativo do menu lateral — pílula lavanda com texto/ícone roxo, igual ao mock.
   A regra padrão do MudNavMenu (fundo cinza) compila como
   `.mud-navmenu.mud-navmenu-default .mud-nav-link.active:not(.mud-nav-link-disabled)`
   (especificidade 0,5,0); por isso o seletor abaixo carrega `.mud-navmenu.mud-navmenu-default`
   + `.noc-nav-item` (0,6,0) para vencer tanto em itens de topo quanto em subitens. */
.mud-navmenu.mud-navmenu-default .noc-nav-item .mud-nav-link.active:not(.mud-nav-link-disabled) {
    color: var(--noc-cor-primario-tinta);
    background-color: var(--mud-palette-primary-lighten);
}

.mud-navmenu.mud-navmenu-default .noc-nav-item .mud-nav-link.active:not(.mud-nav-link-disabled) .mud-nav-link-icon {
        color: var(--noc-cor-primario-tinta);
    }

/* Grupo recolhido (mini) com subitem ativo — destaca o ícone do grupo mesmo fechado */
.mud-drawer--closed.mud-drawer-mini .mud-nav-group:has(.mud-nav-link.active) > .mud-nav-link {
    background-color: var(--mud-palette-primary-lighten);
    border-radius: 10px;
    margin: 0 4px;
}

.mud-drawer--closed.mud-drawer-mini .mud-nav-group:has(.mud-nav-link.active) > .mud-nav-link .mud-nav-link-icon {
        color: var(--noc-cor-primario-tinta);
    }

/* Páginas legais (Termos de Uso, Política de Privacidade) */
.legal-fundo {
    min-height: 100vh;
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 40px 24px;
    background-color: var(--mud-palette-background);
}

.legal-card {
    width: 100%;
    max-width: 720px;
    border-radius: 16px !important;
    padding: 32px 36px;
}

.legal-logo {
    width: 72px;
    height: 72px;
    object-fit: contain;
    margin-bottom: 8px;
}

/* Régua visual da máscara de etiqueta de balança (Estabelecimento) — cada posição colorida por papel */
.noc-mascara-regua {
    display: flex;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: var(--mud-default-borderradius);
    overflow: hidden;
    font-family: monospace;
    margin-top: 8px;
}

.noc-mascara-posicao {
    flex: 1 1 0;
    text-align: center;
    padding: 5px 2px;
    font-size: 12px;
    font-weight: 700;
    border-right: 1px solid var(--mud-palette-divider);
    background: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-secondary);
}

.noc-mascara-posicao:last-child {
        border-right: none;
    }

.noc-mascara-posicao--codigo {
    background: var(--mud-palette-primary-lighten);
    color: var(--noc-cor-primario-tinta);
}

.noc-mascara-posicao--valor {
    background: var(--mud-palette-info-lighten);
    color: var(--mud-palette-info-darken);
}

.noc-mascara-legenda {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    margin-top: 8px;
}

.noc-mascara-legenda b {
        font-family: monospace;
    }

.noc-mascara-legenda .noc-mascara-legenda-codigo {
        color: var(--noc-cor-primario-tinta);
    }

.noc-mascara-legenda .noc-mascara-legenda-valor {
        color: var(--mud-palette-info-darken);
    }

/* MudAlert com token longo sem espaço (CNPJ, thumbprint) — evita que o texto force
   o alerta a estourar a largura do card no mobile (flex item não encolhe sem min-width:0) */
.noc-alerta-quebravel {
    overflow-wrap: anywhere;
}

.noc-alerta-quebravel .mud-alert-position {
        min-width: 0;
    }

/* MudCheckBox com Label longo (2+ linhas) — alinha o ícone à primeira linha do texto
   em vez de centralizar contra o bloco inteiro (mud-checkbox usa align-items:center) */
.noc-checkbox-rotulo-longo .mud-checkbox {
    align-items: flex-start;
}

.noc-checkbox-rotulo-longo .mud-checkbox .mud-typography {
        white-space: normal;
        padding-top: 12px;
        font-weight: 900 !important;
    }

/* Dashboard — bloco de dado (caixa, dia, fiscal, rascunhos). Coluna flexível para que o
   rodapé (se houver) fique colado na base mesmo com blocos de altura desigual na mesma linha. */
.noc-bloco-dashboard {
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100%;
}

/* Bloco em estado "indisponível" — borda de aviso, nunca vermelha (é desconhecimento, não erro) */
.noc-bloco-dashboard--aviso {
    border-color: var(--mud-palette-warning);
}

.noc-bloco-dashboard-rodape {
    padding-top: 12px;
    margin-top: auto;
    border-top: 1px solid var(--mud-palette-divider);
}

/* Corpo do bloco (conteúdo + rodapé) — ocupa o espaço restante e serve de referência de
   posicionamento para o overlay de "indisponível", que só cobre o corpo, não o cabeçalho.
   min-height evita que o corpo encolha pro tamanho do rodapé quando o conteúdo normal está
   vazio (estado indisponível) — sem isso o overlay, que ocupa 100% do corpo, fica espremido. */
.noc-bloco-dashboard-corpo {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
    position: relative;
    min-height: 180px;
}

.noc-bloco-dashboard-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    padding: 16px;
    background: var(--mud-palette-surface);
    border-radius: 10px;
}

/* Link contextual no rodapé de um bloco do Dashboard (ex.: "Operação de Caixa >") */
.noc-link-bloco {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-weight: 600;
    font-size: 13px;
    color: var(--mud-palette-primary) !important;
}

/* Ícone circular contornado (pendência/indisponibilidade/confirmação) nos blocos do Dashboard */
.noc-anel-icone {
    width: 32px;
    height: 32px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1.5px solid;
}

.noc-anel-icone--aviso {
    border-color: var(--mud-palette-warning);
    color: var(--mud-palette-warning);
}

.noc-anel-icone--erro {
    border-color: var(--mud-palette-error);
    color: var(--mud-palette-error);
}

.noc-anel-icone--sucesso {
    border-color: var(--mud-palette-success);
    color: var(--mud-palette-success);
}

/* Linha de itens em uma lista — divisor entre linhas, sem um antes da primeira */
.noc-linha-divisora {
    padding: 6px 0;
    border-top: 1px solid var(--mud-palette-divider);
}

.noc-linha-divisora:first-of-type {
    border-top: none;
    padding-top: 0;
}

.noc-fundo-arredondado {
    background: var(--mud-palette-background-gray);
    border-radius: 6px;
    padding: 0px 6px;
}

/* O MudStepper do checkout dá 24px de cada lado ao conteúdo e ao cabeçalho dos passos; no celular isso
   come a largura dos cards. */
@media (max-width: 599.98px) {
    .noc-assinatura-checkout .mud-stepper-content {
        padding-left: 0;
        padding-right: 0;
    }

    .noc-assinatura-checkout .mud-stepper-nav .mud-step {
        padding-left: 8px;
        padding-right: 8px;
    }
}

/* Tela Assinatura — cards da vitrine (plano e licença avulsa) */
.noc-assinatura-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px;
    border-radius: 16px;
}

.noc-assinatura-card-clicavel {
    cursor: pointer;
}

.noc-assinatura-card-selecionado {
    border-color: var(--mud-palette-primary) !important;
    border-width: 2px;
}

.noc-assinatura-oferta {
    min-width: 0;
    min-height: 44px;
    text-transform: none;
}

.noc-assinatura-informacoes,
.noc-assinatura-botao {
    text-transform: none;
}

/* Painel inteiro (abas + itens) trava enquanto o checkout processa (checkout.Processando) — sem isso
   sobra uma janela entre clicar "Continuar" e a simulação responder em que o catálogo continua
   clicável. */
.noc-assinatura-catalogo-bloqueado {
    opacity: 0.6;
    pointer-events: none;
}

/* Fatia 52 — tela de licenças, espelha o mock Licencas.dc.html do Claude Design */
.noc-licenca-segmento {
    flex: 1;
    height: 8px;
    border-radius: 999px;
    background: var(--mud-palette-background-gray);
}

/* !important necessário: NocCartao Padding="0" gera a classe utilitária `pa-0` do MudBlazor, que
   aplica `padding: 0 !important` — sem isso, o card fica sem respiro nenhum (achado com prints
   comparando o mock ao Noctua). */
.noc-licenca-card {
    position: relative;
    text-align: center;
    padding: 28px 20px 20px !important;
    border-width: 2px;
}

.noc-licenca-card-conteudo {
    width: 100%;
}

.noc-licenca-card--vigente {
    border-color: var(--mud-palette-success);
    box-shadow: 0 0 0 3px var(--mud-palette-success-lighten);
}

.noc-licenca-card--vence-em-breve {
    border-color: var(--mud-palette-warning);
    box-shadow: 0 0 0 3px var(--mud-palette-warning-lighten);
}

.noc-licenca-card--vencida {
    border-color: var(--mud-palette-error);
    box-shadow: 0 0 0 3px var(--mud-palette-error-lighten);
}

.noc-licenca-card--nunca-contratada {
    border-style: dashed;
    border-color: var(--mud-palette-lines-inputs);
    box-shadow: none;
    background: var(--mud-palette-background);
}

.noc-licenca-tag {
    position: absolute;
    top: -12px;
    right: 16px;
}

.noc-licenca-hex {
    width: 64px;
    height: 64px;
    flex: none;
    clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.noc-licenca-hex-interno {
    width: 54px;
    height: 54px;
    clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
    background: var(--mud-palette-surface);
    display: flex;
    align-items: center;
    justify-content: center;
}

.noc-licenca-hex-grande {
    width: 96px;
    height: 96px;
}

.noc-licenca-hex-grande .noc-licenca-hex-interno {
        width: 82px;
        height: 82px;
    }

.noc-licenca-vbar {
    height: 6px !important;
    border-radius: 999px;
}

.noc-licenca-hero {
    border-radius: 14px;
    background: var(--mud-palette-background-gray);
}

/* Tela "Selecionar estabelecimento" (Fatia 46) — carta de loja (desktop) e linha de loja (mobile) */
.noc-loja-carta-corpo {
    height: 100%;
}

.noc-loja-monograma {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    background: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 800;
}

.noc-loja-carta-rodape {
    padding-top: 12px;
    border-top: 1px solid var(--mud-palette-divider);
    color: var(--mud-palette-text-secondary);
}

.noc-loja-icone {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.noc-loja-carta:hover,
.noc-loja-linha:hover {
    border-color: var(--mud-palette-primary);
}

.noc-loja-carta:hover .noc-loja-monograma,
    .noc-loja-linha:hover .noc-loja-icone {
        background: var(--mud-palette-primary-lighten);
        color: var(--noc-cor-primario-tinta);
    }

/* Badge do sino (NocSinoNotificacoes): neutro forte — texto/superfície do tema, que inverte sozinho
   nos dois temas. Não é vermelho (colidiria com a severidade Crítico) nem roxo (reservado para ação).
   Os Color do Mud não servem: Dark quase some sobre a app bar escura. */
.mud-badge-wrapper .mud-badge.noc-sino-badge {
    background: var(--mud-palette-text-primary);
    color: var(--mud-palette-surface);
    font-weight: 700;
    /* Mais perto do sino: sobe/desce e recua em relação ao canto do botão (propriedade `translate`, não mexe no transform do Mud). */
    translate: -6px 6px;
}

/* Afasta o popover do sino da app bar. O MudPopover não tem prop de offset e posiciona por top/left inline
   (margin e padding da âncora não surtiram efeito); `translate` é independente disso. */
.noc-popover-sino {
    translate: 0 16px;
}

/* Cartão de resumo da fatura de crediário (NocResumoCrediario, Fatia 74) */
.noc-resumo-linha {
    row-gap: 16px;
}

/* 40px preenchido — não confundir com o NocAnelIcone (32px contornado) do Dashboard */
.noc-resumo-anel {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.noc-resumo-anel--deve {
    background: var(--mud-palette-primary-lighten);
    color: var(--noc-cor-primario-tinta);
}

.noc-resumo-anel--ok {
    background: var(--mud-palette-success-lighten);
    color: var(--mud-palette-success);
}

.noc-resumo-anel--favor {
    background: var(--mud-palette-warning-lighten);
    color: var(--mud-palette-warning);
}

/* flex:1 1 0% (não só flex-grow:1) é o que importa aqui: com flex-basis:auto (o que
   .flex-grow-1 do MudBlazor deixa), o algoritmo de quebra de um flex container com Wrap
   usa a largura do CONTEÚDO (a linha da meta inteira, sem quebrar) pra decidir se cabe —
   então em telas estreitas o bloco de texto quebrava inteiro pra uma nova linha, separando
   o anel do rótulo/valor. Com flex-basis:0, o item nasce sem tamanho preferido e cresce
   só com o espaço que sobrar do anel; o texto que não couber quebra *dentro* da própria
   coluna (a meta vira 2 linhas), sem arrastar o anel. */
.noc-resumo-texto {
    flex: 1 1 0%;
    min-width: 0;
}

/* Barra de total fixa no rodapé da aba Em aberto, no mobile (Fatia 74) — position:fixed
   (não sticky), mesmo padrão de .noc-pdv-barra-inferior: escapa
   do padding/max-width do NocPaginaConteudo pra ficar colada nas bordas da viewport. */
.noc-crediario-total-mobile {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    background: var(--mud-palette-surface);
    border-top: 1px solid var(--mud-palette-lines-default);
    box-shadow: var(--noc-sombra-barra);
    z-index: var(--mud-zindex-drawer);
}

/* A barra de total ocupa a base da tela: o botão flutuante da ação principal sobe para ficar acima dela */
body:has(.noc-crediario-total-mobile) .noc-barra-acoes-fab {
    bottom: 76px;
}

/* Respiro no fim da lista pra não deixar o último cartão atrás da barra fixa acima */
@media (max-width: 600px) {
    .noc-crediario-emaberto {
        padding-bottom: 76px;
    }
}

/* Linhas divisórias da faixa de totais do Extrato (Fatia 74, mock crediario-cliente.dc.html):
   MudDivider Vertical+FlexItem de verdade (align-self:stretch), não borda em MudItem — borda em
   MudGrid deixa um vão sem linha no gutter entre linhas (padding-based, sem elemento), e a vertical
   parava antes de chegar na horizontal. Divider explícito cobre a altura real da linha. */
.noc-extrato-totais-linha {
    align-items: stretch;
}

/* Valor monetário que nunca quebra entre "R$" e o número */
.noc-valor-sem-quebra {
    white-space: nowrap;
}

.noc-extrato-totais-col {
    flex: 1 1 0%;
    min-width: 0;
    padding: 0 16px;
}

.noc-extrato-totais-col:first-child {
    padding-left: 0;
}

.noc-extrato-totais-col:last-child {
    padding-right: 0;
}

/* Tela "Quem está usando" (Fatia 49) — leque de cartões (exceção deliberada ao padrão, a pedido).
   Todos os cartões são absolutos dentro do palco e posicionados por transform, em AMBOS os estados —
   é isso que faz a passagem grade → leque animar (mesma propriedade, só muda o valor).
   Variáveis por cartão (inline): --i (índice), --dd (distância ao escolhido, com sinal). Do palco: --n. */
.noc-quem-usa {
    position: relative;
    min-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none;
}

/* Fundo clicável (volta à grade): irmão dos cartões, nunca ancestral — assim o clique num cartão,
   campo ou botão não tem como chegar nele. */
.noc-quem-usa-fundo {
    position: absolute;
    inset: 0;
}

.noc-quem-usa-conteudo {
    position: relative;
    width: 100%;
    pointer-events: none;
}

.noc-quem-usa-conteudo .noc-operador,
.noc-quem-usa-conteudo .noc-operadores-outra,
.noc-quem-usa-conteudo .noc-quem-usa-terminal {
    pointer-events: auto;
}

.noc-operadores {
    --cols: 3;
    --linhas: round(up, calc(var(--n) / var(--cols)), 1);
    position: relative;
    height: calc(var(--linhas) * 200px + (var(--linhas) - 1) * 16px);
    transition: height .45s cubic-bezier(.2, .8, .2, 1);
}

@media (min-width: 900px) {
    .noc-operadores {
        --cols: 4;
    }
}

@media (max-width: 600px) {
    .noc-operadores {
        --cols: 2;
    }
}

.noc-operador {
    --lin: round(down, calc(var(--i) / var(--cols)), 1);
    --col: mod(var(--i), var(--cols));
    --naLinha: min(var(--cols), calc(var(--n) - var(--lin) * var(--cols)));
    position: absolute;
    left: 50%;
    top: 0;
    width: 168px;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 32px 16px 20px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    text-align: center;
    cursor: pointer;
    outline: none;
    user-select: none;
    transform-origin: center top;
    transform: translate(calc(-50% + (var(--col) - (var(--naLinha) - 1) / 2) * 184px), calc(var(--lin) * 216px)) scale(1);
    transition: transform .5s cubic-bezier(.2, .8, .2, 1), opacity .35s, border-color .2s, box-shadow .2s;
}

.noc-operador:hover,
.noc-operador:focus-visible {
    border-color: var(--mud-palette-primary);
}

.noc-operador:focus-visible {
    box-shadow: 0 0 0 3px var(--mud-palette-primary-lighten);
}

.noc-operador-avatar.mud-avatar {
    width: 64px;
    height: 64px;
    font-size: 24px;
    flex: none;
    transition: width .45s cubic-bezier(.2, .8, .2, 1), height .45s cubic-bezier(.2, .8, .2, 1), font-size .45s;
}

.noc-operador-nome {
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.noc-operador-extra {
    width: 100%;
    cursor: default;
    animation: noc-operador-extra-entra .3s .15s both;
}

@keyframes noc-operador-extra-entra {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* O cartão tem ~134px úteis: o botão com ícone quebrava em duas linhas ("DEFINIR / PIN") */
.noc-operador-extra .mud-button-root {
    white-space: nowrap;
    padding-inline: 8px;
}

.noc-operador-pin input {
    text-align: center;
    letter-spacing: 8px;
}

/* Leque: o escolhido no centro, à frente; os outros recuam, menores e esmaecidos */
.noc-operadores-leque {
    height: 360px;
}

.noc-operadores-leque .noc-operador {
    transform: translate(calc(-50% + var(--dd) * 121px), 24px) scale(.7);
    opacity: 0;
    pointer-events: none;
    z-index: 1;
}

.noc-operadores-leque .noc-operador-d1 {
    transform: translate(calc(-50% + var(--dd) * 121px), 24px) scale(.84);
    opacity: .55;
    pointer-events: auto;
    z-index: 9;
}

.noc-operadores-leque .noc-operador-d2 {
    opacity: .2;
    pointer-events: auto;
    z-index: 8;
}

.noc-operadores-leque .noc-operador-escolhido {
    transform: translate(-50%, 0) scale(1.08);
    opacity: 1;
    pointer-events: auto;
    cursor: default;
    z-index: 10;
    border-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 3px var(--mud-palette-primary-lighten);
}

.noc-operadores-leque .noc-operador-escolhido .noc-operador-avatar.mud-avatar {
    width: 80px;
    height: 80px;
    font-size: 28px;
}

.noc-operadores-dica {
    min-height: 1.5em;
    margin-top: 16px;
    color: var(--noc-cor-texto-terciario);
}

.noc-operadores-outra {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--mud-palette-divider);
}

/* Barra fixa Total + ação (NocBarraFixaRodape): sempre `fixed` na base da janela. No desktop o menu lateral é
   persistente, então a borda esquerda acompanha a largura dele (variáveis do próprio MudLayout) em vez de cobri-lo.
   Não pode ser `sticky`: o componente vive dentro do conteúdo de um passo, e um sticky só gruda dentro do pai —
   com pouco conteúdo ele ficaria solto no meio da tela. */
.noc-barra-fixa-rodape {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 24px;
    background: var(--mud-palette-surface);
    border-top: 1px solid var(--mud-palette-lines-default);
    box-shadow: var(--noc-sombra-barra);
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--mud-zindex-drawer);
}

.noc-barra-fixa-rodape-esquerda,
.noc-barra-fixa-rodape-direita {
    display: flex;
    align-items: center;
    gap: 12px;
}

.noc-barra-fixa-rodape-respiro {
    height: 88px;
}

@media (min-width: 960px) {
    .mud-layout[class*="mud-drawer-close-mini"] .noc-barra-fixa-rodape {
        left: var(--mud-drawer-width-mini-left);
    }

    .mud-layout[class*="mud-drawer-open"] .noc-barra-fixa-rodape {
        left: var(--mud-drawer-width-left);
    }
}

@media (max-width: 600px) {
    .noc-barra-fixa-rodape {
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    }

    .noc-barra-fixa-rodape-respiro {
        height: 76px;
    }
}

/* Carrossel (NocCarrossel): faixa com encaixe por card, sem barra de rolagem */
.noc-carrossel-moldura {
    position: relative;
    padding: 0 56px;
}

.noc-carrossel-faixa {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding: 4px 2px 8px;
}

.noc-carrossel-faixa::-webkit-scrollbar {
        display: none;
    }

.noc-carrossel-faixa > * {
        flex: 0 0 calc((100% - (var(--noc-carrossel-por-vez) - 1) * 16px) / var(--noc-carrossel-por-vez));
        scroll-snap-align: start;
        min-width: 0;
    }

.noc-carrossel-seta {
    position: absolute !important;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    background: var(--mud-palette-surface) !important;
    border: 1px solid var(--mud-palette-lines-default);
    box-shadow: var(--mud-elevation-2);
}

.noc-carrossel-seta-esquerda {
    left: 0;
}

.noc-carrossel-seta-direita {
    right: 0;
}

.noc-carrossel-pontos {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 4px;
}

.noc-carrossel-ponto {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: var(--mud-palette-lines-default);
    cursor: pointer;
}

.noc-carrossel-ponto-ativo {
    width: 20px;
    background: var(--mud-palette-primary);
}

@media (max-width: 600px) {
    .noc-carrossel-moldura {
        padding: 0;
    }

    .noc-carrossel-faixa > * {
        flex-basis: 85%;
    }

    .noc-carrossel-seta {
        display: none !important;
    }
}

/* Pop-up de informações da licença (NocInformacaoLicenca) */
.noc-informacao-licenca-topo {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 24px 16px 16px;
}

.noc-informacao-licenca-fechar {
    position: absolute !important;
    top: 8px;
    right: 8px;
}

/* Passo Pagamento da Assinatura: QR, anel de contagem e forma de pagamento */
.noc-qr-pix {
    padding: 12px;
    border-radius: 16px;
    background: var(--mud-palette-white);
    border: 1px solid var(--mud-palette-lines-default);
}

.noc-qr-pix img {
        display: block;
        width: 240px;
        max-width: 100%;
    }

.noc-qr-anel {
    position: relative;
    width: 140px;
    height: 140px;
}

.noc-qr-anel svg {
        width: 100%;
        height: 100%;
        transform: rotate(-90deg);
    }

.noc-qr-anel-trilha,
.noc-qr-anel-progresso {
    fill: none;
    stroke-width: 8;
}

.noc-qr-anel-trilha {
    stroke: var(--mud-palette-lines-default);
}

.noc-qr-anel-progresso {
    stroke: var(--mud-palette-primary);
    stroke-linecap: round;
    transition: stroke-dashoffset 1s linear;
}

.noc-qr-anel-atencao .noc-qr-anel-progresso {
    stroke: var(--mud-palette-warning);
}

.noc-qr-anel-atencao .noc-qr-anel-texto {
    color: var(--mud-palette-warning);
}

.noc-qr-anel-texto {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 16px;
}

.noc-qr-copia {
    width: 100%;
}

.noc-assinatura-pix {
    padding: 12px 16px;
    border: 1px solid var(--mud-palette-primary);
    border-radius: 12px;
}

@media (max-width: 600px) {
    .noc-qr-anel {
        width: 112px;
        height: 112px;
    }
}

/* Passo Resultado da Assinatura: bloco "O que você ganhou agora", um por licença */
.noc-assinatura-ganho {
    overflow: hidden;
    border-radius: 12px;
}

.noc-assinatura-ganho-topo {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
}

/* Cadeado de item de menu sem licença ou saldo (Fatia 88): discreto, ao lado do rótulo */
.noc-nav-cadeado {
    flex: none;
    margin-left: 6px;
    opacity: .7;
}

/* O texto do item vira flex só quando há cadeado: o rótulo quebra dentro da própria coluna e o cadeado fica à direita, sem cair para a linha de baixo */
.noc-nav-item .mud-nav-link-text:has(.noc-nav-cadeado) {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.noc-nav-rotulo {
    min-width: 0;
}

/* Itens de uma linha que se empilham quando não cabem lado a lado (celular) */
@media (max-width: 599.98px) {
    .d-flex.noc-empilha-mobile {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .d-flex.noc-empilha-mobile.noc-empilha-mobile--fim {
        align-items: flex-end !important;
    }

    .d-flex.noc-empilha-mobile.noc-empilha-mobile--centro {
        align-items: center !important;
        text-align: center;
    }
}

/* Resumo de lote: cartões de contagem; o de destaque leva borda e número na cor primária, o ponto de cor é só do resultado */
.noc-resumo-lote-bloco--destaque {
    border-color: var(--noc-cor-primario-tinta);
}

/* Antes → depois da prévia: texto longo (tributação, JSON) quebra dentro do cartão em vez de extravasar. */
.noc-previa-mudanca {
    display: block;
    min-width: 0;
    overflow-wrap: anywhere;
}

.noc-resumo-lote-numero {
    font-weight: 700;
}

.noc-resumo-lote-numero--destaque {
    color: var(--noc-cor-primario-tinta);
}

.noc-resumo-lote-ponto {
    font-size: 10px !important;
}

.noc-resumo-lote-ponto--sucesso { color: var(--mud-palette-success); }

.noc-resumo-lote-ponto--erro { color: var(--mud-palette-error); }

.noc-resumo-lote-ponto--aviso { color: var(--mud-palette-warning); }

.noc-resumo-lote-ponto--info { color: var(--mud-palette-info); }

.noc-resumo-lote-ponto--primario { color: var(--noc-cor-primario-tinta); }

.noc-resumo-lote-ponto--cinza { color: var(--mud-palette-text-secondary); }

/* Faixa de seleção da grade em lote (MudToolBar colado no topo da lista) */
.noc-barra-selecao {
    border-bottom: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-background-gray);
}

.noc-barra-selecao--info {
    background: var(--mud-palette-info-lighten);
}

/* Faixa de contexto no topo de cada passo do painel de ação em lote */
.noc-contexto-lote {
    background: var(--mud-palette-background-gray);
    border-radius: var(--mud-default-borderradius);
}

/* Campos do painel: select e autocomplete têm flex-grow:1 e incham dentro de coluna */
.noc-painel-lote-campos .mud-input-control,
.noc-seletor-tags-campo.mud-input-control {
    flex: none;
}

.noc-seletor-tags-grupo {
    padding: 4px 16px;
}

/* Texto digitado por pessoa (mensagem de chamado): respeita as quebras de linha e não estoura o card com palavra longa */
.noc-texto-quebra {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}