/* auto-cadastro-alt.css */

/* 1. Variáveis globais */
:root {
  --color-primary-blue: #1a73e8;
  --color-primary-green: #34a853;
  --color-error: #d93025;
  --color-border: #dadce0;
  --color-bg-page: #f1f3f4;
  --color-bg-card: #ffffff;
  --color-text: #202124;
  --color-text-muted: #5f6368;
  --radius: 0.5rem;
  --spacing: 1rem;
  --font-base: 'Inter', sans-serif;
}

/* 2. Reset e defaults */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  font-family: var(--font-base);
  background-color: var(--color-bg-page);
  color: var(--color-text);
  line-height: 1.5;
  border:0 !important;
  padding:0 !important;
  margin:0 !important;
  /* display: flex;
  flex-direction: column; */
}

/* Impede scroll global e fixa altura ao viewport */
/* html, body {
  height: 100%;
  overflow: hidden;
} */

/* 3. Logo */
header.logo {
  text-align: center;
  padding: calc(var(--spacing) * 2) 0;
 
}
header p{
  font-size: 1.5rem;
  color: var(--color-text-muted);
}
header.logo img {
  max-width: 110px;
  height: auto;
}

/* 4. Container do formulário */
main.formulario-content {
  display: flex;
  justify-content: center;
  padding: var(--spacing);
  /* Ocupa o espaço disponível entre header e footer sem gerar scroll */
  flex: 1 1 auto;
  overflow: hidden;
}
.formulario {
  background-color: var(--color-bg-card);
  border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  padding: calc(var(--spacing) * 2);
  width: 100%;
  max-width: 1000px;
  /* justify-content: center;
  align-items: center; */
}

/* 5. Layout dos campos com flex-wrap */
.form-conteiner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing);
}
.form_item {
  flex: 1 1 calc(50% - var(--spacing));
  min-width: 220px;
  display: flex;
  flex-direction: column;
}

/* 6. Labels e inputs */
.form-label {
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: var(--color-text-muted);
}
.form-control {
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 1rem;
  transition: border-color 0.2s;
}
.form-control:focus {
  border-color: var(--color-primary-blue);
  outline: none;
}

/* 7. Feedback de validação */
.valid-feedback {
  color: var(--color-primary-green);
  margin-top: 0.25rem;
}
.invalid-feedback {
  color: var(--color-error);
  margin-top: 0.25rem;
}
.feedback#errorCpfEmailExiste {
  flex: 1 1 100%;
  color: var(--color-error);
  font-weight: 500;
  margin-top: 0.5rem;
}

/* 8. Checkbox completo em linha */
.form-check {
  /* flex: 1 1 100%;
  display: flex;
  align-items: center; */
  margin-top: var(--spacing);
}
.form-check-input {
  margin-right: 0.5rem;
}

/* 9. Botões alinhados à direita */
.btn-empresa {
  flex: 1 1 100%;
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: calc(var(--spacing) * 2);
}

/* 10. Estilo de botões */
.btn {
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: var(--radius);
  font-size: 1rem;
  cursor: pointer;
  transition: filter 0.2s;
}
.btn-primary {
  /* background-color: var(--color-primary-green); */
  /* color: var(--color-bg-card); */
}
.btn-primary:hover {
  filter: brightness(0.9);
}
.btn-secondary {
  /* background-color: var(--color-primary-blue); */
  /* color: var(--color-bg-card); */
}
.btn-secondary:hover {
  filter: brightness(0.9);
}

/* 11. Footer */
.footer {
  text-align: center;
  padding: calc(var(--spacing) * 2);
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

/* 12. Media query para telas pequenas */
@media (max-width: 576px) {
  .form_item {
    flex: 1 1 100%;
  }
}


.erro{
  font-size: 1.2rem;
  color: var(--color-error);
  margin-top: 20px;
}