/* Design tokens extraidos de sportrecife.com.br (Poppins, tema escuro,
   vermelho institucional #D61F27, botoes em pilula) para manter a
   consistencia visual com o site oficial do clube. */
:root {
  --fundo: #111111;
  --fundo-card: #1a1a1a;
  --fundo-input: #0d0d0d;
  --borda: #2c2c2c;
  --texto: #ededed;
  --texto-mudo: #9a9a9a;
  --vermelho: #d61f27;
  --vermelho-hover: #b91922;
  --dourado: #f5c344;

  --verde-txt: #4ade80;
  --verde-bg: rgba(74, 222, 128, 0.12);
  --amarelo-txt: #f5c344;
  --amarelo-bg: rgba(245, 195, 68, 0.12);
  --vermelho-txt: #ff6b6b;
  --vermelho-bg-suave: rgba(214, 31, 39, 0.14);
}

* { box-sizing: border-box; }

body {
  font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--fundo);
  color: var(--texto);
  margin: 0;
  padding: 0;
}

.container {
  max-width: 480px;
  margin: 40px auto;
  background: var(--fundo-card);
  border: 1px solid var(--borda);
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}

.hero {
  width: 100%;
  /* Corta topo/base da imagem original (1024x683, brasao+texto ja
     centralizados nela) para reduzir a altura do cabecalho sem esticar -
     object-fit:cover + object-position central fazem o corte simetrico. */
  aspect-ratio: 1024 / 320;
  background: #000;
}

.hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 46%;
  display: block;
}

.conteudo {
  padding: 28px;
}

h1 {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--dourado);
  text-align: center;
  margin-bottom: 4px;
}

h1 span { color: var(--dourado); }

.subtitulo {
  color: var(--texto-mudo);
  margin-top: 0;
  margin-bottom: 28px;
  font-size: 0.9rem;
  text-align: center;
}

label {
  display: block;
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 8px;
  color: var(--texto);
}

input[type="text"] {
  width: 100%;
  padding: 20px 16px;
  font-family: inherit;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-align: center;
  color: var(--texto);
  background: var(--fundo-input);
  border: 1px solid var(--borda);
  border-radius: 10px;
  margin-bottom: 18px;
  transition: border-color 0.15s ease;
}

input[type="text"]::placeholder { color: #555; }

input[type="text"]:focus {
  outline: none;
  border-color: var(--vermelho);
}

button[type="submit"] {
  width: 100%;
  padding: 13px 24px;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  color: #111111;
  background: var(--vermelho);
  border: none;
  border-radius: 15px;
  cursor: pointer;
  margin-top: 16px;
  transition: background-color 0.15s ease;
}

button[type="submit"]:hover:not(:disabled) { background: var(--vermelho-hover); }

button[type="submit"]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.resultado {
  margin-top: 20px;
  padding: 16px 18px;
  border-radius: 10px;
  font-size: 0.95rem;
  line-height: 1.5;
  border: 1px solid transparent;
}

.resultado p { margin: 0 0 8px; }
.resultado p:last-child { margin-bottom: 0; }

/* Badges de status + categoria (lado a lado, 50/50) - substituem o antigo
   subtitulo unico "Categoria: X". Podem quebrar em 2 linhas (ex.: "Aptidão
   condicionada", "Isentos - Benemérito") - por isso nao sao pilulas
   totalmente redondas nem truncam com reticencias, ficaria ilegivel. */
.badges-resultado {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}

.badge {
  flex: 1 1 50%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  line-height: 1.25;
  border: 1px solid transparent;
}

.badge-status.badge--apto { background: var(--verde-bg); color: var(--verde-txt); border-color: rgba(74, 222, 128, 0.3); }
.badge-status.badge--pre-apto { background: var(--amarelo-bg); color: var(--amarelo-txt); border-color: rgba(245, 195, 68, 0.3); }
.badge-status.badge--inapto,
.badge-status.badge--nao-encontrado {
  background: var(--vermelho-bg-suave);
  color: var(--vermelho-txt);
  border-color: rgba(214, 31, 39, 0.35);
}

.badge-categoria {
  background: rgba(245, 195, 68, 0.1);
  color: var(--dourado);
  border-color: rgba(245, 195, 68, 0.3);
}

/* Botao discreto (links de "saiba mais" / documentos oficiais) - nunca
   branco: cinza por padrao, dourado no hover/foco, para nao competir com o
   CTA vermelho principal ("Consultar"). */
.btn-discreto {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--borda);
  background: transparent;
  color: var(--texto-mudo);
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.btn-discreto svg {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
}

.btn-discreto:hover,
.btn-discreto:focus-visible {
  border-color: var(--dourado);
  color: var(--dourado);
}

.resultado.apto { background: var(--verde-bg); color: var(--verde-txt); border-color: rgba(74, 222, 128, 0.3); }
.resultado.pre-apto { background: var(--amarelo-bg); color: var(--amarelo-txt); border-color: rgba(245, 195, 68, 0.3); }
.resultado.inapto,
.resultado.erro,
.resultado.nao-encontrado {
  background: var(--vermelho-bg-suave);
  color: var(--vermelho-txt);
  border-color: rgba(214, 31, 39, 0.35);
}

/* Checklist de elegibilidade (4 criterios) - fica dentro de #resultado, logo
   abaixo da mensagem. O texto usa --texto (neutro) em vez de herdar a cor do
   .resultado.* pai, ja que quem sinaliza o estado de cada item e o icone
   (verde/vermelho/amarelo/cinza), nao a cor do texto. */
.checklist {
  list-style: none;
  margin: 14px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.check-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.82rem;
  line-height: 1.3;
  opacity: 0;
  animation: check-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.check-icone {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.check-icone svg { width: 12px; height: 12px; }

.check-texto { color: var(--texto); }

.check--ok .check-icone { background: var(--verde-bg); color: var(--verde-txt); }
.check--falha .check-icone { background: var(--vermelho-bg-suave); color: var(--vermelho-txt); }
/* Ultimo item (financeiro): mesma mensagem generica nos dois casos, so a cor
   (icone E texto) muda - vermelho se pendente, cinza se indeterminado. */
.check--pagamento-pendente .check-icone { background: var(--vermelho-bg-suave); color: var(--vermelho-txt); }
.check--pagamento-pendente .check-texto { color: var(--vermelho-txt); }
.check--pagamento-indeterminado .check-icone { background: rgba(154, 154, 154, 0.16); color: var(--texto-mudo); }
.check--pagamento-indeterminado .check-texto { color: var(--texto-mudo); }
.check--info .check-icone { background: rgba(154, 154, 154, 0.16); color: var(--texto-mudo); }

@keyframes check-pop {
  0% { opacity: 0; transform: translateX(-8px) scale(0.85); }
  60% { opacity: 1; }
  100% { opacity: 1; transform: translateX(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .check-item { animation: none; opacity: 1; }
}

.cf-turnstile {
  margin-bottom: 4px;
  display: flex;
  justify-content: center;
}

.regras {
  margin-top: 28px;
  padding: 16px 18px;
  background: var(--fundo-input);
  border: 1px solid var(--borda);
  border-radius: 10px;
  font-size: 0.85rem;
  line-height: 1.5;
}

.regras h2 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--dourado);
  margin: 0 0 10px;
}

.regras ul {
  margin: 0 0 10px;
  padding-left: 18px;
  color: var(--texto-mudo);
}

.regras li { margin-bottom: 6px; }
.regras li strong { color: var(--dourado); font-weight: 600; }

.regras-acoes {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.regras-acoes .btn-discreto {
  flex: 1 1 50%;
  min-width: 0;
}

.aviso-lgpd {
  margin-top: 20px;
  font-size: 0.75rem;
  color: var(--texto-mudo);
  border-top: 1px solid var(--borda);
  padding-top: 14px;
  line-height: 1.5;
}

/* Botao "Reportar inconsistencia" - dourado (nao branco), destaque um pouco
   maior que os .btn-discreto por ser uma acao mais importante para quem
   esta pre-apto/inapto. */
.btn-relatar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--dourado);
  background: transparent;
  color: var(--dourado);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.btn-relatar svg { width: 15px; height: 15px; flex-shrink: 0; }

.btn-relatar:hover {
  background: var(--dourado);
  color: #111111;
}

/* Modal de "Reportar inconsistencia" */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 1000;
}

.modal-overlay[hidden] { display: none; }

.modal-caixa {
  position: relative;
  width: 100%;
  max-width: 420px;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--fundo-card);
  border: 1px solid var(--borda);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
}

.modal-fechar {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--borda);
  background: transparent;
  color: var(--texto-mudo);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}

.modal-fechar:hover { color: var(--dourado); border-color: var(--dourado); }

.modal-caixa h3 {
  color: var(--dourado);
  font-size: 1.1rem;
  font-weight: 800;
  margin: 0 0 6px;
  padding-right: 24px;
}

.modal-subtitulo {
  color: var(--texto-mudo);
  font-size: 0.82rem;
  margin: 0 0 18px;
  line-height: 1.4;
}

#form-relato label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--texto);
  display: block;
  margin-bottom: 6px;
}

#form-relato input,
#form-relato select,
#form-relato textarea {
  width: 100%;
  padding: 10px 12px;
  font-family: inherit;
  /* 16px (nao 0.9rem/14.4px) de proposito: abaixo disso o Safari do iPhone
     da zoom automatico ao focar no campo, o que parece "quebrar" a tela. */
  font-size: 1rem;
  color: var(--texto);
  background: var(--fundo-input);
  border: 1px solid var(--borda);
  border-radius: 8px;
  margin-bottom: 14px;
  transition: border-color 0.15s ease;
}

#form-relato input:focus,
#form-relato select:focus,
#form-relato textarea:focus {
  outline: none;
  border-color: var(--dourado);
}

#form-relato input[readonly] {
  color: var(--texto-mudo);
  background: var(--fundo);
}

#form-relato textarea { resize: vertical; min-height: 80px; }

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

/* Rodape fica FORA de .conteudo de proposito (irmao dentro de .container,
   nao filho) - assim a barra preta sangra ate a borda do card (mesmo
   tratamento visual do .hero no topo), em vez de ficar com respiro nas
   laterais por causa do padding de .conteudo. */
.rodape {
  background: #000;
  color: var(--vermelho);
  font-family: "Courier New", Courier, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.4px;
  text-align: center;
  padding: 10px 16px;
}