/* 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);
}

/* Toolbar de tabela — linha separadora abaixo do título */
.mud-table .mud-toolbar {
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

/* 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 filtro — estilo padrão */
.noc-botao-filtro {
    text-transform: none;
    font-weight: 600;
    border-radius: 10px;
}

    .noc-botao-filtro.mud-button-outlined-default {
        background-color: var(--mud-palette-surface);
    }
/* Wrapper padrão de página — limita largura e alinha à esquerda */
.pagina-conteudo {
    max-width: 1200px;
}

.mud-input-outlined {
    background-color: var(--mud-palette-surface) !important;
}

    /* Outlined desabilitado — fundo diferenciado (MudBlazor só muda a borda, insuficiente) */
    .mud-input-outlined.mud-disabled {
        background-color: var(--mud-palette-action-disabled-background) !important;
        border-radius: var(--mud-default-borderradius);
    }

.pagina-conteudo.pagina-conteudo-sm {
    max-width: 760px;
}

.pagina-conteudo.pagina-conteudo-md {
    max-width: 840px;
}

.pagina-conteudo.pagina-conteudo-lg {
    max-width: 960px;
}

.pagina-conteudo.pagina-conteudo-xl {
    max-width: 1040px;
}

.pagina-conteudo.pagina-conteudo-full {
    max-width: 100%;
}

/* Card padrão do projeto — borda e arredondamento */
.noc-cartao {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 14px;
}

/* NocCartao com OnClick — cartão-linha clicável (ex.: lista de vendas no mobile) */
.noc-cartao-clicavel {
    cursor: pointer;
}

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

/* Linha com rolagem horizontal sem barra visível (ex.: filtros no mobile) */
.noc-linha-scroll-x {
    overflow-x: auto;
    scrollbar-width: none;
}

    .noc-linha-scroll-x::-webkit-scrollbar {
        display: none;
    }

/* Labels de input — cinza secundário (MudBlazor não expõe cor de label via tema) */
.mud-input-label {
    color: var(--mud-palette-text-secondary) !important;
}

/* Overline — cor secundária por padrão (tema não expõe cor por tipografia) */
.mud-typography-overline {
    color: var(--noc-cor-texto-terciario);
}

/* Estilo padrão de botão de processar */
.noc-botao-processar {
    text-transform: none;
    font-weight: 600;
}

/* Botões outlined default — borda e texto alinhados ao design (MudBlazor não expõe via tema) */
.mud-button-outlined.mud-button-outlined-default {
    border-color: var(--mud-palette-lines-inputs);
    color: var(--mud-palette-text-secondary);
}

/* 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;
}

/* Tabelas — borda e arredondamento global */
.mud-table {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 14px;
    overflow: hidden;
}

/* Painel lateral (NocPainelLateral) — largura fixa em telas maiores, 100% em mobile.
   MudDrawer calcula a largura via var(--mud-drawer-width, var(--mud-drawer-width-right));
   sem o parâmetro Width, a --mud-drawer-width fica indefinida e cai no fallback do drawer
   de navegação. Definir a variável aqui evita a briga de especificidade com o CSS do MudDrawer. */
.noc-painel-lateral {
    --mud-drawer-width: 100vw;
}

@media (min-width: 600px) {
    .noc-painel-lateral {
        --mud-drawer-width: 480px;
    }
}

/* 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 — grid de recebimentos por forma de pagamento (5 colunas, 2 no mobile) */
.noc-conferencia-pagamentos {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    margin-top: 4px;
}

.noc-conferencia-pagamento-item {
    background: var(--mud-palette-background-gray);
    border-radius: 10px;
    padding: 12px;
    text-align: center;
}

/* Linha de total, com filete separando da grade de recebimentos acima */
.noc-conferencia-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    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;
}

@media (max-width: 600px) {
    .noc-conferencia-pagamentos {
        grid-template-columns: repeat(2, 1fr);
    }

        .noc-conferencia-pagamentos .noc-conferencia-pagamento-item:last-child {
            grid-column: 1 / -1;
        }
}

/* 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;
}

/* 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;
}

    /* MudBlazor aplica flex-grow:1 em .mud-select (base do MudAutocomplete) — inofensivo dentro do
   ToolBarContent da tabela (desktop), mas aqui o campo de busca é filho direto de um MudStack
   em coluna: sem essa trava ele cresce e absorve todo o espaço vertical livre, empurrando os
   cards de item pra baixo do container rolável. */
    .noc-pdv-mobile-conteudo > .mud-autocomplete {
        flex: none;
    }

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

/* 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;
    }
}

/* 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;
}

/* Texto com peso 700 — títulos de destaque (ex.: valores de stat card) */
.noc-texto-extra-forte {
    font-weight: 700;
}

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

/* Grid de cards de resumo do turno (Operação de Caixa) — 5 colunas no desktop; no mobile,
   2 colunas com o último card (Saldo esperado, o destaque) ocupando a linha inteira. */
.noc-caixa-resumo {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}

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

        .noc-caixa-resumo > *:last-child {
            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-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);
}

/* Barra de ações do caixa aberto — linha no desktop (Fechar empurrado à direita),
   grade 2x2 no mobile (Sangria/Suprimento/Relatório/Fechar não cabem numa linha só). */
.noc-caixa-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.noc-caixa-acao-fechar {
    margin-left: auto;
}

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

    .noc-caixa-acao-fechar {
        margin-left: 0;
    }

        .noc-caixa-acoes > .mud-button-root,
        .noc-caixa-acao-fechar > .mud-button-root {
            width: 100%;
        }
}

/* 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);
}

/* Botão de texto sem uppercase (ex.: "Voltar") — MudButton aplica text-transform por padrão */
.noc-botao-sem-transform {
    text-transform: none;
}

/* 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;
}

/* Tokens sem equivalente no MudTheme — projetados de docs/design/noctua-tokens.css.
   O que TEM token do Mud não entra aqui: o MudThemeProvider já troca os --mud-palette-*
   entre PaletteLight/PaletteDark sozinho. Este bloco é só o resto. */
:root {
    --noc-cor-icone-vazio: #D8C9F5; /* --icon-empty */
    --noc-cor-texto-terciario: #9CA3AF; /* --text-3 */
    /* Roxo como TINTA (texto/ícone), não como fill. O `--mud-palette-primary` é calibrado
       para ser fundo de botão com texto branco em cima; usado como cor de texto sobre fundo
       escuro ele dá 3,5:1 e reprova em AA. É o `--primary-soft-fg` do Design, que não tem
       slot equivalente no MudTheme. */
    --noc-cor-primario-tinta: #6D28D9; /* --primary-soft-fg */
    --noc-cor-veu: rgba(20, 16, 40, .38); /* véu do bottom sheet */
    --noc-sombra-folha: 0 -8px 24px rgba(0, 0, 0, .16);
    --noc-sombra-barra: 0 -4px 16px rgba(0, 0, 0, .08);
    --noc-fonte-mono: ui-monospace, 'SFMono-Regular', Menlo, monospace; /* --font-mono do Design */
}

/* Tema escuro. Único gatilho do app: data-theme="dark" no <html>, escrito pelo
   js/tema.js (e pelo script de pré-boot do index.html, antes do primeiro paint).
   Mesmo seletor que os mocks do Design System usam. */
:root[data-theme="dark"] {
    /* Escurece o que é desenhado pelo navegador, não por nós: scrollbar nativa, seletor
       de data, autofill. O MudBlazor só aplica color-scheme nos inputs dele — sem isto a
       barra de rolagem fica clara sobre o fundo escuro. */
    color-scheme: dark;
    --noc-cor-icone-vazio: #4A3D75;
    --noc-cor-texto-terciario: #948CB4;
    --noc-cor-primario-tinta: #C9B6FA;
    /* Véu e sombras precisam ser bem mais densos no escuro: sobre fundo claro a sombra
       some, sobre fundo escuro ela é o que separa o painel do que está atrás. */
    --noc-cor-veu: rgba(0, 0, 0, .62);
    --noc-sombra-folha: 0 -8px 28px rgba(0, 0, 0, .55);
    --noc-sombra-barra: 0 -4px 18px rgba(0, 0, 0, .45);
}

/* `Color="Color.Primary"` no razor compila para `mud-primary-text` com `!important`, sempre
   apontando para `--mud-palette-primary` — que no escuro reprova como cor de texto (3,5:1).
   Uma regra só redireciona todo `Color.Primary` de texto/ícone para a tinta. Não afeta fill:
   fundo roxo vem de `background`, não desta classe.

   O `:where()` é obrigatório aqui: ele tem especificidade ZERO, então o seletor efetivo é
   `.mud-primary-text` (0,1,0) — igual ao do MudBlazor, e ganha só por vir depois no cascade.
   Sem ele, `:root[data-theme="dark"] .mud-primary-text` seria (0,3,0) e passaria por cima de
   toda regra `.noc-*` que define cor de texto própria (ex.: o título branco do atalho em
   destaque, que é (0,2,0)). */
:where(:root[data-theme="dark"]) .mud-primary-text {
    color: var(--noc-cor-primario-tinta) !important;
}

/* Í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;
    }
}

/* Cabeçalho de dialog com ícone circular colorido (ex.: confirmação, receber fiado) */
.noc-dialogo-titulo {
    gap: 12px;
}

.noc-dialogo-icone {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

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

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

.noc-dialogo-icone--primario {
    background: var(--mud-palette-primary-lighten);
}

/* 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);
}

/* Dialog de senha temporária (convite de usuário) */
.noc-aviso-senha {
    margin-top: 10px;
    font-size: 13px;
    color: var(--mud-palette-error);
    font-weight: 600;
    line-height: 1.4;
}

.noc-caixa-senha {
    margin-top: 14px;
    padding: 12px 16px;
    background: var(--mud-palette-background);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.noc-texto-senha {
    font-family: monospace;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1px;
    user-select: all;
}

/* Texto com respiro maior entre linhas (ex.: descrição de alerta) */
.noc-texto-linha-alta {
    line-height: 1.5;
}

/* 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);
}

/* Label de grupo do menu de navegação lateral */
.noc-label-grupo-nav {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--noc-cor-texto-terciario);
    padding: 8px 12px 6px;
}

/* 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);
}

/* Pontinho colorido do NocChipSituacao — precede o texto em todo chip de situação */
.noc-chip-situacao-ponto {
    width: 6px;
    height: 6px;
    margin-right: 6px;
    border-radius: 999px;
    background: currentColor;
    flex: 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);
    }

/* Menu lateral recolhido (mini) — centraliza o ícone, sem o rótulo, do item e do cabeçalho de grupo */
.mud-drawer--closed.mud-drawer-mini .mud-nav-link {
    justify-content: center;
}

/* 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;
}

/* 1. Controla o tamanho do input na linha (Funciona em qualquer tela) */
.picker-dois-meses-responsivo {
    max-width: 300px !important;
}

/* 2. Aplica a largura de 660px APENAS em telas Desktop/Tablet (>= 600px) */
@media (min-width: 600px) {
    .picker-dois-meses-responsivo .mud-popover,
    .mud-popover-provider .mud-picker-popover {
        min-width: 660px !important;
    }
}

/* 3. Ajuste opcional para celulares (< 600px): Garante que ele ocupe a largura máxima da tela sem estourar */
@media (max-width: 599px) {
    .mud-popover-provider .mud-picker-popover {
        min-width: 100vw !important;
        max-width: 100vw !important;
    }
}

/* 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;
}

/* Botão de máscara de valores do Dashboard */
.noc-botao-mascara {
    text-transform: none;
    font-weight: 600;
}

/* Estado ativo (valores revelados) em destaque suave */
.noc-botao-mascara--ativo {
    background: var(--mud-palette-primary-lighten);
    color: var(--noc-cor-primario-tinta);
    border-color: var(--mud-palette-primary-lighten);
}

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