/* ============================================================
   PDV Petitana — componentes do balcão.

   REGRA: nenhum valor literal aqui. Todo tamanho, cor, raio e espaçamento sai
   de var(--ds-*), definido em tokens.css. Um `#0059d5` solto neste arquivo é
   um lugar que não acompanha a mudança do design system.

   As poucas exceções são estruturais e não estéticas (100%, 0, 1fr, auto).
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
}

body {
  font-family: var(--ds-font-sans);
  font-size: var(--ds-fs-base);
  line-height: var(--ds-lh-base);
  color: var(--ds-neutral-textHigh);
  background: var(--ds-neutral-surface);
  display: flex;
  flex-direction: column;
}

/* Toda coluna de dinheiro. Sem isto o "1" ocupa menos que o "8" e a coluna de
   valores fica serrilhada, que é o detalhe que faz uma tabela parecer amadora. */
.linha__unitario, .linha__desconto, .linha__total,
.totais dd, .peca__preco, .passo__valor {
  font-variant-numeric: tabular-nums;
}

/* =============================================================== moldura
   Copiada do PDV da Nuvemshop: trilho de icones a esquerda, barra superior
   com a identidade da loja, conteudo ocupando o resto. Trilho e barra sao
   brancos; o cinza (--ds-neutral-surface) fica para o fundo das telas de
   gestao, dos estados vazios e do hover.                                   */
.app {
  display: grid;
  grid-template-columns: auto 1fr;
  height: 100%;
  min-height: 0;
}
.app--solta { grid-template-columns: 1fr; }

.app__corpo {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

/* --------------------------------------------------------------- trilho */
.trilho {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ds-sp-1);
  width: var(--ds-sp-14);
  padding: var(--ds-sp-2) 0;
  background: var(--ds-neutral-background);
  border-right: var(--ds-bw-1) solid var(--ds-neutral-surfaceHighlight);
  z-index: var(--ds-z-100);
}

.trilho__marca {
  display: grid;
  place-items: center;
  width: var(--ds-sp-8);
  height: var(--ds-sp-8);
  margin-bottom: var(--ds-sp-3);
  border-radius: var(--ds-r-2);
  background: var(--ds-primary-interactive);
  color: var(--ds-neutral-background);
  font-weight: var(--ds-fw-bold);
  text-decoration: none;
}

.trilho__item {
  display: grid;
  place-items: center;
  width: var(--ds-sp-10);
  height: var(--ds-sp-10);
  border-radius: var(--ds-r-2);
  color: var(--ds-neutral-textLow);
  text-decoration: none;
  transition: background var(--ds-speed-fast), color var(--ds-speed-fast);
}
.trilho__item:hover {
  background: var(--ds-neutral-surface);
  color: var(--ds-neutral-textHigh);
}

.trilho__item--ativo {
  background: var(--ds-primary-surface);
  color: var(--ds-primary-interactive);
}

/* Todo icone SVG do sistema. O `currentColor` no arquivo faz a cor vir daqui,
   entao o estado (cinza, azul no ativo) e uma regra so. */
.icone { width: var(--ds-sp-5); height: var(--ds-sp-5); display: block; }

/* ----------------------------------------------------------------- topo */
.topo {
  display: flex;
  align-items: center;
  gap: var(--ds-sp-3);
  padding: 0 var(--ds-sp-6);
  height: var(--ds-sp-16);
  background: var(--ds-neutral-background);
  border-bottom: var(--ds-bw-1) solid var(--ds-neutral-surfaceHighlight);
  z-index: var(--ds-z-200);
}

.topo__loja {
  font-weight: var(--ds-fw-bold);
  font-size: var(--ds-fs-highlight);
  color: var(--ds-neutral-textHigh);
  margin-right: auto;
}

.topo__conta { display: flex; align-items: center; gap: var(--ds-sp-2); }
.topo__conta form { margin: 0; }

.topo__avatar {
  display: grid;
  place-items: center;
  width: var(--ds-sp-8);
  height: var(--ds-sp-8);
  border-radius: var(--ds-r-half);
  background: var(--ds-primary-surface);
  color: var(--ds-primary-interactive);
  font-size: var(--ds-fs-caption);
  font-weight: var(--ds-fw-bold);
}

.topo__quem { color: var(--ds-neutral-textLow); }

.topo__sair {
  display: grid;
  place-items: center;
  width: var(--ds-control-gestao);
  height: var(--ds-control-gestao);
  border: 0;
  background: none;
  border-radius: var(--ds-r-2);
  color: var(--ds-neutral-textLow);
  cursor: pointer;
}
.topo__sair:hover {
  background: var(--ds-neutral-surface);
  color: var(--ds-neutral-textHigh);
}

/* Rotulo que existe para o leitor de tela e nao ocupa espaco na tela. */
.visualmente-oculto {
  position: absolute;
  width: var(--ds-bw-1);
  height: var(--ds-bw-1);
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --------------------------------------------------------------- pagina */
.pagina {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  background: var(--ds-neutral-background);
}

/* Tela de gestao vive no cinza, com os cartoes brancos por cima -- e o
   contrario do balcao, que e branco de ponta a ponta. E o mesmo par do
   original: a tela de trabalho e branca, a de consulta e cinza. */
.pagina--gestao { background: var(--ds-neutral-surface); }
.pagina--solta {
  display: grid;
  place-items: center;
  background: var(--ds-neutral-surface);
}

/* --------------------------------------------------------------- balcao */
.balcao {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  height: 100%;
  min-height: 0;
}

.balcao__esquerda, .balcao__direita {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: var(--ds-sp-6);
}

/* A divisoria e uma borda, nao uma troca de fundo: as duas colunas sao
   brancas no original, e o contraste vem dos cartoes. */
.balcao__direita {
  border-left: var(--ds-bw-1) solid var(--ds-neutral-surfaceHighlight);
}

@media (max-width: 1024px) {
  .balcao { grid-template-columns: 1fr; }
  .balcao__direita {
    border-left: 0;
    border-top: var(--ds-bw-1) solid var(--ds-neutral-surfaceHighlight);
  }
}

.secao__titulo {
  margin: 0 0 var(--ds-sp-4);
  font-size: var(--ds-fs-h4);
  line-height: var(--ds-lh-h4);
  font-weight: var(--ds-fw-bold);
}

.venda__cabecalho {
  display: flex;
  align-items: center;
  gap: var(--ds-sp-3);
  margin-bottom: var(--ds-sp-4);
}
.venda__cabecalho form { margin: 0; }

.venda__titulo {
  margin: 0 auto 0 0;
  font-size: var(--ds-fs-h3);
  line-height: var(--ds-lh-h3);
  font-weight: var(--ds-fw-bold);
}

.venda__descartar {
  display: grid;
  place-items: center;
  width: var(--ds-control-gestao);
  height: var(--ds-control-gestao);
  border: var(--ds-bw-1) solid var(--ds-neutral-surfaceHighlight);
  border-radius: var(--ds-r-2);
  background: var(--ds-neutral-background);
  color: var(--ds-neutral-textLow);
  cursor: pointer;
}
.venda__descartar:hover {
  border-color: var(--ds-danger-interactive);
  color: var(--ds-danger-interactive);
  background: var(--ds-danger-surface);
}

/* ----------------------------------------------------- cartoes de acao */
.acoes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: var(--ds-sp-4);
  margin-top: var(--ds-sp-4);
}
/* `display: contents` para o <form> do cancelar nao virar uma celula com
   altura propria: o botao dentro dele participa do grid como os outros. */
.acoes form { margin: 0; display: contents; }

.acao {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--ds-sp-6);
  width: 100%;
  min-height: var(--ds-sp-20);
  padding: var(--ds-sp-4);
  background: var(--ds-neutral-background);
  border: var(--ds-bw-1) solid var(--ds-neutral-surfaceHighlight);
  border-radius: var(--ds-r-2);
  font: inherit;
  color: var(--ds-neutral-textHigh);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--ds-speed-fast), box-shadow var(--ds-speed-fast);
}
.acao:hover {
  border-color: var(--ds-primary-interactive);
  box-shadow: var(--ds-shadow-1);
}
.acao:hover .acao__icone { background: var(--ds-primary-surfaceHighlight); }

.acao--perigo:hover { border-color: var(--ds-danger-interactive); }
.acao--perigo:hover .acao__icone {
  background: var(--ds-danger-surface);
  color: var(--ds-danger-interactive);
}

/* Quadrado azul-claro atrás do ícone: é o que o original faz, e é o que dá
   ao cartão um ponto de cor sem precisar de um botão colorido. */
.acao__icone {
  display: grid;
  place-items: center;
  width: var(--ds-sp-10);
  height: var(--ds-sp-10);
  border-radius: var(--ds-r-2);
  background: var(--ds-primary-surface);
  color: var(--ds-primary-interactive);
}
.acao__rotulo {
  font-weight: var(--ds-fw-bold);
  font-size: var(--ds-fs-highlight);
}

/* ---------------------------------------------------------------- busca */
.busca-linha { display: flex; gap: var(--ds-sp-2); }

.busca__leitor {
  display: grid;
  place-items: center;
  width: var(--ds-control-balcao);
  height: var(--ds-control-balcao);
  flex: none;
  background: var(--ds-neutral-background);
  border: var(--ds-bw-1) solid var(--ds-neutral-interactive);
  border-radius: var(--ds-r-2);
  color: var(--ds-neutral-textHigh);
  cursor: pointer;
}
.busca__leitor:hover {
  border-color: var(--ds-primary-interactive);
  color: var(--ds-primary-interactive);
}

.busca {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--ds-sp-2);
  padding: 0 var(--ds-sp-3);
  height: var(--ds-control-balcao);
  background: var(--ds-neutral-background);
  border: var(--ds-bw-1) solid var(--ds-neutral-interactive);
  border-radius: var(--ds-r-2);
}
.busca:focus-within {
  border-color: var(--ds-primary-interactive);
  box-shadow: var(--ds-shadow-1);
}

.busca__icone { color: var(--ds-neutral-textLow); display: flex; }

.busca__campo {
  flex: 1;
  border: 0;
  outline: 0;
  background: none;
  font: inherit;
  font-size: var(--ds-fs-highlight);
  color: var(--ds-neutral-textHigh);
}

/* O indicador do htmx: some quando parado, aparece durante a requisição. */
.busca__spinner {
  width: var(--ds-sp-4);
  height: var(--ds-sp-4);
  border: var(--ds-bw-2) solid var(--ds-neutral-surfaceHighlight);
  border-top-color: var(--ds-primary-interactive);
  border-radius: var(--ds-r-half);
  opacity: 0;
  transition: opacity var(--ds-speed-fast);
}
.htmx-request .busca__spinner,
.htmx-request.busca__spinner {
  opacity: 1;
  animation: girar var(--ds-speed-slower) linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* ----------------------------------------------------------- resultados */
.resultados {
  margin-top: var(--ds-sp-3);
  overflow-y: auto;
  min-height: 0;
  flex: 1;
}

.resultados__lista { list-style: none; margin: 0; padding: 0; }

.peca + .peca { border-top: var(--ds-bw-1) solid var(--ds-neutral-surfaceHighlight); }

.peca__botao {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "nome preco" "sku saldo";
  gap: var(--ds-sp-1) var(--ds-sp-3);
  width: 100%;
  min-height: var(--ds-control-balcao);
  padding: var(--ds-sp-2) var(--ds-sp-3);
  border: 0;
  background: var(--ds-neutral-background);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.peca__botao:hover  { background: var(--ds-primary-surface); }
.peca__botao:active { background: var(--ds-primary-surfaceHighlight); }

.peca__nome  { grid-area: nome; font-size: var(--ds-fs-highlight); }
.peca__variante {
  font-style: normal;
  color: var(--ds-neutral-textLow);
  margin-left: var(--ds-sp-2);
}
.peca__sku {
  grid-area: sku;
  font-family: var(--ds-font-mono);
  font-size: var(--ds-fs-caption);
  color: var(--ds-neutral-textLow);
}
.peca__preco {
  grid-area: preco;
  font-weight: var(--ds-fw-bold);
  font-size: var(--ds-fs-highlight);
}

.saldo {
  grid-area: saldo;
  justify-self: end;
  font-size: var(--ds-fs-caption);
  color: var(--ds-neutral-textLow);
}
.saldo--zero       { color: var(--ds-danger-interactive);  font-weight: var(--ds-fw-medium); }
.saldo--baixo      { color: var(--ds-warning-interactive); font-weight: var(--ds-fw-medium); }
.saldo--ilimitado  { color: var(--ds-success-interactiveHover); }

/* ------------------------------------------------------------- carrinho */
/* A coluna da direita ja e branca e ja tem padding: aqui so sobra a divisao
   entre a lista rolavel e o rodape colado embaixo. */
#carrinho {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
}

.linhas {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.linha {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  align-items: center;
  gap: var(--ds-sp-3);
  padding: var(--ds-sp-3);
  min-height: var(--ds-control-balcao);
}
.linha + .linha { border-top: var(--ds-bw-1) solid var(--ds-neutral-surfaceHighlight); }

.linha__peca { display: flex; flex-direction: column; gap: var(--ds-sp-1); }
.linha__nome {
  font-size: var(--ds-fs-highlight);
  font-weight: var(--ds-fw-bold);
}
.linha__variante {
  font-style: normal;
  font-size: var(--ds-fs-base);
  color: var(--ds-neutral-textLow);
}
.linha__sku {
  font-family: var(--ds-font-mono);
  font-size: var(--ds-fs-caption);
  font-weight: var(--ds-fw-regular);
  color: var(--ds-neutral-textLow);
}

.linha__qtd { display: flex; align-items: center; gap: var(--ds-sp-2); }

.passo {
  width: var(--ds-sp-8);
  height: var(--ds-sp-8);
  border: var(--ds-bw-1) solid var(--ds-neutral-interactive);
  border-radius: var(--ds-r-2);
  background: var(--ds-neutral-background);
  font-size: var(--ds-fs-highlight);
  cursor: pointer;
}
.passo:hover { border-color: var(--ds-primary-interactive); color: var(--ds-primary-interactive); }
/* Caixa com borda, e nao um numero solto: no original o contador parece um
   campo, e isso e o que diz que ele muda. */
.passo__valor {
  display: grid;
  place-items: center;
  min-width: var(--ds-sp-11);
  height: var(--ds-sp-8);
  border: var(--ds-bw-1) solid var(--ds-neutral-surfaceHighlight);
  border-radius: var(--ds-r-2);
  font-weight: var(--ds-fw-medium);
  font-variant-numeric: tabular-nums;
}

.linha__valores { display: flex; flex-direction: column; align-items: flex-end; }
.linha__unitario { font-size: var(--ds-fs-caption); color: var(--ds-neutral-textLow); }
.linha__desconto { font-size: var(--ds-fs-caption); color: var(--ds-success-interactiveHover); }
.linha__total {
  font-size: var(--ds-fs-highlight);
  font-weight: var(--ds-fw-bold);
}

.linha__remover {
  width: var(--ds-sp-8);
  height: var(--ds-sp-8);
  border: 0;
  border-radius: var(--ds-r-2);
  background: none;
  color: var(--ds-neutral-textLow);
  font-size: var(--ds-fs-h4);
  cursor: pointer;
}
.linha__remover:hover { background: var(--ds-danger-surface); color: var(--ds-danger-interactive); }

/* --------------------------------------------------------- rodapé fixo */
/* O total NUNCA sai da tela: o rodapé é irmão da lista rolável, não filho. */
.rodape {
  border-top: var(--ds-bw-1) solid var(--ds-neutral-surfaceHighlight);
  padding-top: var(--ds-sp-4);
  margin-top: var(--ds-sp-4);
  background: var(--ds-neutral-background);
}

.totais { margin: 0 0 var(--ds-sp-3); }
.totais__linha { display: flex; justify-content: space-between; }
.totais__linha dt, .totais__linha dd { margin: 0; }
.totais__linha dt { color: var(--ds-neutral-textLow); }
.totais__linha--desconto dd { color: var(--ds-success-interactiveHover); }
.totais__linha--total {
  margin-top: var(--ds-sp-2);
  padding-top: var(--ds-sp-2);
  border-top: var(--ds-bw-1) solid var(--ds-neutral-surfaceHighlight);
  font-size: var(--ds-fs-h4);
  font-weight: var(--ds-fw-bold);
}

.rodape__acoes { display: flex; gap: var(--ds-sp-2); }
.rodape__acoes form { margin: 0; }

/* --------------------------------------------------------------- botões */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--ds-control-balcao);
  padding: 0 var(--ds-sp-4);
  border: var(--ds-bw-1) solid transparent;
  border-radius: var(--ds-r-2);
  font: inherit;
  font-size: var(--ds-fs-highlight);
  font-weight: var(--ds-fw-medium);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--ds-speed-fast);
}
.botao:disabled { opacity: .5; cursor: not-allowed; }
.botao--largo { width: 100%; }

/* Um botão primário por tela, e ele cresce para ocupar o resto do rodapé. */
.botao--primario {
  flex: 1;
  background: var(--ds-primary-interactive);
  color: var(--ds-neutral-background);
}
.botao--primario:hover:not(:disabled) { background: var(--ds-primary-interactiveHover); }

.botao--secundario {
  background: var(--ds-neutral-background);
  border-color: var(--ds-neutral-interactive);
  color: var(--ds-neutral-textHigh);
}
.botao--secundario:hover:not(:disabled) { border-color: var(--ds-primary-interactive); }

/* Vermelho só para o que apaga — aqui, descartar a venda. */
.botao--perigo {
  background: var(--ds-neutral-background);
  border-color: var(--ds-danger-surfaceHighlight);
  color: var(--ds-danger-interactive);
}
.botao--perigo:hover:not(:disabled) { background: var(--ds-danger-surface); }

/* --------------------------------------------------------- estado vazio */
/* Ícone, título, frase de instrução e o botão que resolve. Nunca "nenhum
   resultado" sozinho, que informa o problema e esconde a saída. */
.vazio {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--ds-sp-2);
  flex: 1;
  padding: var(--ds-sp-8) var(--ds-sp-4);
  text-align: center;
}
.vazio__icone  { font-size: var(--ds-fs-h1); opacity: .6; }
.vazio .botao  { margin-top: var(--ds-sp-2); }
.vazio__titulo { margin: 0; font-size: var(--ds-fs-h4); font-weight: var(--ds-fw-bold); }
.vazio__frase  { margin: 0; max-width: var(--ds-bp-sm); color: var(--ds-neutral-textLow); }

.dica { color: var(--ds-neutral-textLow); padding: var(--ds-sp-3); margin: 0; }

.erro {
  padding: var(--ds-sp-2) var(--ds-sp-3);
  border-radius: var(--ds-r-2);
  background: var(--ds-danger-surface);
  color: var(--ds-danger-textLow);
  margin: 0 0 var(--ds-sp-3);
}

/* O percentual ao lado do rotulo: menor e discreto, porque o numero que
   decide continua sendo o valor em reais. */
.totais__pct {
  font-size: var(--ds-fs-caption);
  color: var(--ds-neutral-textLow);
  font-weight: var(--ds-fw-regular);
}

/* ------------------------------------- botao de desconto de uma peca so */
/* Neutro e nao danger: dar desconto nao apaga nada. O vermelho da linha fica
   so no X de remover. */
.linha__desconto-abrir {
  width: var(--ds-control-gestao);
  height: var(--ds-control-gestao);
  border: none;
  border-radius: var(--ds-r-2);
  background: transparent;
  color: var(--ds-neutral-textLow);
  font-size: var(--ds-fs-base);
  font-weight: var(--ds-fw-medium);
  cursor: pointer;
}

.linha__desconto-abrir:hover {
  background: var(--ds-primary-surface);
  color: var(--ds-primary-interactive);
}

/* ------------------------------------------- peca sem saldo no carrinho */
/* Warning e nao danger: nao e erro do operador nem acao destrutiva -- e uma
   divergencia entre a arara e o sistema, que alguem vai resolver. Danger fica
   reservado ao que apaga, como manda o CLAUDE.md. */
.linha--falta { background: var(--ds-warning-surface); }

.linha__falta {
  font-size: var(--ds-fs-caption);
  font-weight: var(--ds-fw-medium);
  color: var(--ds-warning-textLow);
}

.aviso {
  display: flex;
  align-items: center;
  gap: var(--ds-sp-2);
  flex-wrap: wrap;
  padding: var(--ds-sp-2) var(--ds-sp-3);
  margin: 0 0 var(--ds-sp-3);
  border-radius: var(--ds-r-2);
  background: var(--ds-warning-surface);
  color: var(--ds-warning-textLow);
  font-size: var(--ds-fs-caption);
  line-height: var(--ds-lh-caption);
}

.aviso__link {
  margin-left: auto;
  color: var(--ds-warning-interactive);
  font-weight: var(--ds-fw-medium);
  white-space: nowrap;
}

.aviso__link:hover { color: var(--ds-warning-interactiveHover); }

/* --------------------------------------------------------------- painel */
.painel {
  position: fixed;
  inset: 0;
  z-index: var(--ds-z-800);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--ds-sp-4);
  background: rgb(0 0 0 / .35);
}

.painel__caixa {
  width: 100%;
  max-width: var(--ds-bp-sm);
  padding: var(--ds-sp-6);
  border-radius: var(--ds-r-3);
  background: var(--ds-neutral-background);
  box-shadow: var(--ds-shadow-5);
}

.painel__titulo { margin: 0; font-size: var(--ds-fs-h4); font-weight: var(--ds-fw-bold); }
.painel__sub    { margin: var(--ds-sp-1) 0 var(--ds-sp-4); color: var(--ds-neutral-textLow); }
.painel__acoes  { display: flex; gap: var(--ds-sp-2); margin-top: var(--ds-sp-5); }

/* --------------------------------------------------------------- campos */
.campo { display: flex; flex-direction: column; gap: var(--ds-sp-1); margin-bottom: var(--ds-sp-4); }
.campo__rotulo { font-weight: var(--ds-fw-medium); color: var(--ds-neutral-textLow); }
.campo__entrada {
  height: var(--ds-control-balcao);
  padding: 0 var(--ds-sp-3);
  border: var(--ds-bw-1) solid var(--ds-neutral-interactive);
  border-radius: var(--ds-r-2);
  font: inherit;
  font-size: var(--ds-fs-highlight);
}
.campo__entrada:focus { outline: 0; border-color: var(--ds-primary-interactive); }

.opcoes { display: flex; gap: var(--ds-sp-4); border: 0; padding: 0; margin: 0; }
.opcoes__legenda { color: var(--ds-neutral-textLow); font-weight: var(--ds-fw-medium); }
.opcao { display: flex; align-items: center; gap: var(--ds-sp-1); cursor: pointer; }

/* --------------------------------------------------------------- login */
.entrada {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: var(--ds-sp-4);
}
.entrada__caixa {
  width: 100%;
  max-width: var(--ds-bp-sm);
  padding: var(--ds-sp-8);
  border-radius: var(--ds-r-3);
  background: var(--ds-neutral-background);
  box-shadow: var(--ds-shadow-3);
}
.entrada__titulo {
  margin: 0;
  font-size: var(--ds-fs-h2);
  font-weight: var(--ds-fw-bold);
  color: var(--ds-primary-interactive);
}
.entrada__sub { margin: var(--ds-sp-1) 0 var(--ds-sp-6); color: var(--ds-neutral-textLow); }

/* ------------------------------------------------------- meios de pagamento */
/* Um campo por meio: e o que deixa dividir entre dinheiro e cartao sem
   JavaScript montando linhas. Campo vazio e meio nao usado. */
/* ------------------------------------------------- meios no pagamento
   Cartao com icone, nome e o campo do valor -- o desenho do PDV de
   referencia. O nome da classe e `meios-grade` e nao `meios` porque `.meios`
   ja e o resumo por meio da tela de vendas: dois componentes com o mesmo nome
   viviam neste arquivo, e o de baixo vencia em silencio.                    */
.meios-grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: var(--ds-sp-2);
  margin-bottom: var(--ds-sp-4);
}

.meio {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--ds-sp-3);
  padding: var(--ds-sp-2) var(--ds-sp-3);
  border: var(--ds-bw-1) solid var(--ds-neutral-surfaceHighlight);
  border-radius: var(--ds-r-2);
  background: var(--ds-neutral-background);
}
.meio:focus-within { border-color: var(--ds-primary-interactive); }

.meio__icone {
  display: grid;
  place-items: center;
  width: var(--ds-sp-9);
  height: var(--ds-sp-9);
  border-radius: var(--ds-r-full);
  border: var(--ds-bw-1) solid var(--ds-neutral-surfaceHighlight);
  color: var(--ds-neutral-textHigh);
}

.meio__identidade { display: flex; flex-direction: column; gap: var(--ds-sp-0-5); min-width: 0; }
.meio__nome { font-weight: var(--ds-fw-medium); }

/* A etiqueta verde do original, para o desconto automatico do meio. */
.meio__selo {
  align-self: flex-start;
  padding: 0 var(--ds-sp-2);
  border-radius: var(--ds-r-full);
  background: var(--ds-success-surface);
  color: var(--ds-success-textLow);
  font-size: var(--ds-fs-caption);
  line-height: var(--ds-lh-caption);
}

.meio__nota {
  font-weight: var(--ds-fw-regular);
  font-size: var(--ds-fs-caption);
  color: var(--ds-neutral-textLow);
}

.meio__valor {
  width: var(--ds-sp-20);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------- o total, antes dos botoes */
.cobrar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ds-sp-3);
  padding-top: var(--ds-sp-4);
  border-top: var(--ds-bw-1) solid var(--ds-neutral-surfaceHighlight);
}
.cobrar__rotulo {
  font-size: var(--ds-fs-h4);
  font-weight: var(--ds-fw-bold);
}
.cobrar__valor {
  font-size: var(--ds-fs-h4);
  font-weight: var(--ds-fw-bold);
  font-variant-numeric: tabular-nums;
}
.cobrar__nota {
  margin: var(--ds-sp-1) 0 0;
  font-size: var(--ds-fs-caption);
  color: var(--ds-neutral-textLow);
}

/* ------------------------------------ cabecalho do painel, com o voltar */
.painel__cabecalho {
  display: flex;
  align-items: center;
  gap: var(--ds-sp-3);
  margin-bottom: var(--ds-sp-2);
}

.painel__voltar {
  display: grid;
  place-items: center;
  width: var(--ds-control-gestao);
  height: var(--ds-control-gestao);
  flex: none;
  border: var(--ds-bw-1) solid var(--ds-neutral-surfaceHighlight);
  border-radius: var(--ds-r-2);
  background: var(--ds-neutral-background);
  color: var(--ds-neutral-textHigh);
  text-decoration: none;
}
.painel__voltar:hover {
  border-color: var(--ds-primary-interactive);
  color: var(--ds-primary-interactive);
}

.campo__nota { font-weight: var(--ds-fw-regular); color: var(--ds-neutral-textLow); }

/* -------------------------------------------------------------- comprovante */
.comprovante {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ds-sp-4);
  padding: var(--ds-sp-6) var(--ds-sp-4);
}

.comprovante__papel {
  width: 100%;
  max-width: var(--ds-bp-sm);
  padding: var(--ds-sp-8);
  border-radius: var(--ds-r-3);
  background: var(--ds-neutral-background);
  box-shadow: var(--ds-shadow-3);
}

.comprovante__topo { text-align: center; margin-bottom: var(--ds-sp-6); }
.comprovante__marca {
  margin: 0;
  font-size: var(--ds-fs-h3);
  font-weight: var(--ds-fw-bold);
  color: var(--ds-primary-interactive);
}
.comprovante__numero {
  margin: var(--ds-sp-1) 0 0;
  font-size: var(--ds-fs-h5);
  font-weight: var(--ds-fw-bold);
  font-variant-numeric: tabular-nums;
}
.comprovante__data { margin: var(--ds-sp-0-5) 0 0; color: var(--ds-neutral-textLow); font-size: var(--ds-fs-caption); }

.comprovante__itens { width: 100%; border-collapse: collapse; }
.comprovante__itens th {
  text-align: left;
  padding-bottom: var(--ds-sp-2);
  border-bottom: var(--ds-bw-1) solid var(--ds-neutral-surfaceHighlight);
  color: var(--ds-neutral-textLow);
  font-weight: var(--ds-fw-medium);
  font-size: var(--ds-fs-caption);
}
.comprovante__itens td { padding: var(--ds-sp-2) 0; vertical-align: top; }
.comprovante__itens tr + tr td { border-top: var(--ds-bw-1) solid var(--ds-neutral-surface); }
.comprovante__itens .numero { text-align: right; font-variant-numeric: tabular-nums; }

.comprovante__variante { font-style: normal; color: var(--ds-neutral-textLow); }
.comprovante__sku {
  display: block;
  font-family: var(--ds-font-mono);
  font-size: var(--ds-fs-caption);
  color: var(--ds-neutral-textLow);
}

.comprovante__totais, .comprovante__pagamentos {
  margin: var(--ds-sp-4) 0 0;
  padding-top: var(--ds-sp-3);
  border-top: var(--ds-bw-1) solid var(--ds-neutral-surfaceHighlight);
}
.comprovante__totais dd, .comprovante__pagamentos dd { font-variant-numeric: tabular-nums; }
.totais__linha--troco dd { color: var(--ds-warning-interactive); font-weight: var(--ds-fw-bold); }

.comprovante__rodape {
  margin-top: var(--ds-sp-6);
  padding-top: var(--ds-sp-4);
  border-top: var(--ds-bw-1) solid var(--ds-neutral-surfaceHighlight);
  text-align: center;
}
.comprovante__qr svg { width: var(--ds-sp-20); height: var(--ds-sp-20); }
.comprovante__instrucao { margin: var(--ds-sp-2) 0 0; color: var(--ds-neutral-textLow); font-size: var(--ds-fs-caption); }

/* O carimbo enquanto a NFC-e estiver fora do escopo. Sem ele o papel se parece
   demais com um cupom fiscal. */
.comprovante__aviso {
  margin: var(--ds-sp-3) 0 0;
  padding: var(--ds-sp-1) var(--ds-sp-3);
  display: inline-block;
  border: var(--ds-bw-1) solid var(--ds-neutral-interactive);
  border-radius: var(--ds-r-full);
  color: var(--ds-neutral-textLow);
  font-size: var(--ds-fs-caption);
  text-transform: uppercase;
  letter-spacing: var(--ds-sp-0-5);
}

.comprovante__acoes { display: flex; gap: var(--ds-sp-2); }

/* =====================================================================
   Retaguarda -- densidade de GESTAO
   ===================================================================== */

/* A troca de densidade que o CLAUDE.md pede: 40px para tela de sentar e
   olhar, contra os 56px do balcao. A classe manda no bloco inteiro em vez de
   cada componente saber onde esta. */
.gestao .botao,
.gestao .campo__entrada {
  height: var(--ds-control-gestao);
  font-size: var(--ds-fs-base);
}

.pagina-gestao {
  display: flex;
  flex-direction: column;
  gap: var(--ds-sp-4);
  padding: var(--ds-sp-6);
  max-width: var(--ds-bp-lg);
  margin: 0 auto;
  width: 100%;
}

.cabecalho {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--ds-sp-4);
}

.cabecalho__titulo {
  margin: 0;
  font-size: var(--ds-fs-h3);
  line-height: var(--ds-lh-h3);
  font-weight: var(--ds-fw-bold);
}

.cabecalho__sub {
  margin: var(--ds-sp-0-5) 0 0;
  color: var(--ds-neutral-textLow);
  font-size: var(--ds-fs-caption);
}

.filtros { display: flex; align-items: flex-end; gap: var(--ds-sp-2); flex-wrap: wrap; }
.filtros__campo { display: flex; flex-direction: column; gap: var(--ds-sp-1); }
.filtros__rotulo {
  font-size: var(--ds-fs-caption);
  color: var(--ds-neutral-textLow);
  font-weight: var(--ds-fw-medium);
}

.dias { display: flex; gap: var(--ds-sp-2); flex-wrap: wrap; }

/* ------------------------------------------------------- resumo do dia */
.resumo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--ds-sp-3);
}

.resumo__caixa {
  display: flex;
  flex-direction: column;
  gap: var(--ds-sp-1);
  padding: var(--ds-sp-3);
  border-radius: var(--ds-r-2);
  background: var(--ds-neutral-surface);
  border: var(--ds-bw-1) solid var(--ds-neutral-surfaceHighlight);
}

.resumo__rotulo {
  font-size: var(--ds-fs-caption);
  color: var(--ds-neutral-textLow);
  text-transform: uppercase;
  letter-spacing: var(--ds-sp-0-5);
}

.resumo__valor {
  font-size: var(--ds-fs-h4);
  font-variant-numeric: tabular-nums;
}

.resumo__valor--desconto { color: var(--ds-success-interactiveHover); }

/* -------------------------------------------- entrada por meio de pgto */
.meios {
  display: flex;
  flex-direction: column;
  gap: var(--ds-sp-1);
  padding: var(--ds-sp-3);
  border-radius: var(--ds-r-2);
  border: var(--ds-bw-1) solid var(--ds-neutral-surfaceHighlight);
}

.meios__linha {
  display: flex;
  align-items: baseline;
  gap: var(--ds-sp-2);
}

.meios__nome { flex: 1; }
.meios__qtd { color: var(--ds-neutral-textLow); font-size: var(--ds-fs-caption); }
.meios__total { font-variant-numeric: tabular-nums; font-weight: var(--ds-fw-medium); }

.meios__nota {
  margin: var(--ds-sp-2) 0 0;
  color: var(--ds-neutral-textLow);
  font-size: var(--ds-fs-caption);
}

/* --------------------------------------------------------- a tabela */
/* O container rola sozinho: numa tela estreita a tabela nao pode empurrar o
   body para os lados. */
.tabela {
  width: 100%;
  border-collapse: collapse;
  display: block;
  overflow-x: auto;
}

.tabela thead th {
  text-align: left;
  padding: var(--ds-sp-2) var(--ds-sp-3);
  font-size: var(--ds-fs-caption);
  color: var(--ds-neutral-textLow);
  text-transform: uppercase;
  letter-spacing: var(--ds-sp-0-5);
  border-bottom: var(--ds-bw-1) solid var(--ds-neutral-surfaceHighlight);
  white-space: nowrap;
}

.tabela td {
  padding: var(--ds-sp-3);
  border-bottom: var(--ds-bw-1) solid var(--ds-neutral-surfaceHighlight);
  white-space: nowrap;
}

.tabela .numero {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.tabela__linha:hover { background: var(--ds-neutral-surface); }

.tabela__link {
  color: var(--ds-primary-interactive);
  font-weight: var(--ds-fw-medium);
  font-variant-numeric: tabular-nums;
}

.tabela__meios { display: flex; gap: var(--ds-sp-1); flex-wrap: wrap; }

.etiqueta {
  display: inline-block;
  padding: var(--ds-sp-0-5) var(--ds-sp-2);
  border-radius: var(--ds-r-full);
  background: var(--ds-neutral-surface);
  border: var(--ds-bw-1) solid var(--ds-neutral-surfaceHighlight);
  font-size: var(--ds-fs-caption);
  color: var(--ds-neutral-textLow);
}

@media print {
  .topo, .comprovante__acoes { display: none; }
  .comprovante__papel { box-shadow: var(--ds-shadow-0); padding: 0; }
  body { background: var(--ds-neutral-background); }
}

/* ------------------------------------------------------- retaguarda: estoque
   As classes `.saldo--*` são as MESMAS do resultado de busca do balcão, de
   propósito: esgotada é vermelha nos dois lugares ou a cor deixa de significar
   alguma coisa. O `grid-area` que `.saldo` carrega não tem efeito dentro da
   célula da tabela — quem o usa é o item de busca, que é grid.               */
.saldo--ok { color: var(--ds-neutral-textLow); }

.resumo__valor--alerta { color: var(--ds-danger-interactive); }

.tabela__sku {
  font-family: var(--ds-font-mono);
  font-size: var(--ds-fs-caption);
  color: var(--ds-neutral-textLow);
  white-space: nowrap;
}

.tabela__variacao {
  display: block;
  font-size: var(--ds-fs-caption);
  color: var(--ds-neutral-textLow);
}

.tabela--trilha { font-size: var(--ds-fs-caption); }

/* ------------------------------------------------------- ajustes
   Cabecalho de secao com uma acao a direita: as listas de ajustes sao varias
   na mesma pagina, e cada uma precisa do proprio "criar". */
.secao__cabecalho {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ds-sp-3);
}

/* Filha da arvore de categorias. Recuo em vez de tabela aninhada: a arvore e
   rasa (duas camadas), e uma tabela dentro da outra quebraria o alinhamento
   das colunas de contagem, que e o que se le nesta tela. */
.tabela__filha {
  padding-left: var(--ds-sp-6);
  color: var(--ds-neutral-textLow);
}

/* ---------------------------------------------- cadastro e matriz
   Atalhos entre as tres partes de um produto (preco, cadastro, pecas): sao
   navegacao dentro do painel, nao acoes -- por isso ficam no topo e nao no
   rodape, onde mora o botao que grava. */
.painel__atalhos {
  display: flex;
  gap: var(--ds-sp-2);
  margin: var(--ds-sp-3) 0 var(--ds-sp-4);
  flex-wrap: wrap;
}

/* Descricao e texto livre: precisa de altura, e a altura de controle nao vale
   para campo de varias linhas. */
.campo__entrada--texto {
  height: auto;
  padding: var(--ds-sp-2) var(--ds-sp-3);
  line-height: var(--ds-lh-base);
  resize: vertical;
}

/* Tags e valores de propriedade sao muitos e curtos: quebram em linhas em vez
   de empurrar o resto do painel para fora da tela. */
.opcoes--tags {
  flex-wrap: wrap;
  gap: var(--ds-sp-2) var(--ds-sp-4);
  margin-bottom: var(--ds-sp-4);
}

/* Regra completa em vez de refinar a de cima: o seletor agrupado
   `.opcoes--tags, .opcoes--grade { }` seguido de `.opcoes--grade { }` define a
   mesma classe DUAS vezes, e a guarda de CSS recusa -- foi ela que pegou isto,
   uma fatia depois de ter sido escrita. */
.opcoes--grade {
  flex-wrap: wrap;
  gap: var(--ds-sp-2) var(--ds-sp-3);
  margin-bottom: var(--ds-sp-4);
}

/* ------------------------------------------------- grade de precos
   A grade do painel de produto: doze linhas de campo de dinheiro. Densidade
   apertada de proposito -- e uma tabela para conferir, nao para operar em pe. */
.tabela--grade { font-size: var(--ds-fs-caption); }
.tabela--grade td { padding-top: var(--ds-sp-1); padding-bottom: var(--ds-sp-1); }

/* Campo de dinheiro dentro da grade: nao pode ter a altura de balcao, senao
   doze linhas nao cabem na tela e o botao de salvar sai do alcance. */
.campo__entrada--curto {
  height: var(--ds-control-gestao);
  width: 7rem;
  text-align: right;
  font-size: var(--ds-fs-base);
  font-variant-numeric: tabular-nums;
}

/* O formulario "todas as pecas" fica lado a lado: sao dois campos curtos e um
   botao, e empilhar empurraria a grade para fora da primeira tela. */
.preco-todas {
  display: flex;
  align-items: flex-end;
  gap: var(--ds-sp-3);
  flex-wrap: wrap;
}
.preco-todas .campo { flex: 0 0 auto; }
.preco-todas .campo__entrada { height: var(--ds-control-gestao); width: 9rem; }
.preco-todas .painel__acoes { margin: 0; }

.painel__secao {
  margin: var(--ds-sp-6) 0 var(--ds-sp-2);
  font-size: var(--ds-fs-h6);
  font-weight: var(--ds-fw-bold);
  color: var(--ds-neutral-textLow);
}


/* ------------------------------------------------------- caixa (F2) */
/* O esperado na gaveta é o único número grande da tela: é ele que a pessoa
   compara com o dinheiro na mão. Dois números grandes disputariam a atenção
   e nenhum dos dois seria lido. */
.resumo__valor--forte {
  font-size: var(--ds-fs-h2);
  color: var(--ds-primary-interactive);
}