body.light {
  font-family: Arial, sans-serif;
  background: linear-gradient(to right, #f0f4f8, #e6f2ff);
  color: #333;
  margin: 0;
  padding: 20px;
}

body.dark {
  font-family: Arial, sans-serif;
  background: linear-gradient(to right, #1e1e2f, #2c2c3a);
  color: #f0f0f0;
  margin: 0;
  padding: 20px;
}

h1, h2 {
  text-align: center;
}

form {
  background: rgba(255, 255, 255, 0.8);
  padding: 15px;
  border-radius: 8px;
  max-width: 400px;
  margin: 0 auto 20px auto;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

label {
  display: block;
  margin-top: 10px;
  font-weight: bold;
}

body.light {
  font-family: Arial, sans-serif;
  background: linear-gradient(to right, #f0f4f8, #e6f2ff);
  color: #333;
  margin: 0;
  padding: 20px;
}

body.dark {
  font-family: Arial, sans-serif;
  background: linear-gradient(to right, #1e1e2f, #2c2c3a);
  color: #f0f0f0;
  margin: 0;
  padding: 20px;
}

h1, h2 {
  text-align: center;
}

form {
  background: rgba(255, 255, 255, 0.8);
  padding: 15px;
  border-radius: 8px;
  max-width: 400px;
  margin: 0 auto 20px auto;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

label {
  display: block;
  margin-top: 10px;
  font-weight: bold;
}

input, select, button {
  width: 100%;
  padding: 8px;
  margin-top: 5px;
  border-radius: 5px;
  border: 1px solid #ccc;
}

/* Estilo geral dos botões */
button {
   width: auto;          /* não ocupa 100% */
  padding: 6px 12px;       /* reduz tamanho */
  font-size: 14px;         /* texto menor */
  border-radius: 4px;      /* cantos arredondados */
  background-color: #007bff;
  color: #fff;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s;
}

button:hover {
  background-color: #0056b3;
}

/* Botões menores (ex: QR e código de barras) */
.btn-pequeno {
  padding: 4px 8px;
  font-size: 12px;
   width: auto;          /* não ocupa 100% */
}

/* Container para alinhar botões em linha */
.botoes-inline {
  display: flex;
  gap: 10px;          /* espaço entre eles */
  flex-wrap: wrap;    /* quebra linha se não couber */
  margin: 10px 0;
}

/* Botões principais: Adicionar, Exportar, Importar, Limpar */
.btn-principal {
  padding: 8px 16px;
  font-size: 15px;
  font-weight: bold;
  border-radius: 5px;
  background-color: #28a745; /* verde padrão */
  color: #fff;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s;
  width: auto;          /* não ocupa 100% */
}

.btn-principal:hover {
  background-color: #218838; /* verde mais escuro no hover */
}

/* Botões secundários (QR e código de barras) */
.btn-pequeno {
  padding: 4px 10px;
  font-size: 13px;
  border-radius: 4px;
  background-color: #007bff; /* azul padrão */
  color: #fff;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s;
   width: auto;          /* não ocupa 100% */
}

.btn-pequeno:hover {
  background-color: #0056b3;
}

/* Container para alinhar botões em linha */
.botoes-inline {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 10px 0;
  justify-content: center; /* centraliza os botões */
}

#botaoTema {
  display: block;
  margin: 0 auto 20px auto; /* centraliza e dá espaço abaixo */
  width: auto;
}

/* Botão Adicionar Item */
.btn-adicionar {
  display: block;
  margin: 20px auto;        /* centraliza e dá espaço acima/abaixo */
  width: auto;
}


ul {
  list-style-type: none;
  padding: 0;
}

li {
  background: rgba(255, 255, 255, 0.7);
  margin: 2px 0;      /* menos espaço entre os itens */
  padding: 2px 6px;   /* menos espaço interno */
  border-radius: 6px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
  line-height: 1;   /* altura da linha mais enxuta */
  text-align: center;
}

.resumo {
  text-align: center;
  margin-top: 10px; /* opcional, dá um respiro visual */
}

@media (max-width: 600px) {
  body {
    padding: 10px;
  }
  form {
    max-width: 100%;
  }
}
ul {
  list-style-type: none;
  padding: 0;
}

li {
  background: rgba(255, 255, 255, 0.7);
  margin: 5px 0;
  padding: 10px;
  border-radius: 6px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
  text-align: center;
}

@media (max-width: 600px) {
  body {
    padding: 10px;
  }
  form {
    max-width: 100%;
  }
}