/* Tela Parâmetros.
 *
 * Só tokens: nenhum valor de cor, raio, espaçamento ou elevação solto aqui —
 * tudo vem de `tokens.css`, como manda a folha de fundação.
 *
 * Sem @media de largura, como o resto do sistema: um layout fluido só. Os quatro
 * campos ficam lado a lado enquanto couberem e viram uma coluna quando não
 * couberem, por `auto-fit` + `minmax()`, sem breakpoint e sem segunda versão da
 * tela.
 *
 * A folha espelha `contas.css` de propósito, com o prefixo trocado: as duas telas
 * são do pai, têm o mesmo topo, o mesmo recado vivo e o mesmo formulário em
 * cartão, e inventar um segundo vocabulário visual para a segunda tela faria as
 * duas divergirem na primeira mudança. O que não se repete é a tabela — esta
 * tela não tem nenhuma, e por isso não tem rolagem horizontal em lugar nenhum. */

.parametros {
  display: grid;
  gap: var(--esp-6);
  align-content: start;
  /* A coluna de conteúdo tem teto: quatro campos curtos esticados por um monitor
   * de 27" viram quatro campos com meio metro de branco entre a etiqueta e a
   * dica. */
  max-width: 1100px;
  margin-inline: auto;
}

.parametros-topo {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-4);
  align-items: baseline;
  justify-content: space-between;
}

/* Link de navegação com corpo de controle: 44px de altura mínima valem para
 * qualquer alvo de clique, e um link não recebe isso da regra de `button` de
 * `base.css`. A classe `alvo` no HTML já garante a altura; aqui vem o resto. */
.parametros-voltar {
  display: inline-flex;
  align-items: center;
  padding: var(--esp-2) var(--esp-4);
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  background: var(--painel);
  color: var(--realce);
  font-weight: 600;
  text-decoration: none;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

/* Hover e foco compartilham o tratamento: nenhuma afordância existe só no
 * hover. O sublinhado volta no hover porque um link sem sublinhado precisa de
 * *alguma* confirmação de que é link, e a cor sozinha não pode ser a única. */
.parametros-voltar:hover,
.parametros-voltar:focus-visible {
  border-color: var(--realce);
  box-shadow: var(--elevacao-interativo);
  text-decoration: underline;
}

/* Região viva dos recados. Vazia, ela some visualmente mas CONTINUA
 * renderizada: uma região viva que nasce com `display: none` não é observada
 * pelo leitor de tela, e o recado que aparecesse depois passaria em silêncio. */
.parametros-recado:empty {
  padding: 0;
  background: none;
  border: 0;
}

.parametros-recado {
  padding: var(--esp-3) var(--esp-4);
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  background: var(--painel-fundo);
  color: var(--texto);
}

.parametros-painel {
  display: grid;
  gap: var(--esp-6);
  /* Sem isto, um item de grid tem largura mínima igual à do conteúdo, e a dica
   * mais longa empurraria a coluna inteira para fora da tela — a rolagem
   * apareceria no corpo da página, que é o que esta folha promete não acontecer. */
  min-width: 0;
}

.parametros-secao {
  display: grid;
  gap: var(--esp-4);
  min-width: 0;
  padding: clamp(var(--esp-4), 3vw, var(--esp-5));
  background: var(--painel);
  border: 1px solid var(--borda);
  border-radius: var(--raio-lg);
  box-shadow: var(--elevacao-repouso);
}

/* ───────────────────────────────────── o formulário */

.parametros-form {
  display: grid;
  gap: var(--esp-5);
  /* Os quatro campos lado a lado enquanto couberem; o aviso e o botão ocupam a
   * linha inteira por serem os únicos filhos diretos que não são campo. O
   * `min()` é o que impede o `minmax` de virar o piso que estoura a tela em
   * 360px. */
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}

.parametros-campo {
  display: grid;
  gap: var(--esp-1);
  align-content: start;
  min-width: 0;
}

.parametros-campo label {
  color: var(--texto);
}

/* `input` NÃO está na regra de 44px de `base.css`, que cobre `button`, `select`
 * e os `input` de botão. É aqui que o campo numérico ganha a altura mínima de
 * alvo de clique — e ele precisa dela mais que os outros, porque as setinhas de
 * incremento do `type="number"` são metade da altura do campo cada uma. */
.parametros-entrada {
  min-height: 44px;
  width: 100%;
  padding: var(--esp-2) var(--esp-3);
  background: var(--painel);
  color: var(--texto);
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  /* 16px é o piso que impede o iOS de dar zoom sozinho ao focar o campo — e um
   * zoom que a pessoa não pediu desfaz o enquadramento da tela inteira. */
  font-size: 16px;
  line-height: 1.4;
  transition: border-color 120ms ease;
}

.parametros-entrada:hover,
.parametros-entrada:focus-visible {
  border-color: var(--realce);
}

.parametros-dica {
  color: var(--suave);
}

/* O aviso de quando a mudança passa a valer. Atravessa a grade inteira: ele fala
 * dos quatro campos, e alinhado sob um deles pareceria falar só daquele. */
.parametros-aviso {
  grid-column: 1 / -1;
  padding: var(--esp-3) var(--esp-4);
  border-radius: var(--raio-sm);
  background: var(--painel-fundo);
  color: var(--suave);
}

/* Ação principal da tela: preenchido em --realce, como o botão de cada
 * formulário da tela de contas. Ocupa a linha inteira pelo mesmo motivo do
 * aviso — ele salva os quatro campos, não o último. */
.parametros-botao {
  grid-column: 1 / -1;
  justify-self: start;
  min-height: 44px;
  padding: var(--esp-3) var(--esp-5);
  background: var(--realce);
  /* --sobre-realce, e não branco fixo: no escuro o --realce clareia e o branco
   * cairia para 2,77:1. O token acompanha o tema. */
  color: var(--sobre-realce);
  border: 1px solid var(--realce);
  border-radius: var(--raio-sm);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  transition: box-shadow 120ms ease, filter 120ms ease;
}

.parametros-botao:hover,
.parametros-botao:focus-visible {
  box-shadow: var(--elevacao-interativo);
  filter: brightness(1.08);
}

.parametros-botao:active {
  filter: brightness(0.94);
}

/* Desabilitado durante o envio. Sem realce, porque não há ação — e sem
 * `cursor: not-allowed`, que lê como "você errou" para quem só está esperando o
 * servidor responder. */
.parametros-botao:disabled {
  background: var(--painel-fundo);
  color: var(--suave);
  border-color: var(--borda);
  cursor: default;
}

.parametros-botao:disabled:hover,
.parametros-botao:disabled:focus-visible {
  box-shadow: none;
  filter: none;
}