/* Estilos das telas MudBlazor (/app).
   Tudo aqui usa as variáveis de cor do MudBlazor em vez de cores fixas, para o modo escuro
   funcionar sem uma segunda folha de estilo. */

/* ---------- Diálogo de detalhe da venda ---------- */

.vd-titulo {
    display: flex;
    align-items: center;
    gap: 12px;
}

.vd-titulo-texto {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.2;
}

.vd-titulo-sub {
    font-size: .75rem;
    color: var(--mud-palette-text-secondary);
}

/* Quadrado arredondado que carrega o ícone, no título e em cada cartão */
.vd-selo {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 12px;
    background: var(--mud-palette-primary);
    color: #fff;
    width: 42px;
    height: 42px;
}

.vd-selo-peq {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-primary);
}

.vd-selo.vd-selo-erro { background: var(--mud-palette-error); }

.vd-apagado { color: var(--mud-palette-text-secondary); }

/* Barra de filtro das janelas (itens cancelados) */
.vd-filtros {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.vd-select {
    height: 40px;
    min-width: 200px;
    padding: 0 10px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font: inherit;
    font-size: .82rem;
}

.vd-select:focus { outline: none; border-color: var(--mud-palette-primary); }

.vx-busca.vd-busca { flex: 1; min-width: 260px; background: var(--mud-palette-surface); }

/* Janela com lista longa (itens cancelados): só a tabela rola. Os filtros ficam fora da área
   de rolagem, então não se movem, e o cabeçalho gruda no topo da própria área — sem fresta
   por onde as linhas apareçam (como acontecia com a janela inteira rolando). */
.vd-fixo { overflow: hidden; }

.vd-fixo .vd-secao {
    max-height: calc(100vh - 250px);
    overflow: auto;
    padding-top: 0;
}

.vd-fixo .vd-tabela thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    box-shadow: 0 1px 0 var(--mud-palette-lines-default);
}

/* Com o cabeçalho grudado, o arredondamento das pontas fica estranho sobre as linhas. */
.vd-fixo .vd-tabela th:first-child,
.vd-fixo .vd-tabela th:last-child { border-radius: 0; }

/* Tabela em que a linha abre outra janela (itens cancelados → venda) */
.vd-clicavel tbody tr:not(.vd-total) { cursor: pointer; }
.vd-clicavel tbody tr:not(.vd-total):hover td { background: var(--mud-palette-background-gray); }

.vd-corpo {
    background: var(--mud-palette-background);
}

/* ---------- Cartões de informação ---------- */

.vd-cartoes {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}

.vd-cartao {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 170px;
    padding: 10px 12px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    background: var(--mud-palette-surface);
}

.vd-cartao-rotulo {
    font-size: .7rem;
    color: var(--mud-palette-text-secondary);
    line-height: 1.3;
}

.vd-cartao-valor {
    font-size: .85rem;
    font-weight: 600;
    line-height: 1.35;
}

.vd-documento {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px 0;
    font-variant-numeric: tabular-nums;
}

.vd-documento small {
    font-size: .68rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    margin-right: 2px;
}

/* O líquido é o número que a pessoa abriu o diálogo para ver: ganha cor própria. */
.vd-cartao.vd-destaque {
    background: rgba(22, 163, 74, .08);
    border-color: rgba(22, 163, 74, .28);
    flex: 0 0 auto;
}

.vd-cartao.vd-destaque .vd-selo-peq {
    background: rgba(22, 163, 74, .16);
    color: var(--mud-palette-success);
}

.vd-cartao.vd-destaque .vd-cartao-valor {
    color: var(--mud-palette-success);
    font-size: 1.05rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ---------- Seções (Itens / Pagamentos) ---------- */

.vd-secao {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 14px;
    background: var(--mud-palette-surface);
    padding: 12px 14px 6px 14px;
    margin-bottom: 14px;
}

.vd-secao-titulo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .95rem;
    font-weight: 600;
    margin-bottom: 8px;
}

.vd-tabela {
    width: 100%;
    border-collapse: collapse;
}

.vd-tabela th {
    font-size: .7rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    text-align: left;
    padding: 8px 10px;
    background: var(--mud-palette-background-gray);
    white-space: nowrap;
}

/* O "th" acima ganha do .vd-dir/.vd-centro na especificidade; sem isto o título da coluna
   ficava à esquerda e o valor à direita. */
.vd-tabela th.vd-dir { text-align: right; }
.vd-tabela th.vd-centro { text-align: center; }

.vd-tabela th:first-child { border-radius: 8px 0 0 8px; }
.vd-tabela th:last-child { border-radius: 0 8px 8px 0; }

.vd-tabela td {
    padding: 9px 10px;
    font-size: .8rem;
    border-bottom: 1px solid var(--mud-palette-table-lines);
}

.vd-tabela tbody tr:last-child td { border-bottom: none; }

.vd-dir { text-align: right; font-variant-numeric: tabular-nums; }
.vd-centro { text-align: center; }

/* Numerador da linha, o pill cinza da primeira coluna */
.vd-num {
    display: inline-grid;
    place-items: center;
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    border-radius: 8px;
    background: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-secondary);
    font-size: .7rem;
    font-weight: 600;
}

/* Linha de total: destacada só na parte direita, como uma etiqueta */
.vd-total td {
    border-bottom: none;
    padding-top: 10px;
}

.vd-total .vd-total-caixa {
    background: var(--mud-palette-background-gray);
    border-radius: 8px;
}

.vd-total .vd-total-rotulo {
    font-weight: 600;
    text-align: right;
}

.vd-total .vd-total-valor {
    font-weight: 700;
    font-size: .9rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Quantidade de vendas embaixo do valor (Totais por finalizadora) */
.vd-qtd {
    display: block;
    font-size: .68rem;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
}

.vd-vazio {
    color: var(--mud-palette-text-secondary);
    font-style: italic;
}

/* Item cancelado dentro do diálogo continua riscado: ali não compete com outras marcações. */
.item-cancelado td {
    color: var(--mud-palette-error);
    text-decoration: line-through;
}

@media (max-width: 700px) {
    .vd-cartao { flex: 1 1 100%; }
}

/* ======================================================================
   Tela de vendas (/app/vendas)
   NFC-e = secondary (teal), não fiscal = warning (âmbar), em todo lugar:
   barra dos cartões, abas e chips da tabela.
   ====================================================================== */

.vx-pagina {
    max-width: 1600px;
    margin: 0 auto;
    padding: 22px 24px 40px;
}

/* ---------- Cabeçalho ---------- */

.vx-cabecalho {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.vx-marca {
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: var(--mud-palette-primary);
    color: #fff;
}

.vx-titulo {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.1;
}

.vx-subtitulo {
    margin-top: 3px;
    font-size: .8rem;
    color: var(--mud-palette-text-secondary);
}

.vx-cabecalho-acoes {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
}

.vx-botao {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 16px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font: inherit;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
}

.vx-botao:hover:not(:disabled) { background: var(--mud-palette-background-gray); }
.vx-botao:disabled { opacity: .45; cursor: default; }

/* Totais finalizadora: borda violeta para se diferenciar dos outros botoes, icone de dinheiro verde. */
.vx-botao-totais {
    border: 1.5px solid #7C3AED;
}

.vx-botao-totais .mud-icon-root { color: #16A34A; }

.vx-botao.vx-botao-totais:hover:not(:disabled) { background: rgba(124, 58, 237, .07); }

.vx-usuario {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 40px;
    padding: 0 4px 0 14px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    background: var(--mud-palette-surface);
    font-size: .82rem;
    font-weight: 600;
}

.vx-sair {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    display: grid;
    place-items: center;
    background: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
}

.vx-sair:hover { color: var(--mud-palette-error); }

/* ---------- Painéis e filtros ---------- */

.vx-painel {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}

.vx-filtros {
    display: grid;
    grid-template-columns: minmax(180px, 1.4fr) minmax(140px, 1fr) minmax(140px, 1fr) minmax(150px, 1fr) minmax(180px, 1.4fr) auto;
    gap: 12px;
    align-items: end;
    padding: 14px 16px;
    margin-bottom: 18px;
}

.vx-rotulo-campo {
    display: block;
    margin-bottom: 6px;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

/* Os campos do MudBlazor trazem margem própria para o rótulo flutuante, que aqui não existe:
   o rótulo é o texto em caixa-alta acima de cada campo. */
.vx-filtros .mud-input-control { margin: 0 !important; }
.vx-filtros .mud-input-outlined-border { border-radius: 10px; }

.vx-pesquisar {
    height: 40px;
    padding: 0 22px !important;
    border-radius: 10px !important;
    text-transform: none !important;
    font-weight: 600 !important;
    font-size: .85rem !important;
    box-shadow: none !important;
}

/* ---------- Cartões de métrica ---------- */

.vx-cartoes {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 18px;
}

/* Cinco cartões ficam apertados abaixo de 1500px: passa para 3 por linha. */
@media (max-width: 1500px) {
    .vx-cartoes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Cartão Caixa: o cartão inteiro abre o fechamento por operador. */
.vx-cartao-link { cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.vx-cartao-link:hover { border-color: #0D9488; box-shadow: 0 2px 8px rgba(13, 148, 136, .15); }
/* Valor das sangrias é grande (centenas de milhares no mês): a quantidade vai para a linha de
   baixo, senão "sangrias" era cortado pela borda do cartão. */
.vx-cartao-caixa .vx-cartao-complemento { display: block; margin: 4px 0 0; }
.vx-cartao-complemento b { font-weight: 800; color: var(--mud-palette-text-primary); }

.vx-ocorrencia-neutra { background: var(--mud-palette-background-gray); border-color: var(--mud-palette-lines-default); }

/* ---------- Janela Fechamento de caixa ---------- */

.vd-selo.vd-selo-caixa { background: #0D9488; }

.fc-operador { margin-bottom: 18px; }

.fc-operador-titulo {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 1rem;
    font-weight: 700;
}

.fc-resultado {
    margin-left: auto;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 700;
}

.fc-sobra { background: rgba(22, 163, 74, .12); color: var(--mud-palette-success); }
.fc-falta { background: rgba(220, 38, 38, .12); color: var(--mud-palette-error); }
.fc-zero { background: var(--mud-palette-background-gray); color: var(--mud-palette-text-secondary); }

/* Dinheiro e meios de pagamento lado a lado; a lista de sangrias ocupa a linha inteira. */
.fc-grade {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 14px;
}

.fc-grade .fc-largo { grid-column: 1 / -1; }

.fc-linha-sobra td { color: var(--mud-palette-success); font-weight: 700; }
.fc-linha-falta td { color: var(--mud-palette-error); font-weight: 700; }

.fc-chip-sangria { background: rgba(220, 38, 38, .1); color: #B91C1C; }
.fc-chip-suprimento { background: rgba(37, 99, 235, .1); color: #1D4ED8; }
.fc-chip-fechamento { background: rgba(124, 58, 237, .1); color: #6D28D9; }

@media (max-width: 900px) {
    .fc-grade { grid-template-columns: 1fr; }
}

.vx-cartao {
    /* Fundo do cartão em variável: a fresta entre as duas cores da barra usa a mesma cor. */
    --vx-fundo: var(--mud-palette-surface);
    display: flex;
    flex-direction: column;
    min-height: 170px;
    padding: 18px 20px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 16px;
    background: var(--vx-fundo);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}

.vx-cartao-topo {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.vx-cartao-rotulo {
    font-size: .82rem;
    color: var(--mud-palette-text-secondary);
}

.vx-cartao-icone { color: var(--mud-palette-text-secondary); }

.vx-cartao-valor {
    margin: 10px 0 14px;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.vx-cartao-valor small {
    margin-right: 5px;
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--mud-palette-text-secondary);
}

.vx-texto-erro { color: var(--mud-palette-error); }

/* Empurra barra, legenda e avisos para o pé do cartão: os quatro terminam alinhados. */
.vx-cartao-base { margin-top: auto; }

/* O cartão do total é o destaque da tela: fundo escuro, texto claro. Cores fixas aqui de
   propósito — ele fica escuro nos dois temas. */
.vx-cartao-escuro {
    --vx-fundo: #18181B;
    border-color: #18181B;
    color: #FAFAF9;
}

.vx-cartao-escuro .vx-cartao-rotulo,
.vx-cartao-escuro .vx-cartao-valor small,
.vx-cartao-escuro .vx-legenda { color: #A1A1AA; }

.vx-cartao-escuro .vx-legenda b { color: #FAFAF9; }

.vx-selo-dias {
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    color: #E4E4E7;
    font-size: .72rem;
    white-space: nowrap;
}

/* Barra de proporção: o trilho é o não fiscal, a fatia pintada por cima é a NFC-e. */
.vx-barra {
    display: flex;
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--mud-palette-warning);
}

.vx-barra-vazia { background: var(--mud-palette-lines-default); }
.vx-cartao-escuro .vx-barra-vazia { background: rgba(255, 255, 255, .16); }

.vx-barra-nfce {
    height: 100%;
    background: var(--mud-palette-secondary);
    border-right: 3px solid var(--vx-fundo);
    transition: width .35s ease;
}

.vx-legenda {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin-top: 10px;
    font-size: .75rem;
    color: var(--mud-palette-text-secondary);
}

.vx-legenda b {
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    font-variant-numeric: tabular-nums;
}

.vx-quad {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 6px;
    border-radius: 2px;
}

.vx-quad-nfce { background: var(--mud-palette-secondary); }
.vx-quad-nf { background: var(--mud-palette-warning); }

.vx-mini-grade {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.vx-mini {
    padding: 8px 10px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    background: var(--mud-palette-background-gray);
}

.vx-mini span {
    display: flex;
    align-items: center;
    font-size: .68rem;
    color: var(--mud-palette-text-secondary);
}

.vx-mini b {
    font-size: .88rem;
    font-variant-numeric: tabular-nums;
}

/* Barra em cima das caixinhas (Total líquido e Vendas) */
.vx-barra + .vx-mini-grade { margin-top: 10px; }

.vx-cartao-escuro .vx-mini { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .16); }

/* Percentual à direita do rótulo, na cor do tipo */
.vx-mini em {
    margin-left: auto;
    padding-left: 6px;
    font-style: normal;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.vx-mini-nfce em { color: #0F766E; }
.vx-mini-nf em { color: #B45309; }
.vx-cartao-escuro .vx-mini-nfce em { color: #5EEAD4; }
.vx-cartao-escuro .vx-mini-nf em { color: #FCD34D; }

/* Borda e fundo na cor do tipo, a mesma dos quadradinhos, da barra e das abas. */
.vx-mini-nfce { border-color: rgba(13, 148, 136, .45); background: rgba(13, 148, 136, .06); }
.vx-mini-nf { border-color: rgba(245, 158, 11, .55); background: rgba(245, 158, 11, .07); }
.vx-cartao-escuro .vx-mini-nfce { border-color: rgba(45, 212, 191, .5); background: rgba(45, 212, 191, .08); }
.vx-cartao-escuro .vx-mini-nf { border-color: rgba(251, 191, 36, .5); background: rgba(251, 191, 36, .08); }
.vx-cartao-escuro .vx-mini span { color: #A1A1AA; }
.vx-cartao-escuro .vx-mini b { color: #FAFAF9; }

.vx-aviso {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: .78rem;
    font-weight: 600;
}

.vx-aviso-ok { background: rgba(22, 163, 74, .1); border-color: rgba(22, 163, 74, .3); color: var(--mud-palette-success); }
.vx-aviso-erro { background: rgba(220, 38, 38, .1); border-color: rgba(220, 38, 38, .3); color: var(--mud-palette-error); }
.vx-aviso-neutro { background: var(--mud-palette-background-gray); border-color: var(--mud-palette-lines-default); color: var(--mud-palette-text-secondary); font-weight: 500; }

/* Texto menor ao lado do número grande ("vendas canceladas · R$ 12,00") */
.vx-cartao-complemento {
    margin-left: 6px;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--mud-palette-text-secondary);
}

/* Linhas do cartão Cancelamentos: não concluídas, itens cancelados, rejeitadas */
.vx-ocorrencias {
    display: grid;
    gap: 6px;
}

.vx-ocorrencia {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 10px;
    border: 1px solid transparent;
    border-radius: 9px;
    font-size: .74rem;
}

.vx-ocorrencia span { display: inline-flex; align-items: center; gap: 4px; color: var(--mud-palette-text-secondary); }

/* Linha que abre janela: cursor de link e ícone discreto ao lado do nome */
.vx-ocorrencia-link { cursor: pointer; transition: filter .15s; }
.vx-ocorrencia-link:hover { filter: brightness(.96); text-decoration: underline; }
.vx-ocorrencia-abrir.mud-icon-root { font-size: .85rem; width: .85rem; height: .85rem; }
.vx-ocorrencia b { font-variant-numeric: tabular-nums; white-space: nowrap; }

.vx-ocorrencia-ok { background: rgba(22, 163, 74, .06); border-color: rgba(22, 163, 74, .3); }
.vx-ocorrencia-ok b { color: var(--mud-palette-success); }
.vx-ocorrencia-erro { background: rgba(220, 38, 38, .06); border-color: rgba(220, 38, 38, .35); }
.vx-ocorrencia-erro b { color: var(--mud-palette-error); }

/* ---------- Lista ---------- */

.vx-lista-barra {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 14px 16px;
}

.vx-abas {
    display: inline-flex;
    gap: 8px;
}

/* Coluna explícita: só "display: block" no <b> não bastava, o botão herdava um display
   de linha e o número ficava colado no nome. */
.vx-aba {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    min-width: 100px;
    padding: 7px 18px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-secondary);
    font: inherit;
    font-size: .78rem;
    line-height: 1.3;
    text-align: center;
    cursor: pointer;
    transition: background-color .15s, border-color .15s, color .15s;
}

.vx-aba:hover:not(.ativa) {
    background: var(--mud-palette-background-gray);
    border-color: #BDB9B1;
}

.vx-aba b {
    display: block;
    font-size: .95rem;
    color: var(--mud-palette-text-primary);
    font-variant-numeric: tabular-nums;
}

/* Selecionada: preenchida com a cor do tipo (preto em Todas, verde NFC-e, âmbar não fiscal). */
.vx-aba.ativa {
    background: #18181B;
    border-color: #18181B;
    color: rgba(255, 255, 255, .8);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
}

.vx-aba.ativa b { color: #fff; }

.vx-aba-nfce:not(.ativa) { border-color: rgba(13, 148, 136, .45); }
.vx-aba-nf:not(.ativa) { border-color: rgba(245, 158, 11, .55); }
.vx-aba-nfce:hover:not(.ativa) { border-color: #0D9488; background: rgba(13, 148, 136, .06); }
.vx-aba-nf:hover:not(.ativa) { border-color: #D97706; background: rgba(245, 158, 11, .07); }

.vx-aba-nfce.ativa { background: #0D9488; border-color: #0D9488; }
.vx-aba-nf.ativa { background: #D97706; border-color: #D97706; }

/* Na aba colorida o quadradinho sumiria no fundo da mesma cor. */
.vx-aba.ativa .vx-quad { background: #fff; }

.vx-lista-acoes {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.vx-busca {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    min-width: 460px;
    padding: 0 12px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    color: var(--mud-palette-text-secondary);
}

.vx-busca:focus-within { border-color: var(--mud-palette-primary); }

.vx-busca input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    color: var(--mud-palette-text-primary);
    font: inherit;
    font-size: .82rem;
}

.vx-tabela {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

/* Cabeçalho grudado no topo da janela enquanto a página rola. */
.vx-tabela thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 12px 16px;
    background: var(--mud-palette-background-gray);
    border-top: 1px solid var(--mud-palette-lines-default);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    color: var(--mud-palette-text-secondary);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-align: left;
    white-space: nowrap;
}

/* Altura fixa da linha: o Virtualize calcula a rolagem com ItemSize=44, e linha de outro
   tamanho faz a barra de rolagem "pular". */
.vx-tabela tbody td {
    height: 44px;
    padding: 0 16px;
    border-bottom: 1px solid var(--mud-palette-table-lines);
    font-size: .82rem;
    white-space: nowrap;
}

.vx-tabela tbody tr { cursor: pointer; }
.vx-tabela tbody tr:hover td { background: var(--mud-palette-table-hover); }

.vx-tabela th.vx-num, .vx-tabela td.vx-num { text-align: right; font-variant-numeric: tabular-nums; }
.vx-tabela th.vx-centro, .vx-tabela td.vx-centro { text-align: center; }

.vx-apagado { color: var(--mud-palette-text-secondary); }
.vx-forte { font-weight: 700; }

.vx-data { white-space: nowrap; }
.vx-data b { font-weight: 700; }
.vx-data span { margin-left: 6px; color: var(--mud-palette-text-secondary); }

/* Filial: número em negrito e o nome cortado com reticências (o nome inteiro fica no title). */
.vx-filial { white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.vx-filial b { font-weight: 700; }
.vx-filial span { margin-left: 6px; color: var(--mud-palette-text-secondary); }

.vx-chip {
    display: inline-block;
    margin-right: 8px;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: .7rem;
    font-weight: 600;
    white-space: nowrap;
}

.vx-chip-nfce { background: rgba(13, 148, 136, .12); color: #0F766E; }
.vx-chip-nf { background: rgba(245, 158, 11, .16); color: #B45309; }
.vx-chip-cancelada { margin-left: 6px; background: rgba(220, 38, 38, .12); color: var(--mud-palette-error); }

.vx-cancelada td { opacity: .55; }

.vx-avatar {
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    margin-right: 8px;
    border-radius: 50%;
    font-size: .62rem;
    font-weight: 700;
    vertical-align: middle;
}

.vx-av-0 { background: #CCFBF1; color: #0F766E; }
.vx-av-1 { background: #EDE9FE; color: #6D28D9; }
.vx-av-2 { background: #FEF3C7; color: #B45309; }
.vx-av-3 { background: #DBEAFE; color: #1D4ED8; }
.vx-av-4 { background: #FCE7F3; color: #BE185D; }
.vx-av-5 { background: #DCFCE7; color: #15803D; }

.vx-vazio {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 56px 16px;
    color: var(--mud-palette-text-secondary);
}

.vx-rodape {
    padding: 14px 16px;
    font-size: .8rem;
    color: var(--mud-palette-text-secondary);
}

.vx-rodape b { color: var(--mud-palette-text-primary); }

/* ---------- Telas menores ---------- */

@media (max-width: 1200px) {
    .vx-filtros { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .vx-cartoes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
    .vx-pagina { padding: 16px; }
    .vx-filtros, .vx-cartoes { grid-template-columns: 1fr; }
    .vx-lista-acoes { width: 100%; }
    .vx-busca { min-width: 0; width: 100%; flex: 1; }
    .vx-cabecalho-acoes { margin-left: 0; }
}