@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&display=swap');

/* Camada visual comum. Não controla visibilidade, validação ou envio. */
:root {
  --form-font: 'DM Sans', Arial, sans-serif;
  --form-control-height: 48px;
  --form-field-gap: 20px;
  --form-label-gap: 8px;
  --form-radius: 10px;
  --form-ink: #07182d;
  --form-muted: #526176;
  --form-line: #d7dde3;
  --form-surface: #ffffff;
  --form-focus-surface: #f1f2f4;
  --form-error: #b13434;
  --form-action: #07182d;
  --form-action-hover: #0e4b91;
}

:is(.contact-form, .study-form, .wizard-panel, .editor-card) {
  min-width: 0;
  padding: clamp(22px, 3vw, 32px);
  border: 1px solid #e4e8ed;
  border-radius: var(--form-radius);
  background: var(--form-surface);
  color: var(--form-ink);
  box-shadow: 0 12px 36px rgba(7, 24, 45, .045);
}

.editor-card { border-top: 3px solid var(--turquoise); }

:is(.contact-form, .study-form, .wizard-panel),
.admin-content form {
  font-family: var(--form-font);
}

:is(.contact-form, .wizard-panel, .admin-content) :is(.field-grid, .candidate-fields, .form-grid) {
  gap: var(--form-field-gap);
  align-items: start;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

:is(.contact-form, .wizard-panel, .admin-content) :is(.field, .candidate-field, .form-field) {
  min-width: 0;
  gap: var(--form-label-gap);
}

:is(.contact-form, .wizard-panel) :is(.field, .candidate-field) {
  margin-bottom: var(--form-field-gap);
}

.contact-form .field { margin-bottom: 0; }
.contact-form > :is(.field, .field-grid) { margin-bottom: var(--form-field-gap); }
.wizard-panel .candidate-field { margin-bottom: 0; }
.wizard-panel .candidate-fields { margin-bottom: var(--form-field-gap); }

:is(.contact-form, .wizard-panel) :is(.field label, .candidate-field label),
.admin-content .form-field > span,
.study-form > label {
  color: var(--form-ink);
  font-family: var(--form-font);
  font-size: .85rem;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: 0;
  text-transform: none;
}

.study-form > label {
  display: block;
  margin-bottom: var(--form-field-gap);
}

:is(.contact-form, .wizard-panel) label span,
.study-form label > .text-muted {
  color: var(--form-muted);
  font-size: inherit;
  font-weight: 400;
}

/* As exclusões mantêm campos ocultos e controles de consentimento nativos. */
:is(.contact-form, .study-form, .wizard-panel, .admin-content)
:is(.field, .candidate-field, .form-field, label, form)
:is(input:where(:not([type="hidden"], [type="checkbox"], [type="radio"])), select, textarea) {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: var(--form-control-height);
  margin: 0;
  padding: 11px 10px;
  border: 1px solid transparent;
  border-bottom-color: var(--form-line);
  border-radius: 4px;
  background: var(--form-surface);
  color: var(--form-ink);
  font-family: var(--form-font);
  font-size: 1rem;
  line-height: 1.5;
  outline: 0;
  box-shadow: none;
  transition: background-color .15s ease, border-color .15s ease;
}

.study-form label[for] > :is(input, select, textarea) {
  margin-top: var(--form-label-gap);
}

:is(.contact-form, .study-form, .wizard-panel, .admin-content)
:is(.field, .candidate-field, .form-field, label, form) textarea {
  min-height: 120px;
  resize: vertical;
}

:is(.contact-form, .study-form, .wizard-panel, .admin-content) select option {
  background: #fff;
  color: var(--form-ink);
}

:is(.contact-form, .study-form, .wizard-panel, .admin-content)
:is(.field, .candidate-field, .form-field, label, form)
:is(input:where(:not([type="hidden"], [type="checkbox"], [type="radio"])), select, textarea):focus {
  border-color: transparent;
  outline: 0;
  box-shadow: none;
}

:is(.contact-form, .study-form, .wizard-panel, .admin-content)
:is(.field, .candidate-field, .form-field, label, form)
:is(input:where(:not([type="hidden"], [type="checkbox"], [type="radio"])), select, textarea):focus-visible {
  border-color: transparent;
  background: var(--form-focus-surface);
  outline: 0;
  box-shadow: none;
}

/* Só após a validação da interface: não usa :invalid para evitar erro prematuro. */
:is(.contact-form, .study-form, .wizard-panel, .admin-content)
:is(.field, .candidate-field, .form-field, label, form)
:is(input:where(:not([type="hidden"], [type="checkbox"], [type="radio"])), select, textarea)[aria-invalid="true"] {
  border-color: transparent;
  border-bottom-color: var(--form-error);
  background: #fff4f4;
  box-shadow: none;
}

:is(.contact-form, .study-form, .wizard-panel, .admin-content)
:is(.field, .candidate-field, .form-field, label, form) input[type="file"] {
  padding: 10px;
  border: 1px dashed var(--form-line);
  border-radius: 6px;
  background: #f8f9fb;
  font-size: .9rem;
}

:is(.contact-form, .study-form, .wizard-panel, .admin-content)
:is(.field, .candidate-field, .form-field, label, form) input[type="file"]:focus {
  border-color: transparent;
  outline: 0;
  box-shadow: none;
}

:is(.contact-form, .study-form, .wizard-panel, .admin-content)
:is(.field, .candidate-field, .form-field, label, form) input[type="file"]:focus-visible {
  border-color: transparent;
  background: var(--form-focus-surface);
}

:is(.contact-form, .study-form, .wizard-panel, .admin-content)
:is(.field, .candidate-field, .form-field, label, form) input[type="file"][aria-invalid="true"] {
  border-color: var(--form-error);
  background: #fff4f4;
}

:is(.contact-form, .study-form, .wizard-panel, .admin-content) input::file-selector-button {
  margin-right: 10px;
  padding: 7px 10px;
  border: 0;
  border-radius: 4px;
  background: #e8edf3;
  color: var(--form-ink);
  font: 600 .8rem var(--form-font);
  cursor: pointer;
}

:is(.contact-form, .study-form, .wizard-panel, .admin-content) input:is([type="checkbox"], [type="radio"]) {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  accent-color: var(--form-action-hover);
}

:is(.contact-form, .study-form, .wizard-panel, .admin-content) input:is([type="checkbox"], [type="radio"]):focus-visible {
  outline: 2px solid var(--form-muted);
  outline-offset: 3px;
}

:is(.contact-form, .study-form, .wizard-panel) :is(.form-note, .form-status, .study-form-note, .study-form-status, .field-help, .candidate-status, .mba-privacy-note) {
  font-family: var(--form-font);
  font-size: .8rem;
  line-height: 1.6;
  color: var(--form-muted);
}

.wizard-panel .candidate-status { color: var(--form-error); }
.contact-form .form-note { margin: 0 0 24px; }

:is(.contact-form, .study-form, .wizard-panel) .button,
.admin-content form :is(.primary-action, .archive-action) {
  min-height: var(--form-control-height);
  padding: 12px 20px;
  border-radius: 6px;
  font: 600 .9rem/1.4 var(--form-font);
  letter-spacing: 0;
  transition: background-color .15s ease;
  transform: none;
}

:is(.contact-form, .study-form, .wizard-panel) :is(.button-primary, .button-dark),
.admin-content form .primary-action {
  border: 1px solid transparent;
  background: var(--form-action);
  color: #fff;
}

:is(.contact-form, .study-form, .wizard-panel) :is(.button-primary, .button-dark):hover,
.admin-content form .primary-action:hover {
  background: var(--form-action-hover);
  transform: none;
}

.wizard-panel .button-quiet {
  border: 1px solid var(--form-line);
  background: #fff;
  color: var(--form-ink);
}

:is(.contact-form, .study-form, .wizard-panel) .button:focus-visible,
.admin-content form :is(.primary-action, .archive-action):focus-visible {
  outline: 2px solid var(--form-muted);
  outline-offset: 3px;
}

:is(.contact-form, .study-form, .wizard-panel) .button:disabled,
.admin-content form button:disabled {
  cursor: not-allowed;
  opacity: .55;
  transform: none;
}

:is(.contact-form, .study-form, .wizard-panel, .admin-content)
:is(input:where(:not([type="hidden"], [type="checkbox"], [type="radio"])), select, textarea):disabled {
  background: #edf0f3;
  color: var(--form-muted);
  cursor: not-allowed;
}

/* O contexto da seção MBA continua azul, mas seu formulário usa o cartão comum. */
.mba-contact .contact-form :is(.form-note, .form-status, .mba-privacy-note) { color: var(--form-muted); }
.admin-content :is(.import-form, .filter-form) { gap: 12px; }
.admin-content .filter-form input { flex: 1 1 150px; }

@media (max-width: 760px) {
  :is(.contact-form, .study-form, .wizard-panel, .editor-card) { padding: 22px 18px; }
  :is(.contact-form, .wizard-panel, .admin-content) :is(.field-grid, .candidate-fields, .form-grid) {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .study-contact-grid { grid-template-columns: 1fr; gap: 32px; }
  .wizard-panel .candidate-field-wide { grid-column: auto; }
  .admin-content .filter-form input { flex-basis: 100%; }
  .admin-content .import-form input[type="file"] { min-width: 0; flex-basis: 100%; }
  .admin-content .form-actions { flex-wrap: wrap; }
  .wizard-panel .wizard-actions { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  :is(.contact-form, .study-form, .wizard-panel, .admin-content) :is(input, select, textarea, button) {
    transition: none;
  }
}