/* ==========================================================================
   Lojinha PDV — CSS próprio, mobile-first.
   Sem framework, sem build. Alvos: toque confortável (mín. 44px), contraste
   alto e pouquíssimos bytes.
   ========================================================================== */

:root {
  --cor-fundo: #f4f5f7;
  --cor-superficie: #ffffff;
  --cor-borda: #e2e5ea;
  --cor-texto: #17212b;
  --cor-suave: #66707d;

  --cor-primaria: #0f766e;
  --cor-primaria-escura: #0b5c56;
  --cor-primaria-clara: #e6f4f2;

  --cor-perigo: #c0392b;
  --cor-perigo-clara: #fdecea;
  --cor-sucesso: #1e7a45;
  --cor-sucesso-clara: #e7f6ed;
  --cor-aviso: #a76a00;
  --cor-aviso-clara: #fdf3e2;

  --raio: 12px;
  --raio-pequeno: 8px;
  --sombra: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .06);

  --altura-topo: 56px;
  --altura-barra: 60px;
  --toque: 44px;
}

* { box-sizing: border-box; }
[x-cloak] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.45;
  color: var(--cor-texto);
  background: var(--cor-fundo);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

h1, h2, h3 { margin: 0; line-height: 1.25; }
h1 { font-size: 1.25rem; }
h2 { font-size: 1.05rem; }
p  { margin: 0 0 .6rem; }
img { max-width: 100%; }

a { color: var(--cor-primaria); }
.link { font-weight: 600; text-decoration: underline; }

.texto-suave  { color: var(--cor-suave); }
.texto-perigo { color: var(--cor-perigo); font-weight: 600; }
.pequeno      { font-size: .85rem; }
.direita      { text-align: right; }
.centralizado { text-align: center; }
.largura-total{ width: 100%; }

/* --------------------------------------------------------------- Estrutura */

.topo {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: .5rem;
  height: var(--altura-topo);
  padding: 0 .5rem;
  background: var(--cor-primaria);
  color: #fff;
  padding-top: env(safe-area-inset-top);
  height: calc(var(--altura-topo) + env(safe-area-inset-top));
}

.topo-titulo {
  flex: 1;
  font-weight: 600;
  font-size: 1.05rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topo .botao-icone { color: #fff; }

.avatar {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .22);
  color: #fff;
  font-weight: 700;
}

.conteudo {
  max-width: 720px;
  margin: 0 auto;
  padding: .75rem .75rem calc(var(--altura-barra) + 5.5rem);
}

.conteudo-limpo { padding-bottom: 2rem; }
.corpo-limpo { background: var(--cor-fundo); }

/* ----------------------------------------------------------------- Gaveta */

.gaveta-fundo {
  position: fixed;
  inset: 0;
  background: rgba(10, 14, 20, .45);
  z-index: 40;
}

.gaveta {
  position: fixed;
  top: 0; bottom: 0; left: 0;
  z-index: 50;
  width: min(84vw, 320px);
  padding: 1rem .85rem calc(1rem + env(safe-area-inset-bottom));
  background: var(--cor-superficie);
  overflow-y: auto;
  transform: translateX(-100%);
  transition: transform .18s ease-out;
  box-shadow: 2px 0 16px rgba(16, 24, 40, .12);
}

.gaveta.aberta { transform: translateX(0); }

.gaveta-topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .5rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--cor-borda);
}
.gaveta-topo strong { display: block; }
.gaveta-topo small  { color: var(--cor-suave); }

.gaveta-grupo {
  margin: 1rem 0 .35rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cor-suave);
}

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

.gaveta-lista a {
  display: flex;
  align-items: center;
  gap: .7rem;
  min-height: var(--toque);
  padding: .55rem .6rem;
  border-radius: var(--raio-pequeno);
  color: var(--cor-texto);
  text-decoration: none;
}
.gaveta-lista a.ativo { background: var(--cor-primaria-clara); color: var(--cor-primaria-escura); font-weight: 600; }

.gaveta-sair { margin-top: 1.25rem; }
.gaveta-rodape { margin-top: .75rem; font-size: .75rem; color: var(--cor-suave); text-align: center; }

/* -------------------------------------------------------- Barra inferior */

.barra-inferior {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 25;
  display: flex;
  background: var(--cor-superficie);
  border-top: 1px solid var(--cor-borda);
  padding-bottom: env(safe-area-inset-bottom);
}

.barra-inferior a,
.barra-inferior button {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: var(--altura-barra);
  padding: .3rem;
  border: 0;
  background: none;
  color: var(--cor-suave);
  font-size: .68rem;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
}

.barra-inferior .ativo { color: var(--cor-primaria); font-weight: 600; }

/* --------------------------------------------------------------- Cartões */

.cartao {
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  padding: .9rem;
  margin-bottom: .75rem;
  box-shadow: var(--sombra);
}

.cabecalho-pagina {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: .25rem 0 .85rem;
}
.cabecalho-pagina h1 { flex: 1; }

.titulo-secao {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .6rem;
  font-size: .95rem;
}

.contador {
  display: inline-grid;
  place-items: center;
  min-width: 22px; height: 22px;
  padding: 0 6px;
  border-radius: 11px;
  background: var(--cor-primaria-clara);
  color: var(--cor-primaria-escura);
  font-size: .75rem;
  font-weight: 700;
}

.vazio {
  padding: 1.5rem .75rem;
  color: var(--cor-suave);
  text-align: center;
}

.destaque-filtro {
  padding: .6rem .75rem;
  margin-bottom: .75rem;
  background: var(--cor-primaria-clara);
  border-radius: var(--raio-pequeno);
  font-size: .88rem;
}

/* --------------------------------------------------------------- Botões */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  min-height: var(--toque);
  padding: .6rem 1rem;
  border: 1px solid transparent;
  border-radius: var(--raio-pequeno);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.botao:disabled { opacity: .5; cursor: not-allowed; }

.botao-primario   { background: var(--cor-primaria); color: #fff; }
.botao-primario:active { background: var(--cor-primaria-escura); }
.botao-secundario { background: var(--cor-superficie); color: var(--cor-primaria); border-color: var(--cor-borda); }
.botao-fantasma   { background: none; color: var(--cor-suave); }
.botao-perigo     { background: var(--cor-perigo); color: #fff; }
.botao-grande     { min-height: 52px; font-size: 1.05rem; }
.pequeno-botao    { min-height: 34px; padding: .3rem .6rem; font-size: .8rem; }

.botao-icone {
  display: inline-grid;
  place-items: center;
  width: var(--toque); height: var(--toque);
  border: 0;
  border-radius: var(--raio-pequeno);
  background: none;
  color: inherit;
  cursor: pointer;
  flex-shrink: 0;
}
.botao-icone.perigo { color: var(--cor-perigo); }

.acoes-rapidas {
  display: flex;
  gap: .5rem;
  margin-bottom: .75rem;
}
.acoes-rapidas > * { flex: 1; }

/* -------------------------------------------------------------- Formulários */

.campo { display: block; margin-bottom: .75rem; }
.campo > span:first-child {
  display: block;
  margin-bottom: .25rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--cor-suave);
}

input[type="text"], input[type="search"], input[type="password"], input[type="email"],
input[type="number"], input[type="tel"], input[type="date"], select, textarea {
  width: 100%;
  min-height: var(--toque);
  padding: .55rem .7rem;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-pequeno);
  background: var(--cor-superficie);
  font: inherit;
  color: var(--cor-texto);
  /* 16px evita o zoom automático do iOS ao focar */
  font-size: 16px;
}

input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--cor-primaria);
  outline-offset: 1px;
  border-color: var(--cor-primaria);
}

textarea { min-height: 72px; resize: vertical; }

.campo-checkbox {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  min-height: var(--toque);
  padding: .35rem 0;
  cursor: pointer;
}
.campo-checkbox input { width: 22px; height: 22px; margin-top: 2px; flex-shrink: 0; accent-color: var(--cor-primaria); }
.campo-checkbox span strong { display: block; font-weight: 600; }
.campo-checkbox span small  { display: block; font-size: .78rem; }

.campos-lado-a-lado { display: flex; gap: .6rem; }
.campos-lado-a-lado > * { flex: 1; min-width: 0; }

.valor-estatico {
  margin: 0;
  padding: .55rem .7rem;
  border: 1px dashed var(--cor-borda);
  border-radius: var(--raio-pequeno);
  font-weight: 700;
}

.campo-somente-leitura { background: var(--cor-fundo); font-size: .8rem; }

.filtros { margin-bottom: .75rem; }
.filtros-linha { display: flex; gap: .5rem; align-items: flex-end; margin-bottom: .5rem; }
.filtros-linha > * { flex: 1; margin-bottom: 0; }

.grupo-permissoes {
  margin: 0 0 .75rem;
  padding: .6rem .75rem;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-pequeno);
}
.grupo-permissoes legend { padding: 0 .35rem; font-size: .8rem; font-weight: 700; color: var(--cor-suave); text-transform: uppercase; }

/* ------------------------------------------------------------------ Busca */

.campo-busca {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: 0 .6rem;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-pequeno);
  background: var(--cor-superficie);
  color: var(--cor-suave);
}
.campo-busca input {
  border: 0;
  background: none;
  padding-left: 0;
  padding-right: 0;
}
.campo-busca input:focus { outline: none; }

.busca-pdv { margin-bottom: .75rem; }

.resultados {
  margin-top: .4rem;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-pequeno);
  background: var(--cor-superficie);
  overflow: hidden;
  max-height: 46vh;
  overflow-y: auto;
}

.resultado {
  display: flex;
  align-items: center;
  gap: .6rem;
  width: 100%;
  min-height: 58px;
  padding: .5rem .6rem;
  border: 0;
  border-bottom: 1px solid var(--cor-borda);
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.resultado:last-child { border-bottom: 0; }
.resultado img { width: 44px; height: 44px; border-radius: var(--raio-pequeno); object-fit: cover; background: var(--cor-fundo); }
.resultado-nome { flex: 1; min-width: 0; }
.resultado-nome strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.resultado-nome small  { color: var(--cor-suave); font-size: .78rem; }
.resultado-preco { font-weight: 700; white-space: nowrap; }

.produto-escolhido {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem .7rem;
  border: 1px solid var(--cor-primaria);
  border-radius: var(--raio-pequeno);
  background: var(--cor-primaria-clara);
}
.produto-escolhido > div { flex: 1; min-width: 0; }
.produto-escolhido small { display: block; color: var(--cor-suave); }

/* -------------------------------------------------------------------- PDV */

.resumo-dia {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .7rem .9rem;
  margin-bottom: .75rem;
  border-radius: var(--raio);
  background: var(--cor-primaria);
  color: #fff;
}
.resumo-dia .rotulo { display: block; font-size: .75rem; opacity: .85; }
.resumo-dia strong  { font-size: 1.2rem; }
.resumo-dia .direita { text-align: right; }

.lista-itens { list-style: none; margin: 0; padding: 0; }
.lista-itens li {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem 0;
  border-bottom: 1px solid var(--cor-borda);
}
.lista-itens li:last-child { border-bottom: 0; }

.item-info { flex: 1; min-width: 0; }
.item-info strong { display: block; font-size: .95rem; }
.item-info small  { color: var(--cor-suave); font-size: .78rem; }

.item-qtd { display: flex; align-items: center; gap: .15rem; }
.item-qtd button {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-pequeno);
  background: var(--cor-superficie);
  color: var(--cor-primaria);
  cursor: pointer;
}
.item-qtd input {
  width: 56px;
  min-height: 34px;
  padding: .2rem;
  text-align: center;
  font-weight: 700;
}

.item-total { display: flex; align-items: center; gap: .2rem; font-weight: 700; white-space: nowrap; }

.linha-desconto { display: flex; gap: .5rem; align-items: center; }
.linha-desconto input { flex: 1; }

.alternador { display: flex; border: 1px solid var(--cor-borda); border-radius: var(--raio-pequeno); overflow: hidden; }
.alternador button {
  min-width: 48px;
  min-height: var(--toque);
  border: 0;
  background: var(--cor-superficie);
  font: inherit;
  font-weight: 700;
  color: var(--cor-suave);
  cursor: pointer;
}
.alternador button.ativo { background: var(--cor-primaria); color: #fff; }

.formas { display: flex; flex-wrap: wrap; gap: .5rem; }
.forma {
  flex: 1 1 30%;
  min-height: 52px;
  padding: .5rem;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-pequeno);
  background: var(--cor-superficie);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.forma.ativo { border-color: var(--cor-primaria); background: var(--cor-primaria-clara); color: var(--cor-primaria-escura); }
.aviso-inline { display: block; font-size: .68rem; font-weight: 500; color: var(--cor-perigo); }

.barra-acao {
  position: fixed;
  left: 0; right: 0;
  bottom: calc(var(--altura-barra) + env(safe-area-inset-bottom));
  z-index: 20;
  display: flex;
  align-items: center;
  gap: .75rem;
  max-width: 720px;
  margin: 0 auto;
  padding: .6rem .75rem;
  background: var(--cor-superficie);
  border-top: 1px solid var(--cor-borda);
  box-shadow: 0 -2px 12px rgba(16, 24, 40, .08);
}
.barra-total { flex: 1; min-width: 0; }
.barra-total small  { display: block; font-size: .7rem; color: var(--cor-suave); }
.barra-total strong { font-size: 1.3rem; }

.valor-grande { font-size: 2rem; font-weight: 700; margin: .2rem 0; }

.qrcode {
  width: min(260px, 70vw);
  height: auto;
  margin: .5rem auto;
  display: block;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-pequeno);
  background: #fff;
}

.aguardando { display: flex; align-items: center; justify-content: center; gap: .5rem; font-weight: 600; color: var(--cor-aviso); }

.pulsando {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--cor-aviso);
  animation: pulsar 1.2s infinite;
}
@keyframes pulsar { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

.copia-cola { display: flex; gap: .4rem; margin-top: .5rem; }
.copia-cola input { flex: 1; min-width: 0; font-size: .78rem; }

.sucesso-pagamento .selo-ok {
  display: grid;
  place-items: center;
  width: 68px; height: 68px;
  margin: 0 auto .5rem;
  border-radius: 50%;
  background: var(--cor-sucesso-clara);
  color: var(--cor-sucesso);
}
.sucesso-pagamento .botao { margin-top: .5rem; }

.modal-scanner {
  position: fixed;
  inset: 0;
  z-index: 60;
  padding: 1rem;
  background: #000;
  color: #fff;
  overflow-y: auto;
}
.scanner-topo { display: flex; align-items: center; justify-content: space-between; margin-bottom: .75rem; }
.scanner-topo .botao-icone { color: #fff; }
#leitor-codigo { width: 100%; }

/* ------------------------------------------------------------------ Listas */

.lista-produtos, .lista-simples, .lista-vendas, .lista-logs {
  list-style: none;
  margin: 0 0 .75rem;
  padding: 0;
}

.produto-linha, .linha-clicavel, .venda-linha {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .6rem .8rem;
  margin-bottom: .5rem;
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  color: inherit;
  text-decoration: none;
}

.produto-linha img { width: 52px; height: 52px; border-radius: var(--raio-pequeno); object-fit: cover; background: var(--cor-fundo); flex-shrink: 0; }
.produto-dados { flex: 1; min-width: 0; }
.produto-dados strong { display: block; }
.produto-dados small  { display: block; color: var(--cor-suave); font-size: .8rem; }
.produto-preco { font-weight: 700; white-space: nowrap; }

.saldo-grande { font-size: 1.3rem; font-weight: 700; }

.linha-clicavel { justify-content: space-between; }
.linha-clicavel > div { flex: 1; min-width: 0; }
.linha-clicavel small { display: block; font-size: .8rem; }

.venda-linha > div { flex: 1; min-width: 0; }
.venda-linha small { display: block; font-size: .8rem; }
.venda-direita { text-align: right; }
.venda-direita strong { display: block; margin-top: .2rem; }

.lista-itens-simples { list-style: none; margin: 0; padding: 0; }
.lista-itens-simples li {
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  padding: .45rem 0;
  border-bottom: 1px solid var(--cor-borda);
}
.lista-itens-simples li:last-child { border-bottom: 0; }
.lista-itens-simples small { display: block; color: var(--cor-suave); font-size: .8rem; }

.lista-movimentos { list-style: none; margin: 0; padding: 0; }
.lista-movimentos li {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  padding: .5rem 0;
  border-bottom: 1px solid var(--cor-borda);
}
.lista-movimentos li:last-child { border-bottom: 0; }
.lista-movimentos > li > div { flex: 1; min-width: 0; }
.lista-movimentos small { display: block; font-size: .78rem; color: var(--cor-suave); }
.lista-movimentos .saldo { font-size: .8rem; white-space: nowrap; color: var(--cor-suave); }

.lista-logs li {
  padding: .6rem .8rem;
  margin-bottom: .5rem;
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
}
.log-topo { display: flex; justify-content: space-between; gap: .5rem; }
.log-dados {
  margin: .4rem 0 0;
  padding: .4rem .5rem;
  background: var(--cor-fundo);
  border-radius: var(--raio-pequeno);
  font-size: .72rem;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: auto;
}

.dados, .totais { margin: 0; }
.dados > div, .totais > div {
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  padding: .35rem 0;
  border-bottom: 1px solid var(--cor-borda);
}
.dados > div:last-child, .totais > div:last-child { border-bottom: 0; }
.dados dt, .totais dt { color: var(--cor-suave); font-size: .88rem; }
.dados dd, .totais dd { margin: 0; font-weight: 600; text-align: right; }
.totais .total-final dt, .totais .total-final dd { font-size: 1.15rem; font-weight: 700; color: var(--cor-texto); }

.cartoes-totais {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .5rem;
  margin-bottom: .75rem;
}
.cartao-total {
  padding: .6rem .75rem;
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
}
.cartao-total .rotulo { display: block; font-size: .72rem; color: var(--cor-suave); }
.cartao-total strong  { font-size: 1.1rem; }
.cartao-total.destaque { background: var(--cor-primaria-clara); border-color: var(--cor-primaria); }

.linha-vendedor { display: flex; justify-content: space-between; gap: .75rem; }
.linha-vendedor small { display: block; font-size: .8rem; }
.valor-vendedor { white-space: nowrap; }

.barra-participacao {
  height: 8px;
  margin: .5rem 0 .25rem;
  border-radius: 4px;
  background: var(--cor-fundo);
  overflow: hidden;
}
.barra-participacao span { display: block; height: 100%; background: var(--cor-primaria); }

.paginacao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin: .5rem 0 1rem;
}

/* --------------------------------------------------------------- Etiquetas */

.etiqueta {
  display: inline-block;
  padding: .12rem .5rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.etiqueta-cinza     { background: #eceff3; color: var(--cor-suave); }
.etiqueta-paga      { background: var(--cor-sucesso-clara); color: var(--cor-sucesso); }
.etiqueta-pendente  { background: var(--cor-aviso-clara);   color: var(--cor-aviso); }
.etiqueta-cancelada { background: var(--cor-perigo-clara);  color: var(--cor-perigo); }
.etiqueta-entrada   { background: var(--cor-sucesso-clara); color: var(--cor-sucesso); }
.etiqueta-saida     { background: var(--cor-perigo-clara);  color: var(--cor-perigo); }
.etiqueta-ajuste    { background: var(--cor-aviso-clara);   color: var(--cor-aviso); }

/* --------------------------------------------------------------- Alertas */

.alerta {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  padding: .65rem .8rem;
  margin-bottom: .75rem;
  border-radius: var(--raio-pequeno);
  font-size: .92rem;
}
.alerta-sucesso { background: var(--cor-sucesso-clara); color: var(--cor-sucesso); }
.alerta-erro    { background: var(--cor-perigo-clara);  color: var(--cor-perigo); }
.alerta-aviso   { background: var(--cor-aviso-clara);   color: var(--cor-aviso); }
.alerta .icone  { flex-shrink: 0; margin-top: 2px; }

/* ----------------------------------------------------------------- Login */

.tela-login {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 88vh;
  padding: 1rem;
}
.cartao-login { width: 100%; max-width: 380px; padding: 1.5rem 1.25rem; }
.marca { text-align: center; margin-bottom: 1.25rem; color: var(--cor-primaria); }
.marca h1 { margin: .35rem 0 .1rem; color: var(--cor-texto); }

/* ------------------------------------------------------------ Comprovante */

.comprovante {
  max-width: 460px;
  margin: 1rem auto;
  padding: 1.25rem;
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
}
.comprovante-topo { text-align: center; margin-bottom: 1rem; }
.comprovante-cabecalho { margin-bottom: 1rem; }
.comprovante-cabecalho > div { display: flex; justify-content: space-between; padding: .2rem 0; }
.comprovante-cabecalho dt { color: var(--cor-suave); font-size: .85rem; }
.comprovante-cabecalho dd { margin: 0; font-weight: 600; }

.comprovante-itens { width: 100%; border-collapse: collapse; margin-bottom: 1rem; font-size: .9rem; }
.comprovante-itens th { padding: .35rem .25rem; border-bottom: 2px solid var(--cor-borda); font-size: .78rem; color: var(--cor-suave); text-align: left; }
.comprovante-itens td { padding: .35rem .25rem; border-bottom: 1px solid var(--cor-borda); }

.comprovante-acoes { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px dashed var(--cor-borda); }
.comprovante-rodape { margin-top: 1rem; text-align: center; }

.selo-cancelado, .selo-pendente {
  display: inline-block;
  padding: .25rem .75rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: .8rem;
}
.selo-cancelado { background: var(--cor-perigo-clara); color: var(--cor-perigo); }
.selo-pendente  { background: var(--cor-aviso-clara);  color: var(--cor-aviso); }

/* ------------------------------------------------------------------ Erros */

.bloco-erro { padding: 2rem 1rem; }
.erro-codigo { font-size: 3rem; font-weight: 800; color: var(--cor-primaria); line-height: 1; }
.erro-titulo { margin: .35rem 0 .5rem; }
.erro-detalhe {
  margin: .75rem 0;
  padding: .6rem;
  background: var(--cor-fundo);
  border-radius: var(--raio-pequeno);
  font-size: .78rem;
  text-align: left;
  white-space: pre-wrap;
  overflow-x: auto;
}

/* ---------------------------------------------------------------- Foto */

.foto-produto { text-align: center; margin-bottom: 1rem; }
.foto-previa {
  width: 148px; height: 148px;
  margin: 0 auto .6rem;
  border: 1px dashed var(--cor-borda);
  border-radius: var(--raio);
  overflow: hidden;
  display: grid;
  place-items: center;
  background: var(--cor-fundo);
}
.foto-previa img { width: 100%; height: 100%; object-fit: cover; }
.foto-vazia { color: var(--cor-suave); }
.foto-acoes { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; }
.foto-acoes .botao { cursor: pointer; }

.bloco-gateway {
  margin-top: 1rem;
  padding-top: .75rem;
  border-top: 1px solid var(--cor-borda);
}
.bloco-gateway code { font-size: .75rem; word-break: break-all; }

/* -------------------------------------------------------------- Impressão */

@media print {
  .topo, .gaveta, .gaveta-fundo, .barra-inferior, .barra-acao,
  .sem-impressao, .alerta { display: none !important; }

  body { background: #fff; }
  .conteudo { padding: 0; max-width: none; }
  .comprovante { border: 0; margin: 0; padding: 0; max-width: none; }
}

/* --------------------------------------------------------------- Telas maiores */

@media (min-width: 640px) {
  .cartoes-totais { grid-template-columns: repeat(4, 1fr); }
  .conteudo { padding-bottom: calc(var(--altura-barra) + 6rem); }
}