/* =====================================================================
   Tema Esportivo — Inscreva-se  (camada energética, sobre tema-moderno)
   Carregado DEPOIS de tema-moderno.css (que traz a compat BS3->BS5).
   Piloto: index.php. Visual: vibrante, tipografia forte, movimento.
   Multi-tenant: respeita a cor do organizador ($Organizador->TEMA) nos
   botões btn-<tema>, só troca a "roupa" (gradiente, sombra, energia).
   ===================================================================== */

/* ---- Fontes esportivas (carregadas via <link> no index.php) --------- */
:root {
  --sp-bg-1:      #0f172a;   /* base escura do fundo imersivo (index)  */
  --sp-bg-2:      #1e1b4b;
  --sp-page:      #eef1f5;   /* fundo claro das páginas de conteúdo    */
  --grad-a:       #ff512f;   /* laranja                                 */
  --grad-b:       #dd2476;   /* magenta                                 */
  --grad-c:       #7028e4;   /* violeta                                 */
  --sp-ink:       #0f1729;   /* texto forte                             */
  --sp-muted:     #5b6472;
  --sp-surface:   #ffffff;
  --sp-radius:    20px;
  --sp-radius-sm: 12px;
  --sp-shadow:    0 10px 30px rgba(15,23,42,.10), 0 2px 6px rgba(15,23,42,.06);
  --sp-shadow-lg: 0 24px 60px rgba(15,23,42,.22);
  --font-body:    "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: "Barlow Condensed", "Barlow", Impact, sans-serif;
}

/* =====================================================================
   FUNDO IMERSIVO — em TODAS as páginas com tema (index e conteúdo).
   O conteúdo fica em cards/wells brancos flutuando sobre o degradê.
   ("Sem tema" nem carrega este CSS: página branca.)
   ===================================================================== */
body {
  background: var(--sp-bg-1);
  color: var(--sp-ink);
  font-family: var(--font-body);
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;
}
/* gradiente energético que preenche a tela atrás do conteúdo */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(255,81,47,.55), transparent 60%),
    radial-gradient(1000px 700px at 100% 0%, rgba(112,40,228,.55), transparent 55%),
    linear-gradient(135deg, var(--grad-a) 0%, var(--grad-b) 48%, var(--grad-c) 100%);
}
/* speed lines diagonais sutis */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .12;
  background-image: repeating-linear-gradient(
    -60deg, rgba(255,255,255,.9) 0 2px, transparent 2px 26px);
  -webkit-mask-image: linear-gradient(to bottom, #000 0 40%, transparent 78%);
          mask-image: linear-gradient(to bottom, #000 0 40%, transparent 78%);
}
/* garante o conteúdo acima do fundo imersivo */
form#formprova,
.container, .container-fluid,
.navbar { position: relative; z-index: 1; }

/* substitui o !important de Inter do tema-moderno pela fonte esportiva */
body, body * {
  font-family: var(--font-body) !important;
}
h1, h2, h3, h4, h5, .btn,
.well h3, #labelcpf, .info-lateral b, .info-lateral strong {
  font-family: var(--font-display) !important;
}

/* ---- Cabeçalho / respiro do container ------------------------------ */
.container.py-4 { padding-top: 2.75rem !important; padding-bottom: 3.5rem !important; }

.ins-colunas { gap: 1.5rem 1.25rem; align-items: flex-start; }

/* ---- Cartão principal ---------------------------------------------- */
.card-inscricao {
  background: var(--sp-surface);
  border: none;
  border-radius: var(--sp-radius);
  box-shadow: var(--sp-shadow-lg);
  padding: 2.5rem 2rem 2.75rem;
  position: relative;
  overflow: hidden;
  animation: sp-rise .5s cubic-bezier(.2,.7,.2,1) both;
}
/* barra de acento no topo do card */
.card-inscricao::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  background: linear-gradient(90deg, var(--grad-a), var(--grad-b), var(--grad-c));
}
.card-inscricao > img,
.logo-evento {
  max-width: 240px;
  filter: drop-shadow(0 6px 14px rgba(15,23,42,.12));
  margin-bottom: 1.5rem !important;
}

@keyframes sp-rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* título "sem provas" / saudação */
.card-inscricao h4 {
  font-size: 1.5rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .01em;
  color: var(--sp-ink);
}

/* ---- Label do CPF em destaque -------------------------------------- */
#labelcpf {
  display: block;
  font-size: 1.05rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--sp-ink);
  margin-bottom: .6rem;
}

/* ---- Campos de formulário ------------------------------------------ */
.card-inscricao .form-control {
  border: 2px solid #e6e8ef;
  border-radius: var(--sp-radius-sm);
  min-height: 54px;
  font-size: 1.15rem;
  font-weight: 600;
  text-align: center;
  letter-spacing: .03em;
  background: #fbfbfd;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.card-inscricao .form-control:focus {
  border-color: var(--sp-accent);
  background: #fff;
  box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--sp-accent) 22%, transparent);
}

/* radios de sexo como opções fortes */
.card-inscricao .radio { gap: 1.75rem; margin-top: .35rem; }
.card-inscricao .radio label {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--sp-ink);
}
.card-inscricao input[type="radio"] { accent-color: var(--sp-accent); transform: scale(1.3); }

/* ---- Grupos de provas (.well) -------------------------------------- */
.card-inscricao .well {
  background: #f7f8fc;
  border: 1px solid #ecedf4;
  border-left: 5px solid transparent;
  border-image: linear-gradient(180deg, var(--grad-a), var(--grad-c)) 1;
  border-radius: 0 var(--sp-radius-sm) var(--sp-radius-sm) 0;
  padding: 1.35rem 1.4rem;
  margin: 1.35rem 0;
  text-align: center;
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
.card-inscricao .well h3 {
  font-size: 1.35rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .01em;
  color: var(--sp-ink);
  margin: .1rem 0 .35rem;
  text-align: center !important;
}
.card-inscricao .well h3 b { font-weight: 700; }

/* ---- Botões: energia + movimento ----------------------------------- */
.btn {
  border-radius: 999px;
  font-family: var(--font-display) !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 1.05rem;
  padding: .7rem 1.6rem;
  border: none;
  box-shadow: 0 8px 18px rgba(15,23,42,.14);
  transition: transform .08s ease, box-shadow .18s ease, filter .18s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 14px 26px rgba(15,23,42,.22); filter: saturate(1.08); }
.btn:active { transform: translateY(0); box-shadow: 0 6px 14px rgba(15,23,42,.16); }

.btn-lg { font-size: 1.15rem; padding: .85rem 1.9rem; }

/* botões de categoria: largura do texto e quebram linha centralizados
   (organizadores podem ter muitas categorias) */
.card-inscricao .btn-lg {
  display: inline-block;
  width: auto;
  max-width: 100%;
  margin: .4rem .35rem !important;
  vertical-align: middle;
}

/* Gradientes por cor de tema do organizador (btn-<TEMA>) --------------- */
.btn-success, .btn-primary, .btn-info, .btn-warning, .btn-danger, .btn-dark {
  color: #fff !important;
}
.btn-primary  { background: linear-gradient(135deg, #2b6cff, #6a37ff) !important; }
.btn-info     { background: linear-gradient(135deg, #0ea5e9, #2563eb) !important; }
.btn-success  { background: linear-gradient(135deg, #16c26a, #059669) !important; }
.btn-warning  { background: linear-gradient(135deg, #ff9d00, #ff5e3a) !important; }
.btn-danger   { background: linear-gradient(135deg, #ff512f, #dd2476) !important; }
.btn-dark     { background: linear-gradient(135deg, #334155, #0f172a) !important; }
.btn-default {
  background: #fff !important;
  color: var(--sp-ink) !important;
  border: 2px solid #e6e8ef !important;
  box-shadow: 0 6px 14px rgba(15,23,42,.08);
}

/* =====================================================================
   CARDS GENÉRICOS — superfícies brancas p/ o conteúdo das demais páginas
   flutuar de forma legível sobre o fundo vibrante.
   ===================================================================== */
.tema-card,
.panel,
.pg-regulamento .col-sm-12.col-md-8.col-lg-6 {
  background: var(--sp-surface);
  border: none;
  border-radius: var(--sp-radius);
  box-shadow: var(--sp-shadow-lg);
  padding: 2rem 1.75rem;
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.tema-card { max-width: 680px; margin: 2rem auto; }
.panel { margin: 1.5rem auto; }

/* barra de acento no topo dos cards */
.tema-card::before,
.pg-inscricao .grid::before,
.pg-regulamento .col-sm-12.col-md-8.col-lg-6::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 6px;
  background: linear-gradient(90deg, var(--grad-a), var(--grad-b), var(--grad-c));
}

/* logo dentro dos cards de conteúdo */
.tema-card .logo-evento,
.pg-inscricao .logo-evento,
.pg-regulamento .logo-evento { margin-top: .25rem; }

/* =====================================================================
   INSCRICAO — um único card envolvendo todo o formulário
   ===================================================================== */
.pg-inscricao .grid {
  background: var(--sp-surface);
  border-radius: var(--sp-radius);
  box-shadow: var(--sp-shadow-lg);
  max-width: 864px;               /* ~20% mais largo que os 720px anteriores */
  margin: 2rem auto;
  padding: 2.25rem 1.25rem 2.5rem;/* menos padding lateral: campos mais largos */
  position: relative;
  z-index: 1;
  overflow: hidden;
}
/* remove as colunas espaçadoras e usa largura total dentro do card */
.pg-inscricao .grid .col-sm-1.col-md-2.col-lg-3 { display: none; }
.pg-inscricao .grid .row { margin-left: 0; margin-right: 0; }
.pg-inscricao .grid .col-sm-10.col-md-8.col-lg-6,
.pg-inscricao .grid .col-sm-12.col-md-6.col-lg-4 { flex: 0 0 100%; max-width: 100%; }
/* wells (saúde etc.) e cupom viram subseções claras dentro do card */
.pg-inscricao .well {
  background: #f7f8fc;
  border: 1px solid #ecedf4;
  border-radius: var(--sp-radius-sm);
  box-shadow: none;
  padding: 1rem 1.1rem;   /* menos padding: campos aproveitam a largura   */
  margin: 0.75rem 0;      /* menos gap entre a subseção e o card principal */
}
/* botão "<< Voltar": largura natural (remove o col-2 estreito) */
.pg-inscricao .form-group .btn.col-2 { flex: none; width: auto; max-width: none; }

/* ---- Navbar (páginas de conteúdo: inscritos/resultados) ------------ */
.navbar.bg-white { box-shadow: 0 2px 10px rgba(15,23,42,.05); }
.navbar .navbar-brand { font-weight: 700; letter-spacing: .01em; color: var(--sp-ink); }
.navbar .navbar-brand:hover { color: var(--sp-accent); }
.navbar img { height: 26px; width: auto; }

/* ---- Sidebar de informações ---------------------------------------- */
.info-lateral {
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(4px);
  border: none;
  border-radius: var(--sp-radius);
  box-shadow: var(--sp-shadow);
  padding: 1.75rem 1.5rem;
  color: var(--sp-muted);
  animation: sp-rise .5s .08s cubic-bezier(.2,.7,.2,1) both;
}
.info-lateral b, .info-lateral strong {
  color: var(--sp-ink);
  text-transform: uppercase;
  letter-spacing: .01em;
}
.info-lateral a { color: var(--grad-b); font-weight: 600; }
.info-lateral a:hover { color: var(--grad-c); }
.info-lateral img { border-radius: 8px; max-width: 100%; height: auto; }
/* botões-imagem legados (regulamento/inscritos) com leve destaque */
.info-lateral a > img[src*="botao"] {
  transition: transform .12s ease, filter .18s ease;
  filter: drop-shadow(0 4px 10px rgba(15,23,42,.18));
}
.info-lateral a > img[src*="botao"]:hover { transform: translateY(-2px) scale(1.02); }

/* ---- Rodapé CNPJ (sobre o fundo escuro) ---------------------------- */
body > div[align="center"] {
  position: relative;
  z-index: 1;
  color: rgba(255,255,255,.85);
  font-weight: 600;
  letter-spacing: .02em;
  padding-bottom: 2rem;
}

/* =====================================================================
   RESPONSIVO — mobile-first (mais de 70% dos acessos são celular)
   ===================================================================== */

/* Nunca deixa a página rolar na horizontal */
html, body { max-width: 100%; }
img { max-width: 100%; height: auto; }

/* Tabelas largas (inscritos/resultados) rolam dentro do próprio espaço,
   sem empurrar a página inteira. */
@media (max-width: 767.98px) {
  .table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
}

@media (max-width: 991.98px) {
  .card-inscricao { padding: 2rem 1.35rem 2.25rem; }
  body::after { display: none; }
  .ins-colunas { gap: 1.1rem 0; }
  .info-lateral { width: 100%; }
}

@media (max-width: 767.98px) {
  .container.py-4 { padding-top: 1.75rem !important; padding-bottom: 2.25rem !important; }
  .card-inscricao { padding: 1.75rem 1.15rem 2rem; border-radius: 16px; }
  .card-inscricao h4 { font-size: 1.2rem; }
  #labelcpf { font-size: .98rem; }
  .well h3, .card-inscricao .well h3 { font-size: 1.2rem; }
  /* alvos de toque confortáveis */
  .btn { min-height: 46px; }
  .card-inscricao .btn-lg { padding: .8rem 1.2rem; }
  /* campos maiores e sem zoom no iOS (fonte >= 16px) */
  .card-inscricao .form-control { font-size: 1.05rem; min-height: 52px; }
}

@media (max-width: 575.98px) {
  .container.py-4 { padding-top: 1.25rem !important; }
  .card-inscricao > img, .logo-evento { max-width: 170px; }
  .card-inscricao h4 { font-size: 1.1rem; }
  .btn { font-size: .98rem; padding: .7rem 1.1rem; }
}