:root{
  --azul:#1b5e20;
  --azul-2:#2e7d32;
  --azul-claro:#e8f5e9;
  --verde:#2e7d32;
  --verde-claro:#e8f5e9;
  --vermelho:#c62828;
  --amarelo:#f9ab00;
  --cinza:#5f6368;
  --fundo:#f5f7f5;
  --texto:#1f2937;
  --borda:#dce3ea;
  --card:#ffffff;

  --verde-principal:#2e7d32;
  --verde-escuro:#1b5e20;
  --texto-fraco:#5f6368;
  --sombra:0 6px 18px rgba(15,23,42,.08);
}


*{
  box-sizing:border-box;
}


body{
  font-family:Arial,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  margin:0;
  min-height:100vh;

  background:
    radial-gradient(circle at top left, rgba(46,125,50,.14), transparent 32%),
    linear-gradient(180deg,#f8fcf8 0%,var(--fundo) 45%,#eef6ef 100%);

  color:var(--texto);
  text-align:center;
}


.container{
  padding:18px;
  max-width:960px;
  margin:auto;
}


.logo-topo{
  text-align:center;
  margin-bottom:20px;
}


.logo-topo img{
  width:100%;
  max-width:900px;
  height:auto;
  display:block;
  margin:0 auto;
}



h1{
  margin:0 0 16px;
  padding:22px 16px;

  border-radius:0 0 24px 24px;

  color:#fff;

  background:
    linear-gradient(
      135deg,
      var(--azul),
      var(--azul-2)
    );

  box-shadow:
    0 8px 24px rgba(27,94,32,.25);

  letter-spacing:.2px;
}


h2,h3{
  margin:14px 0 10px;
  color:var(--azul);
}



button,
select,
input{

  width:100%;

  padding:14px 15px;

  margin:8px 0;

  border-radius:14px;

  font-size:17px;

  box-sizing:border-box;

}



input,
select{

  border:1px solid var(--borda);

  background:#fff;

  color:var(--texto);

  outline:none;

  box-shadow:
    0 1px 2px rgba(15,23,42,.04);

}



input:focus,
select:focus{

  border-color:var(--azul-2);

  box-shadow:
    0 0 0 3px rgba(46,125,50,.14);

}



button{

  border:none;

  background:
    linear-gradient(
      135deg,
      var(--azul-2),
      var(--azul)
    );

  color:white;

  cursor:pointer;

  font-weight:700;

  box-shadow:
    0 4px 12px rgba(46,125,50,.22);

  transition:
    transform .08s ease,
    filter .15s ease,
    box-shadow .15s ease;

}



button:active{

  transform:scale(.985);

  box-shadow:
    0 2px 8px rgba(46,125,50,.18);

}



button:hover{

  filter:brightness(1.03);

}



.entrada{
  background:
    linear-gradient(
      135deg,
      #34a853,
      var(--verde)
    );
}


.saida{

  background:
    linear-gradient(
      135deg,
      #e53935,
      var(--vermelho)
    );

}


.cadastro{

  background:
    linear-gradient(
      135deg,
      #66bb6a,
      #43a047
    );

  color:white;

}


.sair{

  background:
    linear-gradient(
      135deg,
      #6b7280,
      var(--cinza)
    );

}


.secundario{

  background:
    linear-gradient(
      135deg,
      #607d8b,
      #455a64
    );

}



.card,
.resultado,
.usuario-logado,
.status{

  background:
    rgba(255,255,255,.96);

  border:
    1px solid rgba(220,227,234,.9);

  padding:15px;

  border-radius:18px;

  margin-top:14px;

  text-align:left;

  box-shadow:
    0 6px 18px rgba(15,23,42,.08);

}



.usuario-logado{

  text-align:center;

  border-top:
    4px solid var(--azul-2);

}



.status{

  text-align:center;

  background:
    var(--azul-claro);

  color:#1b5e20;

  font-size:15px;

  box-shadow:none;

}



.oculto{
  display:none;
}



#conteudo{
  margin-top:14px;
}



#appArea > button{
  margin:7px 0;
}



@media(min-width:700px){

  #appArea > button{

    width:
      calc(50% - 8px);

    margin:
      7px 4px;

  }


  #appArea > .usuario-logado,
  #appArea > #conteudo{

    width:100%;

  }

}




table{

  width:100%;

  border-collapse:separate;

  border-spacing:0;

  background:white;

  font-size:14px;

  overflow:hidden;

  border-radius:14px;

}



th,
td{

  border-bottom:
    1px solid #e5eaf0;

  padding:
    10px 9px;

  text-align:left;

  vertical-align:top;

}



th{

  background:#e8f5e9;

  color:#1b5e20;

  font-weight:800;

}



tr:last-child td{

  border-bottom:none;

}



.tabela-container{

  overflow-x:auto;

  margin-top:15px;

  border-radius:16px;

  box-shadow:
    0 4px 14px rgba(15,23,42,.07);

}



.lote{

  font-size:13px;

  background:#f8fafc;

  border:
    1px solid #e5eaf0;

  padding:9px;

  border-radius:10px;

  margin-top:6px;

}



.badge{

  display:inline-block;

  padding:5px 10px;

  border-radius:999px;

  font-size:12px;

  font-weight:700;

  background:var(--azul-claro);

  color:#1b5e20;

}



.checkbox-row{

  display:flex;

  align-items:center;

  gap:10px;

  background:white;

  padding:13px;

  border-radius:14px;

  margin:8px 0;

  text-align:left;

  border:1px solid var(--borda);

}



.checkbox-row input{

  width:auto;

  margin:0;

  box-shadow:none;

}




#reader-container{

  display:none;

  position:fixed;

  top:0;

  left:0;

  width:100vw;

  height:100vh;

  background:#000;

  z-index:9999;

}



#reader{

  width:100vw;

  height:100vh;

}



.fechar{

  position:fixed;

  top:15px;

  right:15px;

  z-index:10000;

  width:auto;

  padding:12px 18px;

  background:
    linear-gradient(
      135deg,
      #e53935,
      var(--vermelho)
    );

  font-size:16px;

}



.topo-sessao{

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:12px;

  text-align:left;

}



.botao-sair-topo{

  width:auto;

  min-width:96px;

  margin:0;

  padding:10px 14px;

  font-size:15px;

}



.botao-voltar{

  margin-bottom:12px;

}



#loginArea{

  max-width:440px;

  margin:0 auto;

}



#loginArea h2{

  text-align:center;

}




#resultadoBuscaProduto .card button,
#adminResultadoProduto button,
#adminResultadoLote button{

  margin-top:12px;

}




.dashboard-grid{

  display:grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap:12px;

  margin:16px 0;

}




.dashboard-card{

  background:white;

  border:1px solid var(--borda);

  border-radius:18px;

  padding:16px;

  text-align:left;

  box-shadow:var(--sombra);

  cursor:pointer;

}



.dashboard-card strong{

  display:block;

  font-size:28px;

  line-height:1.1;

  color:var(--verde-escuro);

  margin-bottom:6px;

}



.dashboard-card span{

  color:var(--texto-fraco);

  font-weight:700;

  font-size:14px;

}



.dashboard-card.alerta{

  border-left:
    5px solid var(--amarelo);

}



.dashboard-card.perigo{

  border-left:
    5px solid var(--vermelho);

}



.dashboard-card.ok{

  border-left:
    5px solid var(--verde-principal);

}




.acoes-dashboard{

  display:grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap:10px;

  margin-top:14px;

}



.acoes-dashboard button{

  margin:0;

}



@media(max-width:520px){

  .dashboard-grid,
  .acoes-dashboard{

    grid-template-columns:1fr;

  }

}