/* ============================================================
   BOLÃO COPA 2026 — Mestre-Cervejeiro.com
   Paleta extraída da logo: laranja #EC6D26 · marrom #44261B · turquesa #00A8A9
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@400;600;700&display=swap');

:root {
  --stout: #2A150D;
  --cartao: #3A2014;
  --borda: #5A3322;
  --laranja: #EC6D26;
  --laranja-escuro: #C2581E;
  --espuma: #F7EFE2;
  --turquesa: #00A8A9;
  --vermelho: #C0392B;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Inter', system-ui, sans-serif;
  background: linear-gradient(180deg, var(--stout) 0%, #1B0D07 100%);
  color: var(--espuma);
  min-height: 100vh;
}

h1, .topo-titulo, .valor-grande, .placar, .posicao, .pontos-rank {
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 1px;
}

h2 { color: var(--laranja); font-size: 1.15rem; margin: 1.4rem 0 0.4rem; }
.painel h2:first-child { margin-top: 0; }

.oculto { display: none !important; }
.centro { text-align: center; }
.selecionavel { user-select: all; }

/* ---------- inputs e botões ---------- */
input, button { font: inherit; }

input[type=text], input[type=email], input[type=password],
input[type=number], input[type=datetime-local] {
  width: 100%;
  background: var(--stout);
  border: 1px solid var(--borda);
  border-radius: 10px;
  color: var(--espuma);
  padding: 0.65rem 0.8rem;
  margin-bottom: 0.6rem;
  outline: none;
}
input:focus-visible { border-color: var(--laranja); }
input::placeholder { color: rgba(247, 239, 226, 0.4); }

.btn-primario, .btn-secundario, .btn-ok, .btn-recusar, .btn-remover {
  border: none;
  border-radius: 12px;
  font-weight: 700;
  cursor: pointer;
  padding: 0.8rem 1rem;
  width: 100%;
}
.btn-primario { background: var(--laranja); color: var(--stout); }
.btn-primario:hover { background: #F58238; }
.btn-secundario { background: var(--laranja-escuro); color: #fff; }
button:focus-visible { outline: 2px solid var(--espuma); outline-offset: 2px; }
button:disabled { opacity: 0.55; cursor: wait; }

/* ---------- tela de login ---------- */
.tela-login {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.caixa-login { width: 100%; max-width: 420px; }
.cabecalho-login { text-align: center; margin-bottom: 1.4rem; }
.logo-grande {
  width: 110px; height: 110px;
  border-radius: 20px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
}
.cabecalho-login h1 { font-size: 2.6rem; color: var(--laranja); margin-top: 0.8rem; line-height: 1; }
.slogan {
  color: #3FC4C5;
  font-size: 0.58rem;
  letter-spacing: 3px;
  text-transform: uppercase;
}
.cartao {
  background: var(--cartao);
  border: 1px solid var(--borda);
  border-radius: 18px;
  padding: 1.4rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
.cartao h2 { margin: 0 0 0.8rem; }
.troca { text-align: center; font-size: 0.88rem; margin-top: 0.8rem; opacity: 0.85; }
.troca a { color: var(--laranja); font-weight: 600; }
.rodape-login { text-align: center; font-size: 0.75rem; opacity: 0.55; margin-top: 1rem; }

/* ---------- topo do app ---------- */
.topo {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.6rem 1rem;
  background: rgba(42, 21, 13, 0.95);
  border-bottom: 1px solid var(--borda);
  backdrop-filter: blur(6px);
}
.logo-topo { width: 42px; height: 42px; border-radius: 10px; }
.topo-textos { flex: 1; min-width: 0; }
.topo-titulo { font-size: 1.3rem; color: var(--laranja); line-height: 1; }
.topo-usuario { font-size: 0.75rem; opacity: 0.7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sair { color: var(--espuma); opacity: 0.7; font-size: 0.8rem; }

.selo {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  white-space: nowrap;
}
.selo-pendente  { background: rgba(194, 88, 30, 0.2);  color: #F0975C; border: 1px solid rgba(194, 88, 30, 0.5); }
.selo-enviado   { background: rgba(236, 109, 38, 0.15); color: var(--laranja); border: 1px solid rgba(236, 109, 38, 0.5); }
.selo-confirmado{ background: rgba(0, 168, 169, 0.15);  color: var(--turquesa); border: 1px solid rgba(0, 168, 169, 0.5); }
.selo-recusado  { background: rgba(192, 57, 43, 0.15);  color: #E26456; border: 1px solid rgba(192, 57, 43, 0.5); }

/* ---------- abas ---------- */
.abas { display: flex; gap: 4px; max-width: 760px; margin: 0 auto; padding: 0.8rem 0.8rem 0; }
.aba {
  background: transparent;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 10px 10px 0 0;
  color: rgba(247, 239, 226, 0.6);
  font-weight: 600;
  font-size: 0.85rem;
  padding: 0.55rem 0.8rem;
  cursor: pointer;
}
.aba.ativa { background: var(--cartao); border-color: var(--borda); color: var(--laranja); }

.conteudo { max-width: 760px; margin: 0 auto; padding: 0 0.8rem 4rem; }
.painel {
  background: var(--cartao);
  border: 1px solid var(--borda);
  border-radius: 0 16px 16px 16px;
  padding: 1.2rem;
}
.ajuda { font-size: 0.85rem; opacity: 0.75; margin-bottom: 0.8rem; }

.alerta {
  background: rgba(194, 88, 30, 0.2);
  border: 1px solid var(--laranja-escuro);
  border-radius: 12px;
  padding: 0.8rem;
  font-size: 0.88rem;
  margin-bottom: 0.9rem;
}

/* ---------- cards de jogo ---------- */
.jogo {
  background: var(--stout);
  border: 1px solid var(--borda);
  border-radius: 14px;
  padding: 0.8rem;
  margin-bottom: 0.7rem;
}
.jogo-meta { display: flex; justify-content: space-between; font-size: 0.72rem; opacity: 0.65; margin-bottom: 0.5rem; }
.jogo-linha {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 46px 18px 46px minmax(0, 1fr);
  align-items: center;
  gap: 0.45rem;
}
.time {
  min-width: 0;
  font-weight: 600;
  font-size: 0.84rem;
  line-height: 1.25;
  overflow-wrap: break-word;
}
.time-a { text-align: right; }
/* seletor mais específico para vencer o input[type=number] { width:100% } global */
.jogo-linha input.placar {
  width: 100%;            /* preenche a célula de 46px do grid */
  text-align: center;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.25rem;
  color: var(--laranja);
  padding: 0.35rem 0;
  margin-bottom: 0;
  -moz-appearance: textfield;
  appearance: textfield;
}
.jogo-linha input.placar::-webkit-outer-spin-button,
.jogo-linha input.placar::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.versus {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.1rem;
  opacity: 0.5;
  text-align: center;
}
.jogo-resultado { text-align: center; font-size: 0.78rem; color: var(--turquesa); margin-top: 0.5rem; }

/* ---------- pagamento ---------- */
.caixa-pix {
  background: var(--stout);
  border: 1px dashed rgba(236, 109, 38, 0.5);
  border-radius: 14px;
  padding: 1rem;
  margin-bottom: 1rem;
}
.rotulo { font-size: 0.85rem; opacity: 0.8; }
.valor-grande { font-size: 2.4rem; color: var(--laranja); }
.status-caixa { border-radius: 12px; padding: 0.9rem; font-size: 0.9rem; margin-bottom: 0.9rem; }
.status-enviado   { background: rgba(236, 109, 38, 0.12); border: 1px solid rgba(236, 109, 38, 0.45); }
.status-confirmado{ background: rgba(0, 168, 169, 0.12);  border: 1px solid var(--turquesa); text-align: center; }
.status-recusado  { background: rgba(192, 57, 43, 0.15);  border: 1px solid var(--vermelho); }
.preview-comprovante {
  display: block;
  max-height: 280px;
  max-width: 100%;
  margin: 0 auto 0.9rem;
  border-radius: 12px;
  border: 1px solid var(--borda);
}

/* ---------- ranking ---------- */
.caixa-premiacao {
  background: linear-gradient(135deg, rgba(236, 109, 38, 0.18), rgba(0, 168, 169, 0.12));
  border: 1px solid var(--laranja);
  border-radius: 16px;
  padding: 1rem 1.1rem;
  text-align: center;
  margin-bottom: 1rem;
}
.caixa-premiacao .valor-grande { color: var(--laranja); margin: 0.1rem 0; }
.caixa-premiacao .ajuda { font-size: 0.72rem; opacity: 0.7; line-height: 1.5; }

.linha-rank {
  display: grid;
  grid-template-columns: 2.2rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem 0.7rem;
  background: var(--stout);
  border: 1px solid var(--borda);
  border-radius: 12px;
  padding: 0.55rem 0.8rem;
  margin-bottom: 0.5rem;
}
.linha-rank.lider { border-color: var(--laranja); }
.posicao { text-align: center; font-size: 1.3rem; color: var(--laranja); }
.linha-rank .posicao:not(:first-letter) { font-family: 'Bebas Neue', sans-serif; }

.info-rank { min-width: 0; }
.nome-rank {
  font-weight: 600; font-size: 0.92rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.meta-rank {
  font-size: 0.74rem;
  opacity: 0.75;
  margin-top: 0.1rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.meta-rank .premio { color: var(--turquesa); opacity: 1; font-weight: 700; }
.meta-rank .pendente-rank { color: var(--laranja-escuro); opacity: 1; }
.pontos-rank { font-size: 1.6rem; color: var(--laranja); }

/* ---------- admin ---------- */
.grade-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.grade-2 input { margin-bottom: 0; }
.grade-2 + .btn-primario, .grade-2 + .btn-secundario { margin-top: 0.6rem; }

.card-pagamento {
  background: var(--stout);
  border: 1px solid var(--borda);
  border-radius: 14px;
  padding: 0.8rem;
  margin-bottom: 0.7rem;
}
.card-pagamento .cabeca { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.card-pagamento .nome { flex: 1; font-weight: 600; font-size: 0.88rem; }
.card-pagamento .email { font-size: 0.72rem; opacity: 0.55; }
.card-pagamento img { max-height: 240px; max-width: 100%; border-radius: 10px; border: 1px solid var(--borda); margin-bottom: 0.6rem; }
.acoes { display: flex; gap: 0.5rem; }
.btn-ok { background: var(--turquesa); color: #fff; flex: 1; padding: 0.55rem; }
.btn-recusar { background: var(--vermelho); color: #fff; flex: 1; padding: 0.55rem; }

.linha-jogo-admin {
  display: flex; align-items: center; gap: 0.45rem;
  background: var(--stout);
  border: 1px solid var(--borda);
  border-radius: 12px;
  padding: 0.5rem 0.7rem;
  margin-bottom: 0.5rem;
  font-size: 0.85rem;
}
.linha-jogo-admin .desc { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.linha-jogo-admin .desc small { opacity: 0.5; }
.linha-jogo-admin input { width: 50px; text-align: center; padding: 0.3rem; margin: 0; }
.btn-ok.mini { flex: none; width: auto; padding: 0.4rem 0.7rem; font-size: 0.78rem; }
.btn-remover { background: rgba(192, 57, 43, 0.2); color: #E26456; flex: none; width: auto; padding: 0.4rem 0.6rem; font-size: 0.78rem; }

/* ---------- toast ---------- */
.toast {
  position: fixed;
  bottom: 1.2rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--turquesa);
  color: #fff;
  font-weight: 600;
  font-size: 0.88rem;
  padding: 0.6rem 1.1rem;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  z-index: 50;
  max-width: 90vw;
}
.toast-erro { background: var(--vermelho); }

@media (max-width: 480px) {
  .cabecalho-login h1 { font-size: 2.1rem; }
  .jogo { padding: 0.7rem 0.5rem; }
  .jogo-linha { grid-template-columns: minmax(0, 1fr) 40px 14px 40px minmax(0, 1fr); gap: 0.3rem; }
  .time { font-size: 0.76rem; }
  .jogo-linha input.placar { font-size: 1.1rem; }
  .bandeira { width: 17px; }
  .grade-2 { grid-template-columns: 1fr; }
  .selo { display: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .toast { animation: subir 0.25s ease-out; }
  @keyframes subir { from { opacity: 0; transform: translate(-50%, 10px); } }
}

/* ---------- gestão de participantes ---------- */
.caixa-check {
  display: flex; align-items: center; gap: 0.5rem;
  background: var(--stout);
  border: 1px solid var(--borda);
  border-radius: 10px;
  padding: 0.65rem 0.8rem;
  font-size: 0.85rem;
  cursor: pointer;
}
.caixa-check input { width: auto; margin: 0; accent-color: var(--laranja); }

#admin-usuarios { margin-top: 0.8rem; }
.linha-usuario {
  display: flex; align-items: center; gap: 0.5rem;
  background: var(--stout);
  border: 1px solid var(--borda);
  border-radius: 12px;
  padding: 0.55rem 0.7rem;
  margin-bottom: 0.5rem;
  font-size: 0.85rem;
}
.linha-usuario .dados { flex: 1; min-width: 0; }
.linha-usuario .nome-u { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.linha-usuario .email-u { font-size: 0.72rem; opacity: 0.55; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn-senha {
  background: rgba(0, 168, 169, 0.15);
  color: var(--turquesa);
  border: 1px solid rgba(0, 168, 169, 0.4);
  border-radius: 8px;
  padding: 0.35rem 0.6rem;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  width: auto;
}
.jogo-travado { color: var(--laranja); opacity: 0.85; }

/* ---------- bandeiras ---------- */
.bandeira {
  width: 22px;
  height: auto;
  vertical-align: -3px;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
}
.linha-jogo-admin .bandeira { width: 18px; vertical-align: -3px; }

/* ---------- contador e palpites de todos ---------- */
.contador { color: var(--turquesa); opacity: 0.9; }

.btn-ver-palpites {
  display: block;
  width: 100%;
  margin-top: 0.6rem;
  background: transparent;
  border: 1px dashed var(--borda);
  border-radius: 10px;
  color: rgba(247, 239, 226, 0.7);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.45rem;
  cursor: pointer;
}
.btn-ver-palpites:hover { border-color: var(--laranja); color: var(--laranja); }

.palpites-todos { margin-top: 0.5rem; }
.linha-palpite {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.35rem 0.5rem;
  border-bottom: 1px solid rgba(90, 51, 34, 0.4);
  font-size: 0.82rem;
}
.linha-palpite:last-child { border-bottom: none; }
.nome-palpite { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.placar-palpite { font-family: 'Bebas Neue', sans-serif; font-size: 1.05rem; color: var(--espuma); letter-spacing: 1px; }
.pts-palpite { font-size: 0.72rem; font-weight: 700; opacity: 0.55; min-width: 3rem; text-align: right; }
.pts-ganhos { color: var(--turquesa); opacity: 1; }