/* Paleta A: branco, violeta principal, rosa de destaque, azul bebê para informação, preto no texto. Fonte Inter. */
:root {
    --fundo: #faf8fc;
    --superficie: #ffffff;
    --texto: #17141c;
    --discreto: #625b6e;
    --borda: #e7e1ee;
    --primaria: #6d28d9;
    --primaria-escura: #5b21b6;
    --primaria-clara: #f3edfd;
    --rosa: #f472b6;
    --rosa-fundo: #fce7f3;
    --rosa-texto: #9d174d;
    --info-fundo: #e0f2fe;
    --info-texto: #0c4a6e;
    --perigo: #b91c1c;
    --ok-fundo: #e7f5ec;
    --ok-texto: #166534;
    --erro-fundo: #fee2e2;
    --erro-texto: #991b1b;
    --alerta-fundo: #fff7e0;
    --alerta-texto: #92400e;
    --raio: 10px;
    --fonte: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.5 var(--fonte); background: var(--fundo); color: var(--texto); }
a { color: var(--primaria); }
h1 { font-size: 1.5rem; margin: 0 0 .75rem; letter-spacing: -.01em; }
h2 { font-size: 1.15rem; margin: 0 0 .75rem; }
h3 { font-size: 1rem; margin: 1rem 0 .5rem; }

/* Cabeçalho: grupos do menu em cima, páginas do grupo ativo embaixo */
.topo { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.5rem; padding: .6rem 1rem; background: var(--superficie); border-bottom: 1px solid var(--borda); }
.marca { font-weight: 700; text-decoration: none; color: var(--primaria); }
.topo nav { display: flex; flex-wrap: wrap; gap: .25rem; flex: 1; }
.topo nav a { padding: .35rem .7rem; border-radius: 6px; text-decoration: none; color: var(--texto); }
.topo nav a.ativo { background: var(--primaria-clara); color: var(--primaria); font-weight: 600; }
.topo nav a:hover { color: var(--primaria); }
.submenu { display: flex; flex-wrap: wrap; gap: .25rem; padding: .35rem 1rem; background: var(--superficie); border-bottom: 1px solid var(--borda); }
.submenu a { padding: .25rem .65rem; border-radius: 99px; text-decoration: none; color: var(--discreto); font-size: .9rem; }
.submenu a.ativo { background: var(--primaria); color: #fff; }
.submenu a:hover:not(.ativo) { color: var(--primaria); }
.quem { display: flex; align-items: center; gap: .75rem; }
.quem form { margin: 0; }

main { max-width: 1200px; margin: 0 auto; padding: 1.25rem 1rem 3rem; }
main.centro { max-width: 420px; padding-top: 12vh; }

.cartao { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 1.25rem; margin-bottom: 1rem; }
.estreito { max-width: 560px; }
.medio { max-width: 820px; }
.cabecalho { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .75rem; }
.cabecalho h1, .cabecalho h2 { margin: 0; }
.grade-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; }
.grade-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 1rem; }
.dados { display: grid; grid-template-columns: max-content 1fr; gap: .3rem 1rem; margin: 0 0 1rem; }
.dados dt { color: var(--discreto); }
.dados dd { margin: 0; }

label { display: block; margin-bottom: .85rem; font-weight: 500; }
input, select, textarea { display: block; width: 100%; margin-top: .3rem; padding: .55rem .7rem; font: inherit; border: 1px solid var(--borda); border-radius: 8px; background: #fff; color: var(--texto); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--primaria); outline-offset: 1px; }
input[type=radio], input[type=checkbox] { display: inline; width: auto; margin: 0 .4rem 0 0; accent-color: var(--primaria); }
.opcao { font-weight: 400; display: flex; align-items: center; }
.opcoes { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: .85rem; }

.btn { display: inline-block; padding: .55rem 1rem; font: inherit; font-weight: 600; border: 1px solid var(--borda); border-radius: 8px; background: var(--superficie); color: var(--texto); cursor: pointer; text-decoration: none; }
.btn:hover { border-color: var(--primaria); color: var(--primaria); }
.btn-primario { background: var(--primaria); border-color: var(--primaria); color: #fff; }
.btn-primario:hover { background: var(--primaria-escura); color: #fff; }
.btn-destaque { background: var(--rosa-fundo); border-color: var(--rosa-fundo); color: var(--rosa-texto); }
.btn-perigo { background: var(--perigo); border-color: var(--perigo); color: #fff; }
.btn-perigo:hover { color: #fff; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-grande { width: 100%; padding: .85rem; font-size: 1.1rem; }
.btn-link { background: none; border: 0; padding: .3rem; color: var(--primaria); text-decoration: underline; cursor: pointer; font: inherit; }
.btn-link.perigo { color: var(--perigo); }
.acoes { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .75rem; }
.acoes-linha a { margin-right: .75rem; white-space: nowrap; }
.acoes-linha form { display: inline; margin: 0; }
details.acao { margin-top: .5rem; }
details.acao summary { cursor: pointer; color: var(--primaria); font-weight: 600; }
details.acao form { margin-top: .5rem; }

.aviso { padding: .7rem 1rem; border-radius: 8px; margin-bottom: 1rem; }
.aviso-ok { background: var(--ok-fundo); color: var(--ok-texto); }
.aviso-erro { background: var(--erro-fundo); color: var(--erro-texto); }
.aviso-info { background: var(--info-fundo); color: var(--info-texto); }
.aviso-alerta { background: var(--alerta-fundo); color: var(--alerta-texto); }
.discreto { color: var(--discreto); }
.pequeno { font-size: .85rem; }

.rolagem { overflow-x: auto; }
.tabela { width: 100%; border-collapse: collapse; background: var(--superficie); }
.tabela th, .tabela td { padding: .5rem .6rem; border-bottom: 1px solid var(--borda); text-align: left; vertical-align: middle; }
.tabela thead th { font-size: .85rem; color: var(--discreto); font-weight: 600; }
.tabela tfoot th, .tabela tfoot td { border-bottom: 0; font-weight: 700; }
.tabela td input, .tabela td select { margin: 0; }
.num { text-align: right !important; font-variant-numeric: tabular-nums; white-space: nowrap; }
tr.inativo td { color: var(--discreto); }
tr.alerta td { background: var(--alerta-fundo); }
tr.menor td { background: var(--ok-fundo); }
.resumo th { font-weight: 500; }
.resumo td { text-align: right; font-variant-numeric: tabular-nums; }
.diferenca-ok th, .diferenca-ok td { color: var(--ok-texto); font-weight: 700; }
.diferenca-falta th, .diferenca-falta td { color: var(--erro-texto); font-weight: 700; }
.diferenca-sobra th, .diferenca-sobra td { color: var(--alerta-texto); font-weight: 700; }

/* Selos de situação: verde concluído, violeta em andamento, azul aguardando, rosa destaque, vermelho cancelado */
.selo { display: inline-block; font-size: .75rem; font-weight: 600; padding: .1rem .5rem; border-radius: 99px; background: var(--ok-fundo); color: var(--ok-texto); white-space: nowrap; }
.selo-cancelada, .selo-cancelado, .selo-reprovado, .selo-inativo { background: var(--erro-fundo); color: var(--erro-texto); }
.selo-pendente, .selo-emitida, .selo-aberta, .selo-sem_oc { background: var(--info-fundo); color: var(--info-texto); }
.selo-aprovado, .selo-recebida_parcial, .selo-com_oc { background: var(--primaria-clara); color: var(--primaria); }
.selo-divergencia, .selo-direta { background: var(--rosa-fundo); color: var(--rosa-texto); }
.selo-parcial { background: var(--primaria-clara); color: var(--primaria); }
.selo-vencida { background: var(--erro-fundo); color: var(--erro-texto); }

.filtro { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem; margin-bottom: 1rem; }
.filtro input, .filtro select { margin: 0; max-width: 360px; width: auto; }
.filtro label { margin: 0; font-size: .85rem; }
.paginacao { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-top: 1rem; }

.indicadores { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.indicador { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 1rem; }
.indicador span { display: block; color: var(--discreto); font-size: .9rem; }
.indicador strong { font-size: 1.6rem; font-variant-numeric: tabular-nums; }
.indicador-alerta { background: var(--alerta-fundo); }
.indicador-destaque { background: var(--texto); border-color: var(--texto); color: #fff; }
.indicador-destaque span { color: #d9d2e3; }
.barra { height: .5rem; border-radius: 99px; background: var(--primaria-clara); min-width: 4rem; }
.barra i { display: block; height: 100%; border-radius: 99px; background: var(--primaria); }

/* PDV */
.pdv { display: grid; grid-template-columns: 1fr 380px; gap: 1rem; align-items: start; }
.catalogo input[type=search] { margin: 0 0 .5rem; }
.categoria { color: var(--discreto); text-transform: uppercase; font-size: .8rem; letter-spacing: .05em; }
.produtos { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .5rem; }
.produto { display: flex; flex-direction: column; justify-content: space-between; min-height: 84px; padding: .7rem; text-align: left; font: inherit; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); cursor: pointer; }
.produto:hover { border-color: var(--primaria); background: var(--primaria-clara); }
.produto:active { transform: scale(.98); }
.produto .nome { font-weight: 600; }
.produto .preco { color: var(--primaria); font-variant-numeric: tabular-nums; }
.produto[hidden], .produtos[hidden], .categoria[hidden] { display: none; }
.produto img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; margin-bottom: .4rem; background: var(--primaria-clara); }
.foto-produto-mini { display: block; width: 48px; height: 48px; object-fit: cover; border-radius: 6px; }
.foto-produto-mini.sem-foto { background: var(--primaria-clara); }
.foto-produto-grande { display: block; width: 100%; max-width: 320px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--raio); margin-bottom: .75rem; border: 1px solid var(--borda); }
.carrinho { position: sticky; top: 1rem; }
.carrinho .qtd { white-space: nowrap; }
.carrinho .qtd span { display: inline-block; min-width: 1.8rem; text-align: center; }
.carrinho .qtd button { width: 1.8rem; height: 1.8rem; border: 1px solid var(--borda); border-radius: 6px; background: var(--fundo); cursor: pointer; }
.total { display: flex; justify-content: space-between; align-items: baseline; font-size: 1.1rem; margin: .75rem 0; padding: .6rem .8rem; border-radius: 8px; background: var(--texto); color: #fff; }
.total strong { font-size: 1.6rem; font-variant-numeric: tabular-nums; }
.formas { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; margin-bottom: .75rem; }
.forma { margin: 0; font-weight: 400; }
.forma input { position: absolute; opacity: 0; }
.forma span { display: block; padding: .5rem; text-align: center; border: 1px solid var(--borda); border-radius: 8px; cursor: pointer; }
.forma input:checked + span { background: var(--primaria); border-color: var(--primaria); color: #fff; }
.forma input:focus-visible + span { outline: 2px solid var(--primaria); }
.vinculo { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.vinculo select, .vinculo input { width: auto; margin: 0; }
textarea { font-family: var(--fonte); font-size: .95rem; }

@media (max-width: 800px) {
    .pdv { grid-template-columns: 1fr; }
    .carrinho { position: static; }
    .tabela { font-size: .9rem; }
}
@media print {
    .topo, .submenu, .nao-imprimir, .aviso { display: none !important; }
    body { background: #fff; }
    .cartao { border: 0; }
}

/* Filial de trabalho no cabeçalho */
.filial form { margin: 0; }
.filial select { margin: 0; padding: .3rem .5rem; width: auto; }
.sem-filial { color: var(--erro-texto); font-weight: 600; }