:root {
  --cor-fundo: #f4f4f5;
  --cor-cartao: #ffffff;
  --cor-texto: #18181b;
  --cor-texto-fraco: #71717a;
  --cor-borda: #e4e4e7;
  --cor-destaque: #ea580c;
  --cor-destaque-escuro: #c2410c;
  --cor-sucesso: #16a34a;
  --cor-perigo: #dc2626;
  --cor-aviso: #ca8a04;
  --raio: 16px;
  --raio-pequeno: 10px;
  --sombra: 0 2px 12px rgba(0, 0, 0, 0.08);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-tap-highlight-color: transparent;
}

body {
  min-height: 100vh;
  padding-bottom: 24px;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: var(--cor-cartao);
  border-bottom: 1px solid var(--cor-borda);
  position: sticky;
  top: 0;
  z-index: 20;
}

.topbar h1 {
  font-size: 1.1rem;
  margin: 0;
}

.topbar .usuario-atual {
  font-size: 0.85rem;
  color: var(--cor-texto-fraco);
}

.container {
  max-width: 560px;
  margin: 0 auto;
  padding: 16px;
}

.cartao {
  background: var(--cor-cartao);
  border-radius: var(--raio);
  padding: 18px;
  box-shadow: var(--sombra);
  margin-bottom: 16px;
}

.rotulo {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--cor-texto-fraco);
  margin-bottom: 8px;
}

input[type="text"],
input[type="datetime-local"],
input[type="search"] {
  width: 100%;
  font-size: 1.1rem;
  padding: 14px;
  border-radius: var(--raio-pequeno);
  border: 1px solid var(--cor-borda);
  background: #fafafa;
}

input:focus {
  outline: 2px solid var(--cor-destaque);
  outline-offset: 1px;
}

/* Nome do produto sempre em caixa alta. Só o desenho do texto — o valor real
   é normalizado pelo servidor ao criar o lote, então não dá pra "escapar"
   colando texto minúsculo. O ::placeholder fica de fora de propósito: em
   maiúsculas ele grita mais que o conteúdo. */
.caixa-alta { text-transform: uppercase; }
.caixa-alta::placeholder { text-transform: none; }

.grid-botoes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}

@media (min-width: 420px) {
  .grid-botoes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 1rem;
  font-weight: 600;
  padding: 14px 16px;
  border-radius: var(--raio-pequeno);
  border: 1px solid var(--cor-borda);
  background: #fff;
  color: var(--cor-texto);
  cursor: pointer;
  text-decoration: none;
  min-height: 52px;
  transition: transform 0.05s ease, background 0.15s ease;
}

.btn:active { transform: scale(0.97); }

.btn.selecionado {
  background: var(--cor-destaque);
  border-color: var(--cor-destaque);
  color: #fff;
}

.btn-primario {
  background: var(--cor-destaque);
  border-color: var(--cor-destaque);
  color: #fff;
  width: 100%;
  font-size: 1.2rem;
  padding: 18px;
}

.btn-primario:active { background: var(--cor-destaque-escuro); }

.btn-primario:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-perigo {
  background: var(--cor-perigo);
  border-color: var(--cor-perigo);
  color: #fff;
}

.btn-secundario {
  background: #fff;
  color: var(--cor-texto);
}

.btn-bloco {
  width: 100%;
}

.teclado-numerico {
  display: grid;
  /* minmax(0,...) e não 1fr puro: com 1fr a coluna cresce até caber o conteúdo
     mais largo, e a palavra "Limpar" empurrava a coluna do 1/4/7 pra fora. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.teclado-numerico .btn {
  font-size: 1.4rem;
  min-height: 60px;
}

/* Única tecla com palavra em vez de dígito: no terço de coluna ela transbordava
   a borda depois que as colunas passaram a ter a mesma largura. */
#btn-qtd-limpar {
  font-size: 1rem;
  padding-left: 4px;
  padding-right: 4px;
}

.valor-grande {
  font-size: 2.4rem;
  font-weight: 700;
  text-align: center;
  padding: 10px 0 4px;
  letter-spacing: 1px;
}

.linha {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--cor-borda);
}
.linha:last-child { border-bottom: none; }
.linha .rotulo-inline { color: var(--cor-texto-fraco); font-size: 0.9rem; }
.linha .valor { font-weight: 600; text-align: right; }

.badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
}
.badge.aguardando, .badge.imprimindo { background: #fef9c3; color: #854d0e; }
.badge.concluido { background: #dcfce7; color: #166534; }
.badge.cancelado { background: #fee2e2; color: #991b1b; }

.barra-progresso {
  width: 100%;
  height: 18px;
  background: var(--cor-borda);
  border-radius: 999px;
  overflow: hidden;
  margin: 14px 0;
}
.barra-progresso .preenchido {
  height: 100%;
  background: var(--cor-destaque);
  transition: width 0.25s ease;
  border-radius: 999px;
}

.status-conexao {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
}
.ponto {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--cor-perigo);
}
.ponto.online { background: var(--cor-sucesso); }

.lista-lotes { list-style: none; margin: 0; padding: 0; }
.lista-lotes li {
  padding: 10px 0;
  border-bottom: 1px solid var(--cor-borda);
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.92rem;
}
.lista-lotes li:last-child { border-bottom: none; }
.lista-lotes .produto-nome { font-weight: 600; }
.lista-lotes .meta { color: var(--cor-texto-fraco); font-size: 0.82rem; }

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(24,24,27,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 50;
}
.overlay.escondido { display: none; }
.overlay .cartao { max-width: 420px; width: 100%; margin: 0; }

.texto-fraco { color: var(--cor-texto-fraco); font-size: 0.85rem; }
.centralizado { text-align: center; }
.espaco-topo { margin-top: 14px; }
.filtros { display: flex; flex-direction: column; gap: 10px; }

.receptor-tela {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
}
.receptor-tela .produto-atual { font-size: 1.8rem; font-weight: 700; margin: 16px 0 4px; }

/* --- Prévia visual da etiqueta (mockup ao vivo, mesma ordem de campos do ZPL) --- */
.etiqueta-mockup-wrap {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}
.etiqueta-mockup {
  width: 100%;
  max-width: 300px;
  background: #fff;
  border: 2px solid #18181b;
  border-radius: 10px;
  overflow: hidden;
  font-family: "Courier New", Courier, monospace;
  color: #000;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12);
}

.etiqueta-cabecalho {
  background: var(--cor-destaque);
  color: #fff;
  text-align: center;
  padding: 10px 12px 8px;
}
.etiqueta-marca {
  display: block;
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: 0.5px;
}
.etiqueta-subtitulo {
  display: block;
  font-size: 0.62rem;
  letter-spacing: 1.5px;
  font-weight: 700;
  opacity: 0.9;
  margin-top: 3px;
}

.etiqueta-corpo {
  padding: 14px 16px 4px;
}
.etiqueta-mockup .campo-produto {
  font-weight: 800;
  font-size: 1.08rem;
  text-align: center;
  padding-bottom: 10px;
  margin-bottom: 8px;
  border-bottom: 1px dashed var(--cor-borda);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.etiqueta-linha {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 4px 0;
  font-size: 0.85rem;
}
.etiqueta-rotulo {
  color: #71717a;
  font-weight: 700;
  font-size: 0.66rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  white-space: nowrap;
}
.etiqueta-valor {
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.etiqueta-rodape {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px 16px 16px;
  margin-top: 8px;
  border-top: 1px dashed var(--cor-borda);
}
.etiqueta-mockup .qr-placeholder {
  flex-shrink: 0;
  width: 54px;
  height: 54px;
  border: 2px solid #000;
  background-image: repeating-conic-gradient(#000 0% 25%, #fff 0% 50%);
  background-size: 7px 7px;
}
.etiqueta-mockup .qr-legenda {
  font-size: 0.7rem;
  line-height: 1.35;
  color: #444;
  text-align: left;
}

/* ============================================================
   TEMA ESCURO
   O tablet fica ligado 24h numa parede da cozinha. Fundo claro
   nessa situação cansa a vista e gasta bateria à toa.
   Tudo aqui é aditivo: redefine a paleta do :root e conserta as
   poucas cores que ficaram cravadas acima. Pra voltar ao tema
   claro, basta apagar deste comentário até o fim do arquivo.
   ============================================================ */

:root {
  /* color-scheme faz o Android desenhar barra de rolagem, seleção de
     texto e seletor de data em escuro — sem isso eles saem brancos. */
  color-scheme: dark;

  --cor-fundo: #0f0f11;
  --cor-cartao: #1a1a1e;
  --cor-texto: #f4f4f5;
  --cor-texto-fraco: #a1a1aa;
  --cor-borda: #2e2e35;
  /* O laranja original (#ea580c) abafa sobre fundo escuro; este é o
     mesmo tom da marca, um passo mais claro, pra manter contraste. */
  --cor-destaque: #f97316;
  --cor-destaque-escuro: #ea580c;
  --cor-sucesso: #22c55e;
  --cor-perigo: #ef4444;
  --cor-aviso: #eab308;
  --sombra: 0 2px 12px rgba(0, 0, 0, 0.45);
}

/* As cores abaixo estavam fixas em branco lá em cima — sem estas
   regras, campo e botão continuariam brancos sobre fundo escuro. */

input[type="text"],
input[type="datetime-local"],
input[type="search"] {
  background: #121216;
  color: var(--cor-texto);
}

input::placeholder { color: #6b6b75; }

/* Só os botões neutros. O :not() é essencial: sem ele esta regra
   viria depois de .btn-primario com a mesma especificidade e
   apagaria o laranja do botão Imprimir. */
.btn:not(.btn-primario):not(.btn-perigo):not(.selecionado),
.btn-secundario:not(.selecionado) {
  background: #26262c;
  color: var(--cor-texto);
}

.badge.aguardando,
.badge.imprimindo { background: #422006; color: #fde047; }
.badge.concluido  { background: #052e16; color: #86efac; }
.badge.cancelado  { background: #450a0a; color: #fca5a5; }

.overlay { background: rgba(0, 0, 0, 0.72); }

/* A prévia representa papel térmico branco: ela não escurece junto
   com a tela, então as bordas dela param de seguir a paleta — senão
   ficariam cinza-escuras em cima do branco. */
.etiqueta-mockup .campo-produto { border-bottom-color: #d4d4d8; }
.etiqueta-mockup .etiqueta-rodape { border-top-color: #d4d4d8; }

/* ============================================================
   LAYOUT PAISAGEM (tablet de parede)
   O layout original era uma coluna de 560px pensada pra celular.
   Num tablet de 11" deitado isso vira uma tira fina no meio da
   tela com scroll — daí a impressão de "planilha".
   Aqui a mesma tela vira um painel de três colunas que cabe
   inteiro sem rolar: dados | quantidade | conferir e imprimir.
   Nada foi removido do HTML: as três <section class="coluna">
   usam display:contents fora do modo paisagem, então no celular
   a tela continua exatamente como era.
   ============================================================ */

.coluna { display: contents; }

/* --- barra superior: marca à esquerda, estado do sistema à direita --- */
.topbar {
  gap: 12px;
  padding: 10px 18px;
}
.topbar-marca {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.marca-icone { font-size: 1.5rem; line-height: 1; }
.marca-logo { width: 44px; height: 44px; border-radius: 12px; background: #000; object-fit: cover; flex: none; }
.marca-texto { display: flex; flex-direction: column; line-height: 1.2; }
.marca-texto strong { font-size: 1.02rem; }
.marca-sub {
  font-size: 0.7rem;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--cor-texto-fraco);
}
.topbar-acoes {
  display: flex;
  align-items: center;
  gap: 14px;
}
.topbar-relogio {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 1.05rem;
}
.status-conexao { font-size: 0.78rem; font-weight: 600; }
.status-texto { color: var(--cor-texto-fraco); text-transform: uppercase; letter-spacing: 0.5px; }
.btn-topbar {
  min-height: 40px;
  padding: 8px 14px;
  font-size: 0.9rem;
}

/* --- numeração das etapas: dá sequência ao fluxo, em vez de
       quatro caixas soltas com a mesma cara --- */
.rotulo { display: flex; align-items: center; gap: 8px; }
.passo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--cor-destaque);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
}

/* --- as duas datas lado a lado economizam uma linha inteira --- */
.par-datas { display: flex; gap: 10px; }
.campo-data { flex: 1; min-width: 0; }
.rotulo-mini {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--cor-texto-fraco);
  margin-bottom: 4px;
}
.par-datas input { font-size: 1rem; padding: 12px 10px; }

/* Seis atalhos de validade fecham certinho em 3 colunas (duas linhas).
   Sem isso eles herdariam as 4 colunas de .grid-botoes e a segunda
   linha ficaria com dois botões soltos. */
@media (min-width: 420px) {
  #atalhos-validade { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Sem isso o badge estica junto com a linha quando o texto do lote
   quebra em duas linhas, e a pílula vira um oval torto. */
.lista-lotes .badge { align-self: flex-start; height: fit-content; white-space: nowrap; }

/* Celular: a barra superior não cabe inteira, então some com o que
   é informativo e mantém o ponto de conexão e o botão. */
@media (max-width: 560px) {
  .marca-sub, .topbar-relogio, .status-texto { display: none; }
}

/* Tudo daqui pra baixo é preso em .tela-painel (só o <body> do
   index.html tem essa classe). Histórico e login usam o MESMO
   .container e .cartao — sem esse escopo eles também virariam grid
   de três colunas com o body travado, e o Histórico deixaria de
   rolar. Aconteceu de verdade; o escopo é o conserto. */
/* O app do quiosque injeta document.documentElement.style.zoom='1.5'
   a cada onPageFinished. Aquilo foi feito pro layout antigo, que era
   uma coluna estreita perdida numa tela de 1280x800 — ampliar fazia
   sentido. O painel já preenche a tela sozinho, e com zoom 1.5 o
   100vh vira 1200px de conteúdo dentro de 800px de tela: o teclado
   numérico corta no 7-8-9 e o overflow:hidden impede rolar.
   Aqui devolvemos pra 1.15 (só a folga de legibilidade, o tablet
   fica na parede). !important vence o style inline que o WebView
   escreve; o :has() prende isso à tela do painel, sem tocar no
   Histórico nem no login. */
html:has(body.tela-painel) {
  zoom: 1 !important;
  /* A legibilidade que o zoom dava volta pela fonte-base: tudo que é
     texto está em rem, então sobe junto. Caixas e alvos de toque são
     px e ficam como estão — já têm 52-60px, tamanho de dedo. */
  font-size: 18px;
}

@media (min-width: 820px) and (orientation: landscape) {

  /* Trava a altura da página: o painel não rola, cada coluna
     rola por dentro se precisar. É o que faz parecer programa
     e não página web. */
  body.tela-painel {
    height: 100vh;
    padding-bottom: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .tela-painel .container {
    max-width: none;
    width: 100%;
    flex: 1;
    min-height: 0;
    padding: 12px;
    display: grid;
    grid-template-columns: 1.2fr 0.8fr 1fr;
    gap: 12px;
  }

  .tela-painel .coluna {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
    overflow-y: auto;
  }

  .tela-painel .cartao { margin-bottom: 0; padding: 14px 16px; }
  .tela-painel .espaco-topo { margin-top: 0; }

  .tela-painel .grid-botoes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }

  /* Coluna 2 — o teclado ocupa toda a altura sobrando, então as
     teclas ficam grandes de verdade (mão suja, tablet na parede). */
  .tela-painel .coluna-quantidade > .cartao {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .tela-painel .coluna-quantidade .teclado-numerico {
    flex: 1;
    grid-template-rows: repeat(4, minmax(0, 1fr));
    min-height: 0;
  }
  .tela-painel .coluna-quantidade .teclado-numerico .btn { min-height: 0; }
  .tela-painel .valor-grande { font-size: 3rem; padding: 6px 0 10px; }

  /* Coluna 3 — prévia, botão grande e histórico que rola sozinho. */
  /* 300 e não 270: com a fonte-base em 18px a data batia na borda e
     o ellipsis comia o ano. A prévia em si não mudou, só coube. */
  .tela-painel .coluna-saida .etiqueta-mockup { max-width: 300px; }
  .tela-painel .btn-primario { min-height: 62px; font-size: 1.25rem; padding: 14px; }
  .tela-painel .cartao-recentes {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .tela-painel .cartao-recentes .lista-lotes {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
  }
}

/* ---------- CONFIRMAÇÃO DE IMPRESSÃO ---------- */
/* Um lote errado vira papel no lixo e produto sem etiqueta: a pergunta
   repete em palavras o que o formulário diz em campos separados. */
.caixa-confirmar { max-width: 460px; }
.pergunta-confirmar {
  font-size: 1.3rem;
  line-height: 1.45;
  margin: 4px 0 10px;
}
.pergunta-confirmar strong { color: var(--cor-destaque); }
.caixa-confirmar .campo-responsavel { text-align: left; margin-top: 18px; }
.caixa-confirmar .campo-responsavel input { margin-top: 4px; }
.acoes-confirmar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 18px;
}
.acoes-confirmar .btn { min-height: 60px; font-size: 1.05rem; }