/* =====================================================================
   Tema Moderno — Inscreva-se  (Bootstrap 5 / estilo clean neutro)
   Piloto: index.php. Feito para ser reutilizado nas demais páginas.
   Não depende de nenhuma classe do Bootstrap 3.
   ===================================================================== */

:root {
  --im-bg:        #f4f5f7;   /* fundo da página            */
  --im-surface:   #ffffff;   /* cartões / superfícies      */
  --im-surface-2: #f7f8fa;   /* seções internas (grupos)   */
  --im-border:    #e6e8ec;   /* bordas suaves              */
  --im-text:      #1f2733;   /* texto principal            */
  --im-muted:     #6b7280;   /* texto secundário           */
  --im-radius:    16px;      /* raio dos cartões           */
  --im-radius-sm: 10px;      /* raio de inputs/botões       */
  --im-shadow:    0 1px 2px rgba(16,24,40,.04), 0 12px 28px rgba(16,24,40,.06);
  --im-ring:      0 0 0 .2rem rgba(37,99,235,.15);
}

body {
  background: var(--im-bg);
  color: var(--im-text);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

/* Padroniza a fonte em TODAS as páginas que carregam este tema (raiz do site),
   sobrepondo os font-family inline legados (ex.: "Verdana") para tudo usar o
   Inter, igual à finalizacao.php. (admin/ e atleta/ não carregam o tema.) */
body, body * {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, Helvetica, Arial, sans-serif !important;
}

/* ---- Tipografia ---------------------------------------------------- */
h1, h2, h3, h4, h5 { font-weight: 600; letter-spacing: -.01em; color: var(--im-text); }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.05rem; }
a  { color: #2563eb; text-decoration: none; }
a:hover { color: #1d4ed8; text-decoration: underline; }

/* ---- Colunas da home (cartão principal + sidebar) ------------------ */
/* gap explícito garante o afastamento horizontal entre os dois boxes    */
.ins-colunas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 1.5rem 0.85rem;
}

/* ---- Cartão principal da inscrição --------------------------------- */
.card-inscricao {
  background: var(--im-surface);
  border: 1px solid var(--im-border);
  border-radius: var(--im-radius);
  box-shadow: var(--im-shadow);
  padding: 2rem 1.75rem;
}
.card-inscricao > img { max-width: 220px; height: auto; margin: .25rem auto 1.25rem; display: block; }

/* Logo de evento (topo de inscricao.php / finalizacao.php etc.) */
.logo-evento { display: block; max-width: 220px; height: auto; margin: .5rem auto 2rem; }

/* ---- Sidebar de informações ---------------------------------------- */
.info-lateral {
  background: var(--im-surface);
  border: 1px solid var(--im-border);
  border-radius: var(--im-radius);
  box-shadow: var(--im-shadow);
  padding: 1.5rem 1.25rem;
  font-size: .95rem;
  color: var(--im-muted);
}
.info-lateral img { max-width: 100%; height: auto; }
.info-lateral b, .info-lateral strong { color: var(--im-text); }

/* ---- Grupos de provas (gerados dinamicamente com .well) ------------ */
.well {
  background: var(--im-surface-2);
  border: 1px solid var(--im-border);
  border-radius: var(--im-radius-sm);
  padding: 1.25rem;
  margin: 1.5rem 0;
  box-shadow: none;
}
.well:last-child { margin-bottom: 0; }
.well h3 { margin: .25rem 0 .5rem; }

/* ---- Formulário ---------------------------------------------------- */
label { font-weight: 500; color: var(--im-text); margin-bottom: .35rem; }
.form-control {
  border: 1px solid var(--im-border);
  border-radius: var(--im-radius-sm);
  padding: .6rem .85rem;
  font-size: 1rem;
  min-height: 46px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus {
  border-color: #2563eb;
  box-shadow: var(--im-ring);
}

/* Grupo de sexo (radios) da home como opções elegantes */
.card-inscricao .radio { display: inline-flex; gap: 1.25rem; align-items: center; justify-content: center; }
.card-inscricao .radio label { font-weight: 500; cursor: pointer; }
.card-inscricao input[type="radio"] { transform: scale(1.15); margin-right: .35rem; }
input[type="radio"], input[type="checkbox"] {
  accent-color: #2563eb;
  margin-right: .5rem;
  vertical-align: middle;
  position: relative;
  top: -1px;
}
/* respiro entre opções lado a lado (Sim / Não etc.) */
label:has(> input[type="radio"]),
label:has(> input[type="checkbox"]) { margin-right: 1.4rem; }

/* ---- Botões -------------------------------------------------------- */
.btn {
  border-radius: var(--im-radius-sm);
  font-weight: 600;
  padding: .6rem 1.25rem;
  white-space: normal;
  word-wrap: break-word;
  transition: transform .06s ease, box-shadow .15s ease, filter .15s ease;
}
.btn:hover { filter: brightness(.97); }
.btn:active { transform: translateY(1px); }
.btn-lg { padding: .75rem 1.5rem; font-size: 1.05rem; }

/* Compatibilidade: .btn-default (BS3) não existe no BS5 */
.btn-default {
  background: var(--im-surface);
  border: 1px solid var(--im-border);
  color: var(--im-text);
}
.btn-default:hover { background: var(--im-surface-2); }

/* Botões de categoria (CriaItem) ocupam bem o espaço */
.card-inscricao .btn-lg { display: inline-block; margin: .35rem; }

/* ---- Modais (BS5) + compat do botão .close (BS3) ------------------- */
.modal-content { border: none; border-radius: var(--im-radius); box-shadow: var(--im-shadow); }
.modal-header  { border-bottom: 1px solid var(--im-border); align-items: center; }
.modal-footer  { border-top: 1px solid var(--im-border); }
.modal-header .close {
  margin-left: auto;
  border: 0;
  background: transparent;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--im-muted);
  cursor: pointer;
  opacity: .7;
}
.modal-header .close:hover { opacity: 1; }

/* ---- Barra de progresso (waitingDialog) ---------------------------- */
.progress { border-radius: 999px; height: .6rem; background: var(--im-surface-2); }
.progress-bar { background-color: #2563eb; }

/* =====================================================================
   Camada de compatibilidade BS3 -> BS5
   Reproduz o visual de classes que o Bootstrap 5 removeu, para as demais
   páginas ficarem corretas apenas trocando o <head> (sem reescrever HTML).
   ===================================================================== */
.img-responsive { display: block; max-width: 100%; height: auto; }

.form-group { margin-bottom: 1rem; }
.form-horizontal .form-group { display: flex; flex-wrap: wrap; align-items: center; }

.control-label { font-weight: 500; color: var(--im-text); }
.help-block { font-size: .875rem; color: var(--im-muted); margin-top: .25rem; }

.checkbox, .radio { margin: .5rem 0; }
.checkbox label, .radio label { font-weight: 400; cursor: pointer; }

/* .panel (BS3) -> aparência de card (BS5) */
.panel { background: var(--im-surface); border: 1px solid var(--im-border);
         border-radius: var(--im-radius); box-shadow: var(--im-shadow); margin-bottom: 1rem; }
.panel > .panel-heading { padding: .9rem 1.15rem; border-bottom: 1px solid var(--im-border);
         font-weight: 600; background: transparent; border-radius: var(--im-radius) var(--im-radius) 0 0; }
.panel > .panel-body { padding: 1.15rem; }
.panel > .panel-footer { padding: .9rem 1.15rem; border-top: 1px solid var(--im-border); }

/* Tabelas com aparência mais leve */
.table { --bs-table-bg: transparent; }
.table > thead th { border-bottom: 2px solid var(--im-border); font-weight: 600; }

/* Alertas herdam as cores do BS5; só arredonda um pouco mais */
.alert { border-radius: var(--im-radius-sm); }