:root{
  --azul:#1a73e8;
  --vermelho:#e63946;
  --amarelo:#f4a300;
  --verde:#2e9e5b;
  --cinza:#666;
  --fundo:#f5f6f8;
}

*{box-sizing:border-box;}

body{
  margin:0;
  font-family:-apple-system, Roboto, Arial, sans-serif;
  background:var(--fundo);
  color:#222;
}

.tela{min-height:100vh;}
.oculto{display:none !important;}

/* LOGIN */
#tela-login{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}
.login-box{
  background:#fff;
  padding:30px 24px;
  border-radius:16px;
  box-shadow:0 4px 20px rgba(0,0,0,.08);
  width:100%;
  max-width:340px;
  text-align:center;
}
.login-box h1{font-size:1.3rem;margin-bottom:4px;}
.subtitulo{color:var(--cinza);margin-top:0;margin-bottom:20px;font-size:.9rem;}
.login-box input{
  width:100%;
  padding:12px;
  margin-bottom:12px;
  border:1px solid #ddd;
  border-radius:10px;
  font-size:1rem;
}
.btn-primario{
  width:100%;
  padding:13px;
  background:var(--azul);
  color:#fff;
  border:none;
  border-radius:10px;
  font-size:1rem;
  font-weight:600;
  margin-bottom:10px;
  cursor:pointer;
}
.btn-secundario{
  width:100%;
  padding:13px;
  background:transparent;
  color:var(--azul);
  border:1px solid var(--azul);
  border-radius:10px;
  font-size:1rem;
  cursor:pointer;
}
.erro{color:var(--vermelho);font-size:.85rem;min-height:1.2em;}

/* APP */
.topo{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px 16px;
  background:#fff;
  border-bottom:1px solid #eee;
  position:sticky;
  top:0;
}
.btn-sair{
  background:none;
  border:1px solid #ddd;
  border-radius:8px;
  padding:6px 12px;
  cursor:pointer;
}
#conteudo{padding:16px 16px 90px 16px;}
.aba h2{margin-top:0;}
.legenda{font-size:.8rem;color:var(--cinza);}

#leitor-camera{
  width:100%;
  max-width:400px;
  margin:12px auto;
}
#form-produto input, #form-produto label{
  display:block;
  width:100%;
  margin-bottom:8px;
}
#form-produto input{
  padding:10px;
  border:1px solid #ddd;
  border-radius:8px;
}
.msg{font-size:.9rem;color:var(--azul);}

.lista{display:flex;flex-direction:column;gap:10px;}
.item-produto{
  background:#fff;
  border-radius:12px;
  padding:12px 14px;
  border-left:6px solid var(--verde);
  box-shadow:0 1px 4px rgba(0,0,0,.05);
}
.item-produto.vermelho{border-left-color:var(--vermelho);}
.item-produto.amarelo{border-left-color:var(--amarelo);}
.item-produto b{display:block;font-size:1rem;}
.item-produto span{display:block;font-size:.85rem;color:var(--cinza);}

.menu-inferior{
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  display:flex;
  background:#fff;
  border-top:1px solid #eee;
}
.nav-btn{
  flex:1;
  background:none;
  border:none;
  padding:10px 0 8px 0;
  font-size:.75rem;
  color:var(--cinza);
  cursor:pointer;
}
.nav-btn.ativo{color:var(--azul);font-weight:600;}