/* Identidade visual própria: inspirada em número de peito de corrida e cronômetro,
   fugindo do padrão "fundo escuro + cards". Fundo claro tipo papel, tinta preta,
   amarelo Chipê usado como marcação/carimbo, não como fundo. */

:root {
  --amarelo: #f5c800;
  --preto: #14120d;
  --papel: #f7f3e8;
  --papel-2: #efe9d8;
  --linha: #14120d;
  --cinza: #6b6558;
  --erro: #a3271f;
  --ok: #146c2e;
  --radius: 2px;

  /* Mesmas fontes de chipe.weblabz.com.br */
  --fonte-titulo: "Bebas Neue", "Barlow Condensed", sans-serif;
  --fonte-ui: "Barlow Condensed", "Barlow", "Arial Narrow", sans-serif;
  --fonte-texto: "Barlow", "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--preto);
  font-family: var(--fonte-texto);
  font-size: 16px;
  line-height: 1.5;
  /* rodapé sempre no fim da tela, mesmo em páginas curtas */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

body > main { flex: 1 0 auto; width: 100%; }

.mono, .numero, .cronometro {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

a { color: var(--preto); }

.topbar {
  border-bottom: 3px solid var(--preto);
  background: var(--papel);
  padding: 18px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--preto);
}

/* Logo igual ao de chipe.weblabz.com.br: flor de ipê + "Chipê" em Bebas Neue */
.brand .logo-ipe {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}

.brand .wordmark {
  font-family: var(--fonte-titulo);
  font-size: 30px;
  line-height: 1;
  letter-spacing: 0.03em;
}

/* No site original o fundo é preto; aqui, no papel, o contorno garante leitura do amarelo */
.brand .wordmark span {
  color: var(--amarelo);
  -webkit-text-stroke: 1px var(--preto);
}

.brand .name {
  font-family: var(--fonte-ui);
  font-weight: 700;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: var(--amarelo);
  border: 2px solid var(--preto);
  padding: 2px 8px;
  transform: rotate(-2deg);
}

.topnav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
}

.topnav a {
  text-decoration: none;
  font-family: var(--fonte-ui);
  font-weight: 700;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 2px solid transparent;
}
.topnav a:hover { border-bottom-color: var(--amarelo); }
.topnav a.ativo { border-bottom-color: var(--preto); }

/* botão "Menu" do celular: só aparece até 640px e quando o JavaScript rodou */
.menu-botao { display: none; }
.menu-botao:focus-visible, .topnav a:focus-visible { outline: 3px solid var(--amarelo); outline-offset: 3px; }

@media (max-width: 640px) {
  /* só o ícone, para caber na mesma linha da marca; o texto fica para leitor de tela */
  .topbar.menu-js .menu-botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    margin-left: auto;
    background: #fff;
    color: var(--preto);
    border: 2px solid var(--preto);
    cursor: pointer;
  }
  .menu-rotulo {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .topbar.menu-aberto .menu-botao { background: var(--amarelo); }

  /* ícone de três barras que vira um X quando o menu está aberto */
  .menu-icone, .menu-icone span, .menu-icone::before, .menu-icone::after {
    display: block;
    width: 20px;
    height: 2px;
    background: currentColor;
    transition: transform 0.15s, opacity 0.15s;
  }
  .menu-icone { position: relative; background: none; }
  .menu-icone span { position: absolute; top: 0; }
  .menu-icone::before, .menu-icone::after { content: ""; position: absolute; }
  .menu-icone::before { top: -6px; }
  .menu-icone::after { top: 6px; }
  .menu-aberto .menu-icone span { opacity: 0; }
  .menu-aberto .menu-icone::before { transform: translateY(6px) rotate(45deg); }
  .menu-aberto .menu-icone::after { transform: translateY(-6px) rotate(-45deg); }

  .topbar.menu-js .topnav { display: none; }
  .topbar.menu-js.menu-aberto .topnav {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    border-top: 2px solid var(--preto);
  }
  .topbar.menu-js .topnav a {
    padding: 14px 4px;
    border-bottom: 1px solid var(--papel-2);
  }
  .topbar.menu-js .topnav a.ativo { border-bottom-color: var(--papel-2); box-shadow: inset 4px 0 0 var(--amarelo); padding-left: 14px; }
}

main.wrap {
  max-width: 880px;
  margin: 0 auto;
  padding: 40px 24px 80px;
}

.wrap-wide { max-width: 1100px; }

h1, h2 {
  font-family: var(--fonte-titulo);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.05;
}
h1 { font-size: 46px; margin: 0 0 8px; }
h2 { font-size: 30px; margin: 32px 0 14px; }
h3 {
  font-family: var(--fonte-ui);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin: 20px 0 8px;
}

.subtitle { color: var(--cinza); margin: 0 0 28px; font-size: 15px; }

.tag {
  display: inline-block;
  font-family: var(--fonte-ui);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border: 1.5px solid var(--preto);
  border-radius: var(--radius);
}
.tag-aberta { background: var(--amarelo); }
.tag-em_breve { background: var(--papel); color: var(--cinza); border-color: var(--cinza); }
.tag-encerrada { background: var(--preto); color: var(--papel); }

.tag-pendente { background: var(--papel-2); }
.tag-aprovada { background: #dff2e1; border-color: var(--ok); color: var(--ok); }
.tag-recusada { background: #f6e0de; border-color: var(--erro); color: var(--erro); }
.tag-cancelada { background: var(--papel-2); color: var(--cinza); }

.card {
  border: 2px solid var(--preto);
  border-radius: var(--radius);
  padding: 24px;
  background: #fffdf7;
  margin-bottom: 20px;
  position: relative;
}

.card-evento {
  display: block;
  text-decoration: none;
  color: var(--preto);
  transition: transform 0.1s ease;
}
.card-evento:hover { transform: translateY(-2px); }

.card-evento .meta {
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  color: var(--cinza);
  margin-top: 6px;
}

.perforation {
  border-top: 2px dashed var(--cinza);
  margin: 20px 0;
}

form .field { margin-bottom: 16px; }
label { display: block; font-family: var(--fonte-ui); font-weight: 700; font-size: 15px; text-transform: uppercase;
  letter-spacing: 0.04em; margin-bottom: 6px; }
.help { color: var(--cinza); font-size: 13px; margin-top: 4px; }

input[type=text], input[type=email], input[type=tel], input[type=date],
input[type=number], input[type=password], input[type=search], select, textarea {
  width: 100%;
  padding: 11px 12px;
  border: 2px solid var(--preto);
  border-radius: var(--radius);
  font-size: 15px;
  font-family: inherit;
  background: #fff;
}
textarea { min-height: 120px; }

.checkbox-row { display: flex; align-items: flex-start; gap: 10px; }
.checkbox-row input { margin-top: 4px; width: 18px; height: 18px; }
.checkbox-row label { text-transform: none; font-weight: 500; font-size: 14px; }

button, .btn {
  display: inline-block;
  background: var(--preto);
  color: var(--papel);
  border: 2px solid var(--preto);
  padding: 12px 22px;
  font-family: var(--fonte-ui);
  font-weight: 700;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
}
button:hover, .btn:hover { background: #000; }
.btn-secondary { background: var(--papel); color: var(--preto); }
.btn-secondary:hover { background: var(--papel-2); }
.btn-amarelo { background: var(--amarelo); color: var(--preto); border-color: var(--preto); }
.btn-amarelo:hover { background: var(--preto); color: var(--amarelo); }
.btn-danger { background: #fff; color: var(--erro); border-color: var(--erro); }
.btn-danger:hover { background: var(--erro); color: #fff; }
.btn-small { padding: 6px 12px; font-size: 12px; }

.alert {
  border: 2px solid var(--preto);
  padding: 14px 16px;
  border-radius: var(--radius);
  margin-bottom: 20px;
  font-size: 14px;
}
.alert-erro { border-color: var(--erro); background: #fbecea; color: var(--erro); }
/* aviso embaixo de um campo do formulário (ex.: CPF inválido) */
.campo-erro { margin-top: 4px; font-size: 13px; font-weight: 600; color: var(--erro); }
input.campo-invalido { border-color: var(--erro); background: #fbecea; }
.alert-ok { border-color: var(--ok); background: #eaf6ec; color: var(--ok); }

.participante-bloco {
  border: 2px solid var(--preto);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 18px;
  background: #fffdf7;
  position: relative;
}
.participante-bloco .numero-bloco {
  position: absolute;
  top: -14px; left: 16px;
  background: var(--amarelo);
  border: 2px solid var(--preto);
  font-family: "JetBrains Mono", monospace;
  font-weight: 700;
  padding: 2px 10px;
  font-size: 13px;
}
/* participante recolhido: só a linha de resumo, clicável */
.participante-bloco.recolhido { padding: 0; }
.participante-resumo {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 22px 20px 16px;
  background: none;
  border: 0;
  color: var(--preto);
  text-align: left;
  cursor: pointer;
  text-transform: none;
  letter-spacing: normal;
  font: inherit;
}
.participante-resumo:hover { background: var(--papel-2); }
.participante-resumo[hidden] { display: none; }
.resumo-dados { flex: 1; min-width: 0; }
.resumo-dados strong { display: block; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.resumo-dados span { font-family: "JetBrains Mono", monospace; font-size: 13px; color: var(--cinza); }
.resumo-pendente { font-size: 13px; font-weight: 700; color: var(--erro); white-space: nowrap; }
.resumo-editar {
  font-family: var(--fonte-ui);
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  text-decoration: underline;
}

/* etapas da inscrição: participantes -> confirmação */
.etapas {
  display: flex;
  gap: 18px;
  list-style: none;
  padding: 0;
  margin: 0 0 30px;
  font-family: var(--fonte-ui);
  font-weight: 700;
  font-size: 15px;
  text-transform: uppercase;
  color: var(--cinza);
}
.etapas li.atual { color: var(--preto); border-bottom: 3px solid var(--amarelo); }
.tabela-pedido tfoot th { color: var(--preto); border-bottom: 0; border-top: 2px solid var(--preto); font-size: 15px; }
.tabela-pedido tr:hover td { background: none; }
.acoes-pedido { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.usar-participante { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; font-size: 14px; color: var(--cinza); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
@media (max-width: 640px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--papel-2); }
th { font-family: var(--fonte-ui); font-size: 13px; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--cinza); border-bottom: 2px solid var(--preto); }
tr:hover td { background: var(--papel-2); }

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

.stat {
  font-family: "JetBrains Mono", monospace;
  font-weight: 700;
  font-size: 28px;
}
.stat-label { font-family: var(--fonte-ui); font-size: 14px; text-transform: uppercase; color: var(--cinza); letter-spacing: 0.05em; }
.stats-row { display: flex; gap: 28px; margin: 18px 0 28px; flex-wrap: wrap; }

.empty-state { text-align: center; padding: 60px 20px; color: var(--cinza); }

/* --- Página de contato ---------------------------------------------------- */

.contato-canal {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  color: inherit;
  text-decoration: none;
}
.contato-valor { font-size: 20px; font-weight: 700; overflow-wrap: anywhere; }

/* --- Banner da Chipê na home ---------------------------------------------- */

.banner-chipe {
  position: relative;
  overflow: hidden;
  background-color: #0c0c0c;
  background-image: var(--banner-foto);
  background-size: cover;
  background-position: 70% 35%;
  color: #e8e8e8;
  /* ocupa a largura toda da tela, entre o topo e o conteúdo */
  min-height: min(560px, 70vh);
  padding: 56px 0;
  display: flex;
  align-items: center;
  border-bottom: 3px solid var(--preto);
}
/* degradê preto à esquerda, por cima das fotos, para o texto ficar legível */
.banner-chipe::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(12, 12, 12, 0.92) 0%, rgba(12, 12, 12, 0.75) 40%, rgba(12, 12, 12, 0) 72%);
}

/* mesma largura da coluna de conteúdo, para o texto alinhar com "Próximos eventos" */
.banner-conteudo {
  position: relative;
  z-index: 1; width: 100%; max-width: 880px; margin: 0 auto; padding: 0 24px; }
.banner-texto { max-width: 460px; }
.banner-selo {
  display: inline-block;
  font-family: var(--fonte-ui);
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--amarelo);
  border: 1.5px solid var(--amarelo);
  padding: 2px 8px;
}
.banner-chipe h2 {
  font-size: 48px;
  margin: 12px 0 8px;
  color: #fff;
}
.banner-chipe h2 span { color: var(--amarelo); }
.banner-chipe p {
  margin: 0 0 20px;
  color: #d4d4d4;
}
.banner-acoes { display: flex; flex-wrap: wrap; gap: 10px; }
.banner-chipe .btn-amarelo { border-color: var(--amarelo); }
.banner-chipe .btn-amarelo:hover { background: #fff; color: #0c0c0c; border-color: #fff; }
.btn-contorno { background: transparent; color: #fff; border-color: #fff; }
.btn-contorno:hover { background: #fff; color: #0c0c0c; }

@media (max-width: 640px) {
  /* no celular o texto ocupa a largura toda: escurece a foto por igual, atleta embaixo */
  .banner-chipe::after {
    background: linear-gradient(180deg, rgba(12, 12, 12, 0.9) 0%, rgba(12, 12, 12, 0.7) 55%, rgba(12, 12, 12, 0.35) 100%);
  }
  .banner-chipe {
    background-position: 62% center;
    align-items: flex-start;
    min-height: 480px;
    padding: 32px 0;
  }
  .banner-chipe h2 { font-size: 32px; }
}

/* --- Capa com foto na página de resultado ---------------------------------- */

.capa-evento {
  background-color: #0c0c0c;
  /* escurece embaixo, onde fica o título; as pessoas da foto ficam visíveis em cima */
  background-image:
    linear-gradient(180deg, rgba(12, 12, 12, 0.55) 0%, rgba(12, 12, 12, 0.1) 30%, rgba(12, 12, 12, 0.1) 50%, rgba(12, 12, 12, 0.9) 100%),
    var(--capa-foto);
  background-size: cover;
  background-position: center, center 18%;
  color: #fff;
  min-height: min(460px, 60vh);
  display: flex;
  border-bottom: 3px solid var(--preto);
}
.capa-conteudo {
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
  padding: 24px 24px 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
}
.capa-voltar {
  color: #fff;
  font-size: 15px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
.capa-evento .tag { background: var(--amarelo); color: var(--preto); border-color: var(--amarelo); }
.capa-evento h1 { color: #fff; font-size: 56px; }
.capa-evento .subtitle { color: #e0e0e0; margin-bottom: 0; }

@media (max-width: 640px) {
  .capa-evento { min-height: 340px; }
  .capa-evento h1 { font-size: 40px; }
}

.foto-previa {
  display: block;
  width: 100%;
  max-width: 480px;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border: 2px solid var(--preto);
  margin-bottom: 14px;
}

/* --- Resultados ------------------------------------------------------------ */

.card-resultado {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.resultado-lado { text-align: right; flex-shrink: 0; }

.tabela-rolagem { overflow-x: auto; }

.ranking td { vertical-align: middle; }
.ranking .pos { font-weight: 700; }
.ranking tr.podio-1 .pos,
.ranking tr.podio-2 .pos,
.ranking tr.podio-3 .pos {
  background: var(--amarelo);
  text-align: center;
}

.link-atleta {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--preto);
  text-decoration: underline;
  text-decoration-color: var(--amarelo);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  cursor: pointer;
  text-align: left;
}
.link-atleta:hover,
.link-atleta:focus-visible {
  background: var(--preto);
  color: #fff;
}

.tag-resultado-finalizado { background: #dff2e1; border-color: var(--ok); color: var(--ok); }
.tag-resultado-nao_completou,
.tag-resultado-nao_largou { background: var(--papel-2); color: var(--cinza); border-color: var(--cinza); }
.tag-resultado-desclassificado { background: #f6e0de; border-color: var(--erro); color: var(--erro); }

.ficha {
  border: 3px solid var(--preto);
  border-radius: var(--radius);
  background: #fffdf7;
  color: var(--preto);
  padding: 28px;
  width: min(460px, calc(100vw - 32px));
}
.ficha::backdrop { background: rgba(12, 12, 12, 0.6); }
.ficha-fechar {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 2px 10px;
  font-size: 20px;
  line-height: 1;
}
.ficha-campos {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 18px;
  margin: 0;
}
.ficha-campos dt {
  font-family: var(--fonte-ui);
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--cinza);
}
.ficha-campos dd {
  margin: 0;
  font-family: "JetBrains Mono", monospace;
}

/* Rodapé preto, igual ao de chipe.weblabz.com.br */
footer.site {
  background: #0c0c0c;
  color: #e8e8e8;
  margin-top: 60px;
  padding: 40px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}

footer.site .footer-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #e8e8e8;
}

footer.site .footer-logo .logo-ipe {
  width: 28px;
  height: 28px;
}

footer.site .wordmark {
  font-family: var(--fonte-titulo);
  font-size: 24px;
  line-height: 1;
  letter-spacing: 0.03em;
}

footer.site .wordmark span { color: var(--amarelo); }

footer.site .footer-family {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  align-items: center;
}

footer.site .footer-family,
footer.site .footer-copy {
  font-family: var(--fonte-ui);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #8a8a8a;
}

footer.site .footer-copy { letter-spacing: 0.1em; }

footer.site .footer-family a {
  color: #8a8a8a;
  text-decoration: none;
  transition: color .2s;
}

footer.site .footer-family a:hover { color: var(--amarelo); }

footer.site .footer-sep { color: #3a3a3a; }

@media (max-width: 700px) {
  footer.site {
    flex-direction: column;
    align-items: flex-start;
    padding: 32px 24px;
  }
}

/* --- Admin: situação do e-mail na lista de inscritos -------------------------- */

.email-situacao { min-width: 150px; }
.email-situacao .help { display: block; margin: 2px 0 6px; }
.email-ok { color: var(--ok); font-weight: 600; }
.email-falhou { color: var(--erro); font-weight: 700; cursor: help; }

/* --- Admin: log de erros -------------------------------------------------------- */

.tabela-logs td { vertical-align: top; }
.tabela-logs summary { cursor: pointer; }
.log-contexto { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; background: var(--papel-2); padding: 10px; margin: 8px 0 0; max-height: 420px; overflow: auto; }
.tag.log-info { color: var(--cinza); }
.tag.log-aviso { background: #fff6d6; }
.tag.log-erro, .tag.log-critico { background: #f6e0de; border-color: var(--erro); color: var(--erro); }
.tag.log-critico { background: var(--erro); color: #fff; }