/* ==============================================================
   Consultas Riberfoods - tela de celular, usada de pe no armazem.
   Fonte do sistema de proposito: PWA que abre sem internet boa nao
   pode depender de fonte externa carregar.
   ============================================================== */
:root{
  --verde:#0C5230; --verde-esc:#062E1B; --verde-claro:#E4EFE6;
  --laranja:#FF6600; --laranja-txt:#8A3600; --laranja-fundo:#FBEDE4;
  --papel:#F5F4EF; --branco:#fff; --tinta:#10201A; --tinta-2:#4A5A50;
  --tinta-3:#5A6B61; --linha:#DFDACE; --r:12px;
  --mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:var(--papel);color:var(--tinta);
  font:400 16px/1.45 system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  -webkit-text-size-adjust:100%;overscroll-behavior-y:none;
}
[hidden]{display:none!important}
button,input,select{font:inherit;color:inherit}
svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}

/* A tela escondida tem de ganhar de qualquer regra de layout que venha
   depois (.pagina, .camera). Por isso o display de cada uma so aparece
   junto com .on - senao .pagina{display:flex} reacende a tela fechada,
   e as telas empilham uma embaixo da outra. */
.tela{display:none}
.tela.on{display:block}
.tela.pagina.on{display:flex;flex-direction:column;gap:16px}
.pagina{padding:16px 16px calc(24px + env(safe-area-inset-bottom))}

/* ---------- login ---------- */
#t-login.on{display:flex;flex-direction:column;min-height:100%;
  background:linear-gradient(170deg,var(--verde) 0%,var(--verde-esc) 100%);
  padding:0 22px calc(28px + env(safe-area-inset-bottom))}
.login-topo{flex:1;display:flex;flex-direction:column;justify-content:center;
  padding-top:40px}
.marca{align-self:flex-start;font-size:12px;font-weight:600;letter-spacing:.14em;
  color:#CFE3D6;border:1px solid rgba(255,255,255,.28);border-radius:999px;padding:5px 12px}
.login-topo h1{margin:18px 0 0;font-size:min(13vw,46px);font-weight:800;
  line-height:1.03;color:#fff;letter-spacing:-.01em}
.login-topo p{margin:10px 0 0;font-size:15px;color:#B7D3C1}
.cartao-login{background:var(--branco);border-radius:18px;padding:20px;
  display:flex;flex-direction:column;gap:14px}
.nota{margin:0;font-size:12.5px;line-height:1.45;color:var(--tinta-3)}

/* ---------- campos ---------- */
.campo{display:flex;flex-direction:column;gap:6px}
.campo label{font-size:11px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--tinta-3)}
input,select{height:50px;padding:0 13px;background:var(--branco);
  border:1.5px solid var(--linha);border-radius:var(--r);outline:none;width:100%}
input:focus,select:focus{border-color:var(--verde);box-shadow:0 0 0 3px rgba(12,82,48,.18)}
.mono{font-family:var(--mono);letter-spacing:.02em}
.linha{display:flex;gap:8px}
.linha input{flex:1;min-width:0}
.linha .btn{width:auto;padding:0 16px;flex-shrink:0}

/* ---------- botoes ---------- */
.btn{min-height:50px;border:0;border-radius:var(--r);font-size:16px;
  font-weight:600;cursor:pointer;display:flex;align-items:center;
  justify-content:center;gap:8px;width:100%}
.btn-verde{background:var(--verde);color:#fff}
.btn-borda{background:var(--branco);border:1.5px solid var(--verde);color:var(--verde)}
.btn-borda.claro{background:transparent;border-color:rgba(255,255,255,.5);color:#fff}
.btn[disabled]{opacity:.5}
.ico{width:40px;height:40px;flex-shrink:0;display:flex;align-items:center;
  justify-content:center;padding:10px;background:rgba(255,255,255,.14);
  border:0;border-radius:10px;color:#fff;cursor:pointer}

/* ---------- topo ---------- */
.topo{background:var(--verde);color:#fff;display:flex;align-items:center;gap:10px;
  padding:calc(12px + env(safe-area-inset-top)) 14px 12px;
  position:sticky;top:0;z-index:5}
.topo-txt{flex:1;min-width:0;display:flex;flex-direction:column}
.topo-sub{font-size:10.5px;font-weight:600;letter-spacing:.1em;color:#9FC2AA}
.topo-tit{font-size:16px;font-weight:700;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
#sel-filial{width:auto;height:40px;padding:0 8px;background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.22);color:#fff;border-radius:10px;font-size:14px}
#sel-filial option{color:var(--tinta)}

/* ---------- bipar ---------- */
.bipar{display:flex;align-items:center;gap:15px;padding:20px 18px;
  background:var(--laranja);border:0;border-radius:16px;color:#fff;
  width:100%;cursor:pointer;text-align:left}
.bipar .bc{width:34px;height:34px;flex-shrink:0;stroke-width:1.8}
.bipar span{display:flex;flex-direction:column;gap:2px}
.bipar b{font-size:20px;font-weight:700}
.bipar small{font-size:13px;color:#FFE8D8}

.ou{display:flex;align-items:center;gap:12px}
.ou i{flex:1;height:1px;background:var(--linha)}
.ou span{font-size:11.5px;font-weight:600;letter-spacing:.08em;color:#7C8A81}

/* ---------- camera ---------- */
.camera{position:fixed;inset:0;background:#000;z-index:20}
.camera.on{display:flex;flex-direction:column}
#video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.moldura{position:absolute;left:6%;right:6%;top:32%;height:26%;
  border:3px solid var(--laranja);border-radius:18px;
  box-shadow:0 0 0 100vmax rgba(0,0,0,.45)}
.camera-pe{position:absolute;left:0;right:0;
  bottom:calc(26px + env(safe-area-inset-bottom));padding:0 22px;
  display:flex;flex-direction:column;gap:14px;align-items:center}
.camera-pe p{margin:0;text-align:center;color:#fff;font-size:15.5px;
  text-shadow:0 1px 6px rgba(0,0,0,.7)}

/* ---------- listas ---------- */
.rot-lista{font-size:13px;color:var(--tinta-3)}
.item{display:flex;align-items:center;gap:12px;padding:14px;background:var(--branco);
  border:1px solid var(--linha);border-radius:14px;width:100%;text-align:left;
  cursor:pointer;margin-bottom:9px}
.item .txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.item .cod{font-family:var(--mono);font-size:12.5px;font-weight:600;color:var(--laranja-txt)}
.item .des{font-size:15px;line-height:1.3}
.item .emb{font-size:12.5px;color:var(--tinta-3)}
.item .qtd{flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end}
.item .qtd b{font-size:21px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--verde)}
.item .qtd b.zero{color:var(--laranja-txt)}
.item .qtd small{font-size:11px;color:var(--tinta-3)}
.recentes{display:flex;flex-direction:column;gap:8px}
.recentes .rot{font-size:11px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:#7C8A81}

/* ---------- produto ---------- */
.cab{display:flex;flex-direction:column;gap:4px;margin-bottom:4px}
.cab .l1{display:flex;align-items:baseline;gap:8px}
.cab .c{font-family:var(--mono);font-size:14px;font-weight:600;color:var(--laranja-txt)}
.cab .f{font-size:11px;font-weight:600;letter-spacing:.08em;color:var(--tinta-3)}
.cab h2{margin:0;font-size:19px;font-weight:700;line-height:1.22}
.cab .e{font-size:13px;color:var(--tinta-3)}

.disp{background:var(--branco);border:1px solid var(--linha);
  border-left:5px solid var(--verde);border-radius:16px;padding:16px 18px;
  display:flex;flex-direction:column;gap:3px}
.disp .rot{font-size:11px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--tinta-3)}
.disp .n{font-size:52px;font-weight:800;line-height:1;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;color:var(--verde)}
.disp .n small{font-size:17px;font-weight:600;color:var(--tinta-3);margin-left:6px}
.disp .conta{margin-top:6px;font-family:var(--mono);font-size:12.5px;color:#7C8A81}
.disp .cx{margin-top:4px;font-size:13.5px;color:var(--tinta-2)}

.grade{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.bloco{background:var(--branco);border:1px solid var(--linha);border-radius:12px;
  padding:11px 13px;display:flex;flex-direction:column;gap:1px}
.bloco .rot{font-size:11px;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:var(--tinta-3)}
.bloco .v{font-size:24px;font-weight:700;font-variant-numeric:tabular-nums}
.bloco.alerta{background:var(--laranja-fundo);border-color:#F0C9AC}
.bloco.alerta .rot,.bloco.alerta .v{color:var(--laranja-txt)}
.bloco.larga{grid-column:1/-1;flex-direction:row;align-items:center;gap:10px}
.bloco.larga .rot{flex:1}

.entrada{background:var(--branco);border:1px solid var(--linha);border-radius:16px;
  padding:14px 16px;display:flex;flex-direction:column;gap:11px}
.entrada .cabe{display:flex;align-items:center;gap:8px}
.entrada .cabe .rot{font-size:11px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--tinta-3)}
.entrada .cabe i{flex:1;height:1px;background:var(--linha)}
.entrada .cabe .d{font-family:var(--mono);font-size:13px;font-weight:600}
.entrada .duo{display:flex;gap:14px}
.entrada .duo div{flex:1;display:flex;flex-direction:column;gap:1px}
.entrada .duo span{font-size:11.5px;color:var(--tinta-3)}
.entrada .duo b{font-size:18px;font-weight:700;font-variant-numeric:tabular-nums}
.entrada .preco{display:flex;align-items:center;gap:10px;padding-top:11px;
  border-top:1px solid var(--linha)}
.entrada .preco span{flex:1;font-size:11px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--verde)}
.entrada .preco b{font-size:25px;font-weight:800;font-variant-numeric:tabular-nums;
  color:var(--verde)}
.sem-fin{font-size:13px;line-height:1.45;color:var(--tinta-3);margin:0}

.erro{background:#FBEBE7;color:#9E2B17;border-radius:10px;padding:11px 13px;
  font-size:14.5px;line-height:1.4}
.aviso{background:var(--laranja-fundo);color:var(--laranja-txt);border-radius:10px;
  padding:11px 13px;font-size:13.5px;line-height:1.4}
.vazio{text-align:center;padding:40px 12px;color:#7C8A81}

.carregando{position:fixed;inset:0;background:rgba(245,244,239,.65);
  display:flex;align-items:center;justify-content:center;z-index:30}
.pulso{width:42px;height:42px;border:4px solid var(--linha);
  border-top-color:var(--verde);border-radius:50%;animation:gira .8s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.pulso{animation-duration:2s}}