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

/* Bloco, e não flex. MEDIDO em 11/09/2026: com flex, cada trecho de texto
   solto e cada <strong> viravam um item separado, com gap entre eles -- "devolva
   <strong>R$ 15,00</strong> à cliente" saía em 3 linhas, o valor isolado no
   meio. Quase todo aviso do app tem um <strong> no meio da frase. */
.aviso {
  display: block;
  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: var(--ds-sp-1);
  color: var(--ds-warning-interactive);
  font-weight: var(--ds-fw-medium);
  white-space: nowrap;
}

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

/* --------------------------------------------------------------- painel */
/* MEDIDO em 07/09/2026, no produto de 21 pecas: o modal tinha 1153px de
   conteudo numa tela de 742px e NADA rolava. "Editar cadastro" ficava em
   y = -328 e "Salvar as pecas" em y = 1089 -- os dois fora da tela, a roda do
   mouse sem efeito, e a unica forma de salvar era disparar o clique por
   script. Com catalogo real isso vale para todo produto com muitas pecas.

   A causa era `align-items: center` sem `overflow`: centralizar um filho mais
   alto que o pai empurra as duas pontas para fora, e elas ficam INALCANCAVEIS
   -- diferente de estourar para baixo, que ao menos rolaria.

   O par que resolve e `flex-start` + `overflow-y: auto` aqui, com
   `margin: auto` no filho: quando cabe, a margem automatica centraliza; quando
   nao cabe, o conteudo comeca no topo e o painel rola. Trocar so o
   `align-items` por `flex-start` deixaria o modal curto colado no topo. */
.painel {
  position: fixed;
  inset: 0;
  z-index: var(--ds-z-800);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  padding: var(--ds-sp-4);
  background: rgb(0 0 0 / .35);
}

.painel__caixa {
  width: 100%;
  max-width: var(--ds-bp-sm);
  margin: auto;
  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); }
/* O que volta numa troca, no painel de devolver em dinheiro: uma linha por peça. */
.painel__lista  { list-style: none; margin: 0 0 var(--ds-sp-4); padding: 0; display: flex; flex-direction: column; gap: var(--ds-sp-2); }

/* --------------------------------------------------------------- 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); }
/* Campo que mostra um valor que o balcão não escolhe (o crédito da troca). */
.campo__entrada[readonly] { background: var(--ds-neutral-surface); color: var(--ds-neutral-textLow); }

.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); }

/* O `padding-left` NAO e enfeite: sem ele as tres colunas de numero encostam e
   "2 | 24,90 | 49,80" sai como `224,9049,80` no papel que vai para a mao da
   cliente. Medido em producao em 09/09/2026: as celulas ocupavam
   354,70->376,66->412,71->448,80, sem um pixel entre elas. */
.comprovante__itens .numero {
  text-align: right;
  font-variant-numeric: tabular-nums;
  padding-left: var(--ds-sp-4);
}

/* Os titulos "Voltaram" e "Levou" do papel da troca (F3 fatia 5). O segundo
   vem logo depois da tabela do primeiro, dai a margem de cima. */
.comprovante__secao {
  margin: var(--ds-sp-4) 0 var(--ds-sp-1);
  font-size: var(--ds-fs-caption);
  font-weight: var(--ds-fw-bold);
  color: var(--ds-neutral-textLow);
  text-transform: uppercase;
  letter-spacing: var(--ds-sp-0-5);
}
.comprovante__defeito {
  display: block;
  font-size: var(--ds-fs-caption);
  color: var(--ds-warning-textLow);
}

.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);
}
/* `nowrap`: a 390px o valor em destaque partia em "R$ / 115,00" (captura de
   11/09/2026). Quem quebra linha e o rotulo, nunca o dinheiro. */
.comprovante__totais dd, .comprovante__pagamentos dd {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.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);
}

/* =====================================================================
   Trocas -- densidade de BALCAO (10/09/2026)
   ===================================================================== */

/* Mesmo layout de coluna da retaguarda, SEM a classe `.gestao`: a troca e
   operacao de balcao com a cliente em pe, entao os controles ficam nos 56px
   que sao o padrao, e nao nos 40px de sentar e olhar. Separar a classe de
   LAYOUT da classe de DENSIDADE e o que permite as duas combinacoes.

   Nao reusa `.balcao`: aquela e a grade de DUAS COLUNAS do checkout, e cairia
   aqui como um layout que ninguem pediu. */
.pagina-balcao {
  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%;
}

/* A peca que ja voltou continua na tabela de proposito -- some-la esconderia
   por que a conta da compra nao fecha com o que esta a vista. Apagada, e nao
   riscada: riscado no balcao se le como erro, e ela nao foi erro nenhum. */
.tabela__linha--apagada {
  color: var(--ds-neutral-textLow);
  background: var(--ds-neutral-surface);
}

.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;
  /* `min-width: 0` e o par obrigatorio do `overflow-x` aqui, e sem ele o
     overflow nao faz NADA: a tabela e filha de `.pagina-gestao`, que e
     `display: flex`, e todo item de flex nasce com `min-width: auto` -- ou
     seja, ele se recusa a encolher abaixo do proprio conteudo e empurra a
     PAGINA em vez de rolar dentro de si. Medido em producao em 09/09/2026:
     tabela de 695px numa caixa de 393px, `document.scrollWidth 685` contra
     `clientWidth 512`, com o cabecalho "SITUACAO" cortado. */
  min-width: 0;
}

.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);
}

/* --------------------------------------------------- folha de etiquetas
   A4 de 33 etiquetas (tipo Pimaco A4356), decisao do dono em 11/09/2026.
   NENHUMA medida da folha mora aqui: elas chegam como `--etq-*` no `style`
   de cada `.folha`, vindas de `FOLHA` em `pdv/services/etiquetas.py`. Duas
   copias da geometria divergem na primeira troca de folha, e o erro so
   aparece no papel, depois de gastar a adesiva.

   `@page etiquetas` e uma pagina NOMEADA: margem zero so para a folha. Um
   `@page` solto zeraria tambem a margem do comprovante.                    */
@page etiquetas { size: A4; margin: 0; }

.impressao-etiquetas {
  background: var(--ds-neutral-surface);
  padding-block: var(--ds-sp-4);
}

.etiquetas__barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-sp-4);
  max-width: var(--ds-bp-md);
  margin: 0 auto var(--ds-sp-4);
  padding: 0 var(--ds-sp-4);
}
.etiquetas__barra .painel__acoes { margin-top: 0; }

.folha {
  page: etiquetas;
  box-sizing: border-box;
  width: var(--etq-papel-largura);
  height: var(--etq-papel-altura);
  padding: var(--etq-margem-topo) 0 0 var(--etq-margem-esquerda);
  display: grid;
  grid-template-columns: repeat(var(--etq-colunas), var(--etq-largura));
  grid-template-rows: repeat(var(--etq-linhas), var(--etq-altura));
  column-gap: calc(var(--etq-passo-horizontal) - var(--etq-largura));
  row-gap: calc(var(--etq-passo-vertical) - var(--etq-altura));
  overflow: hidden;
  margin: 0 auto var(--ds-sp-6);
  background: var(--ds-neutral-background);
  box-shadow: var(--ds-shadow-3);
  break-after: page;
}
.folha:last-of-type { break-after: auto; }

.folha__etiqueta {
  box-sizing: border-box;
  padding: var(--etq-respiro);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-align: center;
  color: var(--ds-neutral-textHigh);
  outline: var(--ds-bw-1) dashed var(--ds-neutral-surfaceHighlight);
  outline-offset: calc(-1 * var(--ds-bw-1));
}

/* O nome corta com reticencias em vez de quebrar: uma segunda linha
   empurraria o codigo de barras para fora da etiqueta. A numeracao e o que
   a vendedora procura na arara, entao e a linha mais forte. */
.folha__nome, .folha__variante, .folha__codigo {
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: var(--ds-lh-caption);
}
.folha__nome { font-size: var(--ds-fs-caption); }
.folha__variante { font-size: var(--ds-fs-base); font-weight: var(--ds-fw-bold); }
.folha__codigo { font-family: var(--ds-font-mono); font-size: var(--ds-fs-caption); }
.folha__barras { display: block; flex: none; }

/* O rodape da escolha fica preso embaixo do miolo que rola: e o botao
   primario da tela, e com a lista inteira ele ficava fora de alcance. A
   remessa da entrada de mercadoria tem o mesmo problema e o mesmo desenho. */
.etiquetas__rodape, .entrada__rodape {
  position: sticky;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--ds-sp-4);
  padding-block: var(--ds-sp-4);
  background: var(--ds-neutral-surface);
  border-top: var(--ds-bw-1) solid var(--ds-neutral-surfaceHighlight);
}
.etiquetas__rodape .painel__acoes, .entrada__rodape .painel__acoes { margin-top: 0; }
.etiquetas__pular { display: flex; flex-direction: column; gap: var(--ds-sp-1); }
.etiquetas__total, .entrada__total { margin: 0; font-variant-numeric: tabular-nums; }

/* -------------------------------------------- retaguarda: entrada de mercadoria */
.entrada__estorno {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--ds-sp-2);
}
.entrada__problemas {
  margin: var(--ds-sp-2) 0 0;
  padding-left: var(--ds-sp-4);
}

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

/* A devolucao parcial, dentro da coluna "Levou". Ela existe para explicar
   por que "Vale ao todo" nao e "Levou" x "Vale cada" -- entao e legivel, e
   nao um sussurro: mesmo tamanho do SKU, mas na cor de aviso. */
.tabela__nota {
  display: block;
  font-size: var(--ds-fs-caption);
  color: var(--ds-warning-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);
}

/* Ramo da arvore de categorias. Recuo em vez de tabela aninhada: uma tabela
   dentro da outra quebraria o alinhamento das colunas de contagem, que e o
   que se le nesta tela.

   O recuo multiplica o token pelo `--nivel` que o template escreve na linha,
   entao qualquer profundidade e exibida sem regra nova. A versao anterior
   tinha uma classe fixa de "filha" -- e o codigo que a alimentava parava no
   segundo nivel, fazendo a neta sumir da tela. */
/* `.tabela td` antes da classe NAO e enfeite: o shorthand `padding` da celula
   tem especificidade (0,1,1) e venceria um `.tabela__ramo` sozinho (0,1,0).
   Foi assim que este recuo existiu por dias sem NUNCA aparecer -- a arvore saia
   com 12px em todos os niveis, e forcar `--nivel` na mao nao mudava nada. */
.tabela td.tabela__ramo {
  padding-left: calc(var(--ds-sp-6) * var(--nivel, 0));
  color: var(--ds-neutral-textLow);
}

.tabela__ramo strong {
  color: var(--ds-neutral-textHigh);
}

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

/* A quantidade que volta na troca. Nao reusa o campo de dinheiro porque o
   `type="number"` desenha as setinhas a DIREITA e o texto tambem esta a
   direita -- medido por um agente de navegador em 10/09: a seta fica em cima
   do digito. Aqui o numero vai ao centro, com folga dos dois lados, e o campo
   encolhe porque o valor tem um digito e a tabela ja tem seis colunas. */
.campo__entrada--quantidade {
  height: var(--ds-control-gestao);
  width: var(--ds-sp-16);
  padding-right: var(--ds-sp-5);
  text-align: center;
  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. */
/* `flex-start` e nao `flex-end`: alinhado pela BASE, um campo que ganha
   mensagem de erro cresce para baixo e ARRASTA os vizinhos -- medido em
   07/09/2026 no modal "Eixo novo", onde o rotulo "Ordem" chegou a aparecer
   acima de "Nome do eixo". Alinhados pelo topo, a mensagem ocupa o espaco
   dela e ninguem se move.

   O `max-width` no campo impede a outra metade do mesmo estrago: sem ele, uma
   mensagem longa ALARGA o campo, e com `flex-wrap` isso reordena a linha. */
.preco-todas {
  display: flex;
  align-items: flex-start;
  gap: var(--ds-sp-3);
  flex-wrap: wrap;
}
.preco-todas .campo { flex: 0 0 auto; max-width: 100%; }
.preco-todas .campo .erro { max-width: 16rem; }
.preco-todas .campo__entrada { height: var(--ds-control-gestao); width: 9rem; }
/* O botao alinha com a linha dos inputs, nao com o topo do rotulo. */
.preco-todas .painel__acoes { margin: var(--ds-sp-6) 0 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);
}


/* ------------------------------------------------- avisos (o balao)
   Canto superior direito, empilhando de cima para baixo. Pedido do dono em
   04/09/2026: ate entao a tela salvava e nao dizia nada.

   `z-900` e nao 800: o 800 e o overlay do painel, e boa parte das gravacoes
   acontece com um painel aberto -- num z menor o aviso nasceria atras dele.

   `pointer-events: none` na caixa e `auto` no balao: a caixa ocupa a faixa do
   topo inteira e nao pode roubar o clique do que estiver embaixo, mas o botao
   de fechar precisa receber o dele. */
.avisos {
  position: fixed;
  top: var(--ds-sp-4);
  right: var(--ds-sp-4);
  z-index: var(--ds-z-900);
  display: flex;
  flex-direction: column;
  gap: var(--ds-sp-2);
  max-width: min(24rem, calc(100vw - var(--ds-sp-8)));
  pointer-events: none;
}

.aviso-balao {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: var(--ds-sp-3);
  padding: var(--ds-sp-3) var(--ds-sp-4);
  border-radius: var(--ds-r-2);
  box-shadow: var(--ds-shadow-4);
  background: var(--ds-neutral-background);
  border-left: var(--ds-sp-1) solid var(--ds-primary-interactive);
  color: var(--ds-neutral-textHigh);
  font-size: var(--ds-fs-base);
}

.aviso-balao--success {
  background: var(--ds-success-surface);
  border-left-color: var(--ds-success-interactive);
  color: var(--ds-success-textHigh);
}

.aviso-balao--error {
  background: var(--ds-danger-surface);
  border-left-color: var(--ds-danger-interactive);
  color: var(--ds-danger-textHigh);
}

.aviso-balao--warning {
  background: var(--ds-warning-surface);
  border-left-color: var(--ds-warning-interactive);
  color: var(--ds-warning-textHigh);
}

.aviso-balao__texto { flex: 1 1 auto; }

.aviso-balao__fechar {
  flex: 0 0 auto;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  color: inherit;
  font-size: var(--ds-fs-h6);
  line-height: 1;
}

/* --------------------------------------------- excecoes de largura (07/09)
   MEDIDO na tela de ajustes: `scrollWidth 1055` contra `clientWidth 738` -- a
   pagina inteira com barra horizontal, a unica do sistema. A culpada era a
   coluna "Valores, na ordem" com 817px SO ELA: treze cores separadas por
   ponto, dentro de um `.tabela td { white-space: nowrap }`.

   O `nowrap` continua certo para o resto (numero, SKU e data serrilhados em
   duas linhas sao piores), entao a excecao e por celula e nao global. De
   quebra resolve o botao "Abrir" cortado na borda: ele so saia da tela porque
   a tabela empurrava a linha inteira. */
.tabela__lista {
  white-space: normal;
  overflow-wrap: anywhere;
}

/* O modal do eixo mostra cinco colunas (valor, sigla, cor, ordem, pecas) e nao
   cabia em `--ds-bp-sm`: ganhava barra horizontal propria e cortava a ultima.
   Largura maior so aqui -- os outros paineis tem dois campos. */
.painel__caixa--largo { max-width: var(--ds-bp-md); }

/* ==================================================== IMPRESSAO — POR ULTIMO
   Este bloco e SEMPRE o ultimo do arquivo, e ha teste que exige isso.
   `@media print` nao soma especificidade: com o mesmo seletor, vence a regra
   que vem DEPOIS, mesmo na impressao. Medido em 11/09/2026 no Chromium: o
   `display: none` do `.avisos` perdia para o `display: flex` definido 200
   linhas abaixo, e o balao saia no papel -- com o conserto da fatia 5 ja no
   ar e o teste dela verde, porque ele so conferia que a regra estava aqui.

   O papel impresso e SO o papel. `.trilho` entrou com a moldura de 31/08,
   depois desta regra (28/08), e desde entao a barra de icones saia impressa
   ao lado do comprovante -- visto na captura de impressao em 11/09/2026. E o
   balao de aviso do troco ("Devolva R$ X a cliente") nao some sozinho, entao
   sairia impresso no papel que vai para a mao dela. */
@media print {
  .topo, .trilho, .avisos, .comprovante__acoes, .etiquetas__barra { display: none; }
  .comprovante__papel { box-shadow: var(--ds-shadow-0); padding: 0; }
  body { background: var(--ds-neutral-background); }
  /* A folha de etiquetas: sem a sombra e o recuo da tela, e sem a linha de
     corte tracejada, que na tela mostra onde cada etiqueta cai. */
  .impressao-etiquetas { padding-block: 0; }
  .folha { margin: 0; box-shadow: var(--ds-shadow-0); }
  .folha__etiqueta { outline: none; }
}