form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  max-width: 1100px;
   margin-bottom: 2px;
  font-family: Arial, sans-serif;
}

/* formExame */
#formExame .campo {
  margin-bottom: 20px;
}

#formExame .checkbox-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

#formExame .campo label {
  font-weight: bold;
  display: block;
  margin-bottom: 5px;
}

#formExame .checkbox-row label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: normal;
  cursor: pointer;
}

/* Campos full width */
.full {
  grid-column: 1 / -1;
}

/* Classes auxiliares */
.w60 { width: 60%; }
.w30 { width: 30%; }
.w20 { width: 20%; }

/* Label */
label {
  font-weight: bold;
  margin-bottom: 5px;
  display: block;
}

label .required {
  color: red;
}

/* Grupo geral de campo */
.campo {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* Campos padrão */
input, select, textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  transition: all 0.3s ease;
}

/* Grupo de radios e checkboxes mesma linha*/
.checkbox-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  transition: all 0.3s ease;
}

.checkbox-row label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: normal;
  cursor: pointer;
}

.checkbox-row input[type="checkbox"],
.checkbox-row input[type="radio"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

/* Grupo de radios e checkboxes pula linha*/
.checkbox-dd {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  transition: all 0.3s ease;
}

.checkbox-dd label {
  display: inline-flex;       /* mantém input e texto na mesma linha */
  align-items: center;
  gap: 8px;   
  font-weight: normal;
  cursor: pointer;
}

.checkbox-dd input[type="checkbox"],
.checkbox-dd input[type="radio"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

/* MENSAGEM DE ERRO - ESTILO GOOGLE FORMS */
.error-msg {
  display: flex;
  align-items: center;
  gap: 3px;
  width: 100%;
  color: #d32f2f;
  font-size: 13px;
  margin-top: 4px;
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  height: 0;
  overflow: hidden;
}

.error-msg.show {
  opacity: 1;
  transform: translateY(0);
  height: auto;
}

/* Triângulo vermelho com ponto de exclamação branco */
.error-msg::before {
  content: "!";
  display: inline-flex;
  justify-content: center;
  width: 16px;
  height: 16px;
  font-size: 10px;
  font-weight: bold;
  color: white;
  background: #d32f2f;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%); /* triângulo */
  width: 16px;
  height: 14px;
  font-size: 10px;
  margin-right: 6px;
}

/* Ícone na mensagem de erro
.error-msg::before {
  content: "⚠️ ";
  font-size: 13px;
  vertical-align: middle;
} */

/* Efeitos de foco e erro */
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: #007BFF;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.15);
}

input.error, select.error, textarea.error {
  border-color: #d32f2f;
  background: rgba(255, 0, 0, 0.05);
  box-shadow: 0 0 0 2px rgba(211, 47, 47, 0.1);
}

/* Radio/checkbox em erro */
.campo.erro .checkbox-row {
  background: rgba(255, 0, 0, 0.05);
  border: 1px solid rgba(211, 47, 47, 0.4);
  border-radius: 6px;
  padding: 8px 10px;
}

/* Botão */
button {
  grid-column: 1 / -1;
  padding: 15px;
  font-size: 18px;
  background: #007BFF;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.3s ease;
}

button:hover {
  background: #0056b3;
}

/* Indicador de progresso */
.form-progress {
  grid-column: 1 / -1;
  text-align: center;
  font-size: 15px;
  color: #333;
  margin-top: 10px;
  font-weight: 500;
  transition: color 0.3s ease, transform 0.3s ease;
}

.form-progress.ok {
  color: #2e7d32;
  transform: scale(1.03);
}

.form-progress.alerta {
  color: #d32f2f;
}

/* Responsivo */
@media (max-width: 600px) {
  form {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

/* Ocultar blocos no carregamento */
#bloco-completo, #bloco-ripete {
  display: none;
}