/*
 * Estilos da tela de configuração de capacidade (tarefa 13.4).
 * ---------------------------------------------------------------------------
 * Consome os tokens de marca de theme.css (tarefa 13.7). Tema claro, WCAG AA.
 * As cores de sucesso/erro nas mensagens SEMPRE vêm acompanhadas de texto
 * (prefixo "✓"/"Erro:") — não dependem apenas de cor. Reaproveita as classes
 * utilitárias .form-field/.surface/.btn de app.css. Importar DEPOIS de app.css.
 */

.config-screen {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.config-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 560px;
  padding: 24px;
}

.config-section-title {
  margin: 0;
  font-size: 1.125rem;
  color: var(--color-text);
}

.config-form input[type="number"],
.config-form input[type="text"] {
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-bg);
  color: var(--color-text);
  font: inherit;
  width: 100%;
}

.config-hint {
  margin: 0;
  font-size: 0.875rem;
}

.config-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.config-submit {
  align-self: flex-start;
  min-width: 160px;
}

.config-feedback {
  margin: 0;
  padding: 12px;
  border-radius: var(--radius-sm);
  font-weight: 600;
}

.config-feedback--success {
  border: 1px solid var(--color-success);
  background-color: #e9f6ee;
}

.config-feedback--error {
  border: 1px solid var(--color-error);
  background-color: #fdecec;
}