/*
 * app.css — componentes e telas.
 *
 * Organizado na ordem em que o app aparece: moldura, cabecalho, componentes
 * reutilizaveis (spec 24), depois o que e especifico de cada tela.
 *
 * No celular o app ocupa a tela inteira. No computador ele aparece dentro de
 * uma moldura de aparelho, igual ao prototipo do design — ajuda a conferir o
 * resultado lado a lado com o arquivo original.
 */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  font-family: var(--fonte-texto);
  background: var(--creme);
  color: var(--tinta);
  /* Evita o zoom por duplo toque atrapalhar quem esta com pressa no balcao. */
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
}

button {
  font: inherit;
  color: inherit;
  border: none;
  background: none;
  cursor: pointer;
  text-align: left;
}

/* Foco visivel para quem navega por teclado — e para leitores de tela. */
:focus-visible {
  outline: 3px solid var(--marsala);
  outline-offset: 2px;
}

/* ===========================================================================
   MOLDURA
   =========================================================================== */

.moldura {
  /*
   * Unidade de viewport, nao porcentagem: a cadeia html>body>moldura>app com
   * `height: 100%` nao resolve de forma confiavel, e o app encolhia ate o
   * tamanho do conteudo em telas com pouco conteudo.
   * `dvh` acompanha a barra do navegador do celular ao aparecer/sumir.
   */
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.app {
  width: 100%;
  max-width: 100%;
  height: 100dvh;
  background: var(--creme);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

/* O layout de computador fica no fim do arquivo, na seção DESKTOP. */

/* ===========================================================================
   CABECALHO — relogio falso e faixa de conexao
   =========================================================================== */

.barra-status {
  display: flex;
  justify-content: space-between;
  padding: 12px 22px 2px;
  font-size: 12px;
  font-weight: 700;
  color: var(--tinta);
  flex: none;
}

@media (max-width: 899px) {
  /* No celular de verdade quem mostra a hora e o sistema, nao o app. */
  .barra-status { display: none; }
  .app { padding-top: env(safe-area-inset-top); }
}

.faixa-conexao {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--esp-3);
  padding: 5px 14px;
  margin: 4px 14px 0;
  background: var(--palha);
  border-radius: 9px;
  font-size: 11px;
  color: var(--tinta-media);
  flex: none;
}

.faixa-conexao--offline { background: var(--palha-forte); }
.faixa-conexao .ponto { color: var(--verde); }
.faixa-conexao--offline .ponto { color: var(--laranja); }
.faixa-conexao__feira { white-space: nowrap; }

/* ===========================================================================
   ESTRUTURA DE TELA
   =========================================================================== */

/*
 * O <main> precisa crescer e ser ele proprio um contexto flex: sem isto o
 * `flex: 1` da .tela nao tem contra o que crescer, a tela fica do tamanho do
 * conteudo, a navegacao sobe do rodape e os botoes com `margin-top: auto`
 * param no meio da tela.
 */
#conteudo {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.tela {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: var(--esp-5) var(--esp-6) 0;
}

.tela--rolagem { overflow-y: auto; padding-bottom: var(--esp-3); }
.tela--centro { align-items: center; justify-content: center; text-align: center; padding: 20px; }
.rolagem { flex: 1; overflow-y: auto; min-height: 0; }

.cabecalho {
  display: flex;
  align-items: center;
  gap: var(--esp-4);
  margin-bottom: var(--esp-3);
  flex: none;
}

.titulo {
  font-size: 18px;
  font-weight: 800;
  color: var(--tinta);
}

.titulo__nota {
  font-size: 11px;
  font-weight: 600;
  color: var(--tinta-fraca);
}

.voltar {
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: 11px;
  background: var(--papel);
  border: 1.5px solid var(--borda);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  color: var(--marsala);
}

.rotulo-secao {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--tinta-fraca);
  margin: var(--esp-6) 0 var(--esp-2);
}

.valor-display {
  font-family: var(--fonte-titulo);
  color: var(--marsala);
  line-height: 1.1;
}

/* ===========================================================================
   COMPONENTES (spec 24)
   =========================================================================== */

/* --- Cartao --- */
.cartao {
  background: var(--papel);
  border: 1.5px solid var(--borda);
  border-radius: var(--raio-g);
  padding: var(--esp-5) 14px;
}

.cartao--marsala {
  background: var(--marsala);
  border: none;
  color: var(--creme);
  border-radius: var(--raio-xg);
  padding: var(--esp-6) var(--esp-7);
}

.cartao--marsala .rotulo { color: var(--sobre-marsala); }
.cartao--marsala .valor-display { color: var(--creme); }

.rotulo { font-size: 11px; color: var(--tinta-fraca); }

/*
 * Varios blocos de texto sao <span> dentro de <span> (para poderem ficar
 * dentro de um <button> sem HTML invalido). Sem display:block eles fluem
 * na mesma linha.
 */
.nova-venda__titulo,
.nova-venda__sub,
.linha__titulo,
.linha__sub,
.forma__nome,
.forma__sub,
.item-estoque__nome,
.item-estoque__preco,
.produto__nome,
.produto__preco,
.barra-carrinho__itens { display: block; }

/* --- Botoes --- */
.botao {
  min-height: var(--toque);
  height: 52px;
  width: 100%;
  border-radius: var(--raio-g);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-3);
  font-size: 16px;
  font-weight: 800;
  transition: transform 0.08s ease;
}

.botao:active { transform: scale(0.98); }
.botao--marsala { background: var(--marsala); color: var(--creme); }
.botao--verde { background: var(--verde); color: #FFF; }
.botao--escuro { background: var(--tinta); color: var(--creme); }
.botao--vermelho { background: var(--vermelho); color: #FFF; }
.botao--contorno { background: var(--papel); border: 2px solid var(--marsala); color: var(--marsala); height: 48px; }
.botao--neutro { background: var(--papel); border: 1.5px solid var(--borda); color: var(--tinta); height: 46px; font-size: 13.5px; }

.botao--tracejado {
  background: var(--papel);
  border: 2px dashed var(--tinta-apagada);
  color: var(--tinta-fraca);
  height: 48px;
  font-size: 14px;
}

/* Estado desabilitado: cor E ausencia de acao, nunca so a cor (spec 26). */
.botao[disabled], .botao[aria-disabled='true'] {
  background: var(--desativado);
  color: var(--creme);
  cursor: not-allowed;
  transform: none;
}

.botao--rodape { margin-top: auto; margin-bottom: var(--esp-4); flex: none; }

/* --- Chips e filtros --- */
.chips { display: flex; gap: var(--esp-2); flex-wrap: wrap; margin-bottom: var(--esp-4); }
.chips--rolagem { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; }

.chip {
  padding: 7px 14px;
  border-radius: var(--raio-pilula);
  background: var(--papel);
  border: 1.5px solid var(--borda);
  color: var(--tinta-media);
  font-size: 12.5px;
  font-weight: 700;
  min-height: 34px;
  flex: none;
}

.chip[aria-pressed='true'] {
  background: var(--marsala);
  border-color: var(--marsala);
  color: var(--creme);
  font-weight: 800;
}

.chip--perigo[aria-pressed='true'] { background: var(--vermelho); border-color: var(--vermelho); }

/* --- Pilulas de situacao --- */
.pilula {
  font-size: 10.5px;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: var(--raio-pilula);
  white-space: nowrap;
}

.pilula--ok { background: var(--verde-fundo); color: var(--verde-escuro); }
.pilula--baixo { background: var(--laranja); color: #FFF; }
.pilula--sem { background: var(--vermelho); color: #FFF; }
.pilula--inativo { background: var(--tinta-apagada); color: #FFF; }

/* --- Avatar / circulo de produto --- */
.avatar {
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fonte-titulo);
  color: var(--creme);
  font-size: 15px;
}

.avatar--p { width: 34px; height: 34px; min-width: 34px; font-size: 14px; }
.avatar--g { width: 40px; height: 40px; min-width: 40px; font-size: 17px; }

/* --- Linha de lista --- */
.lista { display: flex; flex-direction: column; gap: var(--esp-3); }

.linha {
  width: 100%;
  background: var(--papel);
  border: 1.5px solid var(--borda);
  border-radius: 13px;
  padding: var(--esp-5) var(--esp-6);
  display: flex;
  align-items: center;
  gap: var(--esp-5);
  min-height: var(--toque);
}

.linha__texto { flex: 1; min-width: 0; }
.linha__titulo { font-size: 14px; font-weight: 800; color: var(--tinta); }
.linha__sub { font-size: 11.5px; color: var(--tinta-fraca); }
.linha__seta { color: var(--tinta-apagada); font-size: 18px; }

/* --- Teclado numerico --- */
.teclado {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  flex: none;
}

.tecla {
  height: 52px;
  background: var(--papel);
  border: 1.5px solid var(--borda);
  border-radius: var(--raio-m);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 21px;
  font-weight: 800;
  color: var(--tinta);
}

.tecla:active { background: var(--palha); }

.atalhos { display: flex; gap: var(--esp-2); margin: var(--esp-4) 0; }

.atalho {
  flex: 1;
  padding: 10px 0;
  background: var(--palha);
  border-radius: 11px;
  text-align: center;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--tinta-media);
  min-height: var(--toque);
}

.dica {
  font-size: 11px;
  color: var(--tinta-fraca);
  text-align: center;
  margin-top: var(--esp-3);
}

/* --- Campos --- */
.campo { margin-bottom: var(--esp-5); }
.campo__rotulo { font-size: 11.5px; font-weight: 800; color: var(--tinta-fraca); margin-bottom: var(--esp-1); }

.campo__entrada {
  width: 100%;
  background: var(--papel);
  border: 1.5px solid var(--borda);
  border-radius: var(--raio-m);
  padding: var(--esp-5) 14px;
  font-size: 15px;
  font-family: var(--fonte-texto);
  color: var(--tinta);
  min-height: var(--toque);
}

.campo__entrada:focus { border-color: var(--marsala); outline: none; }
.linha-campos { display: flex; gap: var(--esp-4); }
.linha-campos > * { flex: 1; }

/* --- Alertas e avisos --- */
.aviso {
  border-radius: var(--raio-m);
  padding: var(--esp-4) 14px;
  font-size: 12.5px;
  margin-top: var(--esp-4);
  display: block;
  width: 100%;
}

.aviso--atencao { background: var(--laranja-fundo); border: 1.5px solid var(--laranja); color: var(--laranja-escuro); }
.aviso--neutro { background: var(--palha); color: var(--tinta-media); }
.aviso--perigo { background: var(--vermelho-fundo); color: var(--vermelho-escuro); }
.aviso--dica { background: var(--papel); border: 1.5px solid var(--borda); color: var(--tinta-media); }
.aviso__titulo { font-size: 12px; font-weight: 800; color: var(--tinta); margin-bottom: var(--esp-1); }

/* --- Estado vazio (spec 25) --- */
.vazio {
  text-align: center;
  padding: 40px 20px;
  color: var(--tinta-apagada);
  font-size: 13px;
  line-height: 1.6;
}

.vazio__icone { font-size: 30px; display: block; margin-bottom: var(--esp-3); }

/* --- Toast --- */
.toast {
  position: absolute;
  left: 50%;
  /* Acima da navegacao inferior, sem encostar nos rotulos dela. */
  bottom: 108px;
  transform: translateX(-50%) translateY(8px);
  background: var(--tinta);
  color: var(--creme);
  padding: 10px 18px;
  border-radius: var(--raio-m);
  font-size: 13px;
  font-weight: 700;
  opacity: 0;
  transition: opacity 0.18s ease, transform 0.18s ease;
  pointer-events: none;
  max-width: 88%;
  text-align: center;
  z-index: 20;
}

.toast--visivel { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast--erro { background: var(--vermelho); }

/* --- Grafico de barras horizontais --- */
.barra-proporcao {
  display: flex;
  height: 12px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--palha);
}

.legenda { display: flex; gap: var(--esp-5); font-size: 11px; color: var(--tinta-media); margin-top: var(--esp-2); flex-wrap: wrap; }

.barra-item { margin-bottom: var(--esp-3); }
.barra-item__topo { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--tinta); margin-bottom: 3px; }
.barra-item__trilho { height: 10px; background: var(--palha); border-radius: 5px; overflow: hidden; }
.barra-item__preenchido { height: 10px; border-radius: 5px; }

/* ===========================================================================
   NAVEGACAO INFERIOR
   =========================================================================== */

.nav {
  display: flex;
  border-top: 1.5px solid var(--borda);
  background: var(--nav);
  padding: 6px 4px calc(10px + env(safe-area-inset-bottom));
  flex: none;
}

.nav__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 4px 0;
  min-height: var(--toque);
  color: var(--tinta-apagada);
}

.nav__item[aria-current='page'] { color: var(--marsala); }

/* Só existem no layout de computador. */
.nav__marca { display: none; }
.nav__item--lateral { display: none; }
.nav__item span { font-size: 10px; font-weight: 800; }
.nav__item svg { fill: currentColor; }

/* ===========================================================================
   DASHBOARD
   =========================================================================== */

.saudacao { font-family: var(--fonte-titulo); font-size: 24px; color: var(--marsala); }
.saudacao__sub { font-size: 12.5px; color: var(--tinta-fraca); margin-top: 2px; }

.menu-botao {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: var(--raio-m);
  background: var(--papel);
  border: 1.5px solid var(--borda);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  color: var(--marsala);
  font-weight: 800;
}

.nova-venda {
  width: 100%;
  margin-top: var(--esp-6);
  background: var(--marsala);
  border-radius: var(--raio-xxg);
  padding: var(--esp-7) 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: transform 0.08s ease;
}

.nova-venda:active { transform: scale(0.98); }

.nova-venda__circulo {
  width: 46px;
  height: 46px;
  min-width: 46px;
  border-radius: 50%;
  background: var(--creme);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fonte-titulo);
  font-size: 20px;
  color: var(--marsala);
}

.nova-venda__titulo { font-size: 20px; font-weight: 800; color: var(--creme); }
.nova-venda__sub { font-size: 12px; color: var(--sobre-marsala); }
.nova-venda__seta { margin-left: auto; color: var(--sobre-marsala); font-size: 22px; }

.indicadores { display: flex; gap: var(--esp-4); margin-top: var(--esp-5); }
.indicadores .cartao { padding: var(--esp-5) 14px; }
.indicadores .valor-display { font-size: 22px; }

/* ===========================================================================
   PDV
   =========================================================================== */

.pdv__principal {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* No celular o carrinho e uma tela propria; a lateral so existe no desktop. */
.pdv__lateral { display: none; }

.grade-produtos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--esp-3);
  padding-bottom: var(--esp-4);
}

.produto {
  background: var(--papel);
  border: 1.5px solid var(--borda-suave);
  border-radius: var(--raio-g);
  padding: var(--esp-4) var(--esp-1);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--esp-1);
  min-height: 92px;
}

.produto:active { background: var(--palha-forte); border-color: var(--marsala); }
.produto__nome { font-size: 12px; font-weight: 700; color: var(--tinta); text-align: center; }
.produto__preco { font-size: 10px; color: var(--tinta-fraca); }
.produto__circulo { position: relative; }

/* Folhinha verde no canto do circulo — detalhe da identidade. */
.produto__folha {
  position: absolute;
  top: -3px;
  right: 1px;
  width: 10px;
  height: 10px;
  background: var(--verde);
  border-radius: 70% 30% 70% 30%;
  transform: rotate(-25deg);
}

.produto--sem-estoque { opacity: 0.5; }

.barra-carrinho {
  width: 100%;
  margin: var(--esp-2) 0 var(--esp-4);
  background: var(--marsala);
  border-radius: var(--raio-xg);
  padding: 14px var(--esp-7);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-3);
  flex: none;
}

.barra-carrinho[aria-disabled='true'] { background: var(--tinta-apagada); }
.barra-carrinho__itens { font-size: 13px; font-weight: 700; color: var(--creme); }
.barra-carrinho__total { font-family: var(--fonte-titulo); font-size: 19px; color: var(--creme); }
.barra-carrinho__acao { font-size: 13px; font-weight: 800; color: var(--palha-forte); }

.aviso-toque { text-align: center; font-size: 12px; font-weight: 700; color: var(--verde-escuro); padding: var(--esp-1) 0; }

/* ===========================================================================
   CARRINHO
   =========================================================================== */

.item-carrinho {
  background: var(--papel);
  border: 1.5px solid var(--borda-suave);
  border-radius: var(--raio-g);
  padding: var(--esp-4) var(--esp-5);
  display: flex;
  align-items: center;
  gap: var(--esp-4);
}

.item-carrinho__texto { flex: 1; min-width: 0; }

.item-carrinho__nome,
.item-carrinho__unidade {
  /* Em 375px a linha e apertada: melhor cortar com reticencias do que
     quebrar "R$ 6,90 / kg" no meio. */
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.item-carrinho__nome { font-size: 14px; font-weight: 700; color: var(--tinta); }
.item-carrinho__unidade { font-size: 11px; color: var(--tinta-fraca); }
.item-carrinho__controles { display: flex; align-items: center; gap: var(--esp-3); }

.passo {
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: var(--raio-p);
  background: var(--palha);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 800;
  color: var(--marsala);
}

.item-carrinho__qtd { min-width: 46px; text-align: center; font-size: 14px; font-weight: 800; color: var(--tinta); }
.item-carrinho__valor { text-align: right; min-width: 64px; }
.item-carrinho__total { font-size: 13.5px; font-weight: 800; color: var(--tinta); }
.excluir { font-size: 11px; color: var(--vermelho); font-weight: 700; padding: 2px 0; }

.totais {
  border-top: 2px dashed var(--borda);
  padding: var(--esp-4) 2px var(--esp-1);
  font-size: 13px;
  color: var(--tinta-media);
  flex: none;
}

.totais__linha { display: flex; justify-content: space-between; align-items: baseline; padding: 2px 0; width: 100%; }
.totais__rotulo-total { font-weight: 800; color: var(--tinta); }
.totais__valor-total { font-family: var(--fonte-titulo); font-size: 24px; color: var(--marsala); }
.totais__desconto { color: var(--verde); font-weight: 700; }

/* ===========================================================================
   PAGAMENTO
   =========================================================================== */

.total-cobrar { text-align: center; margin: var(--esp-8) 0 24px; }
.total-cobrar__rotulo { font-size: 13px; color: var(--tinta-fraca); }
.total-cobrar__valor { font-family: var(--fonte-titulo); font-size: 46px; color: var(--marsala); }

.forma {
  width: 100%;
  border-radius: var(--raio-xg);
  padding: 20px;
  display: flex;
  align-items: center;
  gap: var(--esp-6);
  margin-bottom: var(--esp-5);
  transition: transform 0.08s ease;
}

.forma:active { transform: scale(0.98); }
.forma--dinheiro { background: var(--laranja); }
.forma--pix { background: var(--verde); }
.forma--cartao { background: var(--marsala); }
.forma__nome { font-size: 21px; font-weight: 800; color: #FFF; }
.forma__sub { font-size: 12px; color: rgba(255, 255, 255, 0.85); }

.resumo-dinheiro { font-size: 14px; color: var(--tinta-media); }
.resumo-dinheiro__linha { display: flex; justify-content: space-between; padding: 3px 0; }

.resumo-dinheiro__troco {
  border-top: 1.5px dashed var(--borda);
  margin-top: var(--esp-1);
  padding-top: var(--esp-3);
  font-weight: 800;
  color: var(--tinta);
}

.troco-valor { font-family: var(--fonte-titulo); font-size: 20px; color: var(--verde-escuro); }
.troco-valor--falta { color: var(--vermelho); }

/* --- PIX --- */
.qr {
  width: 190px;
  height: 190px;
  background: #FFF;
  border: 2px solid var(--tinta);
  border-radius: var(--raio-g);
  padding: 14px;
  margin: 0 auto;
}

.qr__padrao {
  width: 100%;
  height: 100%;
  background: repeating-conic-gradient(var(--tinta) 0% 25%, #FFF 0% 50%);
  background-size: 18px 18px;
  border-radius: 4px;
  position: relative;
}

.qr__centro {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.qr__miolo {
  width: 44px;
  height: 44px;
  background: #FFF;
  border-radius: var(--raio-p);
  display: flex;
  align-items: center;
  justify-content: center;
}

.aguardando {
  margin-top: var(--esp-7);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-3);
  font-size: 14px;
  font-weight: 700;
  color: var(--tinta-fraca);
}

.aguardando__icone { color: var(--laranja); }

/* ===========================================================================
   VENDA CONCLUIDA E COMPROVANTE
   =========================================================================== */

.selo {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: var(--verde);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFF;
  font-size: 34px;
  font-weight: 800;
}

.selo--atencao { background: var(--laranja); }
.concluida__titulo { font-family: var(--fonte-titulo); font-size: 24px; color: var(--tinta); margin-top: var(--esp-5); }
.concluida__valor { font-family: var(--fonte-titulo); font-size: 38px; color: var(--marsala); margin-top: var(--esp-2); }
.concluida__meta { font-size: 14px; color: var(--tinta-fraca); margin-top: var(--esp-1); }

.cupom {
  background: #FFF;
  border-radius: 4px;
  padding: var(--esp-6) var(--esp-7) 20px;
  box-shadow: 0 2px 10px rgba(58, 38, 32, 0.14);
  overflow-y: auto;
}

.cupom__cabecalho { text-align: center; border-bottom: 2px dashed var(--borda); padding-bottom: var(--esp-4); margin-bottom: var(--esp-4); }
.cupom__banca { font-family: var(--fonte-titulo); font-size: 17px; color: var(--marsala); }
.cupom__meta { font-size: 10.5px; color: var(--tinta-fraca); }
.cupom__linha { display: flex; justify-content: space-between; font-size: 13px; color: var(--tinta); padding: 3px 0; gap: var(--esp-4); }
.cupom__total { display: flex; justify-content: space-between; align-items: baseline; border-top: 2px dashed var(--borda); margin-top: var(--esp-4); padding-top: var(--esp-4); }
.cupom__total-valor { font-family: var(--fonte-titulo); font-size: 22px; color: var(--marsala); }

.grade-acoes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--esp-3); margin-top: 14px; }
.grade-acoes .botao { height: 46px; font-size: 13.5px; }

/* ===========================================================================
   ESTOQUE
   =========================================================================== */

.item-estoque {
  width: 100%;
  background: var(--papel);
  border: 1.5px solid var(--borda-suave);
  border-radius: 13px;
  padding: var(--esp-4) var(--esp-5);
  display: flex;
  align-items: center;
  gap: var(--esp-4);
  min-height: var(--toque);
}

.item-estoque--baixo { border-color: var(--laranja); }
.item-estoque--sem { border-color: var(--vermelho); }
.item-estoque--inativo { opacity: 0.55; }
.item-estoque__texto { flex: 1; min-width: 0; }
.item-estoque__nome { font-size: 14px; font-weight: 700; color: var(--tinta); }
.item-estoque__preco { font-size: 11px; color: var(--tinta-fraca); }
.item-estoque__direita { text-align: right; }
.item-estoque__qtd { font-family: var(--fonte-titulo); font-size: 16px; color: var(--tinta); }
.item-estoque__qtd--baixo { color: var(--laranja); }
.item-estoque__qtd--sem { color: var(--vermelho); }

.ajustes { display: flex; gap: var(--esp-2); }

.ajuste {
  flex: 1;
  padding: var(--esp-5) 0;
  border-radius: 11px;
  text-align: center;
  font-size: 14px;
  font-weight: 800;
  min-height: var(--toque);
}

.ajuste--entrada { background: var(--verde-fundo); border: 1.5px solid var(--verde); color: var(--verde-escuro); }
.ajuste--saida { background: var(--vermelho-fundo); border: 1.5px solid var(--vermelho); color: var(--vermelho-escuro); }
.ajuste--neutro { background: var(--papel); border: 1.5px solid var(--borda); color: var(--tinta-media); font-size: 12.5px; }

.interruptor { width: 46px; height: 26px; min-width: 46px; border-radius: 13px; background: var(--desativado); position: relative; transition: background 0.2s; }
.interruptor[aria-checked='true'] { background: var(--verde); }
.interruptor::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #FFF; transition: left 0.2s; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); }
.interruptor[aria-checked='true']::after { left: 23px; }

.foto-vazia {
  width: 84px;
  height: 84px;
  border-radius: var(--raio-xg);
  background: var(--palha);
  border: 2px dashed var(--tinta-apagada);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--tinta-fraca);
  margin: 0 auto var(--esp-6);
}

/* ===========================================================================
   FINANCEIRO
   =========================================================================== */

.tres-colunas { display: flex; gap: var(--esp-3); margin-top: var(--esp-4); }
.tres-colunas > * { flex: 1; padding: var(--esp-4) var(--esp-5); }
.tres-colunas .rotulo { font-size: 10.5px; }
.tres-colunas .valor { font-size: 15px; font-weight: 800; color: var(--tinta); }

.movimento {
  background: var(--papel);
  border: 1.5px solid var(--borda-suave);
  border-radius: var(--raio-m);
  padding: 9px 14px;
  display: flex;
  justify-content: space-between;
  gap: var(--esp-4);
  font-size: 13px;
}

.movimento__valor { font-weight: 800; }
.movimento__valor--entrada { color: var(--verde-escuro); }
.movimento__valor--saida { color: var(--vermelho); }

.acao-secundaria {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--vermelho);
  padding: var(--esp-2) var(--esp-4);
  background: var(--vermelho-fundo);
  border-radius: var(--raio-p);
  min-height: 34px;
}

.acao-caixa {
  padding: 7px var(--esp-5);
  border-radius: var(--raio-p);
  background: var(--palha);
  font-size: 11.5px;
  font-weight: 800;
  color: var(--tinta-media);
  min-height: 34px;
}

/* ===========================================================================
   COMPRAS
   =========================================================================== */

.item-compra {
  width: 100%;
  background: var(--papel);
  border: 1.5px solid var(--borda-suave);
  border-radius: 13px;
  padding: var(--esp-5) 14px;
  display: flex;
  align-items: center;
  gap: var(--esp-5);
  min-height: var(--toque);
}

.caixinha {
  width: 24px;
  height: 24px;
  min-width: 24px;
  border-radius: var(--raio-p);
  background: var(--papel);
  border: 2px solid var(--desativado);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFF;
  font-size: 13px;
  font-weight: 800;
}

.item-compra[aria-checked='true'] .caixinha { background: var(--verde); border-color: var(--verde); }
.item-compra[aria-checked='true'] .item-compra__texto { color: var(--tinta-apagada); text-decoration: line-through; }
.item-compra__texto { flex: 1; font-size: 14px; font-weight: 700; color: var(--tinta); text-align: left; }

/* ===========================================================================
   ACESSO — splash, primeiro acesso e login
   =========================================================================== */

/* Nas telas de acesso nao ha navegacao nem faixa de conexao: um caminho so. */
.app--sem-cromo .nav,
.app--sem-cromo .faixa-conexao,
.app--sem-cromo .barra-status { display: none; }

.tela--acesso {
  align-items: center;
  text-align: center;
  padding: var(--esp-7) var(--esp-8) 0;
}

.tela--splash { justify-content: center; }
.tela--splash .acesso__corpo { flex: none; }

.acesso__marca {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--esp-2);
  padding: var(--esp-7) 0 var(--esp-3);
  flex: none;
}

.acesso__nome {
  font-family: var(--fonte-titulo);
  font-size: 26px;
  color: var(--marsala);
  line-height: 1.1;
}

.acesso__slogan { font-size: 12.5px; color: var(--tinta-fraca); }

.acesso__corpo {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--esp-4);
  min-height: 0;
  width: 100%;
}

/*
 * Na etapa do PIN o teclado ocupa a parte de baixo. Centralizar o corpo no
 * espaco que sobra evita o vazio grande entre o texto e as teclas.
 */
.acesso__corpo--pin { justify-content: center; }

.acesso__titulo { font-size: 22px; font-weight: 800; color: var(--tinta); }

.acesso__texto {
  font-size: 13.5px;
  color: var(--tinta-media);
  line-height: 1.5;
  max-width: 30ch;
}

.acesso__campo { text-align: center; font-size: 17px; }

.acesso__erro { font-size: 13px; font-weight: 700; color: var(--vermelho); }

.acesso__rodape { flex: none; padding: var(--esp-5) 0 var(--esp-6); }

.acesso__link {
  font-size: 13px;
  font-weight: 700;
  color: var(--tinta-fraca);
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: var(--esp-2) var(--esp-4);
  min-height: var(--toque);
}

/* --- Bolinhas do PIN --- */
.pin { display: flex; gap: 14px; }

.pin__bolinha {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--desativado);
  background: transparent;
  transition: background 0.12s ease, border-color 0.12s ease, transform 0.12s ease;
}

.pin__bolinha--cheia {
  background: var(--marsala);
  border-color: var(--marsala);
  transform: scale(1.1);
}

.pin--erro .pin__bolinha {
  border-color: var(--vermelho);
  background: transparent;
  transform: none;
}

.pin--erro { animation: tremer 0.3s ease; }

@keyframes tremer {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-7px); }
  75% { transform: translateX(7px); }
}

/* Buraco no lugar da virgula, para o "0" e o apagar nao mudarem de lugar. */
.tecla--vazia { background: none; border: none; }

/* ===========================================================================
   AVISOS E INSTALACAO
   =========================================================================== */

.acoes-topo { display: flex; gap: var(--esp-2); flex: none; }

/* Sino com contador de avisos nao lidos. */
.menu-botao { position: relative; }

.menu-botao__marca {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--raio-pilula);
  background: var(--vermelho);
  color: #FFF;
  font-size: 10.5px;
  font-weight: 800;
  line-height: 18px;
  text-align: center;
  border: 2px solid var(--creme);
}

/* Aviso ainda nao lido, na lista do historico. */
.linha--nova { border-color: var(--laranja); background: var(--laranja-fundo); }

.ponto-novo {
  width: 10px;
  height: 10px;
  min-width: 10px;
  border-radius: 50%;
  background: var(--laranja);
}

/* --- Convite de instalacao no Dashboard --- */
.convite-instalar {
  display: flex;
  align-items: center;
  gap: var(--esp-4);
  flex-wrap: wrap;
  background: var(--palha);
  border: 1.5px solid var(--borda);
  border-radius: var(--raio-m);
  padding: var(--esp-4) 14px;
  margin-top: var(--esp-5);
  font-size: 12.5px;
  color: var(--tinta-media);
}

.convite-instalar__texto { flex: 1; min-width: 180px; line-height: 1.45; }
.convite-instalar__acoes { display: flex; gap: var(--esp-2); margin-left: auto; }

.convite-instalar__sim {
  background: var(--marsala);
  color: var(--creme);
  font-size: 12.5px;
  font-weight: 800;
  padding: var(--esp-3) 14px;
  border-radius: var(--raio-p);
  min-height: 36px;
}

.convite-instalar__nao {
  color: var(--tinta-fraca);
  font-size: 12.5px;
  font-weight: 700;
  padding: var(--esp-3) var(--esp-4);
  min-height: 36px;
}

/* --- Listas de texto (motivos para instalar, passos do iOS) --- */
.lista-simples {
  margin: 0;
  padding-left: 1.2em;
  font-size: 13px;
  color: var(--tinta-media);
  line-height: 1.7;
}

.lista-simples--numerada { padding-left: 1.4em; }

/* ===========================================================================
   UTILITARIOS
   =========================================================================== */

.entre { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3); }
.topo { align-items: flex-start; }
.empurra { margin-left: auto; }
.mt-1 { margin-top: var(--esp-2); }
.mt-2 { margin-top: var(--esp-4); }
.mt-3 { margin-top: var(--esp-6); }
.centro { text-align: center; }
.rodape-versao { text-align: center; font-size: 11px; color: var(--tinta-apagada); margin-top: var(--esp-7); padding-bottom: var(--esp-4); }

/* Respeita quem pediu menos animacao no sistema. */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}


/* ===========================================================================
   DESKTOP — a partir de 900px
   
   O celular e a base; aqui a mesma aplicacao se reorganiza para aproveitar a
   largura: a navegacao vira barra lateral, o conteudo ganha uma coluna com
   largura maxima (linha de texto longa demais cansa a leitura) e o carrinho
   passa a ficar sempre visivel ao lado dos produtos.

   Nada de tela nova nem de codigo paralelo: e o mesmo HTML, reorganizado.
   =========================================================================== */

@media (min-width: 900px) {
  .moldura { display: block; background: var(--creme); }

  .app {
    width: 100%;
    height: 100dvh;
    display: grid;
    grid-template-columns: 244px minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas:
      "lateral faixa"
      "lateral conteudo";
  }

  .barra-status { display: none; }

  /*
   * Nas telas de acesso nao ha barra lateral: sem isto o grid continuaria
   * reservando os 244px dela, e o login apareceria deslocado para a direita.
   */
  .app--sem-cromo {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "faixa" "conteudo";
  }

  /* --- Navegacao como barra lateral --- */
  .nav {
    grid-area: lateral;
    flex-direction: column;
    align-items: stretch;
    gap: var(--esp-1);
    padding: 20px var(--esp-5);
    border-top: none;
    border-right: 1.5px solid var(--borda);
  }

  .nav__marca {
    display: flex;
    align-items: center;
    gap: var(--esp-4);
    padding: var(--esp-2) var(--esp-4) var(--esp-7);
    font-family: var(--fonte-titulo);
    font-size: 17px;
    color: var(--marsala);
  }

  .nav__item--lateral { display: flex; }

  .nav__item {
    flex: none;
    flex-direction: row;
    justify-content: flex-start;
    gap: var(--esp-5);
    padding: var(--esp-5) 14px;
    border-radius: var(--raio-m);
    color: var(--tinta-media);
  }

  .nav__item span { font-size: 14.5px; font-weight: 700; }
  .nav__item:hover { background: var(--palha); color: var(--marsala); }

  .nav__item[aria-current='page'] {
    background: var(--marsala);
    color: var(--creme);
  }

  .nav__item[aria-current='page'] span { font-weight: 800; }

  /* --- Conteudo --- */
  .faixa-conexao {
    grid-area: faixa;
    margin: var(--esp-5) 28px 0;
    padding: var(--esp-3) var(--esp-6);
    font-size: 12px;
  }

  #conteudo { grid-area: conteudo; }

  .tela {
    width: 100%;
    max-width: 1060px;
    margin: 0 auto;
    padding: var(--esp-7) 28px 0;
  }

  .titulo { font-size: 22px; }
  .saudacao { font-size: 30px; }
  .rotulo-secao { font-size: 12px; }

  /* Teclados e botoes de rodape nao precisam de toda a largura. */
  .teclado,
  .atalhos,
  .botao--rodape,
  .dica { width: 100%; max-width: 440px; align-self: center; }

  .tecla { height: 58px; font-size: 22px; }

  /* --- Dashboard em duas colunas --- */
  .tela--dashboard {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: min-content;
    gap: var(--esp-5);
    align-content: start;
  }

  /*
   * O "Mais" ja esta na barra lateral: o ≡ do topo vira ruido. O SINO fica —
   * e o unico lugar com o contador de avisos nao lidos.
   */
  .menu-botao--mais { display: none; }

  .tela--dashboard > * { margin-top: 0; }
  .tela--dashboard > .entre,
  .tela--dashboard > .convite-instalar,
  .tela--dashboard > .nova-venda { grid-column: 1 / -1; }
  .tela--dashboard .nova-venda { margin-top: 0; }
  .tela--dashboard .indicadores { margin-top: 0; }

  /* --- PDV com carrinho ao lado --- */
  .pdv { flex-direction: row; gap: 20px; padding-bottom: var(--esp-6); }

  .pdv__lateral {
    display: flex;
    flex-direction: column;
    width: 348px;
    flex: none;
    min-height: 0;
    background: var(--papel);
    border: 1.5px solid var(--borda);
    border-radius: var(--raio-g);
    padding: 14px var(--esp-6);
  }

  .pdv__lateral-topo { flex: none; margin-bottom: var(--esp-4); }

  /*
   * O painel lateral e estreito: a linha do item passa a ter duas faixas
   * (nome em cima, controles embaixo) em vez de espremer tudo numa so e
   * cortar o nome do produto com reticencias.
   */
  .pdv__lateral .item-carrinho {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    grid-template-areas:
      "avatar texto  valor"
      "avatar passos valor";
    column-gap: var(--esp-4);
    row-gap: var(--esp-2);
    align-items: center;
  }

  .pdv__lateral .item-carrinho > .avatar { grid-area: avatar; align-self: start; }
  .pdv__lateral .item-carrinho__texto { grid-area: texto; }
  .pdv__lateral .item-carrinho__valor { grid-area: valor; }

  .pdv__lateral .item-carrinho__controles {
    grid-area: passos;
    justify-content: flex-start;
    gap: var(--esp-2);
  }

  .pdv__lateral .item-carrinho__qtd { min-width: 52px; }
  .pdv__lateral-itens { gap: var(--esp-2); }
  .pdv__lateral-acao { margin-top: var(--esp-4); flex: none; }

  /* A barra inferior do carrinho some: a lateral faz o papel dela. */
  .pdv .barra-carrinho { display: none; }

  .grade-produtos {
    grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
    gap: var(--esp-4);
  }

  .produto { min-height: 108px; padding: 14px var(--esp-3); }
  .produto__nome { font-size: 13px; }

  /* --- Listas em duas colunas onde cabe --- */
  .lista--grade {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--esp-3);
    align-content: start;
  }

  .tres-colunas > * { padding: 14px var(--esp-6); }
  .tres-colunas .valor { font-size: 18px; }

  /* --- Telas de acesso: coluna estreita e centralizada --- */
  .tela--acesso { max-width: 460px; }
  .tela--acesso .teclado { max-width: 100%; }

  /* --- Cupom e telas centradas nao esticam --- */
  .cupom, .tela--centro > * { max-width: 520px; }
  .tela--centro { align-self: center; }

  .toast { bottom: 32px; }
}

/* Telas muito largas: mais colunas de produto, sem esticar o resto. */
@media (min-width: 1400px) {
  .tela { max-width: 1240px; }
  .pdv__lateral { width: 380px; }
}