/* Tela Cadastros — o hub.
 *
 * 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 três
 * atalhos 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.
 *
 * O topo e o recado espelham `parametros.css` e `contas.css` de propósito, com o
 * prefixo trocado: as três telas são do pai e têm o mesmo cabeçalho e a mesma
 * região viva, e inventar um terceiro vocabulário visual faria as três
 * divergirem na primeira mudança. O que esta tela tem de próprio é o atalho —
 * ela não tem formulário nenhum. */

.cadastros {
  display: grid;
  gap: var(--esp-6);
  align-content: start;
  /* A coluna de conteúdo tem teto: três atalhos esticados por um monitor de 27"
   * viram três faixas com meio metro de branco entre o nome e a dica. */
  max-width: 1100px;
  margin-inline: auto;
}

.cadastros-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. */
.cadastros-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. */
.cadastros-voltar:hover,
.cadastros-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. */
.cadastros-recado:empty {
  padding: 0;
  background: none;
  border: 0;
}

.cadastros-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);
}

.cadastros-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;
}

.cadastros-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);
}

/* ───────────────────────────────────── os três atalhos */

.cadastros-lista {
  display: grid;
  gap: var(--esp-4);
  /* 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));
  /* A marcação é `ul` porque os três são itens do mesmo conjunto — é isso que
   * faz o leitor de tela anunciar quantos são. O marcador some porque o cartão
   * já delimita cada item para o olho. */
  list-style: none;
}

/* Cada atalho é um cartão inteiro clicável: o alvo é o cartão, e não a palavra.
 * `height: 100%` para que três cartões de dicas com alturas diferentes fiquem do
 * mesmo tamanho — cartões desalinhados leem-se como itens de importâncias
 * diferentes. */
.cadastros-atalho {
  display: grid;
  gap: var(--esp-1);
  align-content: start;
  height: 100%;
  padding: var(--esp-4);
  background: var(--painel-fundo);
  border: 1px solid var(--borda);
  border-radius: var(--raio-md);
  color: var(--texto);
  text-decoration: none;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

/* O nome do cadastro é o que carrega a cor de link; a dica fica em texto suave.
 * Assim o cartão inteiro é clicável sem ficar todo azul, e continua havendo uma
 * palavra que se lê como link. */
.cadastros-atalho .subtitulo {
  color: var(--realce);
}

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

.cadastros-atalho:hover,
.cadastros-atalho:focus-visible {
  border-color: var(--realce);
  box-shadow: var(--elevacao-interativo);
}

.cadastros-atalho:hover .subtitulo,
.cadastros-atalho:focus-visible .subtitulo {
  text-decoration: underline;
}