/* 	DEFINIÇÕES PARA FORMULÁRIOS */
.form-tabular {
  display: grid;
  /* Define duas colunas:
     1ª: Tamanho do conteúdo ou fixo (ex: 150px)
     2ª: Ocupa o resto do espaço (1fr) */
  grid-template-columns: max-content 1fr;
  
  /* ESPAÇAMENTO VERTICAL E HORIZONTAL */
  gap: 16px; /* 16px entre linhas e colunas */
  
  align-items: center; /* Centraliza verticalmente label e input */
  max-width: 600px;
  margin: 0 auto; /* Centraliza o formulário na tela */
}

.form-tabular input:focus,
.form-tabular textarea:focus {
  outline: none;             /* Remove o brilho azul padrão */
  border-color: #007BFF;     /* Muda a cor da borda (azul exemplo) */
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.3); /* Adiciona um brilho suave */
}

.form-tabular label {
  text-align: right; /* Alinha o texto do label à direita */
  font-weight: bold;
  color: #333;
}

.form-tabular input,
.form-tabular textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box; /* Garante que o padding não quebre o layout */
}

.form-tabular select {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box; /* Garante que o padding não quebre o layout */
  
  /* 🌟 CORREÇÃO 🌟 */
  /* position: relative; /* Necessário para que o z-index funcione */
  /* z-index: 10;       /* Valor alto para garantir que fique acima de inputs */
}

.form-tabular button {
    grid-column: 2;       /* Coloca o botão na segunda coluna */
    justify-self: center; /* Centraliza dentro da coluna */
    width: auto;          /* Evita o botão esticar */
    padding: 10px 20px;
    margin-bottom: 15px;    
}

/* Estiliza o texto de ajuda que acompanha o campo */
.texto-ajuda {
  /* 1. Alinhamento no Grid: Força o parágrafo a começar na segunda coluna */
  grid-column: 2; 
  
  /* 2. Estilos para letra pequena e sutil */
  font-size: 0.8em; /* Diminui o tamanho da fonte */
  color: #777;      /* Cor sutil */
  
  /* 3. Ajuste de espaçamento (Aproxima o texto do input acima) */
  margin-top: -10px; /* Reduz a margem padrão para "subir" o texto */
  margin-bottom: 0px; /* Espaçamento antes do próximo campo/label */
  
  padding-left: 0; /* Garante que não haja padding extra que desalinhe */
}

/*  NOVA CLASSE PARA LINHAS QUE DEVEM OCUPAR A LARGURA TOTAL  */
.full-row {
    grid-column: 1 / -1; /* Ocupa todas as colunas do grid */
}

.form-width {
    max-width: 600px;   /* mesma largura do formulário */
    width: 100%;        /* ocupa o espaço disponível */
    margin: 0 auto;     /* centraliza exatamente como o formulário */
    box-sizing: border-box;
}

.invisivel {
	display : none;
	visibility: hidden;
}