/* Tela Contas.
 *
 * 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ó. O reflow
 * vem de `auto-fit` + `minmax()` nos dois formulários, que ficam lado a lado
 * enquanto couberem e viram uma coluna quando não couberem, sem breakpoint e sem
 * segunda versão da tela.
 *
 * A regra que organiza esta folha: **o corpo da página nunca rola na
 * horizontal**. A tabela é o único conteúdo que pode ficar mais largo que a
 * tela, e quem rola é o contêiner dela. É a única rolagem horizontal permitida
 * no sistema, e é por isso que ela é focável por teclado no HTML. */

.contas {
  display: grid;
  gap: var(--esp-6);
  align-content: start;
  /* A coluna de conteúdo tem teto: uma tabela de cinco colunas esticada por um
   * monitor de 27" separa o nome do vínculo por meio metro de branco. */
  max-width: 1100px;
  margin-inline: auto;
}

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

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

.contas-painel {
  display: grid;
  gap: var(--esp-6);
  /* Sem isto, um item de grid tem largura mínima igual à do conteúdo, e a
   * tabela larga empurraria a coluna inteira para fora da tela — a rolagem
   * apareceria no corpo da página em vez de no contêiner da tabela. É a linha
   * que faz a promessa desta folha valer. */
  min-width: 0;
}

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

/* ──────────────────────────────────────────── a tabela */

/* O contêiner rolável. `overflow-x: auto` e não `scroll`: sem necessidade não
 * aparece barra nenhuma. É o único lugar do sistema onde rolagem horizontal é
 * permitida. */
.contas-rolagem {
  overflow-x: auto;
  min-width: 0;
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
}

.contas-tabela {
  width: 100%;
  border-collapse: collapse;
  /* O piso de largura da tabela: abaixo dele ela rola dentro do contêiner em
   * vez de espremer cinco colunas até a ilegibilidade. É o número que transforma
   * "a tabela cabe" em "a tabela rola", e ele vale igual em 360px e no zoom de
   * 200%, que é a mesma situação vista de outro jeito. */
  min-width: 720px;
}

.contas-tabela th,
.contas-tabela td {
  padding: var(--esp-3) var(--esp-4);
  text-align: start;
  vertical-align: middle;
  border-bottom: 1px solid var(--borda);
}

.contas-tabela th {
  background: var(--painel-fundo);
  color: var(--suave);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  /* **Sem `position: sticky` aqui, e o que havia não grudava nada.** A versão
   * anterior declarava `position: sticky; top: 0` e dizia que o cabeçalho ficava
   * visível enquanto a tabela rolava — não ficava. `.contas-rolagem` declara
   * `overflow-x: auto`, e pela spec de CSS Overflow um `overflow-y` que ficou
   * `visible` ao lado de um valor diferente vira `auto`: o contêiner é
   * scrollport nos **dois** eixos. Como a altura dele é automática, ele nunca
   * rola na vertical, e um `th` grudento dentro de um scrollport que não rola
   * não tem a que grudar — quem rola é a página, e o cabeçalho sumia com ela.
   *
   * O conserto que faria o sticky funcionar seria um `max-height` no contêiner,
   * e ele não entra: a AC de 360px com zoom de 200% pede uma rolagem horizontal
   * dentro do contêiner e nenhuma vertical, e criar um segundo scrollport agora
   * é mudança de layout sem ninguém para conferir no navegador. */
}

.contas-tabela tbody tr:last-child th,
.contas-tabela tbody tr:last-child td {
  border-bottom: 0;
}

/* ───────────────────────────────────── os formulários */

.contas-formularios {
  display: grid;
  gap: var(--esp-goteira);
  /* Lado a lado enquanto couber, empilhados quando não couber. 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(320px, 100%), 1fr));
}

.contas-form {
  display: grid;
  gap: var(--esp-4);
}

.contas-campo {
  display: grid;
  gap: var(--esp-1);
}

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

/* `input` e `textarea` NÃO estão na regra de 44px de `base.css`, que cobre
 * `button`, `select` e os `input` de botão. Aqui é onde os campos de texto e de
 * data ganham a altura mínima — e o `select` a repete de graça, o que não custa
 * nada e evita que a folha dependa da ordem de carregamento para estar certa. */
.contas-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);
  font-size: 16px;
  line-height: 1.4;
  transition: border-color 120ms ease;
}

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

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

/* Ação principal de cada formulário: preenchido em --realce, como o botão do
 * Google na tela Entrar. */
.contas-botao {
  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;
}

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

.contas-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. */
.contas-botao:disabled {
  background: var(--painel-fundo);
  color: var(--suave);
  border-color: var(--borda);
  cursor: default;
}

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

/* O Ver de cada linha de aluno: ação secundária, contorno em vez de
 * preenchimento. O --realce fica reservado para a ação principal de cada
 * formulário, e uma tabela com dez botões índigo teria dez ações principais. */
.contas-botao-fraco {
  padding: var(--esp-2) var(--esp-4);
  background: var(--painel);
  color: var(--texto);
  border-color: var(--borda);
}

.contas-botao-fraco:hover,
.contas-botao-fraco:focus-visible {
  border-color: var(--realce);
  filter: none;
}