/* =====================================================================
   Painel do Sistema de Cadastro
   ---------------------------------------------------------------------
   Um arquivo só, sem framework e sem build: o painel é PHP puro servido
   pela hospedagem, e um CSS que precisasse ser compilado quebraria a
   promessa de "editar e enviar por FTP".

   Ordem: variáveis → base → moldura (topo e lateral) → componentes →
   telas → responsivo.

   O tema escuro é o padrão. O claro entra por [data-tema="claro"] no
   <html>, escrito antes da primeira pintura (ver temaInline, em
   cabecalho.php) para a página não piscar branca antes de escurecer.
   ===================================================================== */

/* A paleta é quase toda preto e cinza. O verde do clube é a única cor forte,
   e aparece em três situações — o que está ativo, a ação principal e o dinheiro
   que importa. Usado em mais lugares que isso, ele deixa de destacar. */
:root {
  /* Fundos, do mais ao fundo para o mais à frente.
   *
   * A escala foi refeita depois de medir o contraste de cada par. A anterior
   * era escura demais para separar as camadas: um cartão ficava a 1,28 do
   * fundo e a linha da borda a 1,19 — abaixo de 1,3 o olho não vê a divisão,
   * e a tela vira uma mancha preta com texto solto em cima.
   *
   * Cada degrau agora se distingue do anterior, e a borda se vê contra as
   * duas superfícies que ela separa (1,53 contra o cartão, 1,81 contra o
   * fundo). O painel continua preto — só parou de esconder a própria
   * estrutura. */
  --fundo: #0a0b0a;
  --fundo-2: #151715;
  --superficie: #1c1f1c;
  --superficie-2: #252825;
  --borda: #3a3e3a;
  --borda-suave: #2a2d2a;

  /* Texto
   *
   * O miúdo (datas, rótulos de coluna, notas) estava em #676b67: 3,2:1 sobre
   * o cartão, abaixo do mínimo legível de 4,5. É justamente o texto que se lê
   * de relance, com a tela inclinada, no celular no campo. Subiu para 4,7:1 no
   * pior caso e continua claramente secundário. */
  --texto: #f0f1f0;
  --texto-suave: #a8ada8;
  --texto-fraco: #8d928d;

  /* Cor de ação — o verde do Feira FC.
   *
   * São dois verdes, e a razão é contraste. O #01b30e é vivo e serve para
   * ESCREVER sobre fundo escuro (7:1) — números, ícones, linhas. Mas é claro
   * demais para ser PINTADO com texto branco em cima: branco sobre ele dá
   * 2,8:1, quase ilegível.
   *
   * O verde de preencher é mais fechado. Sobre ele o branco chega a 5,5:1, e
   * o cartão passa a se ler de longe sem perder a cor do clube. */
  --destaque: #01b30e;
  --destaque-cheio: #067a10;
  --destaque-forte: #04d113;
  --destaque-fundo: rgba(1, 179, 14, 0.1);
  --destaque-texto: #fff;

  --perigo: #c96b63;
  --perigo-fundo: rgba(201, 107, 99, 0.1);

  /* O vermelho de preencher botão, separado do de escrever texto.
   *
   * São dois porque servem a duas coisas: #c96b63 é claro o bastante para ser
   * LIDO sobre fundo escuro (4,6:1), e por isso é apagado demais para PINTAR
   * um botão de excluir. Este é saturado e leva texto branco por cima — 4,9:1,
   * dentro do mínimo —, e é ele que faz a ação destrutiva parecer destrutiva. */
  --perigo-cheio: #d92b24;
  --ok: #01b30e;
  --ok-fundo: rgba(1, 179, 14, 0.1);
  --atencao: #b99a3f;
  --atencao-fundo: rgba(185, 154, 63, 0.1);

  /* Quase sem sombra: a separação vem das linhas de 1px */
  --sombra: 0 6px 24px rgba(0, 0, 0, 0.5);
  --sombra-leve: none;

  --raio: 6px;
  --raio-grande: 8px;

  --lateral-largura: 236px;
  --topo-altura: 60px;

  color-scheme: dark;
}

:root[data-tema='claro'] {
  --fundo: #f7f8f7;
  --fundo-2: #f1f3f1;
  --superficie: #ffffff;
  --superficie-2: #f5f7f5;
  --borda: #e3e6e3;
  --borda-suave: #ecefec;

  --texto: #131613;
  --texto-suave: #5f665f;
  --texto-fraco: #8b928b;

  /* O verde neon some sobre branco: no tema claro entra o verde escuro da
     marca, que passa no contraste de leitura. */
  --destaque: #05820c;
  --destaque-cheio: #05820c;
  --destaque-forte: #054b0a;
  --destaque-fundo: rgba(5, 130, 12, 0.08);
  --destaque-texto: #fff;

  --perigo: #b7453b;
  --perigo-cheio: #c8221c;
  --perigo-fundo: rgba(183, 69, 59, 0.08);
  --ok: #05820c;
  --ok-fundo: rgba(5, 130, 12, 0.08);
  --atencao: #96770c;
  --atencao-fundo: rgba(150, 119, 12, 0.09);

  --sombra: 0 6px 22px rgba(16, 24, 16, 0.08);
  --sombra-leve: none;

  color-scheme: light;
}

/* ---------------------------------------------------------------------
   Base
   --------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 15px/1.55 system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--destaque);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 650;
  letter-spacing: -0.01em;
}

p {
  margin: 0 0 10px;
}

:focus-visible {
  outline: 2px solid var(--destaque);
  outline-offset: 2px;
  border-radius: 6px;
}

.icone {
  flex: none;
}

/* Esconde de verdade, mesmo em elementos com display definido */
[hidden] {
  display: none !important;
}

/* ---------------------------------------------------------------------
   Moldura: topo fixo + coluna lateral

   Header, aside e main são filhos diretos do <body> — não há <div> de
   moldura, então nenhuma página precisa fechar uma no fim do arquivo.
   --------------------------------------------------------------------- */

body.painel {
  display: grid;
  grid-template-columns: var(--lateral-largura) minmax(0, 1fr);
  grid-template-rows: var(--topo-altura) 1fr;
  min-height: 100vh;
}

.topo {
  grid-column: 1 / -1;
  position: sticky;
  top: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: var(--lateral-largura) minmax(0, 1fr);
  background: var(--superficie);
  border-bottom: 1px solid var(--borda);
}

.topo-marca {
  display: flex;
  align-items: center;
  padding: 0 18px;
  border-right: 1px solid var(--borda);
}

.topo-marca a {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--destaque);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.topo-marca a:hover {
  text-decoration: none;
}

.topo-marca span {
  color: var(--texto);
}

.marca-simbolo {
  flex: none;
}

.topo-conteudo {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 20px;
  min-width: 0;
}

.topo-titulo {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.25;
}

.topo-titulo strong {
  font-size: 16px;
  font-weight: 650;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topo-titulo span {
  font-size: 12.5px;
  color: var(--texto-suave);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.acoes {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}

/* ---------- coluna lateral ---------- */

.lateral {
  grid-row: 2;
  position: sticky;
  top: var(--topo-altura);
  align-self: start;
  height: calc(100vh - var(--topo-altura));
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 12px 16px;
  background: var(--superficie);
  border-right: 1px solid var(--borda);
}

/* Botão de ação principal — o "cadastrar" mora aqui, sempre à mão.
   É o único bloco de verde cheio da tela. */
.botao-lateral {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 2px 16px;
  padding: 11px 14px;
  border-radius: var(--raio);
  background: var(--destaque-cheio);
  color: var(--destaque-texto);
  font-size: 14px;
  font-weight: 600;
  transition: background 0.15s;
}

.botao-lateral:hover,
.botao-lateral.ativo {
  background: var(--destaque-forte);
  text-decoration: none;
}

.lat-nav {
  display: flex;
  flex-direction: column;
}

/* Item da lateral: sem caixa, sem pílula. O que está ativo se distingue por
   um traço verde de 2px na borda e pelo texto claro — nada mais. */
.lat-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 12px;
  border-left: 2px solid transparent;
  color: var(--texto-suave);
  font-size: 13.5px;
  font-weight: 500;
  transition: color 0.14s, border-color 0.14s;
}

.lat-item:hover {
  color: var(--texto);
  text-decoration: none;
}

.lat-item.ativo {
  border-left-color: var(--destaque);
  color: var(--texto);
  font-weight: 600;
}

.lat-item.ativo .icone {
  color: var(--destaque);
}

.lat-rotulo {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Número sem cápsula: é informação de apoio, não um selo */
.lat-contagem {
  flex: none;
  color: var(--texto-fraco);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.lat-item.ativo .lat-contagem {
  color: var(--texto-suave);
}

.lat-titulo {
  margin: 18px 14px 6px;
  color: var(--texto-fraco);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

/* ---------- rodapé da lateral ---------- */

.lat-resumo {
  margin-top: auto;
  padding: 14px 14px 4px;
  border-top: 1px solid var(--borda-suave);
}

.lat-resumo .lat-titulo {
  margin: 0 0 10px;
}

.lat-total {
  margin: 9px 0 0;
  color: var(--texto-suave);
  font-size: 12.5px;
}

.lat-total strong {
  color: var(--texto);
  font-size: 14px;
}

.lat-usuario {
  margin: 4px 0 0;
  color: var(--texto-fraco);
  font-size: 12px;
}

/* Véu do menu no celular */
.fundo-lateral {
  position: fixed;
  inset: 0;
  z-index: 44;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(2px);
}

/* ---------- conteúdo ---------- */

main {
  grid-row: 2;
  min-width: 0;
  padding: 24px 28px 64px;
}

/* ---------------------------------------------------------------------
   Botões
   --------------------------------------------------------------------- */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 14px;
  border: 1px solid transparent;
  border-radius: var(--raio);
  background: var(--destaque-cheio);
  color: var(--destaque-texto);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.botao:hover {
  background: var(--destaque-forte);
  text-decoration: none;
}

.botao.vazado {
  background: transparent;
  border-color: var(--borda);
  color: var(--texto);
}

.botao.vazado:hover {
  background: var(--superficie-2);
  border-color: var(--texto-fraco);
}

.botao.perigo {
  background: transparent;
  border-color: var(--perigo);
  color: var(--perigo);
}

.botao.perigo:hover {
  background: var(--perigo-fundo);
}

.botao.largo {
  width: 100%;
}

.botao.entrar {
  padding: 11px 15px;
  font-size: 14.5px;
}

.botao-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--borda);
  border-radius: 8px;
  background: transparent;
  color: var(--texto-suave);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.botao-icone:hover {
  background: var(--superficie-2);
  color: var(--texto);
}

.botao-icone.sair:hover {
  color: var(--perigo);
  border-color: var(--perigo);
}

/* Um ícone de tema por vez: sol no escuro, lua no claro */
.so-claro {
  display: none;
}

:root[data-tema='claro'] .so-claro {
  display: inline-flex;
}

:root[data-tema='claro'] .so-escuro {
  display: none;
}

/* Hambúrguer: só aparece quando a lateral vira gaveta */
.hamburguer-painel {
  display: none;
  flex-direction: column;
  gap: 3.5px;
}

.hamburguer-painel span {
  display: block;
  width: 16px;
  height: 1.8px;
  border-radius: 2px;
  background: currentColor;
}

/* Botão redondo do WhatsApp, usado nas listagens */
.botao-wpp {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--superficie-2);
  border: 1px solid var(--borda);
  color: var(--texto-suave);
  transition: background 0.15s, color 0.15s;
}

.botao-wpp:hover {
  background: #25d366;
  border-color: #25d366;
  color: #fff;
}

/* Link que age como botão perigoso, dentro do formulário */
.link-perigo {
  padding: 0;
  border: 0;
  background: none;
  color: var(--perigo);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
  text-decoration: underline;
}

/* ---------------------------------------------------------------------
   Avisos
   --------------------------------------------------------------------- */

.aviso {
  margin: 0;
  padding: 11px 14px;
  border: 1px solid var(--perigo);
  border-left-width: 3px;
  border-radius: var(--raio);
  background: var(--perigo-fundo);
  color: var(--texto);
  font-size: 13.5px;
}

.aviso.ok {
  border-color: var(--ok);
  background: var(--ok-fundo);
}

.aviso.atencao {
  border-color: var(--atencao);
  background: var(--atencao-fundo);
}

.faixa-foco {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
  padding: 12px 16px;
  border: 1px dashed var(--borda);
  border-radius: var(--raio);
  background: var(--superficie);
  color: var(--texto-suave);
  font-size: 13.5px;
}

.faixa-acoes {
  display: flex;
  gap: 8px;
}

/* ---------- boas-vindas ---------- */

.boas-vindas {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  padding: 16px 46px 16px 18px;
  border: 1px solid var(--borda);
  border-left: 2px solid var(--destaque);
  border-radius: var(--raio-grande);
  background: var(--superficie);
}

.bv-texto {
  flex: 1;
  min-width: 240px;
}

.bv-texto strong {
  display: block;
  margin-bottom: 2px;
  font-size: 15.5px;
}

.bv-texto p {
  margin: 0;
  color: var(--texto-suave);
  font-size: 13.5px;
}

.bv-texto b {
  color: var(--texto);
}

.bv-fechar {
  position: absolute;
  top: 10px;
  right: 10px;
  display: inline-flex;
  padding: 5px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--texto-fraco);
  cursor: pointer;
}

.bv-fechar:hover {
  color: var(--texto);
  background: var(--superficie-2);
}

/* ---------------------------------------------------------------------
   Filtros, busca e ordenação
   --------------------------------------------------------------------- */

.filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.busca {
  flex: 1;
  min-width: 240px;
}

.campo-busca {
  position: relative;
}

.icone-busca {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--texto-fraco);
  pointer-events: none;
}

.campo-busca input {
  width: 100%;
  padding: 10px 14px 10px 38px;
  border: 1px solid var(--borda);
  border-radius: 999px;
  background: var(--superficie);
  color: var(--texto);
  font: inherit;
  font-size: 14px;
}

.campo-busca input::placeholder {
  color: var(--texto-fraco);
}

.campo-busca input:focus {
  outline: none;
  border-color: var(--destaque);
  box-shadow: 0 0 0 3px var(--destaque-fundo);
}

/* Sugestões enquanto se digita */
.sugestoes {
  position: absolute;
  z-index: 30;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  max-height: 340px;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--superficie);
  box-shadow: var(--sombra);
}

.sugestao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 9px 11px;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--texto);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.sugestao:hover,
.sugestao.marcada {
  background: var(--superficie-2);
  text-decoration: none;
}

.sugestao .menor {
  color: var(--texto-suave);
}

.sugestao-rodape {
  padding: 8px 11px 4px;
  color: var(--texto-fraco);
  font-size: 12px;
  text-align: center;
}

.ordenar {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--texto-suave);
  font-size: 13px;
}

/* Abas de recorte por contato */
.filtros-contato {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 16px;
}

.aba {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--borda);
  border-radius: 999px;
  background: var(--superficie);
  color: var(--texto-suave);
  font-size: 12.5px;
  font-weight: 550;
}

.aba:hover {
  border-color: var(--texto-fraco);
  color: var(--texto);
  text-decoration: none;
}

.aba.ativa {
  border-color: var(--destaque);
  background: var(--destaque-fundo);
  color: var(--destaque);
}

.aba-numero {
  padding: 0 6px;
  border-radius: 999px;
  background: var(--fundo-2);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------
   Seletor desenhado por nós (data-bonito)

   O menu nativo do <select> é pintado pelo sistema operacional — branco,
   com a fonte dele — e destoa do painel no tema escuro. O <select> real
   continua na página, escondido, para o formulário e o teclado seguirem
   funcionando quando o JavaScript não roda.
   --------------------------------------------------------------------- */

.selecao {
  padding: 9px 12px;
  border: 1px solid var(--borda);
  border-radius: 8px;
  background: var(--superficie);
  color: var(--texto);
  font: inherit;
  font-size: 13.5px;
  cursor: pointer;
}

.selecao:focus {
  outline: none;
  border-color: var(--destaque);
  box-shadow: 0 0 0 3px var(--destaque-fundo);
}

.selecao-bonita {
  position: relative;
  min-width: 150px;
}

.selecao-bonita > select {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.selecao-gatilho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--borda);
  border-radius: 8px;
  background: var(--superficie);
  color: var(--texto);
  font: inherit;
  font-size: 13.5px;
  cursor: pointer;
  text-align: left;
}

.selecao-gatilho:hover {
  border-color: var(--texto-fraco);
}

.selecao-gatilho::after {
  content: '';
  flex: none;
  width: 7px;
  height: 7px;
  border-right: 1.6px solid var(--texto-fraco);
  border-bottom: 1.6px solid var(--texto-fraco);
  transform: translateY(-2px) rotate(45deg);
}

.selecao-bonita.aberta .selecao-gatilho {
  border-color: var(--destaque);
  box-shadow: 0 0 0 3px var(--destaque-fundo);
}

.selecao-lista {
  position: absolute;
  z-index: 35;
  left: 0;
  right: 0;
  top: calc(100% + 5px);
  max-height: 280px;
  overflow-y: auto;
  padding: 5px;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--superficie);
  box-shadow: var(--sombra);
}

.selecao-opcao {
  display: block;
  width: 100%;
  padding: 8px 11px;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--texto);
  font: inherit;
  font-size: 13.5px;
  text-align: left;
  cursor: pointer;
}

.selecao-opcao:hover,
.selecao-opcao.marcada {
  background: var(--superficie-2);
}

.selecao-opcao.atual {
  color: var(--destaque);
  font-weight: 600;
}

/* ---------------------------------------------------------------------
   Lista de fichas
   --------------------------------------------------------------------- */

.lista {
  border: 1px solid var(--borda);
  border-radius: var(--raio-grande);
  background: var(--superficie);
  overflow: hidden;
}

.cabecalho-lista,
.ficha > summary {
  display: grid;
  grid-template-columns: 2.2fr 1fr 1fr 1.1fr 1.2fr 1.1fr;
  gap: 14px;
  align-items: center;
  padding: 12px 18px;
}

.cabecalho-lista {
  border-bottom: 1px solid var(--borda);
  background: var(--fundo-2);
  color: var(--texto-fraco);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.ficha {
  border-bottom: 1px solid var(--borda-suave);
}

.ficha:last-child {
  border-bottom: 0;
}

.ficha > summary {
  cursor: pointer;
  list-style: none;
  transition: background 0.12s;
}

.ficha > summary::-webkit-details-marker {
  display: none;
}

.ficha > summary:hover {
  background: var(--superficie-2);
}

.ficha[open] > summary {
  background: var(--superficie-2);
  border-bottom: 1px solid var(--borda-suave);
}

.nome {
  font-weight: 620;
  font-size: 14.5px;
}

.menor {
  color: var(--texto-suave);
  font-size: 12px;
}

.celula {
  font-size: 13.5px;
  min-width: 0;
}

.celula-situacao {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: flex-end;
}

.vazio {
  margin: 0;
  padding: 40px 18px;
  color: var(--texto-suave);
  text-align: center;
  font-size: 14px;
}

/* ---------- etiquetas ---------- */

.etiqueta {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 650;
  white-space: nowrap;
}

/* ---------- ficha aberta ---------- */

.detalhe {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 26px;
  padding: 20px 18px 24px;
  background: var(--fundo-2);
}

.detalhe h3 {
  margin: 0 0 10px;
  color: var(--texto-fraco);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.documentos {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 18px;
}

.doc {
  display: inline-flex;
  align-items: center;
  padding: 6px 11px;
  border: 1px solid var(--borda);
  border-radius: 7px;
  background: var(--superficie);
  color: var(--destaque);
  font-size: 12.5px;
  font-weight: 550;
}

.doc:hover {
  border-color: var(--destaque);
  text-decoration: none;
}

.doc.ausente {
  color: var(--texto-fraco);
  border-style: dashed;
  background: transparent;
}

.dados p {
  margin: 0 0 6px;
  font-size: 13.5px;
}

.dados span {
  color: var(--texto-suave);
}

.bloco-observacao {
  margin-top: 16px;
  padding: 12px 14px;
  border-left: 3px solid var(--borda);
  border-radius: 0 var(--raio) var(--raio) 0;
  background: var(--superficie);
}

.bloco-observacao p {
  margin: 0;
  font-size: 13.5px;
  color: var(--texto-suave);
}

.contato {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

/* ---------- botões de situação ---------- */

.opcoes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}

.opcoes button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--borda);
  border-radius: 999px;
  background: var(--superficie);
  color: var(--texto-suave);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
  transition: border-color 0.14s, color 0.14s, background 0.14s;
}

.opcoes button:hover {
  border-color: var(--texto-fraco);
  color: var(--texto);
}

.opcoes button.atual {
  border-color: var(--destaque);
  background: var(--destaque-fundo);
  color: var(--destaque);
  font-weight: 620;
}

.opcoes .ponto {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.55;
}

.opcoes button.atual .ponto {
  opacity: 1;
}

.bloco-contato {
  margin-top: 20px;
}

.contato-carimbo {
  margin: 0 0 9px;
  color: var(--texto-suave);
  font-size: 12.5px;
}

.zona-perigo {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--borda);
}

.nota-perigo {
  margin: 8px 0 0;
  color: var(--texto-fraco);
  font-size: 12px;
}

/* ---------------------------------------------------------------------
   Rodapé da lista e paginação
   --------------------------------------------------------------------- */

.rodape-lista {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 16px;
}

.contador {
  margin: 0;
  color: var(--texto-suave);
  font-size: 13px;
}

.contador strong {
  color: var(--texto);
}

.paginacao {
  display: flex;
  align-items: center;
  gap: 4px;
}

.pag-numero,
.pag-seta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border: 1px solid var(--borda);
  border-radius: 8px;
  background: var(--superficie);
  color: var(--texto-suave);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.pag-numero:hover,
.pag-seta:hover {
  border-color: var(--texto-fraco);
  color: var(--texto);
  text-decoration: none;
}

.pag-numero.atual {
  border-color: var(--destaque);
  background: var(--destaque-fundo);
  color: var(--destaque);
  font-weight: 650;
}

.pag-seta.desligado {
  opacity: 0.35;
}

.pag-reticencias {
  padding: 0 3px;
  color: var(--texto-fraco);
}

.por-pagina {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--texto-suave);
  font-size: 12.5px;
}

.rodape-nota {
  margin: 26px 0 0;
  color: var(--texto-fraco);
  font-size: 12px;
  text-align: center;
}

/* ---------------------------------------------------------------------
   Formulário de cadastro
   --------------------------------------------------------------------- */

.form-cadastro {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 1000px;
}

.bloco-form {
  padding: 20px 22px 22px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-grande);
  background: var(--superficie);
}

.bloco-titulo {
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--borda-suave);
}

.bloco-titulo h2 {
  font-size: 15.5px;
}

.bloco-titulo p {
  margin: 4px 0 0;
  color: var(--texto-suave);
  font-size: 13px;
}

.grade-campos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
}

.campo {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.campo.largo {
  grid-column: 1 / -1;
}

.rotulo {
  color: var(--texto-suave);
  font-size: 12.5px;
  font-weight: 600;
}

.obrigatorio {
  color: var(--perigo);
}

.campo input[type='text'],
.campo input[type='tel'],
.campo input[type='date'],
.campo input[type='number'],
.campo input[type='password'],
.campo textarea,
.caixa input,
.linha-acao input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--borda);
  border-radius: 8px;
  background: var(--fundo-2);
  color: var(--texto);
  font: inherit;
  font-size: 14px;
}

.campo textarea {
  resize: vertical;
  min-height: 90px;
}

.campo input::placeholder,
.campo textarea::placeholder {
  color: var(--texto-fraco);
}

.campo input:focus,
.campo textarea:focus,
.caixa input:focus,
.linha-acao input:focus {
  outline: none;
  border-color: var(--destaque);
  box-shadow: 0 0 0 3px var(--destaque-fundo);
}

/* O calendário nativo é branco no tema escuro; isto o inverte */
:root:not([data-tema='claro']) .campo input[type='date']::-webkit-calendar-picker-indicator {
  filter: invert(1) opacity(0.6);
}

.campo.com-erro input,
.campo.com-erro textarea,
.campo.com-erro .selecao-gatilho,
.campo.com-erro .selecao {
  border-color: var(--perigo);
}

.erro-campo {
  color: var(--perigo);
  font-size: 12px;
}

.dica {
  color: var(--texto-fraco);
  font-size: 12px;
}

/* Campo com "@" grudado antes do texto */
.campo-prefixo {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--borda);
  border-radius: 8px;
  background: var(--fundo-2);
  overflow: hidden;
}

.campo-prefixo:focus-within {
  border-color: var(--destaque);
  box-shadow: 0 0 0 3px var(--destaque-fundo);
}

.campo-prefixo span {
  display: flex;
  align-items: center;
  padding: 0 4px 0 12px;
  color: var(--texto-fraco);
}

.campo-prefixo input {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding-left: 2px !important;
}

.marcador {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 10px 12px;
  border: 1px solid var(--borda);
  border-radius: 8px;
  background: var(--fundo-2);
  font-size: 13.5px;
  cursor: pointer;
}

.marcador input {
  margin: 2px 0 0;
  accent-color: var(--destaque);
}

/* Campo de arquivo */
.campo input[type='file'] {
  width: 100%;
  padding: 9px 12px;
  border: 1px dashed var(--borda);
  border-radius: 8px;
  background: var(--fundo-2);
  color: var(--texto-suave);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}

.campo input[type='file']::file-selector-button {
  margin-right: 10px;
  padding: 5px 11px;
  border: 1px solid var(--borda);
  border-radius: 6px;
  background: var(--superficie);
  color: var(--texto);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}

.doc-atual {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

/* Barra de salvar, colada no fim da página */
.barra-salvar {
  position: sticky;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-grande);
  background: var(--superficie);
  box-shadow: var(--sombra);
}

.barra-info {
  color: var(--texto-suave);
  font-size: 12.5px;
}

.barra-botoes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ---------- aviso de ficha parecida ---------- */

.caixa-duplicado {
  margin-bottom: 20px;
  padding: 18px 20px;
  border: 1px solid var(--atencao);
  border-left-width: 3px;
  border-radius: var(--raio-grande);
  background: var(--atencao-fundo);
}

.caixa-duplicado h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  color: var(--atencao);
  font-size: 15.5px;
}

.caixa-duplicado > p {
  color: var(--texto-suave);
  font-size: 13.5px;
}

.lista-duplicados {
  margin: 14px 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lista-duplicados li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 14px;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--superficie);
}

.acoes-duplicado {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.nota-duplicado {
  margin: 0;
  color: var(--texto-suave);
  font-size: 12.5px;
}

/* ---------------------------------------------------------------------
   Usuários e registros
   --------------------------------------------------------------------- */

.painel-duplo {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 24px;
  align-items: start;
}

.titulo-secao {
  font-size: 15.5px;
}

.caixa {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px 22px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-grande);
  background: var(--superficie);
}

.caixa .rotulo {
  margin-top: 8px;
}

.caixa .botao {
  margin-top: 16px;
}

.nota-caixa {
  margin: 14px 0 0;
  color: var(--texto-fraco);
  font-size: 12px;
}

.acoes-conta {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.linha-acao {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.linha-acao input {
  flex: 1;
  min-width: 180px;
}

.linha-registro {
  display: grid;
  grid-template-columns: 1fr 1.4fr 2fr 1fr;
  gap: 14px;
  align-items: center;
  padding: 11px 18px;
  border-bottom: 1px solid var(--borda-suave);
  font-size: 13.5px;
}

.linha-registro:last-child {
  border-bottom: 0;
}

.linha-registro.atencao {
  border-left: 3px solid var(--perigo);
  padding-left: 15px;
}

/* Cartões de resumo (usados na tela de registros) */
.resumo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.cartao {
  padding: 14px 16px;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--superficie);
}

.cartao span {
  display: block;
  color: var(--texto-suave);
  font-size: 12px;
}

.cartao strong {
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.cartao.destaque {
  border-left: 2px solid var(--destaque);
}

/* ---------------------------------------------------------------------
   Tela de login
   --------------------------------------------------------------------- */

.pagina-login {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 24px;
  background: var(--fundo);
}

.tema-login {
  position: fixed;
  top: 18px;
  right: 18px;
}

.tela-login {
  width: 100%;
  max-width: 390px;
}

.cartao-login {
  padding: 32px 28px 24px;
  border: 1px solid var(--borda);
  border-radius: 18px;
  background: var(--superficie);
  box-shadow: var(--sombra);
  text-align: center;
}

.selo-login {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: 16px;
  border-radius: 14px;
  background: var(--destaque-fundo);
  color: var(--destaque);
}

.cartao-login h1 {
  font-size: 21px;
}

.cartao-login .sub {
  margin: 8px 0 22px;
  color: var(--texto-suave);
  font-size: 13.5px;
}

.form-login {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
}

.campo-login {
  position: relative;
}

.campo-icone {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--texto-fraco);
  pointer-events: none;
}

.campo-login input {
  width: 100%;
  padding: 12px 42px 12px 38px;
  border: 1px solid var(--borda);
  border-radius: 9px;
  background: var(--fundo-2);
  color: var(--texto);
  font: inherit;
  font-size: 14.5px;
}

.campo-login input:focus {
  outline: none;
  border-color: var(--destaque);
  box-shadow: 0 0 0 3px var(--destaque-fundo);
}

.ver-senha {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  padding: 5px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--texto-fraco);
  cursor: pointer;
}

.ver-senha:hover {
  color: var(--texto);
}

.ver-senha .olho-aberto {
  display: none;
}

.ver-senha.mostrando .olho-aberto {
  display: block;
}

.ver-senha.mostrando .olho-fechado {
  display: none;
}

.form-login .aviso {
  margin-top: 2px;
}

.rodape-login {
  margin: 20px 0 0;
  color: var(--texto-fraco);
  font-size: 12px;
}

/* ---------------------------------------------------------------------
   Diálogo de confirmação

   O confirm() do navegador é desenhado pelo sistema — fonte, cores e
   botões fora do painel, e sem espaço para explicar a consequência. Este
   substitui aquele, e some sozinho se o JavaScript não rodar (aí o
   formulário é enviado direto, como sempre foi).
   --------------------------------------------------------------------- */

.fundo-dialogo {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
}

.dialogo {
  width: 100%;
  max-width: 400px;
  padding: 24px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-grande);
  background: var(--superficie);
  box-shadow: var(--sombra);
}

.dialogo h2 {
  margin-bottom: 8px;
  font-size: 17px;
}

.dialogo p {
  margin: 0 0 20px;
  color: var(--texto-suave);
  font-size: 13.5px;
}

.dialogo-botoes {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* Setas fixas para ir ao topo ou ao fim da página */
.setas-rolagem {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.setas-rolagem button {
  width: 34px;
  height: 34px;
  border: 1px solid var(--borda);
  border-radius: 9px;
  background: var(--superficie);
  color: var(--texto-suave);
  cursor: pointer;
  box-shadow: var(--sombra-leve);
}

.setas-rolagem button:hover {
  color: var(--texto);
  border-color: var(--texto-fraco);
}

/* ---------------------------------------------------------------------
   Responsivo
   --------------------------------------------------------------------- */

@media (max-width: 1080px) {
  .detalhe {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .painel-duplo {
    grid-template-columns: 1fr;
  }
}

/* Abaixo disto a lateral vira gaveta e a lista vira cartões empilhados */
@media (max-width: 980px) {
  body.painel {
    grid-template-columns: 1fr;
  }

  .topo {
    grid-template-columns: auto 1fr;
  }

  .topo-marca {
    padding: 0 14px;
    border-right: 0;
  }

  .topo-marca span {
    display: none;
  }

  .topo-conteudo {
    padding: 0 14px 0 0;
  }

  .hamburguer-painel {
    display: inline-flex;
  }

  .lateral {
    position: fixed;
    z-index: 45;
    top: var(--topo-altura);
    left: 0;
    width: 268px;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    box-shadow: var(--sombra);
  }

  .lateral.aberta {
    transform: translateX(0);
  }

  main {
    grid-row: auto;
    padding: 18px 16px 56px;
  }

  /* Cada ficha vira um cartão: a grade de seis colunas não cabe no celular */
  .cabecalho-lista {
    display: none;
  }

  .ficha > summary {
    grid-template-columns: 1fr auto;
    gap: 8px;
  }

  .ficha > summary > div:nth-child(2),
  .ficha > summary > div:nth-child(3),
  .ficha > summary > div:nth-child(4) {
    grid-column: 1;
    font-size: 12.5px;
    color: var(--texto-suave);
  }

  .ficha > summary > div:nth-child(5) {
    grid-column: 1;
    font-size: 12.5px;
  }

  .celula-situacao {
    grid-row: 1;
    grid-column: 2;
    justify-content: flex-end;
    align-content: flex-start;
  }

  .linha-registro {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .rodape-lista {
    justify-content: center;
  }

  .barra-salvar {
    position: static;
  }
}

@media (max-width: 560px) {
  .topo-titulo span {
    display: none;
  }

  .acoes .botao span {
    display: none;
  }

  .grade-campos {
    grid-template-columns: 1fr;
  }

  .barra-botoes {
    width: 100%;
  }

  .barra-botoes .botao {
    flex: 1;
  }
}

/* Quem prefere menos movimento não recebe nenhum */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}

/* Impressão: só o conteúdo, sem moldura */
@media print {
  .topo,
  .lateral,
  .setas-rolagem,
  .filtros,
  .rodape-lista {
    display: none !important;
  }

  body.painel {
    display: block;
  }

  main {
    padding: 0;
  }
}

/* =====================================================================
   Componentes do sistema de inscrições
   ===================================================================== */

/* ---------------------------------------------------------------------
   Rodapé da lateral
   --------------------------------------------------------------------- */

.lat-detalhe {
  margin: 2px 0 0;
  color: var(--texto-suave);
  font-size: 12.5px;
}

.lat-alerta {
  margin: 8px 0 0;
  color: var(--atencao);
  font-size: 12px;
}

/* ---------------------------------------------------------------------
   Passo 1: a caixa do link do ogol
   --------------------------------------------------------------------- */

.caixa-ogol {
  max-width: 720px;
  padding: 26px 26px 22px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-grande);
  background: var(--superficie);
}

.ogol-cabeca {
  display: flex;
  gap: 14px;
  margin-bottom: 20px;
}

.ogol-cabeca > .icone {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  color: var(--destaque);
}

.ogol-cabeca h2 {
  font-size: 17px;
}

.ogol-cabeca p {
  margin: 6px 0 0;
  color: var(--texto-suave);
  font-size: 13.5px;
}

.ogol-campo {
  display: flex;
  gap: 8px;
}

.ogol-campo input {
  flex: 1;
  min-width: 0;
  padding: 11px 14px;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--fundo-2);
  color: var(--texto);
  font: inherit;
  font-size: 14px;
}

.ogol-campo input:focus {
  outline: none;
  border-color: var(--destaque);
  box-shadow: 0 0 0 3px var(--destaque-fundo);
}

.ogol-nota {
  margin: 16px 0 0;
  color: var(--texto-fraco);
  font-size: 12.5px;
}

/* Botão que precisa parecer um link: é um caminho alternativo, não uma ação
   de mesmo peso que "Buscar no ogol". */
.link-simples {
  padding: 0;
  border: 0;
  background: none;
  color: var(--destaque);
  font: inherit;
  font-size: inherit;
  cursor: pointer;
  text-decoration: underline;
}

/* ---------------------------------------------------------------------
   Cartão com os dados vindos do ogol
   --------------------------------------------------------------------- */

.ficha-ogol {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}

.ogol-foto {
  flex: none;
  width: 104px;
  height: 104px;
  border-radius: var(--raio);
  border: 1px solid var(--borda);
  background: var(--fundo-2);
  object-fit: cover;
}

.ficha-ogol.compacta .ogol-foto {
  width: 88px;
  height: 88px;
}

.ogol-foto.vazia {
  display: grid;
  place-items: center;
  color: var(--texto-fraco);
}

.ogol-dados {
  flex: 1;
  min-width: 0;
}

.ogol-dados h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 2px;
  color: var(--texto);
  font-size: 18px;
  letter-spacing: -0.02em;
  text-transform: none;
}

.ogol-camisa {
  padding: 1px 7px;
  border: 1px solid var(--borda);
  border-radius: 999px;
  color: var(--texto-suave);
  font-size: 12px;
  font-weight: 600;
}

.ogol-completo {
  margin: 0 0 12px;
  color: var(--texto-suave);
  font-size: 13px;
}

/* Os dados do ogol em pares rótulo/valor, em colunas que se acomodam */
.ogol-lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px 18px;
  margin: 0;
}

.ogol-lista dt {
  color: var(--texto-fraco);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ogol-lista dd {
  margin: 1px 0 0;
  font-size: 13.5px;
}

.ogol-numeros {
  display: flex;
  gap: 22px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--borda-suave);
}

.ogol-numeros div {
  display: flex;
  flex-direction: column;
}

.ogol-numeros strong {
  font-size: 20px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.ogol-numeros span {
  color: var(--texto-suave);
  font-size: 12px;
}

/* A legenda é obrigatória, não decorativa: sem ela os números do atleta em
   atividade passariam por total de carreira. */
.ogol-legenda {
  margin: 6px 0 0;
  color: var(--texto-fraco);
  font-size: 11.5px;
  font-style: italic;
}

.ogol-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

/* ---------------------------------------------------------------------
   "Corrigir dados do atleta" — os campos que ficam fora do caminho
   --------------------------------------------------------------------- */

.corrigir {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--borda-suave);
}

.corrigir > summary {
  color: var(--texto-suave);
  font-size: 13px;
  cursor: pointer;
  list-style: none;
}

.corrigir > summary::-webkit-details-marker {
  display: none;
}

.corrigir > summary::before {
  content: '\25B8\00A0';
  color: var(--texto-fraco);
}

.corrigir[open] > summary::before {
  content: '\25BE\00A0';
}

.corrigir > summary:hover {
  color: var(--texto);
}

.corrigir .grade-campos {
  margin-top: 16px;
}

/* ---------------------------------------------------------------------
   O bloco da proposta — o único com traço verde no formulário
   --------------------------------------------------------------------- */

.bloco-form.realce {
  border-left: 2px solid var(--destaque);
}

.custo-total {
  display: block;
  padding: 10px 12px;
  border: 1px dashed var(--borda);
  border-radius: var(--raio);
  color: var(--destaque);
  font-size: 17px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------
   Lista de inscrições
   --------------------------------------------------------------------- */

.cabecalho-lista,
.ficha > summary {
  grid-template-columns: 2.3fr 1.3fr 1.1fr 1fr 1fr 1fr;
}

.atleta-celula {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}

.atleta-foto {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--borda);
  background: var(--fundo-2);
  object-fit: cover;
}

/* Sem foto no ogol, a inicial do nome — um vazio redondo cinza seria pior */
.atleta-foto.vazia {
  display: grid;
  place-items: center;
  color: var(--texto-fraco);
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
}

.selo-inativo {
  margin-left: 6px;
  padding: 1px 7px;
  border: 1px solid var(--borda);
  border-radius: 999px;
  color: var(--texto-fraco);
  font-size: 10.5px;
  font-weight: 600;
  vertical-align: middle;
}

.celula.numero {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.celula.numero.forte {
  color: var(--texto);
  font-weight: 650;
}

/* Etiquetas de nível, na tela de usuários */
.etiqueta.master {
  color: var(--destaque);
}

.etiqueta.comum {
  color: var(--texto-suave);
}

/* ---------------------------------------------------------------------
   Proposta na ficha aberta
   --------------------------------------------------------------------- */

.proposta {
  margin-bottom: 8px;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--superficie);
}

.proposta > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 13px;
  border-bottom: 1px solid var(--borda-suave);
  font-size: 13.5px;
}

.proposta > div:last-child {
  border-bottom: 0;
}

.proposta span {
  color: var(--texto-suave);
}

.proposta strong {
  font-variant-numeric: tabular-nums;
}

.proposta-total strong {
  color: var(--destaque);
  font-size: 16px;
}

.opcoes button.s-ativo.atual {
  border-color: var(--destaque);
  background: var(--destaque-fundo);
  color: var(--destaque);
}

.opcoes button.s-inativo.atual {
  border-color: var(--texto-fraco);
  color: var(--texto-suave);
}

/* Valor no fim da linha de sugestão da busca */
.sugestao-valor {
  flex: none;
  color: var(--texto-suave);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.sugestao-valor.inativo {
  color: var(--texto-fraco);
  font-style: italic;
}

/* ---------------------------------------------------------------------
   Times
   --------------------------------------------------------------------- */

.time-topo {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}

.time-topo .menor {
  margin: 4px 0 0;
}

.time-acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.time-acoes .linha-acao {
  align-items: center;
  gap: 8px;
}

.time-acoes .rotulo {
  margin: 0;
}

/* O campo ocupa só a largura que a altura dele pede; a lista fica com o resto. */
.time-monta {
  display: grid;
  grid-template-columns: auto minmax(320px, 1fr);
  gap: 22px;
  align-items: start;
}

/* ---------- o campo ---------- */

/* O tamanho sai da altura da tela, e não da largura da coluna. Medido pela
   largura, num monitor largo o campo passava de 1.700px de altura: era
   preciso rolar para ver o time inteiro. Assim ele cabe sempre na tela e fica
   parado enquanto a lista de vagas rola ao lado. */
.campo-futebol {
  position: sticky;
  top: 16px;
  height: clamp(460px, calc(100vh - 140px), 860px);
  aspect-ratio: 68 / 105;
  border: 1px solid var(--borda);
  border-radius: var(--raio-grande);
  /* Faixas de grama: duas listras alternadas, sem imagem nenhuma */
  background:
    repeating-linear-gradient(
      to top,
      rgba(1, 179, 14, 0.05) 0 9.09%,
      rgba(1, 179, 14, 0.02) 9.09% 18.18%
    ),
    var(--fundo-2);
  overflow: hidden;
}

.campo-futebol .linhas span {
  position: absolute;
  border: 1px solid var(--borda);
}

.campo-futebol .meio {
  left: 0;
  right: 0;
  top: 50%;
  border-width: 1px 0 0;
}

.campo-futebol .circulo {
  left: 50%;
  top: 50%;
  width: 26%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}

.campo-futebol .area {
  left: 50%;
  width: 46%;
  height: 13%;
  transform: translateX(-50%);
}

.campo-futebol .area.cima {
  top: 0;
  border-top: 0;
}

.campo-futebol .area.baixo {
  bottom: 0;
  border-bottom: 0;
}

/* Uma vaga no campo. left/bottom vêm em porcentagem do PHP (ver formacoes). */
.vaga {
  position: absolute;
  transform: translate(-50%, 50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 104px;
  text-align: center;
}

.vaga:hover {
  text-decoration: none;
}

.vaga-camisa {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px dashed var(--borda);
  border-radius: 50%;
  background: var(--superficie);
  color: var(--texto-fraco);
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.vaga.ocupada .vaga-camisa {
  border-style: solid;
  border-color: var(--destaque);
  background: var(--destaque-cheio);
  color: var(--destaque-texto);
}

.vaga:hover .vaga-camisa {
  border-color: var(--destaque);
  color: var(--destaque);
}

.vaga.ocupada:hover .vaga-camisa {
  color: var(--destaque-texto);
}

.vaga-nome {
  max-width: 100%;
  overflow: hidden;
  color: var(--texto-suave);
  font-size: 12px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vaga.ocupada .vaga-nome {
  color: var(--texto);
  font-weight: 600;
}

/* ---------- a lista de vagas ---------- */

.vagas-lista {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.vaga-linha {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr) 62px auto;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid var(--borda);
  border-left: 2px solid var(--destaque);
  border-radius: var(--raio);
  background: var(--superficie);
}

/* Vaga livre não recebe o traço verde: verde é o que está resolvido */
.vaga-linha.livre {
  border-left-color: var(--borda);
}

.vaga-linha:target {
  border-color: var(--destaque);
}

.vaga-rotulo {
  color: var(--texto-suave);
  font-size: 12.5px;
  font-weight: 600;
}

.vaga-linha .selecao {
  width: 100%;
  padding: 7px 10px;
  font-size: 13px;
}

.vaga-numero {
  width: 100%;
  padding: 7px 8px;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--fundo-2);
  color: var(--texto);
  font: inherit;
  font-size: 13px;
  text-align: center;
}

.vaga-linha .botao {
  padding: 7px 12px;
  font-size: 12.5px;
}

/* ---------------------------------------------------------------------
   Login
   --------------------------------------------------------------------- */

.logo-login {
  display: block;
  width: 64px;
  height: auto;
  margin: 0 auto 16px;
}

/* ---------------------------------------------------------------------
   Responsivo dos blocos novos
   --------------------------------------------------------------------- */

@media (max-width: 1080px) {
  .time-monta {
    grid-template-columns: 1fr;
  }

  /* Empilhado, o campo volta a seguir a largura e não fica preso no topo:
     preso, ele cobriria a lista que vem embaixo. */
  .campo-futebol {
    position: relative;
    top: auto;
    height: auto;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
  }
}

@media (max-width: 980px) {
  /* No celular a lista vira cartão: as colunas de dinheiro entram empilhadas
     embaixo do nome, e não espremidas ao lado dele. */
  .ficha > summary > .celula.numero {
    grid-column: 1;
    text-align: left;
  }

  .ficha-ogol {
    flex-direction: column;
  }

  .vaga-linha {
    grid-template-columns: 1fr 62px auto;
  }

  .vaga-rotulo {
    grid-column: 1 / -1;
  }
}

@media (max-width: 560px) {
  .ogol-campo {
    flex-direction: column;
  }

  .ogol-numeros {
    gap: 16px;
  }
}

/* =====================================================================
   Funil de negociação e histórico de carreira
   ===================================================================== */

/* ---------------------------------------------------------------------
   Cartões de resumo — que também são o filtro da lista
   --------------------------------------------------------------------- */

.resumo .cartao {
  display: block;
  color: inherit;
  transition: border-color 0.15s, background 0.15s;
}

.resumo a.cartao:hover {
  border-color: var(--texto-fraco);
  text-decoration: none;
}

/* O recorte em uso ganha um traço na borda esquerda, na cor da situação */
.resumo .cartao.aceso {
  border-left-width: 2px;
}

.cartao.destaque strong {
  color: var(--destaque);
}

.cartao.destaque.aceso {
  border-left-color: var(--destaque);
}

.cartao.em_analise.aceso {
  border-left-color: var(--atencao);
}

.cartao.contratado strong {
  color: var(--ok);
}

.cartao.contratado.aceso {
  border-left-color: var(--ok);
}

.cartao.declinado.aceso {
  border-left-color: var(--perigo);
}

/* ---------------------------------------------------------------------
   Selo de situação na linha da lista
   --------------------------------------------------------------------- */

.selo-situacao {
  margin-left: 6px;
  padding: 1px 8px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  vertical-align: middle;
  white-space: nowrap;
}

.selo-situacao.contratado {
  color: var(--ok);
}

.selo-situacao.declinado {
  color: var(--texto-fraco);
}

/* Botões de situação, na ficha aberta */
.opcoes button.s-em_analise.atual {
  border-color: var(--atencao);
  background: var(--atencao-fundo);
  color: var(--atencao);
}

.opcoes button.s-contratado.atual {
  border-color: var(--ok);
  background: var(--ok-fundo);
  color: var(--ok);
}

.opcoes button.s-declinado.atual {
  border-color: var(--perigo);
  background: var(--perigo-fundo);
  color: var(--perigo);
}

/* Sugestões da busca */
.sugestao-valor.contratado {
  color: var(--ok);
}

.sugestao-valor.declinado {
  color: var(--texto-fraco);
  font-style: italic;
}

/* ---------------------------------------------------------------------
   Histórico temporada a temporada
   --------------------------------------------------------------------- */

.bloco-historico {
  margin-top: 20px;
}

.historico {
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--superficie);
  overflow-x: auto;
}

.historico table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.historico th {
  padding: 8px 12px;
  border-bottom: 1px solid var(--borda);
  background: var(--fundo-2);
  color: var(--texto-fraco);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

.historico td {
  padding: 7px 12px;
  border-bottom: 1px solid var(--borda-suave);
}

.historico tbody tr:last-child td {
  border-bottom: 0;
}

.historico .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  width: 46px;
}

.historico .temp {
  color: var(--texto-suave);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Linha de categoria de base: recuada e apagada, porque acompanha a
   temporada de cima e não entra no total do rodapé. */
.historico tr.base td {
  color: var(--texto-fraco);
}

.historico tr.base td:nth-child(2) {
  padding-left: 26px;
}

.hist-pais {
  display: inline-block;
  min-width: 22px;
  margin-right: 6px;
  padding: 0 4px;
  border-radius: 3px;
  background: var(--fundo-2);
  color: var(--texto-fraco);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: center;
  text-transform: uppercase;
  vertical-align: middle;
  /* Nomes de país inteiros ("Inglaterra") ficariam do tamanho da coluna */
  max-width: 64px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hist-categoria {
  margin-left: 4px;
  color: var(--texto-fraco);
  font-size: 11px;
}

.historico tfoot td {
  padding: 9px 12px;
  border-top: 1px solid var(--borda);
  background: var(--fundo-2);
  color: var(--texto);
  font-weight: 700;
}

.historico tfoot .temp,
.historico tfoot td:nth-child(2) {
  color: var(--texto-suave);
  font-weight: 600;
}

.hist-nota {
  margin: 8px 0 0;
  color: var(--texto-fraco);
  font-size: 11.5px;
}

/* Resumo somado, mostrado nas fichas que não estão em foco */
.carreira-resumo {
  margin: 0;
  padding: 11px 13px;
  border: 1px solid var(--borda);
  border-left: 2px solid var(--destaque);
  border-radius: var(--raio);
  background: var(--superficie);
  font-size: 13.5px;
}

.carreira-resumo strong {
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.carreira-resumo .menor {
  display: block;
  margin-top: 2px;
}

@media (max-width: 560px) {
  .historico td,
  .historico th {
    padding-left: 8px;
    padding-right: 8px;
  }

  .hist-pais {
    display: none;
  }
}

/* =====================================================================
   Acabamento: cantos mais macios e movimento mais gentil
   ---------------------------------------------------------------------
   Só forma e tempo. A paleta é a mesma — o verde continua aparecendo nos
   mesmos três lugares de antes.

   A curva é a mesma em tudo: começa rápido e desacelera no fim, como coisa
   que tem peso. Movimento linear é o que faz interface parecer barata.
   ===================================================================== */

:root {
  --curva: cubic-bezier(0.22, 0.61, 0.36, 1);
  --rapido: 0.16s;
  --calmo: 0.28s;

  /* Cantos mais redondos que os 6px de antes */
  --raio: 10px;
  --raio-grande: 16px;
}

/* ---------------------------------------------------------------------
   Botões
   --------------------------------------------------------------------- */

.botao {
  padding: 9px 17px;
  border-radius: 10px;
  transition:
    background var(--rapido) var(--curva),
    border-color var(--rapido) var(--curva),
    color var(--rapido) var(--curva),
    transform var(--rapido) var(--curva),
    box-shadow var(--calmo) var(--curva);
}

/* Sobe 1px e ganha um halo na cor do próprio botão. Sem sombra preta:
   num painel escuro ela não aparece, só suja. */
.botao:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px var(--destaque-fundo);
}

/* Ao clicar volta ao lugar — o botão "afunda" de novo */
.botao:active {
  transform: translateY(0);
  transition-duration: 0.06s;
}

.botao.vazado:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

.botao.perigo:hover {
  box-shadow: 0 4px 14px var(--perigo-fundo);
}

.botao-lateral {
  border-radius: 12px;
  padding: 12px 16px;
  transition:
    background var(--rapido) var(--curva),
    transform var(--rapido) var(--curva),
    box-shadow var(--calmo) var(--curva);
}

.botao-lateral:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px var(--destaque-fundo);
}

.botao-lateral:active {
  transform: translateY(0);
}

.botao-icone {
  border-radius: 10px;
  transition:
    background var(--rapido) var(--curva),
    color var(--rapido) var(--curva),
    border-color var(--rapido) var(--curva),
    transform var(--rapido) var(--curva);
}

.botao-icone:hover {
  transform: translateY(-1px);
}

/* ---------------------------------------------------------------------
   Itens da lateral
   --------------------------------------------------------------------- */

.lat-item {
  margin-right: 6px;
  padding: 10px 12px;
  border-radius: 0 10px 10px 0;
  transition:
    background var(--rapido) var(--curva),
    color var(--rapido) var(--curva),
    border-color var(--rapido) var(--curva),
    padding-left var(--rapido) var(--curva);
}

.lat-item:hover {
  background: var(--superficie-2);
  /* Anda 2px para a direita ao passar o mouse: reação sem mudar de tamanho */
  padding-left: 14px;
}

.lat-item.ativo {
  background: var(--destaque-fundo);
}

/* ---------------------------------------------------------------------
   Cartões, listas e caixas
   --------------------------------------------------------------------- */

.cartao,
.caixa,
.bloco-form,
.lista,
.historico,
.proposta,
.caixa-ogol,
.boas-vindas,
.vaga-linha,
.carreira-resumo {
  border-radius: var(--raio-grande);
}

.resumo .cartao {
  padding: 16px 18px;
  transition:
    border-color var(--rapido) var(--curva),
    transform var(--rapido) var(--curva),
    box-shadow var(--calmo) var(--curva);
}

.resumo a.cartao:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
}

.cartao strong {
  font-size: 26px;
  letter-spacing: -0.02em;
}

/* A ficha abre e fecha sem pulo: o fundo do cabeçalho acompanha */
.ficha > summary {
  transition: background var(--calmo) var(--curva);
}

.ficha:first-child > summary {
  border-radius: var(--raio-grande) var(--raio-grande) 0 0;
}

.ficha:last-child:not([open]) > summary {
  border-radius: 0 0 var(--raio-grande) var(--raio-grande);
}

/* ---------------------------------------------------------------------
   Campos
   --------------------------------------------------------------------- */

.campo input[type='text'],
.campo input[type='tel'],
.campo input[type='date'],
.campo input[type='number'],
.campo input[type='password'],
.campo textarea,
.campo input[type='file'],
.campo-prefixo,
.marcador,
.caixa input,
.linha-acao input,
.ogol-campo input,
.campo-login input,
.selecao,
.selecao-gatilho,
.vaga-numero,
.custo-total {
  border-radius: 10px;
  transition:
    border-color var(--rapido) var(--curva),
    box-shadow var(--calmo) var(--curva),
    background var(--rapido) var(--curva);
}

.doc,
.aviso,
.faixa-foco,
.bloco-observacao,
.caixa-duplicado,
.lista-duplicados li,
.dialogo,
.sugestoes,
.selecao-lista {
  border-radius: var(--raio);
}

/* ---------------------------------------------------------------------
   Botões de situação e abas
   --------------------------------------------------------------------- */

.opcoes button,
.aba {
  transition:
    background var(--rapido) var(--curva),
    border-color var(--rapido) var(--curva),
    color var(--rapido) var(--curva),
    transform var(--rapido) var(--curva);
}

.opcoes button:hover,
.aba:hover {
  transform: translateY(-1px);
}

.opcoes button:active {
  transform: translateY(0);
}

/* Enquanto a troca de situação está indo ao servidor, o grupo fica meio
   apagado e não aceita novo clique — sem trocar nada de lugar. */
.opcoes.salvando {
  opacity: 0.55;
  pointer-events: none;
}

/* ---------------------------------------------------------------------
   Aparições
   --------------------------------------------------------------------- */

@keyframes surgir {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.sugestoes:not([hidden]),
.selecao-lista:not([hidden]) {
  animation: surgir var(--rapido) var(--curva);
}

@keyframes subir {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.dialogo {
  animation: subir var(--calmo) var(--curva);
}

.fundo-dialogo {
  animation: aparecer var(--rapido) var(--curva);
}

@keyframes aparecer {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* O conteúdo da ficha desliza para baixo ao abrir, em vez de aparecer seco */
.ficha[open] > .detalhe {
  animation: surgir var(--calmo) var(--curva);
}

/* ---------------------------------------------------------------------
   Campo de futebol e vagas
   --------------------------------------------------------------------- */

.vaga-camisa {
  transition:
    border-color var(--rapido) var(--curva),
    background var(--rapido) var(--curva),
    color var(--rapido) var(--curva),
    transform var(--rapido) var(--curva);
}

.vaga:hover .vaga-camisa {
  transform: scale(1.12);
}

.vaga-linha {
  transition: border-color var(--rapido) var(--curva);
}

/* ---------------------------------------------------------------------
   Foto do atleta
   --------------------------------------------------------------------- */

.atleta-foto,
.ogol-foto {
  border-radius: 12px;
  transition: transform var(--calmo) var(--curva);
}

.atleta-foto {
  border-radius: 50%;
}

.ficha > summary:hover .atleta-foto {
  transform: scale(1.06);
}

/* Quem prefere menos movimento continua sem nenhum — a regra global de
   prefers-reduced-motion já corta transição e animação de tudo. */

/* =====================================================================
   Cartões, tipografia e respiro
   ---------------------------------------------------------------------
   Estrutura tirada dos painéis de referência; cores, as mesmas de sempre.
   O que muda: contêiner mais arredondado, ícone em quadrado suave, número
   grande com espaçamento apertado, e um único cartão preenchido por vez.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Cartões de resumo
   --------------------------------------------------------------------- */

.resumo {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}

.resumo .cartao {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 136px;
  padding: 18px 20px 20px;
  border-radius: 18px;
}

/* O ícone vem primeiro na tela, mas por último no HTML: assim o leitor de
   tela ouve "Em análise, 11" antes da decoração, e não o contrário. */
.cartao-icone {
  order: -1;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: var(--fundo-2);
  color: var(--texto-suave);
  transition: background var(--rapido) var(--curva), color var(--rapido) var(--curva);
}

.cartao-icone .icone {
  width: 20px;
  height: 20px;
}

.cartao-texto {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-top: auto;
}

.cartao-texto span {
  color: var(--texto-suave);
  font-size: 12.5px;
  font-weight: 500;
}

.cartao-texto strong {
  font-size: 30px;
  font-weight: 750;
  line-height: 1.05;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
}

.cartao-texto small {
  margin-top: 3px;
  color: var(--texto-fraco);
  font-size: 11.5px;
}

/* Um cartão preenchido por vez — o recorte em uso. É ele que diz onde você
   está, e por isso não precisa de borda colorida além do preenchimento. */
.resumo .cartao.aceso {
  border-color: var(--destaque);
  background: var(--destaque-cheio);
  color: var(--destaque-texto);
}

.resumo .cartao.aceso .cartao-texto span,
.resumo .cartao.aceso .cartao-texto small {
  color: var(--destaque-texto);
  opacity: 0.72;
}

.resumo .cartao.aceso .cartao-icone {
  /* Vidro sobre o verde, em vez de uma segunda cor */
  background: rgba(0, 0, 0, 0.14);
  color: var(--destaque-texto);
}

.resumo a.cartao:hover .cartao-icone {
  background: var(--superficie-2);
  color: var(--texto);
}

.resumo a.cartao.aceso:hover .cartao-icone {
  background: rgba(0, 0, 0, 0.2);
  color: var(--destaque-texto);
}

/* A cor de cada situação some quando o cartão está preenchido: ali o fundo
   já é a cor. Fora dele, fica só no número. */
.cartao.contratado:not(.aceso) .cartao-texto strong {
  color: var(--ok);
}

.cartao.declinado:not(.aceso) .cartao-texto strong {
  color: var(--texto-suave);
}

.cartao.destaque:not(.aceso) {
  border-left-width: 1px;
}

/* ---------------------------------------------------------------------
   Tipografia
   --------------------------------------------------------------------- */

.topo-titulo strong {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.titulo-secao,
.bloco-titulo h2,
.ogol-cabeca h2,
.caixa-duplicado h2 {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.025em;
}

.detalhe h3,
.lat-titulo {
  font-size: 10.5px;
  letter-spacing: 0.1em;
}

.nome {
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -0.015em;
}

.ogol-dados h3 {
  font-size: 21px;
  font-weight: 750;
  letter-spacing: -0.03em;
}

.ogol-numeros strong,
.proposta-total strong,
.custo-total,
.lat-total strong {
  letter-spacing: -0.025em;
}

.lat-total strong {
  font-size: 17px;
  font-weight: 750;
}

/* ---------------------------------------------------------------------
   Respiro
   --------------------------------------------------------------------- */

main {
  padding: 26px 30px 70px;
}

.bloco-form {
  padding: 22px 24px 24px;
  border-radius: 18px;
}

.lista {
  border-radius: 18px;
}

.cabecalho-lista,
.ficha > summary {
  padding: 14px 20px;
}

.detalhe {
  padding: 22px 20px 26px;
}

.caixa-ogol {
  padding: 30px 30px 24px;
  border-radius: 18px;
}

.boas-vindas {
  padding: 18px 46px 18px 20px;
  border-radius: 18px;
}

/* ---------------------------------------------------------------------
   Lateral: seções nomeadas e item ativo em pílula
   --------------------------------------------------------------------- */

.lateral {
  padding: 20px 14px 18px;
}

.lat-item {
  margin-right: 0;
  padding: 10px 14px;
  border-left: 0;
  border-radius: 12px;
}

.lat-item:hover {
  padding-left: 14px;
  background: var(--superficie-2);
}

/* Pílula inteira no ativo, no lugar do traço na borda */
.lat-item.ativo {
  background: var(--destaque-fundo);
  color: var(--destaque);
}

.lat-item.ativo .icone {
  color: var(--destaque);
}

.lat-resumo {
  margin-top: auto;
  padding: 16px 14px 6px;
}

/* ---------------------------------------------------------------------
   Painéis internos
   --------------------------------------------------------------------- */

.proposta,
.historico,
.carreira-resumo,
.bloco-observacao {
  border-radius: 14px;
}

.vaga-linha {
  border-radius: 12px;
}

.campo-futebol {
  border-radius: 18px;
}

@media (max-width: 560px) {
  .resumo {
    grid-template-columns: repeat(2, 1fr);
  }

  .resumo .cartao {
    min-height: 118px;
    padding: 14px 15px 16px;
  }

  .cartao-texto strong {
    font-size: 25px;
  }

  main {
    padding: 18px 14px 60px;
  }
}

/* =====================================================================
   Tela de login
   ---------------------------------------------------------------------
   Sem moldura de cartão: a coluna de conteúdo flutua sobre o fundo, e a
   profundidade vem de dois brilhos muito fracos nos cantos, não de borda.
   Cores, as mesmas — o verde só no botão.
   ===================================================================== */

.pagina-login {
  position: relative;
  overflow: hidden;
  background: var(--fundo);
}

/* Dois halos difusos: um verde no alto à esquerda, um neutro embaixo à
   direita. Ficam num pseudo-elemento para não exigir marcação extra. */
.pagina-login::before,
.pagina-login::after {
  content: '';
  position: absolute;
  z-index: 0;
  width: 60vmax;
  height: 60vmax;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
}

.pagina-login::before {
  top: -28vmax;
  left: -22vmax;
  background: var(--destaque-cheio);
  opacity: 0.07;
}

.pagina-login::after {
  right: -26vmax;
  bottom: -30vmax;
  background: var(--texto);
  opacity: 0.045;
}

.tela-login {
  position: relative;
  z-index: 1;
  max-width: 372px;
}

.cartao-login {
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}

/* Escudo dentro de um quadrado macio, como o ícone da referência */
.logo-login {
  width: 68px;
  height: 68px;
  margin: 0 auto 22px;
  padding: 13px;
  border: 1px solid var(--borda);
  border-radius: 20px;
  background: var(--superficie);
  object-fit: contain;
}

.cartao-login h1 {
  font-size: 27px;
  font-weight: 750;
  letter-spacing: -0.035em;
}

.cartao-login .sub {
  margin: 9px 0 28px;
  color: var(--texto-suave);
  font-size: 14px;
}

.form-login {
  gap: 12px;
}

/* Campos altos e bem arredondados, com o ícone dentro */
.campo-login input {
  padding: 15px 44px 15px 42px;
  border-radius: 13px;
  background: var(--superficie);
  font-size: 14.5px;
}

.campo-login input::placeholder {
  color: var(--texto-fraco);
}

.campo-login input:focus {
  background: var(--superficie-2);
}

.campo-icone {
  left: 15px;
}

.ver-senha {
  right: 10px;
}

.botao.entrar {
  margin-top: 6px;
  padding: 15px;
  border-radius: 13px;
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.form-login .aviso {
  border-radius: 11px;
  font-size: 13px;
}

.rodape-login {
  margin-top: 26px;
  color: var(--texto-fraco);
  font-size: 11.5px;
  line-height: 1.6;
}

/* O botão de tema some do canto: na tela de login ele é ruído */
.tema-login {
  top: 20px;
  right: 20px;
  z-index: 2;
  opacity: 0.5;
  transition: opacity var(--rapido) var(--curva);
}

.tema-login:hover {
  opacity: 1;
}

/* ---------------------------------------------------------------------
   Correção: o número dentro do cartão preenchido

   Regras anteriores pintam o número na cor da situação (`.cartao.destaque
   strong` em verde, `.cartao.contratado strong` em verde). No cartão que
   está preenchido, o fundo já é essa cor — e o número sumia dentro dela.

   Aqui o preenchido volta a mandar na cor de tudo que está dentro dele.
   --------------------------------------------------------------------- */

.resumo .cartao.aceso .cartao-texto strong,
.resumo .cartao.aceso .cartao-texto span,
.resumo .cartao.aceso .cartao-texto small {
  color: var(--destaque-texto);
}

/* O rótulo e a nota ficam um pouco recuados; o número, cheio */
.resumo .cartao.aceso .cartao-texto span,
.resumo .cartao.aceso .cartao-texto small {
  opacity: 0.72;
}

.resumo .cartao.aceso .cartao-texto strong {
  opacity: 1;
}

/* ---------------------------------------------------------------------
   Correção: centralizar o login

   A regra `main { padding: 26px 30px 70px }` vale para o painel inteiro, e
   o <main class="tela-login"> herdava esses 70px embaixo. Com o bloco
   centralizado, esse padding deslocava tudo do meio da tela.
   --------------------------------------------------------------------- */

.pagina-login {
  display: grid;
  place-items: center;
  /* dvh, e não vh: no celular a barra do navegador entra na conta do vh e o
     conteúdo fica torto quando ela aparece ou some */
  min-height: 100dvh;
  padding: 24px;
}

main.tela-login {
  padding: 0;
  margin: 0;
  width: 100%;
}

/* ---------------------------------------------------------------------
   Lateral: item ativo encostado na borda

   Forma tirada da referência: a pílula do item ativo vai até a borda direita
   da coluna e se funde com o fundo do conteúdo, como se aquele item fosse um
   recorte aberto na lateral. Cantos arredondados só à esquerda.

   Na referência a coluna é verde e a pílula é clara. Aqui é o contrário: a
   coluna é escura, e a pílula usa o fundo da página — mesma leitura, paleta
   nossa. O verde entra só no texto, no ícone e num traço fino à esquerda.
   --------------------------------------------------------------------- */

/* A nav fura o padding da coluna para os itens alcançarem a borda */
.lat-nav {
  margin-right: -14px;
}

.lat-item {
  position: relative;
  margin-right: 0;
  padding: 11px 16px 11px 14px;
  border-radius: 12px 0 0 12px;
  transition:
    background var(--rapido) var(--curva),
    color var(--rapido) var(--curva);
}

.lat-item:hover {
  padding-left: 14px;
  background: var(--superficie-2);
}

.lat-item.ativo,
.lat-item.ativo:hover {
  /* O fundo da página, não uma cor nova: é isso que faz a pílula parecer
     continuar dentro do conteúdo */
  background: var(--fundo);
  color: var(--destaque);
  font-weight: 620;
}

/* Traço fino na borda esquerda do item ativo */
.lat-item.ativo::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  bottom: 9px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--destaque-cheio);
}

.lat-item.ativo .icone {
  color: var(--destaque);
}

.lat-item.ativo .lat-contagem {
  color: var(--destaque);
  opacity: 0.75;
}

/* Cantos casando com a pílula: quando o item ativo é o primeiro ou o último,
   o arredondamento externo acompanha em vez de cortar reto. */
.lat-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* No celular a coluna é uma gaveta flutuante e não tem borda para encostar:
   ali a pílula volta a ser fechada dos dois lados. */
@media (max-width: 980px) {
  .lat-nav {
    margin-right: 0;
  }

  .lat-item {
    border-radius: 12px;
  }
}

/* ---------------------------------------------------------------------
   Correção: o ícone dentro do cartão preenchido

   Antes o quadrado do ícone era preto translúcido sobre o verde. Sobre o
   verde neon isso vira um borrão escuro, e o ícone — quase preto — some
   dentro dele.

   Agora o quadrado é branco e o ícone volta a ser verde. Duas cores que já
   existem, e contraste suficiente para o desenho aparecer.
   --------------------------------------------------------------------- */

.resumo .cartao.aceso .cartao-icone,
.resumo a.cartao.aceso:hover .cartao-icone {
  background: #fff;
  color: var(--destaque);
}

/* No tema claro o preenchido é verde escuro; ali o branco continua servindo,
   e o ícone acompanha a mesma cor de fundo do cartão. */
:root[data-tema='claro'] .resumo .cartao.aceso .cartao-icone,
:root[data-tema='claro'] .resumo a.cartao.aceso:hover .cartao-icone {
  background: #fff;
  color: var(--destaque);
}

/* Traço um pouco mais grosso: dentro de um quadrado pequeno, 1.7px de linha
   fica fino demais para o desenho se ler. */
.cartao-icone .icone {
  width: 21px;
  height: 21px;
  stroke-width: 2;
}

/* ---------------------------------------------------------------------
   Login: posição vertical

   Centro exato deixa o bloco baixo demais: o olho lê o meio de uma tela como
   um ponto acima do centro geométrico, e numa página com pouco conteúdo a
   diferença salta. Então o bloco é ancorado no topo, com um respiro que
   cresce junto com a altura da janela.

   O clamp segura os dois extremos: 48px de folga mínima em tela baixa (ou
   com teclado aberto no celular) e 132px de teto em monitor grande, para não
   descer de novo.
   --------------------------------------------------------------------- */

.pagina-login {
  align-items: start;
  padding-top: clamp(48px, 13vh, 132px);
  padding-bottom: 40px;
}

/* ---------------------------------------------------------------------
   Correção: alinhamento do ícone no cartão

   `.cartao span { display: block }` é uma regra antiga, e a especificidade
   dela (classe + tipo) é maior que a de `.cartao-icone` (só classe). O
   `display: grid` que centralizava o ícone nunca chegou a valer — o quadrado
   virava um bloco e o desenho encostava no canto.

   Duas classes na frente resolvem sem precisar mexer na regra antiga, que
   ainda serve aos cartões da tela de registros.
   --------------------------------------------------------------------- */

.resumo .cartao .cartao-icone {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 13px;
  font-size: 0; /* mata o espaço em branco entre o <span> e o <svg> */
}

.resumo .cartao .cartao-icone .icone {
  display: block;
  width: 21px;
  height: 21px;
  stroke-width: 2;
}

/* ---------------------------------------------------------------------
   Cartão preenchido: quadrado do ícone em preto

   Preto sólido no lugar do branco. Sobre o verde neon o contraste é maior
   que o do branco, e o quadrado passa a repetir o preto do resto do painel
   em vez de introduzir uma cor que só existe ali.
   --------------------------------------------------------------------- */

.resumo .cartao.aceso .cartao-icone,
.resumo a.cartao.aceso:hover .cartao-icone,
:root[data-tema='claro'] .resumo .cartao.aceso .cartao-icone,
:root[data-tema='claro'] .resumo a.cartao.aceso:hover .cartao-icone {
  background: var(--fundo);
  color: var(--destaque);
}

/* ---------------------------------------------------------------------
   Botão esperando resposta

   Buscar no ogol leva alguns segundos. O botão fica apagado, com o cursor
   de espera, e uma barrinha atravessa ele — movimento suficiente para dizer
   "está indo" sem prometer uma porcentagem que não existe.
   --------------------------------------------------------------------- */

.botao.esperando {
  position: relative;
  overflow: hidden;
  cursor: wait;
  opacity: 0.75;
  pointer-events: none;
}

.botao.esperando::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 40%;
  background: currentColor;
  opacity: 0.55;
  animation: atravessa 1.1s var(--curva) infinite;
}

@keyframes atravessa {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(350%);
  }
}

/* ---------------------------------------------------------------------
   Barra de posições

   Segundo nível de filtro, abaixo dos cartões. Sublinhado em vez de pílula:
   as pílulas já são a forma dos cartões acima, e repeti-las faria os dois
   níveis parecerem o mesmo. O sublinhado deixa claro que este é o menor.
   --------------------------------------------------------------------- */

.abas-posicao {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 4px;
  margin: -6px 0 18px;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--borda-suave);
}

.aba-posicao {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px 10px;
  color: var(--texto-suave);
  font-size: 12.5px;
  font-weight: 550;
  white-space: nowrap;
  transition: color var(--rapido) var(--curva);
}

.aba-posicao:hover {
  color: var(--texto);
  text-decoration: none;
}

.aba-posicao.ativa {
  color: var(--texto);
  font-weight: 650;
}

/* O traço fica na borda da barra, não embaixo do texto: assim ele encosta
   na linha cinza e os dois viram uma coisa só. */
.aba-posicao.ativa::after {
  content: '';
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: -3px;
  height: 2px;
  border-radius: 2px;
  background: var(--destaque-cheio);
}

.aba-posicao .aba-numero {
  padding: 0 6px;
  border-radius: 999px;
  background: var(--fundo-2);
  color: var(--texto-fraco);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.aba-posicao.ativa .aba-numero {
  color: var(--destaque);
}

@media (max-width: 700px) {
  /* Muitas posições no celular viram três linhas de abas; melhor rolar */
  .abas-posicao {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .abas-posicao::-webkit-scrollbar {
    display: none;
  }
}

/* ---------------------------------------------------------------------
   Recortes dos times

   Três botões largos no topo da aba Times. Maiores que as abas de posição
   porque são o primeiro nível daquela tela — o equivalente aos cartões da
   lista de inscrições, só que sem número em destaque, já que aqui o que
   importa é o recorte e não a quantidade.
   --------------------------------------------------------------------- */

.abas-recorte {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}

.aba-recorte {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--borda);
  border-radius: 14px;
  background: var(--superficie);
  color: var(--texto-suave);
  font-size: 13.5px;
  font-weight: 600;
  transition:
    border-color var(--rapido) var(--curva),
    background var(--rapido) var(--curva),
    color var(--rapido) var(--curva),
    transform var(--rapido) var(--curva);
}

.aba-recorte:hover {
  transform: translateY(-1px);
  border-color: var(--texto-fraco);
  color: var(--texto);
  text-decoration: none;
}

.aba-recorte .icone {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--texto-fraco);
}

.aba-recorte span:not(.aba-numero) {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.aba-recorte .aba-numero {
  flex: none;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--fundo-2);
  color: var(--texto-fraco);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}

/* O recorte aberto é o único preenchido, como o cartão da lista */
.aba-recorte.ativa {
  border-color: var(--destaque);
  background: var(--destaque-cheio);
  color: var(--destaque-texto);
}

.aba-recorte.ativa .icone {
  color: var(--destaque-texto);
}

.aba-recorte.ativa .aba-numero {
  background: var(--fundo);
  color: var(--destaque);
}

/* Botões de situação do time, no cabeçalho */
.opcoes button.s-aprovado.atual {
  border-color: var(--ok);
  background: var(--ok-fundo);
  color: var(--ok);
}

@media (max-width: 560px) {
  .abas-recorte {
    grid-template-columns: 1fr;
  }
}

/* =====================================================================
   Escudo dos clubes no histórico
   ---------------------------------------------------------------------
   A tabela do ogol só traz a bandeira do país; o escudo vem de outro
   ponto da mesma página, casado pelo número da equipe. Quando o clube é
   pequeno demais para ter escudo lá, a sigla do país volta ao lugar dele.

   Os dois têm a mesma largura de propósito: sem isso, cada linha começaria
   o nome do clube numa coluna diferente conforme tenha escudo ou não.
   ===================================================================== */

.hist-escudo {
  width: 20px;
  height: 20px;
  margin-right: 7px;
  object-fit: contain;
  vertical-align: -5px;
}

/* Reserva o espaço sem desenhar nada, para o nome não pular */
.hist-escudo.vazio {
  display: inline-block;
}

.historico .hist-pais {
  display: inline-block;
  width: 20px;
  margin-right: 7px;
  text-align: center;
  vertical-align: -1px;
}

/* Escudo de clube costuma ser escuro com contorno claro. No tema claro ele
   se perde no fundo branco, então ganha um respiro cinza atrás. */
:root[data-tema='claro'] .hist-escudo:not(.vazio) {
  border-radius: 4px;
  background: var(--fundo-2);
}

/* Posição sem ninguém: a aba continua clicável, mas apagada. O contorno some
   para o olho não confundir "existe e está vazia" com "existe e tem gente". */
.aba-posicao.vazia:not(.ativa) {
  color: var(--texto-fraco);
  opacity: 0.62;
}

/* =====================================================================
   Financeiro
   ---------------------------------------------------------------------
   Uma tabela de dinheiro se lê pela coluna, não pela linha: o olho desce
   comparando valores. Por isso os números são tabulares (todo algarismo
   com a mesma largura, as vírgulas alinhadas em coluna) e alinhados à
   direita, e o nome do atleta é a única coluna à esquerda.
   ===================================================================== */

.financeiro-resumo .cartao-texto strong {
  /* Dinheiro é mais comprido que contagem: "R$ 148.500,00" não cabe no
     corpo de 30px usado pelos cartões de número. */
  font-size: 23px;
}

.fin-linha {
  display: grid;
  grid-template-columns: minmax(0, 1fr) repeat(4, minmax(88px, 128px));
  gap: 12px;
  align-items: center;
  padding: 12px 20px;
  border-top: 1px solid var(--borda);
}

.cabecalho-lista.fin-linha {
  border-top: 0;
}

.tabela-financeiro .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.fin-atleta {
  display: flex;
  gap: 11px;
  align-items: center;
  min-width: 0;
}

.fin-foto {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  object-fit: cover;
  background: var(--fundo-2);
}

.fin-foto.vazia {
  display: block;
}

.fin-nome {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.fin-nome a {
  overflow: hidden;
  color: inherit;
  font-weight: 600;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fin-nome a:hover {
  color: var(--destaque);
}

.fin-nome small,
.fin-mensal small,
.fin-total small {
  display: block;
  color: var(--texto-fraco);
  font-size: 11.5px;
}

.fin-mensal {
  font-weight: 650;
}

/* A coluna anual é consequência da mensal, não uma segunda decisão. Fica
   mais apagada para não disputar a atenção com ela. */
.fin-anual {
  color: var(--texto-suave);
}

/* Ficha sem valor lançado: aparece, mas não pesa. Escondê-la faria a lista
   mentir sobre quantos atletas há no recorte. */
.fin-linha.sem-valor .num {
  color: var(--texto-fraco);
}

.fin-total {
  border-top: 1px solid var(--borda-forte, var(--borda));
  background: var(--fundo-2);
  font-weight: 700;
}

.fin-total .num {
  font-size: 15px;
}

.fin-total .fin-mensal {
  color: var(--destaque);
}

/* ---------------------------------------------------------------------
   Telas estreitas: a grade vira cartão
   ---------------------------------------------------------------------
   Cinco colunas não cabem num celular. Cada valor passa a ocupar sua
   própria linha, com o rótulo que estava no cabeçalho vindo do
   data-rotulo — sem ele, quatro números soltos não diriam qual é qual.
   --------------------------------------------------------------------- */

@media (max-width: 720px) {
  .cabecalho-lista.fin-linha {
    display: none;
  }

  .fin-linha {
    grid-template-columns: 1fr 1fr;
    row-gap: 8px;
    padding: 14px 15px;
  }

  .fin-atleta {
    grid-column: 1 / -1;
  }

  .tabela-financeiro .num {
    text-align: left;
  }

  .tabela-financeiro .num::before {
    content: attr(data-rotulo) ': ';
    color: var(--texto-fraco);
    font-weight: 500;
  }
}

/* =====================================================================
   Caixa de seleção do próprio site
   ---------------------------------------------------------------------
   O menu de um <select> vem do sistema operacional e não aceita CSS: no
   tema escuro ele abre branco, com a fonte do sistema. Aqui a lista é
   HTML comum, e por isso pode ter a cor, o canto e o movimento do resto
   do painel.

   O <select> de verdade continua embaixo, guardando o valor. As regras
   abaixo desenham a casca que fica por cima dele.
   ===================================================================== */

.selecao-bonita {
  position: relative;
  min-width: 150px;
}

/* O <select> real: presente, invisível, fora do caminho do mouse. */
.selecao-bonita > select {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
}

.selecao-gatilho {
  transition:
    border-color var(--rapido) var(--curva),
    background var(--rapido) var(--curva),
    box-shadow var(--rapido) var(--curva);
}

.selecao-valor {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A seta gira ao abrir — é ela que diz de onde a lista saiu. */
.selecao-gatilho::after {
  transition: transform var(--calmo) var(--curva), border-color var(--rapido) var(--curva);
}

.selecao-bonita.aberta .selecao-gatilho::after {
  border-color: var(--destaque);
  transform: translateY(1px) rotate(-135deg);
}

/* ---------------------------------------------------------------------
   A lista
   ---------------------------------------------------------------------
   Estado fechado escrito na própria classe, e não só no [hidden]: é dele
   que a animação parte. A lista aparece descendo alguns pixels e crescendo
   de 98% para 100% — movimento curto, o mesmo que o menu do sistema faria
   se pudesse ser desenhado aqui.
   --------------------------------------------------------------------- */

.selecao-lista {
  transform: translateY(-6px) scale(0.98);
  transform-origin: top center;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity var(--calmo) var(--curva),
    transform var(--calmo) var(--curva);
}

.selecao-bonita.aberta .selecao-lista {
  transform: none;
  opacity: 1;
  pointer-events: auto;
}

/* Cada opção entra logo depois da anterior, no atraso que o JS calculou.
   A cascata é curta de propósito: em quinze atletas ela viraria espera. */
.selecao-bonita.aberta .selecao-opcao {
  animation: opcao-entra var(--calmo) var(--curva) backwards;
  animation-delay: var(--atraso, 0ms);
}

@keyframes opcao-entra {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}

.selecao-opcao {
  transition: background var(--rapido) var(--curva), color var(--rapido) var(--curva);
}

/* O realce do teclado e o do mouse são o mesmo: a seta e o ponteiro
   apontam para a mesma linha, e duas cores diferentes só confundiriam. */
.selecao-opcao.marcada {
  background: var(--superficie-2);
}

.selecao-opcao.atual::after {
  content: '';
  float: right;
  width: 5px;
  height: 9px;
  margin-top: 4px;
  border-right: 2px solid var(--destaque);
  border-bottom: 2px solid var(--destaque);
  transform: rotate(45deg);
}

.selecao-opcao.desligada {
  color: var(--texto-fraco);
  cursor: default;
  opacity: 0.55;
}

.selecao-opcao.desligada:hover {
  background: none;
}

/* Quem pede menos movimento no sistema recebe a lista sem nenhum: ela
   aparece e some, sem deslizar. */
@media (prefers-reduced-motion: reduce) {
  .selecao-lista,
  .selecao-bonita.aberta .selecao-opcao {
    animation: none;
    transition: none;
    transform: none;
  }
}

/* =====================================================================
   Dica ao passar o mouse
   ---------------------------------------------------------------------
   O balão do atributo `title` é desenhado pelo navegador: fonte do
   sistema, fundo claro, canto reto. Este é HTML comum, com a cor e o
   canto do painel. Fica no fim do <body> e é posicionado pelo JS, para
   nunca ser cortado por um contêiner com overflow escondido.
   ===================================================================== */

.dica-balao {
  position: fixed;
  z-index: 90;
  max-width: 260px;
  padding: 7px 10px;
  border: 1px solid var(--borda);
  border-radius: 9px;
  background: var(--superficie-2);
  color: var(--texto);
  box-shadow: var(--sombra);
  font-size: 12px;
  line-height: 1.4;
  /* O balão não recebe mouse: chegar nele apagaria a dica do que está embaixo */
  pointer-events: none;
  opacity: 0;
  transform: translateY(3px);
  transition: opacity var(--rapido) var(--curva), transform var(--rapido) var(--curva);
}

/* Quando cai abaixo do elemento, o movimento de entrada inverte junto */
.dica-balao.para-baixo {
  transform: translateY(-3px);
}

.dica-balao.visivel {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .dica-balao {
    transform: none;
    transition: none;
  }
}

/* =====================================================================
   Barra lateral — segunda passada
   ---------------------------------------------------------------------
   A estrutura é a mesma de antes: coluna de 236px, nomes escritos, verde
   só onde precisa. O que muda é o acabamento.

   Três coisas, e o motivo de cada uma:

   1. O ícone ganhou uma pastilha. Solto, ele flutuava ao lado do texto e
      cada item começava numa coluna ligeiramente diferente. Na pastilha
      todos alinham, e o item aberto tem onde acender sem precisar pintar
      a linha inteira de verde.

   2. Os itens viraram blocos com um título curto por cima. "Registros"
      ficava colado em "Financeiro" como se fossem o mesmo assunto.

   3. O custo mensal ganhou um anel. Dois números empilhados não dizem se
      falta muito para fechar o elenco; a proporção diz.
   ===================================================================== */

.lateral {
  gap: 4px;
  padding: 16px 12px 14px;
}

/* ---------- ação principal ---------- */

.botao-lateral {
  justify-content: center;
  margin: 0 0 18px;
  padding: 12px 14px;
  border-radius: 12px;
  box-shadow: 0 6px 16px -8px var(--destaque);
  transition:
    background var(--rapido) var(--curva),
    transform var(--rapido) var(--curva),
    box-shadow var(--calmo) var(--curva);
}

.botao-lateral:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px -8px var(--destaque);
}

.botao-lateral:active {
  transform: translateY(0);
}

/* ---------- blocos ---------- */

.lat-bloco + .lat-bloco {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--borda-suave, var(--borda));
}

.lat-titulo {
  margin: 0 0 8px 12px;
  color: var(--texto-fraco);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ---------- item ---------- */

.lat-item {
  gap: 10px;
  margin-bottom: 2px;
  padding: 7px 10px;
  border-left: 0;
  border-radius: 11px;
  transition:
    background var(--rapido) var(--curva),
    color var(--rapido) var(--curva);
}

.lat-chip {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--fundo-2);
  color: var(--texto-suave);
  transition:
    background var(--rapido) var(--curva),
    color var(--rapido) var(--curva),
    transform var(--calmo) var(--curva);
}

.lat-chip .icone {
  width: 16px;
  height: 16px;
}

.lat-item:hover {
  background: var(--superficie-2);
  color: var(--texto);
}

.lat-item:hover .lat-chip {
  color: var(--texto);
  transform: translateY(-1px);
}

/* O item aberto: fundo suave na linha e verde só na pastilha. Verde na
   linha inteira competiria com o botão de cadastrar, que é a ação. */
.lat-item.ativo {
  background: var(--destaque-fundo);
  color: var(--texto);
  font-weight: 600;
}

.lat-item.ativo .lat-chip {
  background: var(--destaque-cheio);
  color: var(--destaque-texto);
}

.lat-item.ativo .lat-chip .icone {
  color: var(--destaque-texto);
}

.lat-contagem {
  padding: 1px 7px;
  border-radius: 8px;
  background: var(--fundo-2);
  font-size: 11px;
  font-weight: 600;
}

.lat-item.ativo .lat-contagem {
  background: rgba(1, 179, 14, 0.16);
  color: var(--destaque);
}

/* ---------- custo mensal, com anel ---------- */

.lat-resumo {
  margin-top: auto;
  padding: 14px;
  border: 1px solid var(--borda-suave, var(--borda));
  border-radius: 14px;
  background: var(--fundo-2);
}

.lat-anel-linha {
  display: flex;
  align-items: center;
  gap: 12px;
}

.lat-anel {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
}

.lat-anel svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* Começar às 12h, e não às 3h, que é onde o SVG começa a desenhar */
  transform: rotate(-90deg);
}

.lat-anel circle {
  fill: none;
  stroke-width: 4;
  stroke-linecap: round;
}

.anel-trilho {
  stroke: var(--superficie-2);
}

/* 2πr, com r = 16: 100,53. O traço cobre a fatia e o vão cobre o resto.
   Sem animação de desenho: a barra lateral é a parte da tela que não muda
   de uma página para a outra, e o anel se redesenhando a cada clique era o
   mesmo incômodo dos itens deslizando. */
.anel-fatia {
  stroke: var(--destaque);
  stroke-dasharray: 100.53;
  stroke-dashoffset: calc(100.53px - 100.53px * var(--fatia) / 100);
}

.lat-anel b {
  position: relative;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.lat-anel-texto {
  min-width: 0;
}

.lat-anel-texto .lat-titulo {
  margin: 0 0 2px;
}

.lat-anel-texto strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.lat-anel-texto small {
  color: var(--texto-fraco);
  font-size: 11px;
}

.lat-detalhe {
  margin: 10px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--borda-suave, var(--borda));
  color: var(--texto-suave);
  font-size: 11.5px;
}

/* A pendência virou link: ela sempre foi um pedido de ação, e antes era
   preciso adivinhar onde clicar para ver quais fichas são. */
.lat-alerta {
  display: block;
  margin-top: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  background: var(--superficie-2);
  color: var(--aviso, var(--texto-suave));
  font-size: 11.5px;
  transition: background var(--rapido) var(--curva);
}

.lat-alerta:hover {
  background: var(--superficie);
  text-decoration: none;
}

/* ---------- conta ---------- */

.lat-conta {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 10px;
  padding: 8px;
  border-radius: 12px;
  transition: background var(--rapido) var(--curva);
}

.lat-conta:hover {
  background: var(--superficie-2);
}

.lat-avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--destaque-fundo);
  color: var(--destaque);
  font-size: 13px;
  font-weight: 700;
}

.lat-conta-texto {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.lat-conta-texto strong {
  overflow: hidden;
  font-size: 12.5px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lat-conta-texto small {
  color: var(--texto-fraco);
  font-size: 10.5px;
}

.lat-conta-sair {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  color: var(--texto-fraco);
  transition: background var(--rapido) var(--curva), color var(--rapido) var(--curva);
}

.lat-conta-sair:hover {
  background: var(--fundo-2);
  color: var(--perigo);
}

/* ---------- entrada ----------
   A barra inteira não se anima ao abrir a página.

   Cada clique no menu é um carregamento novo, e a coluna refazia a entrada
   toda vez: cinco itens deslizando de novo para dizer o que já estava dito.
   Animação que se repete a cada navegação deixa de ser acabamento e vira
   espera — a barra é a parte da tela que não muda, e o que não muda não
   deve chamar atenção.

   Sobra o movimento onde ele informa: a pastilha da seção que acabou de
   abrir cresce do nada. É o único ponto da coluna que mudou de estado. */
.lat-item.ativo .lat-chip {
  animation: chip-acende 0.26s var(--curva);
}

@keyframes chip-acende {
  from {
    opacity: 0.4;
    transform: scale(0.82);
  }
}

@media (prefers-reduced-motion: reduce) {
  .lat-item.ativo .lat-chip {
    animation: none;
  }
}

/* Dois restos das versões anteriores da barra, vistos na tela montada:

   1. O traço verde na borda esquerda do item aberto. Ele existia quando o
      item não tinha fundo próprio; agora a pastilha verde já diz onde se
      está, e o traço ficava pendurado fora da pílula.
   2. O item ganhava padding-left maior no hover, e o texto pulava 4px para
      a direita a cada passagem do mouse. */

.lat-item.ativo::before {
  content: none;
}

.lat-item:hover {
  padding-left: 10px;
}

/* A pastilha do ícone vira círculo.
   Quadrado arredondado ao lado de um número redondo e de um avatar redondo
   era a única forma fora do conjunto — e no item aberto, onde ela é verde
   cheia, o canto aparecia. Todas viram círculo, não só a acesa: a forma
   diz "ícone", e não "está aberto". */
.lat-chip {
  border-radius: 50%;
}

/* A nota sobre o que cada site publica, no passo do link. Fica menor que o
   texto de cima: é ressalva, não instrução. */
.ogol-fontes {
  margin-top: 8px;
  color: var(--texto-fraco);
  font-size: 12.5px;
}

/* Bandeira do país e escudo do clube, ao lado do valor na ficha.
   A bandeira é deitada e o escudo é quadrado: os dois entram numa caixa da
   mesma largura, com object-fit contain, para as duas linhas começarem no
   mesmo lugar mesmo tendo desenhos de formatos diferentes. */
.selo-ficha {
  width: 20px;
  height: 15px;
  margin-right: 7px;
  object-fit: contain;
  vertical-align: -2px;
}

.ogol-lista dd {
  display: flex;
  align-items: center;
}

/* Um formulário no topo não deve empurrar os botões vizinhos: ele existe só
   para o POST ter onde ir. */
.acao-topo {
  display: contents;
}

/* A barra lateral não rola de lado.
   Quando a coluna fica alta demais e ganha a barra de rolagem vertical, ela
   consome ~16px da largura e o conteúdo passa a sobrar por 2px — o bastante
   para o navegador desenhar uma segunda barra, deitada, no pé do menu. Não há
   nada a alcançar rolando de lado num menu de largura fixa. */
.lateral {
  overflow-x: hidden;
}

/* Se um valor grande demais aparecer no custo mensal, ele encolhe em vez de
   empurrar a coluna. */
.lat-anel-linha,
.lat-anel-texto {
  min-width: 0;
}

.lat-anel-texto strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A barra vertical que sobra quando a coluna não cabe na tela fica fina e
   discreta: ela é do menu, não do conteúdo, e não precisa disputar atenção. */
.lateral {
  scrollbar-width: thin;
  scrollbar-color: var(--superficie-2) transparent;
}

.lateral::-webkit-scrollbar {
  width: 6px;
}

.lateral::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background: var(--superficie-2);
}

.lateral::-webkit-scrollbar-track {
  background: transparent;
}

/* Enquanto o recorte novo está a caminho, a lista fica um pouco apagada e
   não aceita clique. É pouco de propósito: a troca costuma levar menos de
   meio segundo, e um efeito forte para algo tão curto vira piscada. */
main.trocando {
  opacity: 0.55;
  pointer-events: none;
  transition: opacity var(--rapido) var(--curva);
}

/* =====================================================================
   Médias por jogo
   ---------------------------------------------------------------------
   Números de rendimento: gols por jogo, assistências por jogo e a soma
   dos dois. Aparecem no fim do histórico, no resumo de carreira e — só
   quando a lista está ordenada por eles — na linha de cada atleta.
   ===================================================================== */

.hist-medias,
.carreira-medias {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 0;
}

.hist-medias span,
.carreira-medias span {
  padding: 4px 9px;
  border: 1px solid var(--borda);
  border-radius: 999px;
  color: var(--texto-suave);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}

.hist-medias strong,
.carreira-medias strong {
  color: var(--texto);
  font-weight: 700;
}

/* A soma de gols e assistências é a que se olha primeiro: é o número que
   diz quanto o atleta pesa no ataque, sem separar quem terminou a jogada. */
.hist-medias .destaque,
.carreira-medias .destaque {
  border-color: var(--destaque);
  background: var(--destaque-fundo);
}

.hist-medias .destaque strong,
.carreira-medias .destaque strong {
  color: var(--destaque);
}

/* Média sobre poucos jogos continua na tela, mas avisada */
.hist-aviso {
  border-style: dashed !important;
  color: var(--texto-fraco) !important;
  cursor: help;
}

/* ---------------------------------------------------------------------
   O número que mandou na ordem, na linha da lista
   --------------------------------------------------------------------- */

.selo-medida {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--destaque-fundo);
  color: var(--destaque);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.selo-medida strong {
  font-weight: 700;
}

/* Pouca estrada: o número aparece apagado, e a ordenação já o colocou
   depois de quem tem carreira suficiente para a média valer. */
.selo-medida.incerta {
  background: var(--fundo-2);
  color: var(--texto-fraco);
  cursor: help;
}

/* =====================================================================
   Tema claro — o que só aparece nele
   ---------------------------------------------------------------------
   O painel nasceu escuro, e algumas peças foram desenhadas contando com
   fundo preto atrás. No claro elas somem ou perdem contraste. Cada regra
   abaixo conserta uma dessas, e nenhuma muda o tema escuro.
   ===================================================================== */

/* ---------------------------------------------------------------------
   O escudo do clube
   ---------------------------------------------------------------------
   logo.webp é branco com fundo transparente: no tema claro é branco sobre
   branco, some por inteiro. Em vez de trocar o arquivo — a marca é essa —,
   ele ganha um quadrado atrás, na cor do clube. Branco sobre verde é o
   mesmo contraste do escudo aplicado em camisa.
   --------------------------------------------------------------------- */

:root[data-tema='claro'] .marca-simbolo {
  box-sizing: content-box;
  padding: 5px;
  border-radius: 9px;
  background: var(--destaque-cheio);
}

:root[data-tema='claro'] .logo-login {
  border-color: var(--destaque);
  background: var(--destaque-cheio);
}

/* ---------------------------------------------------------------------
   O campo
   ---------------------------------------------------------------------
   As faixas de grama eram verde a 5% de opacidade sobre o fundo da página:
   no escuro isso dá um gramado discreto; no claro dá quase branco, e as
   linhas (meio, círculo, áreas) desaparecem junto com as vagas brancas.

   No claro o campo passa a ser verde de verdade, com as linhas em branco.
   É o desenho que todo mundo reconhece, e devolve o contraste para as
   marcas de vaga, que são claras.
   --------------------------------------------------------------------- */

:root[data-tema='claro'] .campo-futebol {
  border-color: #1d6b33;
  background:
    repeating-linear-gradient(
      to top,
      rgba(255, 255, 255, 0.06) 0 9.09%,
      rgba(0, 0, 0, 0.05) 9.09% 18.18%
    ),
    #2b8b45;
}

:root[data-tema='claro'] .campo-futebol .linhas span {
  border-color: rgba(255, 255, 255, 0.55);
}

/* O nome da posição, agora sobre grama: branco, com uma sombra curta para
   não sumir na faixa mais clara. */
:root[data-tema='claro'] .campo-futebol .vaga-nome {
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

:root[data-tema='claro'] .campo-futebol .vaga.ocupada .vaga-nome {
  color: #fff;
}

/* A marca da vaga vazia: branca e sólida sobre o gramado, em vez de
   tracejada sobre quase-branco. */
:root[data-tema='claro'] .campo-futebol .vaga-camisa {
  border-color: rgba(255, 255, 255, 0.75);
  background: rgba(255, 255, 255, 0.92);
  color: #1d6b33;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

:root[data-tema='claro'] .campo-futebol .vaga.ocupada .vaga-camisa {
  border-color: #0f100f;
  background: #0f100f;
  color: #fff;
}

:root[data-tema='claro'] .campo-futebol .vaga:hover .vaga-camisa {
  border-color: #0f100f;
  color: #0f100f;
}

:root[data-tema='claro'] .campo-futebol .vaga.ocupada:hover .vaga-camisa {
  color: #fff;
}

/* =====================================================================
   Ordenar por rendimento
   ---------------------------------------------------------------------
   As mesmas ordens que existem no seletor, mas à vista. O seletor tem
   treze opções; estas quatro são as que alguém procura ao abrir uma lista
   de atletas, e lá dentro ficavam no fim, atrás de uma rolagem.
   ===================================================================== */

.abas-rendimento {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin: 0 0 14px;
}

.rendimento-rotulo {
  margin-right: 3px;
  color: var(--texto-fraco);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.aba-rendimento {
  padding: 6px 12px;
  border: 1px solid var(--borda);
  border-radius: 999px;
  color: var(--texto-suave);
  font-size: 12.5px;
  transition:
    background var(--rapido) var(--curva),
    border-color var(--rapido) var(--curva),
    color var(--rapido) var(--curva);
}

.aba-rendimento:hover {
  border-color: var(--texto-fraco);
  color: var(--texto);
  text-decoration: none;
}

/* A ordem em uso fica cheia — e clicar nela de novo desliga, o que o
   preenchimento ajuda a sugerir: é um interruptor, não um destino. */
.aba-rendimento.ativa {
  border-color: var(--destaque);
  background: var(--destaque-cheio);
  color: var(--destaque-texto);
  font-weight: 600;
}

.aba-rendimento.ativa:hover {
  color: var(--destaque-texto);
}

/* O campo no tema escuro.
   Ele era o fundo da página com um verde a 5% por cima: lia-se como uma
   caixa vazia, não como um gramado, e as linhas quase não apareciam. Agora
   tem verde próprio — escuro o bastante para não brigar com o resto da tela,
   claro o bastante para as linhas brancas e as marcas de vaga se verem. */
:root:not([data-tema='claro']) .campo-futebol {
  border-color: #1c3a25;
  background:
    repeating-linear-gradient(
      to top,
      rgba(255, 255, 255, 0.035) 0 9.09%,
      rgba(0, 0, 0, 0.05) 9.09% 18.18%
    ),
    #102417;
}

:root:not([data-tema='claro']) .campo-futebol .linhas span {
  border-color: rgba(255, 255, 255, 0.32);
}

:root:not([data-tema='claro']) .campo-futebol .vaga-camisa {
  border-color: rgba(255, 255, 255, 0.35);
  background: rgba(10, 11, 10, 0.72);
  color: var(--texto-suave);
}

:root:not([data-tema='claro']) .campo-futebol .vaga-nome {
  color: var(--texto-suave);
}

:root:not([data-tema='claro']) .campo-futebol .vaga.ocupada .vaga-nome {
  color: #fff;
}

/* =====================================================================
   Botões preenchidos
   ---------------------------------------------------------------------
   Até aqui o painel usava três formas de botão: verde cheio para a ação
   principal, contorno vazado para as secundárias e contorno colorido para
   as de situação. O contorno pesa pouco na tela — de relance, um botão
   vazado parece um campo desabilitado, e o de excluir parecia um aviso.

   Agora todos são preenchidos. A hierarquia continua existindo, só que
   pela cor do preenchimento e não pela presença ou ausência de moldura:

     verde cheio   a ação principal (cadastrar, salvar, criar)
     cinza cheio   as secundárias (exportar, abrir no ogol, trocar)
     cor da situação   o estado em que a ficha ou o time está
     vermelho cheio    o que apaga

   O texto sobre cada preenchimento é escuro, como já era no verde: sobre
   cor saturada, preto se lê melhor que branco.
   ===================================================================== */

/* ---------- secundárias ---------- */

.botao.vazado {
  border-color: var(--superficie-2);
  background: var(--superficie-2);
  color: var(--texto);
}

.botao.vazado:hover {
  border-color: var(--borda);
  background: var(--borda);
  color: var(--texto);
}

/* ---------- destrutiva ---------- */

.botao.perigo {
  border-color: var(--perigo-cheio);
  background: var(--perigo-cheio);
  color: #fff;
  font-weight: 650;
}

.botao.perigo:hover {
  border-color: var(--perigo-cheio);
  background: #f03b33;
}

/* ---------- situação (fichas e times) ---------- */

.opcoes button {
  border-color: var(--superficie-2);
  background: var(--superficie-2);
  color: var(--texto-suave);
}

.opcoes button:hover {
  border-color: var(--borda);
  background: var(--borda);
  color: var(--texto);
}

/* A escolhida fica cheia da cor do estado. O ponto ao lado some: com o
   botão inteiro pintado, ele virou repetição. */
.opcoes button.atual,
.opcoes button.s-ativo.atual {
  border-color: var(--destaque);
  background: var(--destaque-cheio);
  color: var(--destaque-texto);
}

.opcoes button.s-em_analise.atual {
  border-color: var(--atencao);
  background: var(--atencao);
  color: #17130a;
}

.opcoes button.s-contratado.atual,
.opcoes button.s-aprovado.atual {
  border-color: var(--ok);
  background: var(--destaque-cheio);
  color: var(--destaque-texto);
}

.opcoes button.s-declinado.atual,
.opcoes button.s-inativo.atual {
  border-color: var(--perigo-cheio);
  background: var(--perigo-cheio);
  color: #fff;
}

.opcoes button.atual .ponto {
  background: currentColor;
  opacity: 0.55;
}

/* ---------- no tema claro, o mesmo raciocínio ----------
   As superfícies claras não bastam para um botão se destacar do cartão que
   está atrás dele, então as secundárias ganham um cinza um pouco mais
   presente que o fundo. */
/* `:not(.atual)` é essencial aqui: sem ele esta regra tem a mesma força das
   que pintam a situação escolhida, vem depois no arquivo e vence — o botão
   aceso voltava a ser cinza, e nada na tela dizia em que estado o time está. */
:root[data-tema='claro'] .botao.vazado,
:root[data-tema='claro'] .opcoes button:not(.atual) {
  border-color: var(--borda);
  background: var(--fundo-2);
  color: var(--texto);
}

:root[data-tema='claro'] .botao.vazado:hover,
:root[data-tema='claro'] .opcoes button:not(.atual):hover {
  border-color: var(--texto-fraco);
  background: var(--superficie-2);
}

:root[data-tema='claro'] .botao.perigo,
:root[data-tema='claro'] .opcoes button.s-declinado.atual,
:root[data-tema='claro'] .opcoes button.s-inativo.atual {
  color: #fff;
}

:root[data-tema='claro'] .opcoes button.s-em_analise.atual {
  color: #17130a;
}

/* O ícone do cartão aceso, em branco.
   Ele era verde dentro de um quadrado escuro — a única peça do cartão que
   não acompanhou o texto quando este virou branco. Agora o quadrado é um
   vidro escuro sobre o verde e o desenho é branco, igual ao número e ao
   rótulo que estão logo abaixo. */
.resumo .cartao.aceso .cartao-icone,
.resumo a.cartao.aceso:hover .cartao-icone,
:root[data-tema='claro'] .resumo .cartao.aceso .cartao-icone,
:root[data-tema='claro'] .resumo a.cartao.aceso:hover .cartao-icone {
  background: rgba(0, 0, 0, 0.22);
  color: #fff;
}

.resumo .cartao.aceso .cartao-icone .icone {
  color: #fff;
}

/* =====================================================================
   A linha de ações do time, alinhada
   ---------------------------------------------------------------------
   Três controles lado a lado — a caixa de formação, os botões de situação
   e o de excluir — e cada um vinha de um lugar diferente do CSS, com
   padding próprio. Resultado: três alturas na mesma linha, e a régua de
   baixo em três lugares.

   Em vez de acertar o padding de cada um (que volta a divergir no próximo
   ajuste), a linha passa a impor uma altura única. O padding vertical some;
   quem centraliza o conteúdo é o flex de cada peça, que todas já têm.
   ===================================================================== */

.time-acoes {
  align-items: center;
}

.time-acoes .selecao-gatilho,
.time-acoes .selecao-bonita > select,
.time-acoes .opcoes button,
.time-acoes .botao {
  height: 38px;
  padding-top: 0;
  padding-bottom: 0;
}

/* A caixa de formação não precisa de 150px: o conteúdo é "4-2-3-1" */
.time-acoes .selecao-bonita {
  min-width: 118px;
}

/* O rótulo "Formação" acompanha a mesma linha de base */
.time-acoes .rotulo {
  display: flex;
  align-items: center;
  height: 38px;
}

/* =====================================================================
   O cadastro, centrado
   ---------------------------------------------------------------------
   Tanto o passo do link quanto a ficha têm largura máxima — 720px e 1000px —
   e ficavam encostados à esquerda. Numa tela larga isso deixa metade do
   espaço vazio de um lado só, e o olho percorre a diagonal inteira entre o
   menu e o começo do formulário.

   Centrar não é enfeite aqui: é uma tela de digitar, uma coluna só, e a
   leitura desce reta. A barra de salvar acompanha porque está dentro do
   mesmo formulário.
   ===================================================================== */

.form-cadastro,
.caixa-ogol {
  margin-inline: auto;
}

/* O aviso e a caixa de "já inscrito" aparecem acima do formulário e
   precisam da mesma coluna, senão a página ganha duas margens diferentes. */
.pagina-cadastro .aviso,
.caixa-duplicado {
  max-width: 1000px;
  margin-inline: auto;
}

/* O botão de cadastrar: verde vivo, tipografia preta.
   Ele é a única ação que fica na tela o tempo todo, e por isso usa o verde
   mais forte da paleta. Sobre esse verde o branco rende 2,8:1 — some. O
   preto rende 7:1. É a mesma troca que se faz em placa de sinalização:
   quanto mais viva a cor, mais escura a letra. */
.botao-lateral,
.botao-lateral:hover,
.botao-lateral.ativo {
  background: var(--destaque);
  color: #0a0b0a;
  font-weight: 650;
}

.botao-lateral:hover,
.botao-lateral.ativo {
  background: var(--destaque-forte);
}

.botao-lateral .icone {
  color: #0a0b0a;
}

/* =====================================================================
   O número na aba acesa
   ---------------------------------------------------------------------
   Três tentativas até aqui: preto (parecia um buraco na barra), mostarda
   (3,3:1 contra o verde, sumia) e amarelo vivo (destacava, mas trazia uma
   quarta cor para uma paleta que tem três).

   A escolha é branco com o número em verde escuro, e o raciocínio é este:

   • Contraste. Branco sobre o verde cheio rende 5,5:1, mais que qualquer
     amarelo legível conseguiu. O selo aparece de longe.

   • Sem cor nova. A regra desta paleta está escrita no topo do arquivo: o
     verde é a única cor forte, e vale porque é rara. Um amarelo aqui, um
     azul ali, e nada mais destaca — cor que aparece em todo canto vira
     ruído. Branco não é cor nova: é o texto que já está ao lado.

   • Significado certo. Amarelo e vermelho são cores de estado — "atenção",
     "erro". Este número não avisa nada: conta quantos times existem. Pintá-lo
     de amarelo faria uma contagem tranquila parecer um alerta, e o dia que
     houver um alerta de verdade ele não vai se distinguir.

   • Consistência. É o mesmo selo invertido do resto do painel: fora da aba
     acesa ele é escuro sobre claro; dentro, claro sobre escuro.
   ===================================================================== */
.aba-recorte.ativa .aba-numero {
  /* Verde-limão cheio, número escuro.
   *
   * É a saída para o impasse das tentativas anteriores. Amarelo destacava
   * mas trazia uma cor de estado — "atenção" — para uma contagem que não
   * alerta nada. Branco não trazia cor nova, mas empatava em peso com o
   * texto branco ao lado e sumia.
   *
   * O limão é a mesma cor do clube, dois passos mais clara: mesma família,
   * nenhum significado novo, e 4,7:1 contra o verde da barra — o bastante
   * para ser a primeira coisa que se vê na linha. O número em verde muito
   * escuro rende 13:1 em cima dele.
   */
  min-width: 26px;
  padding: 3px 9px;
  border: 0;
  background: #ccff00;
  color: #0d2b06;
  box-shadow: none;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

/* O número da aba aberta, na barra lateral — mesmo selo das abas de cima.
   A regra que vale nos dois lugares: dentro da peça acesa, o número é limão
   cheio; fora dela, continua cinza discreto. Assim o limão quer dizer sempre
   a mesma coisa — "quantos há aqui, onde você está" — e não vira enfeite
   espalhado por toda a coluna. */
.lat-item.ativo .lat-contagem {
  min-width: 20px;
  padding: 1px 7px;
  background: #ccff00;
  color: #0d2b06;
  font-size: 10.5px;
  font-weight: 800;
  text-align: center;
}

/* O rótulo de uma coluna de dinheiro fica onde os números ficam.
   A regra de alinhamento só existia para as células (.celula.numero); os
   títulos eram <span> sem classe e encostavam à esquerda, enquanto os valores
   iam para a direita. Meia coluna de distância entre o título e o que ele
   nomeia — a tabela parecia quebrada porque estava. */
.cabecalho-lista .numero {
  text-align: right;
}

/* Selo de treinador, ao lado do nome na lista.
   A linha de um treinador tem as mesmas colunas de um atleta — clube, idade,
   valores — e nada nelas diz que aquela pessoa não entra em campo. */
.selo-tipo {
  margin-left: 6px;
  padding: 1px 8px;
  border: 1px solid var(--borda);
  border-radius: 999px;
  background: var(--fundo-2);
  color: var(--texto-suave);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: 1px;
}

/* O cargo da comissão técnica, ao lado do selo "Comissão".
   Em letra normal, e não maiúscula como o selo: "PREPARADOR DE GOLEIROS" grita
   mais do que o cargo pede. O texto já diz que é um cargo — falta só dizer
   qual. */
.selo-funcao {
  margin-left: 4px;
  color: var(--texto-suave);
  font-size: 12px;
  font-weight: 500;
  vertical-align: 1px;
}

/* =====================================================================
   Atletas ou comissão técnica
   ---------------------------------------------------------------------
   A divisão mais ampla da lista, acima dos cartões: o que está aberto
   aqui define o que os cartões contam. Por isso tem forma de aba com
   sublinhado, e não de pílula como os recortes de dentro — a hierarquia
   se lê antes de ler as palavras.
   ===================================================================== */

.abas-grupo {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 0 18px;
  border-bottom: 1px solid var(--borda);
}

.aba-grupo {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  color: var(--texto-suave);
  font-size: 13.5px;
  transition: color var(--rapido) var(--curva), border-color var(--rapido) var(--curva);
}

.aba-grupo:hover {
  color: var(--texto);
  text-decoration: none;
}

.aba-grupo.ativa {
  border-bottom-color: var(--destaque);
  color: var(--texto);
  font-weight: 650;
}

.aba-grupo .aba-numero {
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--fundo-2);
  color: var(--texto-fraco);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.aba-grupo.ativa .aba-numero {
  background: var(--destaque-fundo);
  color: var(--destaque);
  font-weight: 700;
}