/* =====================================================================
   PDV Tiny — folha de estilo do app
   Mobile-first: tudo é desenhado primeiro para a tela do celular, com
   alvos de toque grandes, área segura do iPhone e nada de hover como
   requisito. As medidas saem sempre dos tokens abaixo — nada de valores
   soltos no meio do arquivo.

   Sumário
   1. Tokens
   2. Base e tipografia
   3. Formulários
   4. Botões
   5. Layout de tela (cabeçalho, abas, barra de ação)
   6. Blocos de conteúdo (cartão, lista, chip, banner)
   7. Telas específicas (busca, itens, pagamento, caixa, fila, scanner)
   8. Utilitários
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. TOKENS
   --------------------------------------------------------------------- */
:root {
  /* -- cor: superfícies (do fundo para a frente) -- */
  --bg: #101323;
  --card: #1a1f36;
  --card2: #232a4a;
  --linha: #2e3660;

  /* -- cor: conteúdo -- */
  --texto: #eef0fa;
  --texto2: #9aa3c7;

  /* -- cor: marca e estados -- */
  --primaria: #6366f1;
  --primaria-forte: #4f46e5;
  --primaria-suave: rgba(99, 102, 241, .18);
  --ok: #34d399;
  --ok-suave: rgba(52, 211, 153, .14);
  --erro: #f87171;
  --erro-suave: rgba(248, 113, 113, .12);
  --erro-borda: rgba(248, 113, 113, .4);
  --erro-texto: #fecaca;
  --aviso: #fbbf24;
  --aviso-suave: rgba(251, 191, 36, .1);
  --aviso-borda: rgba(251, 191, 36, .4);
  --aviso-texto: #fde68a;

  /* -- tipografia: escala --
     t-lg é o piso dos campos de digitação: abaixo de 16px o iOS dá zoom
     sozinho ao focar o input e desalinha a tela inteira. */
  --t-2xs: 11px;
  --t-xs: 12px;
  --t-sm: 13px;
  --t-md: 15px;
  --t-lg: 17px;
  --t-xl: 21px;
  --t-2xl: 26px;
  --t-3xl: 34px;

  /* -- tipografia: peso -- */
  --p-med: 600;
  --p-bold: 700;
  --p-black: 800;

  /* -- tipografia: entrelinha -- */
  --lh-apertada: 1.3;
  --lh-normal: 1.45;

  /* -- espaçamento: grade de 4pt -- */
  --e-1: 4px;
  --e-2: 8px;
  --e-3: 12px;
  --e-4: 16px;
  --e-5: 20px;
  --e-6: 24px;
  --e-8: 32px;

  /* -- raio -- */
  --r-p: 10px;
  --r-m: 12px;
  --r-g: 16px;
  --r-total: 999px;
  --raio: var(--r-g);

  /* -- elevação -- */
  --sombra-1: 0 5px 18px rgba(0, 0, 0, .28);
  --sombra-2: 0 8px 24px rgba(0, 0, 0, .35);
  --sombra-primaria: 0 8px 24px rgba(79, 70, 229, .45);

  /* -- estrutura -- */
  --alvo-toque: 46px;     /* altura mínima de qualquer coisa clicável */
  --altura-alterna: 37px; /* alternador R$/%: usado também pelo espaçador que alinha o campo vizinho */
  --altura-abas: 56px;    /* barra de navegação inferior, sem a área segura */
  --largura-tela: 560px;  /* o app não passa disso nem em tablet */
  --seguro-baixo: env(safe-area-inset-bottom);
  --seguro-alto: env(safe-area-inset-top);
}

/* ---------------------------------------------------------------------
   2. BASE E TIPOGRAFIA
   --------------------------------------------------------------------- */
* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html, body { margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--texto);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  font-size: var(--t-md);
  line-height: var(--lh-normal);
  overscroll-behavior-y: none;
}

h1, h2 { line-height: var(--lh-apertada); letter-spacing: -.02em; }

/* Rótulo de seção — o texto em caixa alta que abre cada bloco. */
.rotulo {
  display: block;
  margin: 0 0 var(--e-2) 2px;
  color: var(--texto2);
  font-size: var(--t-xs);
  font-weight: var(--p-bold);
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* Texto auxiliar embaixo de um campo ou botão. */
.dica {
  margin-top: var(--e-1);
  color: var(--texto2);
  font-size: var(--t-xs);
  line-height: var(--lh-normal);
}

/* ---------------------------------------------------------------------
   3. FORMULÁRIOS
   --------------------------------------------------------------------- */
input, select, textarea, button { font: inherit; color: inherit; }

input, select, textarea {
  width: 100%;
  min-height: var(--alvo-toque);
  padding: var(--e-3) var(--e-4);
  background: var(--card2);
  border: 1px solid var(--linha);
  border-radius: var(--r-m);
  font-size: var(--t-lg);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

input:focus, select:focus, textarea:focus {
  border-color: var(--primaria);
  box-shadow: 0 0 0 3px var(--primaria-suave);
}

input::placeholder, textarea::placeholder { color: var(--texto2); }

/* O appearance:none acima apaga o ✓ nativo do checkbox — desenhamos o nosso. */
input[type="checkbox"] {
  width: 20px;
  height: 20px;
  min-height: 0;
  padding: 0;
  border-radius: 7px;
  flex-shrink: 0;
  cursor: pointer;
}
input[type="checkbox"]:checked {
  background-color: var(--primaria);
  border-color: var(--primaria);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' d='M3 8.5l3.2 3.2L13 5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 14px;
}

select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%239aa3c7' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--e-4) center;
  padding-right: 38px;
}

.campo { margin-bottom: var(--e-4); }
.campo:last-child { margin-bottom: 0; }

/* Duas colunas lado a lado — vira uma coluna só em telas bem estreitas. */
.linha-dupla { display: flex; gap: var(--e-3); }
.linha-dupla > * { flex: 1; min-width: 0; }
@media (max-width: 340px) {
  .linha-dupla { flex-direction: column; }
}

/* Campo de dinheiro com o "R$" ancorado à esquerda. */
.campo-preco { position: relative; flex: 1; }
.campo-preco span {
  position: absolute;
  left: var(--e-3);
  top: 50%;
  transform: translateY(-50%);
  color: var(--texto2);
  font-size: var(--t-md);
  pointer-events: none;
}
.campo-preco input {
  padding-left: 40px;
  text-align: right;
  font-weight: var(--p-bold);
}

/* Alternador de duas opções (R$ ⇄ %). */
.alterna {
  display: flex;
  height: var(--altura-alterna);
  margin-bottom: var(--e-2);
  background: var(--card2);
  border: 1px solid var(--linha);
  border-radius: var(--r-p);
  overflow: hidden;
}
.alterna button {
  flex: 1;
  background: none;
  color: var(--texto2);
  font-size: var(--t-sm);
  font-weight: var(--p-bold);
}
.alterna button.sel { background: var(--primaria); color: #fff; }

/* Buraco do tamanho de um .alterna, para o campo ao lado começar na mesma linha. */
.espaco-alterna { height: var(--altura-alterna); margin-bottom: var(--e-2); }

/* ---------------------------------------------------------------------
   4. BOTÕES
   --------------------------------------------------------------------- */
button { border: none; cursor: pointer; }

/* Ação principal da tela: uma por vez, sempre a mais visível. */
.btn-principal {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  width: 100%;
  padding: var(--e-4);
  border-radius: var(--r-g);
  background: var(--primaria-forte);
  color: #fff;
  font-size: var(--t-lg);
  font-weight: var(--p-black);
  letter-spacing: .01em;
  box-shadow: var(--sombra-primaria);
}
.btn-principal:disabled { opacity: .45; box-shadow: none; }
.btn-principal:active:not(:disabled) { transform: scale(.985); }

/* Ação de apoio: mesma largura, peso visual menor. */
.btn-secundario {
  width: 100%;
  min-height: var(--alvo-toque);
  padding: var(--e-3);
  border-radius: var(--r-m);
  background: var(--card2);
  border: 1px solid var(--linha);
  font-size: var(--t-md);
  font-weight: var(--p-bold);
}
.btn-secundario:active { background: var(--linha); }
.btn-secundario:disabled { opacity: .6; }

/* Modificador de risco — some com o item, cancela, fecha o caixa. */
.btn-perigo { color: var(--erro); border-color: var(--erro-borda); }

/* Botão quadrado de ícone no cabeçalho. */
.btn-icone {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: var(--r-m);
  background: var(--card);
  border: 1px solid var(--linha);
  font-size: var(--t-xl);
}
.btn-icone:active { background: var(--card2); }

/* Botão pequeno de texto, encaixado ao lado de um rótulo. */
.btn-mini {
  padding: var(--e-2) var(--e-3);
  border-radius: var(--r-p);
  background: var(--card2);
  border: 1px solid var(--linha);
  color: var(--texto2);
  font-size: var(--t-xs);
  font-weight: var(--p-bold);
}
.btn-mini:active { background: var(--linha); }
.btn-mini.destaque { color: var(--primaria); }
.btn-mini.destaque.ativo { background: var(--primaria-suave); border-color: var(--primaria); }
.btn-mini:disabled { opacity: .6; }

/* ---------------------------------------------------------------------
   5. LAYOUT DE TELA
   --------------------------------------------------------------------- */
.tela {
  display: none;
  max-width: var(--largura-tela);
  margin: 0 auto;
  padding: 0 var(--e-4) calc(var(--seguro-baixo) + var(--e-6));
}
.tela.ativa { display: block; }

/* Telas com a barra de abas embaixo precisam de um respiro extra. */
body.com-abas .tela { padding-bottom: calc(var(--altura-abas) + var(--seguro-baixo) + var(--e-6)); }

/* E quem também tem a barra de ação flutuante precisa do dobro. */
body.com-barra-acao .tela.ativa { padding-bottom: calc(var(--altura-abas) + var(--seguro-baixo) + 96px); }

/* Telas de entrada (login, abertura de caixa): conteúdo centrado na vertical. */
.central {
  min-height: 88vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-bottom: var(--e-5);
}
.logo-grande { text-align: center; margin-bottom: var(--e-6); }
.logo-grande .emoji { font-size: 52px; }
.logo-grande h2 { margin: var(--e-2) 0 2px; font-size: var(--t-2xl); }
.logo-grande p { margin: 0; color: var(--texto2); font-size: var(--t-md); }

/* -- cabeçalho -- */
header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-2);
  padding: calc(var(--seguro-alto) + var(--e-3)) 2px var(--e-3);
  background: linear-gradient(var(--bg) 85%, transparent);
}
header h1 {
  flex: 1;
  margin: 0;
  font-size: var(--t-xl);
  font-weight: var(--p-black);
}
header h1 small { color: var(--primaria); font-weight: var(--p-black); }

/* -- barra de abas (navegação principal) --
   Fica fixa embaixo porque é onde o polegar alcança. Só aparece depois do
   login e com caixa aberto; as telas empilhadas (detalhe, relatórios)
   continuam usando o ✕ do cabeçalho para voltar. */
.abas {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: none;
  padding-bottom: var(--seguro-baixo);
  background: rgba(16, 19, 35, .93);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-top: 1px solid var(--linha);
}
body.com-abas .abas { display: flex; }
.aba {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: var(--altura-abas);
  background: none;
  color: var(--texto2);
  font-size: var(--t-2xs);
  font-weight: var(--p-bold);
}
.aba .ico { font-size: var(--t-xl); line-height: 1; }
.aba.ativa { color: var(--primaria); }
.aba:active { background: rgba(255, 255, 255, .04); }
/* Contador de vendas ainda não enviadas, colado no ícone da aba. */
.aba .selo {
  position: absolute;
  top: 3px;
  left: 50%;
  margin-left: 5px;
  min-width: 17px;
  padding: 0 4px;
  border-radius: var(--r-total);
  background: var(--aviso);
  color: #1c1917;
  font-size: var(--t-2xs);
  font-weight: var(--p-black);
  line-height: 17px;
  text-align: center;
}
.aba .selo:empty { display: none; }

/* -- barra de ação flutuante (o "Registrar venda") -- */
.barra-acao {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  max-width: var(--largura-tela);
  margin: 0 auto;
  padding: var(--e-3) var(--e-4) calc(var(--seguro-baixo) + var(--e-3));
  background: linear-gradient(transparent, var(--bg) 30%);
}
body.com-abas .barra-acao {
  bottom: calc(var(--altura-abas) + var(--seguro-baixo));
  padding-bottom: var(--e-3);
}

/* ---------------------------------------------------------------------
   6. BLOCOS DE CONTEÚDO
   --------------------------------------------------------------------- */
.cartao {
  margin-bottom: var(--e-3);
  padding: var(--e-4);
  background: var(--card);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
}

/* Cabeçalho de cartão: rótulo à esquerda, ação pequena à direita. */
.cartao-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  margin-bottom: var(--e-2);
}
.cartao-topo .rotulo { margin-bottom: 0; }
.cartao-topo > button { width: auto; flex-shrink: 0; }

/* Par chave/valor — a linha que se repete em resumo de caixa e de venda. */
.info-linha {
  display: flex;
  justify-content: space-between;
  gap: var(--e-3);
  padding: var(--e-2) 0;
  font-size: var(--t-md);
  border-bottom: 1px solid var(--linha);
}
.info-linha:last-child { border-bottom: 0; }
.info-linha .k { color: var(--texto2); }
.info-linha .v { font-weight: var(--p-bold); text-align: right; }

/* Chip informativo (vendedor, depósito, estado do caixa). */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  padding: var(--e-1) var(--e-3);
  background: var(--card2);
  border: 1px solid var(--linha);
  border-radius: var(--r-total);
  color: var(--texto2);
  font-size: var(--t-sm);
  font-weight: var(--p-med);
}
.chip .ponto {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ok);
  flex-shrink: 0;
}
.grade-chips { display: flex; gap: var(--e-2); flex-wrap: wrap; }

/* -- KPI: o número que importa, grande, com um rótulo curto embaixo.
   Abre os relatórios respondendo "quanto?" antes de qualquer tabela. -- */
.grade-kpi {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e-2);
  margin-bottom: var(--e-3);
}
.kpi {
  padding: var(--e-4);
  background: var(--card);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
}
.kpi.largo { grid-column: 1 / -1; }
.kpi-valor {
  display: block;
  font-size: var(--t-xl);
  font-weight: var(--p-black);
  letter-spacing: -.02em;
  line-height: 1.15;
}
.kpi.largo .kpi-valor { font-size: var(--t-2xl); }
.kpi-valor.ok { color: var(--ok); }
.kpi-valor.erro { color: var(--erro); }
.kpi-valor.aviso { color: var(--aviso); }
.kpi-rotulo {
  display: block;
  margin-top: var(--e-1);
  color: var(--texto2);
  font-size: var(--t-xs);
  font-weight: var(--p-bold);
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* -- filtros --
   Empilhados: dois seletores lado a lado em 390px truncam o rótulo
   ("Todos os ven…") e o filtro deixa de se explicar sozinho. */
.filtros { display: flex; flex-direction: column; gap: var(--e-3); }
.filtros select { width: 100%; }
/* Os períodos dividem a largura sobrando, cada um partindo do tamanho do seu
   texto (flex-basis auto): dividir em partes iguais espremia "Escolher" para
   fora do cartão. Se ainda não couberem, quebram para a linha de baixo. */
.chips-filtro { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.chip-filtro {
  flex: 1 1 auto;
  padding: var(--e-2);
  border-radius: var(--r-total);
  background: var(--card2);
  border: 1px solid var(--linha);
  color: var(--texto2);
  font-size: var(--t-sm);
  font-weight: var(--p-bold);
  white-space: nowrap;
}
.chip-filtro.sel {
  background: var(--primaria-suave);
  border-color: var(--primaria);
  color: var(--texto);
}

/* -- selo de status: uma palavra colorida no lugar de uma frase -- */
.selo-status {
  display: inline-block;
  padding: 2px var(--e-2);
  border-radius: var(--r-total);
  font-size: var(--t-2xs);
  font-weight: var(--p-black);
  white-space: nowrap;
}
.selo-status.ok { background: var(--ok-suave); color: var(--ok); }
.selo-status.erro { background: var(--erro-suave); color: var(--erro); }
.selo-status.aviso { background: var(--aviso-suave); color: var(--aviso); }
.selo-status.info { background: var(--primaria-suave); color: var(--primaria); }

/* -- linha com barra proporcional: dá para comparar os dias batendo o olho,
   sem ler número por número -- */
.linha-barra {
  padding: var(--e-3) 0;
  border-bottom: 1px solid var(--linha);
}
.linha-barra:last-child { border-bottom: 0; }
.linha-barra-topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-3);
}
.linha-barra .titulo { font-size: var(--t-md); font-weight: var(--p-med); }
.linha-barra .valor { font-weight: var(--p-black); white-space: nowrap; }
.linha-barra .meta { display: block; margin-top: 2px; color: var(--texto2); font-size: var(--t-xs); }
.barra {
  height: 6px;
  margin-top: var(--e-2);
  border-radius: var(--r-total);
  background: var(--card2);
  overflow: hidden;
}
.barra > span {
  display: block;
  height: 100%;
  border-radius: var(--r-total);
  background: var(--primaria);
}
.barra.aviso > span { background: var(--aviso); }

/* -- linha de caixa: a linha inteira abre o detalhe; o › à direita é a pista
   visual de que dá para entrar -- */
.linha-caixa {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  width: 100%;
  padding: var(--e-3) 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--linha);
  text-align: left;
}
.linha-caixa:last-child { border-bottom: 0; }
.linha-caixa:active { background: var(--card2); }
.linha-caixa .corpo { flex: 1; min-width: 0; }
.linha-caixa .titulo { font-size: var(--t-md); font-weight: var(--p-med); }
.linha-caixa .meta {
  display: block;
  margin-top: 2px;
  color: var(--texto2);
  font-size: var(--t-xs);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.linha-caixa .direita { flex-shrink: 0; text-align: right; }
.linha-caixa .direita .valor { display: block; font-weight: var(--p-black); white-space: nowrap; }
.linha-caixa .direita .selo-status { margin-top: 3px; }
.linha-caixa .seta { flex-shrink: 0; color: var(--texto2); font-size: var(--t-xl); }

/* Estado vazio de uma lista. */
.vazio {
  padding: var(--e-5) var(--e-3);
  color: var(--texto2);
  font-size: var(--t-md);
  text-align: center;
}
.vazio .icone { display: block; margin-bottom: var(--e-2); font-size: var(--t-3xl); }

/* Banner de aviso no topo da tela. */
.banner {
  display: none;
  margin-bottom: var(--e-3);
  padding: var(--e-3) var(--e-4);
  border-radius: var(--r-m);
  font-size: var(--t-md);
  line-height: var(--lh-normal);
}
.banner.mostrar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
}
.banner.erro { background: var(--erro-suave); border: 1px solid var(--erro-borda); color: var(--erro-texto); }
.banner.fila { background: var(--aviso-suave); border: 1px solid var(--aviso-borda); color: var(--aviso-texto); }
.banner button {
  padding: var(--e-2) var(--e-3);
  border-radius: var(--r-p);
  background: var(--aviso);
  color: #1c1917;
  font-size: var(--t-sm);
  font-weight: var(--p-bold);
  white-space: nowrap;
}

/* Retorno de uma ação (salvar, testar conexão, sincronizar). */
.estado-teste {
  display: none;
  margin-top: var(--e-2);
  font-size: var(--t-md);
  font-weight: var(--p-med);
}
.estado-teste.ok { display: block; color: var(--ok); }
.estado-teste.falha { display: block; color: var(--erro); }

.sync-feedback {
  min-height: 18px;
  margin-top: var(--e-2);
  color: var(--texto2);
  font-size: var(--t-xs);
  line-height: var(--lh-normal);
}
.sync-feedback.ok { color: var(--ok); }
.sync-feedback.erro { color: var(--erro); }

/* ---------------------------------------------------------------------
   7. TELAS ESPECÍFICAS
   --------------------------------------------------------------------- */

/* -- busca de produto -- */
.caixa-busca { position: relative; }
#busca { padding-left: 42px; padding-right: 52px; }
.caixa-busca .lupa {
  position: absolute;
  left: var(--e-4);
  top: 50%;
  transform: translateY(-50%);
  color: var(--texto2);
  font-size: var(--t-md);
  pointer-events: none;
}
.btn-scanner {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-p);
  background: var(--card);
  border: 1px solid var(--linha);
  font-size: var(--t-lg);
}
.btn-scanner:active { background: var(--linha); }

#resultados {
  display: none;
  margin-top: var(--e-2);
  border: 1px solid var(--linha);
  border-radius: var(--r-m);
  overflow: hidden;
}
#resultados.aberto { display: block; }
.resultado {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  width: 100%;
  padding: var(--e-3) var(--e-4);
  background: var(--card2);
  border: 0;
  border-bottom: 1px solid var(--linha);
  text-align: left;
}
.resultado:last-child { border-bottom: 0; }
.resultado:active { background: var(--linha); }
.resultado .nome { font-size: var(--t-md); font-weight: var(--p-med); line-height: var(--lh-apertada); }
.resultado .cod { margin-top: 2px; color: var(--texto2); font-size: var(--t-xs); }
.resultado .preco { color: var(--ok); font-weight: var(--p-bold); white-space: nowrap; }
.msg-busca {
  padding: var(--e-3) var(--e-4);
  background: var(--card2);
  color: var(--texto2);
  font-size: var(--t-sm);
}

/* -- itens da venda -- */
.item { padding: var(--e-3) 0; border-bottom: 1px solid var(--linha); }
.item:last-child { border-bottom: 0; }
.item-topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--e-2);
}
.item-nome { font-size: var(--t-md); font-weight: var(--p-med); line-height: var(--lh-apertada); }
.item-cod { margin-top: 2px; color: var(--texto2); font-size: var(--t-xs); }
.item-estoque.baixo { color: var(--aviso); }
.btn-remover {
  flex-shrink: 0;
  padding: 2px var(--e-2);
  background: none;
  color: var(--erro);
  font-size: var(--t-xl);
  line-height: 1;
}
.item-controles {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  margin-top: var(--e-3);
}

/* Contador de quantidade. */
.stepper {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  background: var(--card2);
  border: 1px solid var(--linha);
  border-radius: var(--r-m);
  overflow: hidden;
}
.stepper button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: var(--alvo-toque);
  background: none;
  color: var(--primaria);
  font-size: var(--t-2xl);
  font-weight: var(--p-med);
}
.stepper input {
  width: 46px;
  min-height: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  text-align: center;
  font-weight: var(--p-bold);
}
.stepper input:focus { box-shadow: none; }

/* -- totais -- */
.resumo {
  margin-top: var(--e-3);
  padding-top: var(--e-3);
  border-top: 1px dashed var(--linha);
}
.resumo-linha {
  display: flex;
  justify-content: space-between;
  padding: 3px 0;
  color: var(--texto2);
  font-size: var(--t-md);
}
.resumo-linha.total {
  padding-top: var(--e-2);
  color: var(--texto);
  font-size: var(--t-xl);
  font-weight: var(--p-black);
}
.resumo-linha .neg { color: var(--erro); }
.resumo-linha .pos { color: var(--ok); }

/* -- formas de pagamento -- */
.grade-pagamento { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-2); }
.grade-pagamento button {
  min-height: var(--alvo-toque);
  padding: var(--e-3) var(--e-2);
  background: var(--card2);
  border: 1px solid var(--linha);
  border-radius: var(--r-m);
  color: var(--texto2);
  font-size: var(--t-md);
  font-weight: var(--p-bold);
}
.grade-pagamento button.sel {
  background: var(--primaria-suave);
  border-color: var(--primaria);
  color: var(--texto);
}
.linha-pagto {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-1) 0;
}
.linha-pagto label {
  flex: 1;
  color: var(--texto2);
  font-size: var(--t-md);
  font-weight: var(--p-bold);
}
.linha-pagto .campo-preco { flex: 0 0 130px; }
.resumo-pagto {
  display: flex;
  justify-content: space-between;
  margin-top: var(--e-2);
  padding-top: var(--e-2);
  border-top: 1px dashed var(--linha);
  font-size: var(--t-md);
  font-weight: var(--p-black);
}
.resumo-pagto.ok { color: var(--ok); }
.resumo-pagto.falta { color: var(--erro); }
.resumo-pagto.sobra { color: var(--aviso); }

/* -- caixa: conciliação -- */
.conc-linha {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: var(--e-2);
  align-items: center;
  padding: var(--e-2) 0;
  border-bottom: 1px solid var(--linha);
}
.conc-linha:last-child { border-bottom: 0; }
.conc-linha .meio { font-size: var(--t-sm); font-weight: var(--p-med); }
.conc-linha .esperado { color: var(--texto2); font-size: var(--t-sm); text-align: right; }
.conc-linha input { padding: var(--e-2) var(--e-3); text-align: right; font-weight: var(--p-bold); }
.conc-dif { grid-column: 2 / 4; margin-top: -4px; font-size: var(--t-xs); text-align: right; }
.dif-ok { color: var(--ok); }
.dif-falta { color: var(--erro); }
.dif-sobra { color: var(--aviso); }

/* -- caixa: lista de vendas -- */
.venda-linha {
  display: flex;
  justify-content: space-between;
  gap: var(--e-2);
  padding: var(--e-2) 0;
  font-size: var(--t-sm);
  border-bottom: 1px solid var(--linha);
}
.venda-linha:last-child { border-bottom: 0; }
.venda-linha .meta { color: var(--texto2); font-size: var(--t-xs); }
button.venda-linha {
  width: 100%;
  align-items: center;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--linha);
  text-align: left;
}
button.venda-linha:active { background: var(--card2); }
button.venda-linha .seta { flex-shrink: 0; color: var(--texto2); font-size: var(--t-md); }

.item-venda-detalhe {
  display: flex;
  justify-content: space-between;
  gap: var(--e-2);
  padding: var(--e-2) 0;
  font-size: var(--t-md);
  border-bottom: 1px solid var(--linha);
}
.item-venda-detalhe:last-child { border-bottom: 0; }
.item-venda-detalhe .meta { margin-top: 1px; color: var(--texto2); font-size: var(--t-xs); }

/* -- usuários -- */
/* O nome fica em uma linha e os botões quebram embaixo — são até quatro ações
   por usuário, que não cabem lado a lado na largura de um celular. */
.usuario-linha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2);
  padding: var(--e-3) 0;
  border-bottom: 1px solid var(--linha);
}
.usuario-linha:last-child { border-bottom: 0; }
.usuario-linha .info { flex: 1 1 100%; }
.usuario-linha .info .nome { font-size: var(--t-md); font-weight: var(--p-med); }
.usuario-linha .info .meta { color: var(--texto2); font-size: var(--t-xs); }
.usuario-linha .acoes { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.inativo { opacity: .5; }

/* -- fila offline -- */
.status-global {
  position: fixed;
  right: var(--e-3);
  bottom: calc(var(--seguro-baixo) + var(--e-3));
  z-index: 95;
  display: none;
  align-items: center;
  gap: var(--e-2);
  width: auto;
  max-width: calc(100vw - var(--e-6));
  padding: var(--e-2) var(--e-3);
  border-radius: var(--r-total);
  background: rgba(26, 31, 54, .96);
  border: 1px solid var(--linha);
  color: var(--texto);
  font-size: var(--t-xs);
  font-weight: var(--p-black);
  box-shadow: var(--sombra-1);
}
.status-global.mostrar { display: flex; }
body.com-abas .status-global { bottom: calc(var(--altura-abas) + var(--seguro-baixo) + var(--e-3)); }
body.com-barra-acao .status-global { bottom: calc(var(--altura-abas) + var(--seguro-baixo) + 84px); }
.status-global .bolinha {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ok);
}
.status-global.offline .bolinha { background: var(--aviso); }
.status-global.com-pendencia { border-color: var(--aviso-borda); }

.fila-card { padding: var(--e-3) 0; border-bottom: 1px solid var(--linha); }
.fila-card:last-child { border-bottom: 0; }
.fila-topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--e-3);
}
.fila-status { font-size: var(--t-2xs); font-weight: 900; letter-spacing: .04em; }
.fila-status.PENDENTE { color: var(--aviso); }
.fila-status.ERRO { color: var(--erro); }
.fila-status.SINCRONIZADO { color: var(--ok); }
.fila-meta { margin-top: var(--e-1); color: var(--texto2); font-size: var(--t-xs); line-height: var(--lh-normal); }
.fila-erro { margin-top: var(--e-2); color: var(--erro-texto); font-size: var(--t-xs); line-height: var(--lh-normal); }
.fila-numero { color: var(--ok); font-weight: var(--p-black); }

/* -- leitor de código de barras -- */
#scanner {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  flex-direction: column;
  background: #000;
}
#scanner-video { flex: 1; width: 100%; min-height: 0; object-fit: cover; }
.scanner-mira {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  width: min(78vw, 340px);
  height: 130px;
  border: 2.5px solid rgba(255, 255, 255, .9);
  border-radius: var(--r-g);
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .45);
  pointer-events: none;
}
.scanner-rodape {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--e-4) var(--e-5) calc(var(--seguro-baixo) + var(--e-5));
  text-align: center;
}
.scanner-rodape p {
  margin: 0 0 var(--e-3);
  color: #fff;
  font-size: var(--t-md);
  text-shadow: 0 1px 4px #000;
}

/* -- confirmação de venda -- */
#tela-sucesso {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--e-6);
  background: var(--bg);
  text-align: center;
}
#tela-sucesso.ativa { display: flex; }
.selo-ok {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 92px;
  height: 92px;
  margin-bottom: var(--e-5);
  border-radius: 50%;
  background: var(--ok-suave);
  border: 2px solid var(--ok);
  color: var(--ok);
  font-size: 46px;
}
#tela-sucesso h2 { margin: 0 0 var(--e-1); font-size: var(--t-2xl); }
#tela-sucesso .detalhe { color: var(--texto2); font-size: var(--t-md); line-height: 1.6; }
#tela-sucesso .valor-grande { margin: var(--e-3) 0 var(--e-1); font-size: var(--t-3xl); font-weight: var(--p-black); }

/* ---------------------------------------------------------------------
   8. UTILITÁRIOS
   --------------------------------------------------------------------- */
.oculto { display: none !important; }
.girando { display: inline-block; animation: girar 1s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .girando { animation-duration: 3s; }
  .btn-principal:active:not(:disabled) { transform: none; }
}