/* ╭────────────────────────────────────────────────────────────╮
   │ BODY - Estiliza o corpo da página                            │
   │ Define fonte, cor de fundo, margens, centraliza conteúdo   │
   ╰────────────────────────────────────────────────────────────╯ */
body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Fonte principal */
  background-color: #f4f7fa; /* Cor clara de fundo */
  margin: 0; padding: 0; /* Remove margens e espaçamentos padrão */
  display: flex; justify-content: center; align-items: center; /* Centraliza conteúdo vertical e horizontalmente */
  min-height: 100vh; /* Ocupa toda altura da tela */
}

/* ╭────────────────────────────────────────────────────────────╮
   │ CONTAINER - Caixa central que envolve o conteúdo principal │
   │ Define largura máxima, fundo branco, bordas arredondadas e  │
   │ sombra para destaque                                        │
   ╰────────────────────────────────────────────────────────────╯ */
.container {
  max-width: 1400px; /* Largura máxima */
  width: 100%; /* Largura responsiva */
  background: white; /* Fundo branco */
  border-radius: 10px; /* Bordas arredondadas */
  box-shadow: 0 0 15px rgba(0,0,0,0.1); /* Sombra suave */
  padding: 30px 40px; /* Espaçamento interno */
  box-sizing: border-box; /* Inclui padding na largura total */
}

/* ╭────────────────────────────────────────────────────────────╮
   │ TÍTULO PRINCIPAL - Estilo do título h1                     │
   │ Centralizado, cor azul para destaque e espaçamento abaixo  │
   ╰────────────────────────────────────────────────────────────╯ */
h1 {
  text-align: center;
  color: #3366cc;
  margin-bottom: 25px;
}

/* ╭────────────────────────────────────────────────────────────╮
   │ FORMULÁRIO - Layout do formulário usando grid              │
   │ Define colunas flexíveis, espaçamento entre campos          │
   ╰────────────────────────────────────────────────────────────╯ */
form {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); /* Colunas responsivas de largura mínima 220px */
  gap: 20px 30px; /* Espaço vertical e horizontal entre elementos */
}

/* ╭────────────────────────────────────────────────────────────╮
   │ LABELS - Estilo dos rótulos dos campos                      │
   │ Ocupam linha inteira, negrito, cor escura, alinhamento com ícones │
   ╰────────────────────────────────────────────────────────────╯ */
label {
  grid-column: 1 / -1; /* Ocupa todas as colunas do grid */
  font-weight: 600;
  margin-bottom: 6px;
  color: #333;
  display: flex;
  align-items: center;
  gap: 6px; /* Espaço entre ícones e texto */
  font-size: 1rem;
}

/* ╭────────────────────────────────────────────────────────────╮
   │ CAMPOS DE ENTRADA - input, select, textarea                 │
   │ Largura total, padding interno, bordas arredondadas, fonte  │
   │ e altura para textarea controlados                           │
   ╰────────────────────────────────────────────────────────────╯ */
input, select, textarea {
  width: 300%;
  padding: 10px 50px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
  box-sizing: border-box;
  font-family: 'Segoe UI', sans-serif;
  resize: vertical; /* permite redimensionar textarea verticalmente */
}

/* ╭────────────────────────────────────────────────────────────╮
   │ TEXTAREA - Altura mínima para área de texto grande         │
   ╰────────────────────────────────────────────────────────────╯ */
textarea {
  min-height: 130px;
}

/* ╭────────────────────────────────────────────────────────────╮
   │ BOTÃO PRINCIPAL - Botão para submissão do formulário       │
   │ Estilo com fundo azul, texto branco, cantos arredondados,   │
   │ largura fixa, cursor pointer e efeito hover                 │
   ╰────────────────────────────────────────────────────────────╯ */
.btn {
  grid-column: 1 / -1; /* Ocupa toda a largura do grid */
  background-color: #3366cc;
  color: white;
  border: none;
  padding: 12px 20px;
  font-size: 16px;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  justify-self: center; /* Centraliza o botão */
  width: 160px;
}

.btn:hover {
  background-color: #254e99;
}

/* ╭────────────────────────────────────────────────────────────╮
   │ CHECKBOX INLINE - Estilização do label com checkbox        │
   │ Flexbox para alinhamento horizontal e espaçamento           │
   ╰────────────────────────────────────────────────────────────╯ */
.inline-checkbox {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
}

/* ╭────────────────────────────────────────────────────────────╮
   │ CAMPOS DE LOTE - Área que aparece quando checkbox é marcado │
   │ Layout flexível com espaçamento e alinhamento vertical      │
   ╰────────────────────────────────────────────────────────────╯ */
#camposLote {
  grid-column: 1 / -1;
  display: none; /* Inicialmente escondido */
  gap: 20px;
  margin-top: 10px;
  align-items: center;
}

/* ╭────────────────────────────────────────────────────────────╮
   │ LABELS E INPUTS DENTRO DO CAMPO DE LOTE                      │
   ╰────────────────────────────────────────────────────────────╯ */
#camposLote label {
  flex: 1 1 150px;
  margin-bottom: 0;
}

#camposLote input {
  flex: 1 1 50px;
  max-width: 100px;
}

/* ╭────────────────────────────────────────────────────────────╮
   │ RESPONSIVIDADE - Ajustes para telas pequenas                │
   ╰────────────────────────────────────────────────────────────╯ */
@media (max-width: 600px) {
  form {
    grid-template-columns: 1fr;
    padding: 0;
  }
  #camposLote {
    flex-direction: column;
    align-items: stretch;
  }
  #camposLote label, #camposLote input {
    flex: unset;
    max-width: 100%;
  }
  .btn {
    width: 100%;
    justify-self: stretch;
  }
  .container {
    margin: 10px;
    padding: 20px;
  }
}