/* ===== Paleta e variáveis =====
   Verde-gramado escuro como base, giz (quase-branco) para o conteúdo,
   e amarelo-cartão como cor de destaque/ação. */
:root {
  --azul-marca: #043573;
  --verde-marca: #0bcf70;
  --cinza-marca: #292929;

  --gramado-escuro: #061d3f;
  --gramado: #0a2c5c;
  --linha-giz: #f4f2ea;
  --cartao-amarelo: var(--verde-marca);
  --cartao-vermelho: #c0392b;
  --texto-claro: #f4f2ea;
  --texto-suave: #9db1cc;
  --borda: #1c4a86;
  --fonte-display: 'Oswald', 'Arial Narrow', sans-serif;
  --fonte-corpo: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--fonte-corpo);
  background-color: var(--gramado-escuro);
  background-image:
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.02) 0px,
      rgba(255, 255, 255, 0.02) 1px,
      transparent 1px,
      transparent 80px
    );
  color: var(--texto-claro);
  min-height: 100vh;
}

/* ===== Cabeçalho ===== */
header.topo {
  background: var(--gramado);
  border-bottom: 3px solid var(--cartao-amarelo);
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.marca {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo-marca {
  height: 52px;
  width: auto;
}

.marca-login {
  flex-direction: column;
  gap: 6px;
}

.marca-login .logo-marca {
  height: 90px;
}

header.topo h1 {
  font-family: var(--fonte-display);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 1.6rem;
  margin: 0;
}

header.topo h1 span {
  color: var(--cartao-amarelo);
}

nav.abas {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

nav.abas a {
  color: var(--texto-suave);
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 600;
}

nav.abas a.ativo,
nav.abas a:hover {
  background: var(--cartao-amarelo);
  color: var(--gramado-escuro);
}

/* ===== Layout geral ===== */
main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 28px 24px 60px;
}

.cartao {
  background: rgba(244, 242, 234, 0.04);
  border: 1px solid var(--borda);
  border-radius: 10px;
  padding: 22px;
  margin-bottom: 24px;
}

.cartao h2 {
  font-family: var(--fonte-display);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 1.15rem;
  margin-top: 0;
  margin-bottom: 18px;
  color: var(--cartao-amarelo);
  border-bottom: 1px solid var(--borda);
  padding-bottom: 10px;
}

/* ===== Formulário de cadastro ===== */
form.form-jogador {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.campo {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.campo.largura-total {
  grid-column: 1 / -1;
}

.campo label {
  font-size: 0.8rem;
  color: var(--texto-suave);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

input, select {
  background: var(--gramado-escuro);
  border: 1px solid var(--borda);
  border-radius: 6px;
  color: var(--texto-claro);
  padding: 10px 12px;
  font-size: 0.95rem;
  font-family: var(--fonte-corpo);
}

input:focus, select:focus {
  outline: 2px solid var(--cartao-amarelo);
  outline-offset: 1px;
}

.campos-detalhes-linha {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.campos-detalhes-linha.escondido {
  display: none;
}

.campo-checkbox {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.campo-checkbox input {
  width: 18px;
  height: 18px;
}

.acoes-form {
  grid-column: 1 / -1;
  display: flex;
  gap: 10px;
  margin-top: 4px;
}

button {
  cursor: pointer;
  font-family: var(--fonte-corpo);
  font-weight: 700;
  border: none;
  border-radius: 6px;
  padding: 11px 20px;
  font-size: 0.9rem;
  transition: transform 0.05s ease, opacity 0.15s ease;
}

button:active {
  transform: scale(0.98);
}

a.botao-primario,
a.botao-secundario,
a.botao-perigo {
  display: inline-block;
  text-decoration: none;
  cursor: pointer;
  font-family: var(--fonte-corpo);
  font-weight: 700;
  border-radius: 6px;
  padding: 11px 20px;
  font-size: 0.9rem;
}

.botao-primario {
  background: var(--cartao-amarelo);
  color: var(--gramado-escuro);
}

.botao-primario:hover {
  opacity: 0.9;
}

.botao-secundario {
  background: transparent;
  color: var(--texto-suave);
  border: 1px solid var(--borda);
}

.botao-secundario:hover {
  color: var(--texto-claro);
  border-color: var(--texto-suave);
}

.botao-perigo {
  background: transparent;
  color: var(--cartao-vermelho);
  border: 1px solid var(--cartao-vermelho);
  padding: 6px 12px;
  font-size: 0.8rem;
}

.botao-perigo:hover {
  background: var(--cartao-vermelho);
  color: var(--linha-giz);
}

.botao-editar {
  background: transparent;
  color: var(--texto-suave);
  border: 1px solid var(--borda);
  padding: 6px 12px;
  font-size: 0.8rem;
}

.botao-editar:hover {
  color: var(--gramado-escuro);
  background: var(--texto-suave);
}

/* ===== Tabela de jogadores ===== */
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

thead th {
  text-align: left;
  color: var(--texto-suave);
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.4px;
  padding: 10px 8px;
  border-bottom: 2px solid var(--borda);
}

tbody td {
  padding: 10px 8px;
  border-bottom: 1px solid var(--borda);
  vertical-align: middle;
}

tbody tr:hover {
  background: rgba(244, 242, 234, 0.03);
}

.pill {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 100px;
  font-size: 0.75rem;
  font-weight: 700;
}

.pill-nota {
  background: rgba(11, 207, 112, 0.15);
  color: var(--cartao-amarelo);
}

.pill-craque {
  background: rgba(11, 207, 112, 0.9);
  color: var(--gramado-escuro);
}

.pill-goleiro {
  background: rgba(96, 165, 250, 0.15);
  color: #60a5fa;
}

.celula-acoes {
  display: flex;
  gap: 6px;
}

.estado-vazio {
  text-align: center;
  padding: 30px;
  color: var(--texto-suave);
}

.mensagem {
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 0.85rem;
  margin-bottom: 16px;
  display: none;
}

.mensagem.sucesso {
  background: rgba(52, 168, 83, 0.15);
  color: #6fcf97;
  display: block;
}

.mensagem.erro {
  background: rgba(192, 57, 43, 0.15);
  color: #ff8a7a;
  display: block;
}

.contador {
  color: var(--texto-suave);
  font-size: 0.85rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

/* ===== Check-in de presença ===== */
.linha-rodada {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.grupo-checkin {
  margin-bottom: 18px;
}

.grupo-checkin .titulo-grupo {
  font-family: var(--fonte-display);
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.5px;
  color: var(--texto-suave);
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--borda);
}

.grade-checkin {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
}

.item-checkin {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--borda);
  border-radius: 6px;
  background: rgba(244, 242, 234, 0.02);
  cursor: pointer;
}

.item-checkin:hover {
  border-color: var(--texto-suave);
}

.item-checkin.confirmado {
  border-color: var(--cartao-amarelo);
  background: rgba(11, 207, 112, 0.08);
}

.item-checkin input {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.item-checkin .nome-jogador {
  flex: 1;
  font-size: 0.9rem;
}

.item-checkin .nota-jogador {
  font-size: 0.75rem;
  color: var(--texto-suave);
}

@media (max-width: 720px) {
  .linha-rodada {
    grid-template-columns: 1fr;
  }
}

/* ===== Barra de ferramentas da lista de atletas ===== */
.barra-lista {
  display: flex;
  align-items: end;
  gap: 14px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.aviso-nao-salvo {
  color: var(--cartao-amarelo);
  font-size: 0.85rem;
  font-weight: 600;
}

.barra-planilha {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--borda);
}

.barra-planilha .botao-secundario {
  text-decoration: none;
  display: inline-block;
}

.caixa-erros-planilha {
  background: rgba(192, 57, 43, 0.1);
  border: 1px solid var(--cartao-vermelho);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 16px;
  font-size: 0.85rem;
  max-height: 220px;
  overflow-y: auto;
}

.caixa-erros-planilha p {
  margin: 0 0 8px;
  font-weight: 600;
  color: #ff8a7a;
}

.caixa-erros-planilha ul {
  margin: 0;
  padding-left: 18px;
  color: var(--texto-claro);
}

.caixa-erros-planilha li {
  margin-bottom: 4px;
}

/* Campos editáveis dentro da tabela — cada campo é uma coluna própria,
   nada aninhado dentro de célula, pra garantir que cada atleta fique
   numa única linha horizontal */
table input, table select {
  padding: 5px 6px;
  font-size: 0.8rem;
}

table input[type="text"] {
  width: 130px;
}

table select {
  width: 105px;
}

table input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

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

.tabela-scroll table {
  width: auto;
  min-width: 100%;
}

.tabela-scroll thead th,
.tabela-scroll tbody td {
  white-space: nowrap;
}

tr.linha-editada {
  background: rgba(11, 207, 112, 0.06);
  box-shadow: inset 3px 0 0 var(--cartao-amarelo);
}

table select:disabled,
table input:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* ===== Potes por nota ===== */
.grade-potes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

.card-pote {
  background: rgba(244, 242, 234, 0.03);
  border: 1px solid var(--borda);
  border-radius: 8px;
  padding: 12px;
}

.card-pote.pote-ok {
  border-color: #6fcf97;
}

.card-pote.pote-atencao {
  border-color: var(--cartao-vermelho);
}

.card-pote .cabecalho-pote {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--borda);
}

.card-pote h4 {
  margin: 0;
  font-family: var(--fonte-display);
  text-transform: uppercase;
  font-size: 0.85rem;
}

.card-pote .contagem-pote {
  font-size: 0.75rem;
  color: var(--texto-suave);
}

.card-pote.pote-ok .contagem-pote {
  color: #6fcf97;
}

.card-pote.pote-atencao .contagem-pote {
  color: var(--cartao-vermelho);
}

.linha-jogador-pote {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 0;
  font-size: 0.8rem;
}

.linha-jogador-pote span {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.linha-jogador-pote select {
  padding: 2px 4px;
  font-size: 0.72rem;
  width: 52px;
}

/* ===== Sorteio de times ===== */
.linha-sorteio {
  display: flex;
  align-items: end;
  gap: 14px;
  flex-wrap: wrap;
}

.linha-sorteio .campo {
  max-width: 180px;
}

.grade-times {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}

/* Variante usada na página pública: força todos os times na mesma
   linha (a quantidade de colunas é definida via JS, de acordo com o
   número de times daquela semana), com rolagem horizontal se precisar */
.grade-times-publica {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}

.grade-times-publica .card-time {
  min-width: 0;
}

/* Potes da semana, versão só-leitura (página pública) */
.card-pote-publico {
  background: rgba(244, 242, 234, 0.03);
  border: 1px solid var(--borda);
  border-radius: 8px;
  padding: 12px;
}

.card-pote-publico h4 {
  margin: 0 0 8px;
  font-family: var(--fonte-display);
  text-transform: uppercase;
  font-size: 0.85rem;
  color: var(--cartao-amarelo);
  border-bottom: 1px solid var(--borda);
  padding-bottom: 6px;
}

.card-pote-publico .jogador-pote-publico {
  font-size: 0.8rem;
  padding: 3px 0;
  color: var(--texto-claro);
}

.card-pote-publico .jogador-pote-publico .tag-time-pote {
  color: var(--texto-suave);
  font-size: 0.72rem;
}

.card-time {
  background: rgba(244, 242, 234, 0.04);
  border: 1px solid var(--borda);
  border-radius: 10px;
  padding: 18px;
}

.card-time .cabecalho-time {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 2px solid var(--cartao-amarelo);
  padding-bottom: 10px;
  margin-bottom: 12px;
}

.card-time h3 {
  font-family: var(--fonte-display);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0;
  font-size: 1.05rem;
}

.card-time .soma-nota {
  font-size: 0.8rem;
  color: var(--texto-suave);
}

.card-time .goleiro-time {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  margin-bottom: 8px;
  border-bottom: 1px dashed var(--borda);
  font-size: 0.9rem;
}

.card-time .goleiro-time select {
  flex: 1;
  font-size: 0.85rem;
  padding: 5px 6px;
}

.legenda-info-jogador {
  font-size: 0.8rem;
  color: var(--texto-suave);
  margin: 0 0 14px;
  padding: 8px 12px;
  background: rgba(244, 242, 234, 0.03);
  border: 1px solid var(--borda);
  border-radius: 6px;
}

.linha-jogador-time {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid var(--borda);
  font-size: 0.87rem;
}

.linha-jogador-time:last-child {
  border-bottom: none;
}

.linha-jogador-time .pote-badge {
  font-size: 0.7rem;
  color: var(--gramado-escuro);
  background: var(--texto-suave);
  border-radius: 100px;
  padding: 1px 7px;
  font-weight: 700;
}

.linha-jogador-time .nome-jogador-time {
  flex: 1;
}

.linha-jogador-time select {
  padding: 4px 6px;
  font-size: 0.75rem;
}

/* ===== Lista pública de inscrição (visão do admin) ===== */
.grade-inscritos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.card-categoria-inscritos {
  background: rgba(244, 242, 234, 0.03);
  border: 1px solid var(--borda);
  border-radius: 8px;
  padding: 12px;
}

.card-categoria-inscritos h4 {
  margin: 0 0 8px;
  font-family: var(--fonte-display);
  text-transform: uppercase;
  font-size: 0.8rem;
  color: var(--cartao-amarelo);
  border-bottom: 1px solid var(--borda);
  padding-bottom: 6px;
}

.linha-inscrito {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  font-size: 0.82rem;
}

.linha-inscrito .nome-inscrito {
  flex: 1;
}

.linha-inscrito .numero-inscrito {
  font-size: 0.72rem;
  color: var(--texto-suave);
}

.linha-inscrito .botao-remover-inscrito {
  background: transparent;
  border: none;
  color: var(--cartao-vermelho);
  cursor: pointer;
  font-size: 0.85rem;
  padding: 2px 4px;
}

.linha-inscrito .botao-remover-inscrito:hover {
  color: #ff8a7a;
}

.linha-inscrito {
  flex-direction: column;
  align-items: stretch;
}

.botao-toggle-pago {
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: #a93226; /* vermelho: não pago */
  font-size: 0.85rem;
  flex-shrink: 0;
  transition: background-color 0.15s ease;
}

.botao-toggle-pago.pago {
  background: var(--verde-marca); /* verde: pago */
}

.botao-mover-inscrito {
  width: 22px;
  height: 22px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--borda);
  color: var(--texto-suave);
  font-size: 0.7rem;
  flex-shrink: 0;
}

.botao-mover-inscrito:hover {
  color: var(--texto-claro);
  border-color: var(--cartao-amarelo);
}

.status-ligado {
  display: block;
  font-size: 0.72rem;
  color: #6fcf97;
  margin-top: 2px;
}

.status-pendente {
  display: block;
  font-size: 0.72rem;
  color: var(--cartao-vermelho);
  margin-top: 2px;
}

.select-ligar-jogador {
  font-size: 0.75rem;
  padding: 3px 4px;
}

/* ===== Confrontos e resultados ===== */
.card-confronto {
  background: rgba(244, 242, 234, 0.03);
  border: 1px solid var(--borda);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.card-confronto .nome-time-confronto {
  font-family: var(--fonte-display);
  text-transform: uppercase;
  font-size: 0.95rem;
  min-width: 70px;
}

.card-confronto input[type="number"] {
  width: 56px;
  text-align: center;
}

.card-confronto .x-confronto {
  color: var(--texto-suave);
  font-weight: 700;
}

.card-confronto .acoes-confronto {
  margin-left: auto;
  display: flex;
  gap: 8px;
}

.placar-confronto {
  font-family: var(--fonte-display);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--cartao-amarelo);
  min-width: 60px;
  text-align: center;
}

.linha-goleiros-confronto {
  width: 100%;
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--borda);
}

.linha-goleiros-confronto label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 0.72rem;
  color: var(--texto-suave);
  text-transform: uppercase;
}

.linha-goleiros-confronto select {
  font-size: 0.85rem;
  padding: 5px 6px;
  text-transform: none;
}

/* ===== Painel de estatísticas do confronto (inline, sem popup) ===== */
.painel-estatisticas-confronto {
  margin-top: 10px;
  padding: 12px 14px;
  background: rgba(0, 0, 0, 0.15);
  border: 1px solid var(--borda);
  border-radius: 8px;
  width: 100%;
}

.chips-estatisticas {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.chip-estatistica {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(11, 207, 112, 0.1);
  border: 1px solid var(--borda);
  border-radius: 100px;
  padding: 4px 6px 4px 10px;
  font-size: 0.78rem;
}

.chip-estatistica .botao-remover-chip {
  background: transparent;
  border: none;
  color: var(--cartao-vermelho);
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1;
  padding: 2px 4px;
}

.chip-estatistica .botao-remover-chip:hover {
  color: #ff8a7a;
}

.linha-lancamento {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}

.linha-lancamento select {
  min-width: 110px;
}

.linha-lancamento input[type="number"] {
  width: 55px;
  text-align: center;
}

/* ===== Lista pública de inscrição ===== */
.form-inscricao-publica {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  align-items: end;
  margin-bottom: 10px;
}

.opcoes-radio {
  display: flex;
  gap: 14px;
  align-items: center;
  height: 41px;
}

.opcoes-radio label {
  display: flex;
  align-items: center;
  gap: 5px;
  text-transform: none;
  font-size: 0.9rem;
  color: var(--texto-claro);
  cursor: pointer;
}

.lista-inscricao-publica {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--borda);
}

.linha-grupos-goleiros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.linha-grupos-linha {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
}

.card-grupo-publico {
  background: rgba(244, 242, 234, 0.03);
  border: 1px solid var(--borda);
  border-radius: 8px;
  padding: 14px;
}

.card-grupo-publico h4 {
  margin: 0 0 10px;
  font-family: var(--fonte-display);
  text-transform: uppercase;
  font-size: 0.85rem;
  color: var(--cartao-amarelo);
  border-bottom: 1px solid var(--borda);
  padding-bottom: 8px;
}

.card-grupo-publico.grupo-jogadores {
  grid-column: 1 / -1;
}

.grade-linhas-numeradas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 2px 14px;
}

.linha-numerada {
  display: flex;
  gap: 6px;
  padding: 3px 0;
  font-size: 0.82rem;
}

.linha-numerada .numero-linha {
  color: var(--texto-suave);
  font-variant-numeric: tabular-nums;
}

.linha-numerada .nome-linha {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vazio-lista-publica {
  color: var(--texto-suave);
  font-size: 0.8rem;
  margin: 0;
}

.tag-responsavel {
  color: var(--texto-suave);
  font-size: 0.75rem;
  flex-shrink: 0;
}

.tag-pago-linha {
  flex-shrink: 0;
}

.abas-login-cadastro {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.aba-login-cadastro {
  background: transparent;
  border: 1px solid var(--borda);
  color: var(--texto-suave);
  padding: 8px 16px;
  font-weight: 600;
  font-size: 0.85rem;
}

.aba-login-cadastro.aba-ativa {
  background: var(--cartao-amarelo);
  color: var(--gramado-escuro);
  border-color: var(--cartao-amarelo);
}

.abas-periodo {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}

.aba-periodo {
  background: transparent;
  border: 1px solid var(--borda);
  color: var(--texto-suave);
  padding: 6px 14px;
  font-weight: 600;
  font-size: 0.8rem;
}

.aba-periodo.aba-ativa {
  background: var(--cartao-amarelo);
  color: var(--gramado-escuro);
  border-color: var(--cartao-amarelo);
}

.form-usuario {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.form-usuario button {
  grid-column: 1 / -1;
  justify-self: start;
}

.linha-usuario-logado {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--borda);
}

.linha-usuario-logado span {
  font-size: 0.95rem;
}

@media (max-width: 720px) {
  .form-usuario {
    grid-template-columns: 1fr;
  }
  .form-inscricao-publica {
    grid-template-columns: 1fr;
  }
}


/* ===== Tela de login ===== */
.tela-login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.cartao-login {
  width: 100%;
  max-width: 380px;
}

.titulo-login {
  font-family: var(--fonte-display);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 1.6rem;
  margin: 0 0 4px;
}

.titulo-login span {
  color: var(--cartao-amarelo);
}

/* ===== Botão de sair no menu ===== */
.botao-sair {
  background: transparent;
  color: var(--texto-suave);
  border: 1px solid var(--borda);
  padding: 8px 14px;
  font-size: 0.85rem;
  font-weight: 600;
}

.botao-sair:hover {
  color: var(--cartao-vermelho);
  border-color: var(--cartao-vermelho);
}

@media (max-width: 720px) {
  form.form-jogador {
    grid-template-columns: 1fr;
  }
  .campos-detalhes-linha {
    grid-template-columns: 1fr;
  }
  header.topo {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ===== Ajustes extras pra celular (telas bem estreitas) ===== */
@media (max-width: 480px) {
  main {
    padding: 16px 12px 40px;
  }

  .cartao {
    padding: 16px;
  }

  nav.abas a,
  nav.abas .botao-sair {
    font-size: 0.8rem;
    padding: 7px 10px;
  }

  .logo-marca {
    height: 40px;
  }

  header.topo h1 {
    font-size: 1.2rem;
  }

  .card-confronto {
    padding: 12px;
  }

  .placar-confronto {
    font-size: 1rem;
    min-width: 46px;
  }

  .linha-lancamento select,
  .linha-lancamento input {
    flex: 1 1 auto;
    min-width: 0;
  }
}

/* ===== Perfil do jogador ===== */
.grade-cards-perfil {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 12px;
}

.card-estatistica-perfil {
  background: rgba(244, 242, 234, 0.04);
  border: 1px solid var(--borda);
  border-radius: 10px;
  padding: 18px 12px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.numero-estatistica-perfil {
  font-family: var(--fonte-display);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--cartao-amarelo);
}

.rotulo-estatistica-perfil {
  font-size: 0.75rem;
  color: var(--texto-suave);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.linha-rodada-perfil {
  padding: 8px 0;
  border-bottom: 1px solid var(--borda);
  font-size: 0.9rem;
}

.linha-rodada-perfil:last-child {
  border-bottom: none;
}

/* ===== Votação da semana ===== */
.grade-categorias-votacao {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

.card-categoria-votacao {
  background: linear-gradient(160deg, rgba(11, 207, 112, 0.08), rgba(244, 242, 234, 0.03));
  border: 1px solid var(--borda);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.card-categoria-votacao h4 {
  margin: 0;
  font-family: var(--fonte-display);
  font-size: 1.05rem;
  color: var(--texto-claro);
}

.placar-votacao {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 28px;
}

.linha-placar-votacao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.85rem;
  padding: 4px 8px;
  background: rgba(0, 0, 0, 0.15);
  border-radius: 6px;
}

.linha-placar-votacao span {
  color: var(--cartao-amarelo);
  font-weight: 700;
  font-size: 0.78rem;
  white-space: nowrap;
}

.linha-placar-votacao.vazio {
  color: var(--texto-suave);
  background: transparent;
  padding: 4px 8px;
  font-style: italic;
}

.select-voto-categoria {
  margin-top: auto;
  width: 100%;
}


/* ===== Campeão da noite ===== */
.banner-campeao-noite {
  background: linear-gradient(135deg, rgba(11, 207, 112, 0.18), rgba(4, 53, 115, 0.25));
  border: 1px solid var(--cartao-amarelo);
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 20px;
  text-align: center;
  font-family: var(--fonte-display);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--texto-claro);
}

/* ===== Detalhes dos jogos (quem fez os gols) ===== */
.card-confronto-detalhe {
  border: 1px solid var(--borda);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 12px;
}

.card-confronto-detalhe:last-child {
  margin-bottom: 0;
}

.cabecalho-confronto-detalhe {
  font-family: var(--fonte-display);
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: 8px;
  color: var(--cartao-amarelo);
}

.placar-detalhe {
  color: var(--texto-claro);
}

.linha-evento-jogo {
  font-size: 0.85rem;
  padding: 3px 0;
  color: var(--texto-claro);
}

.linha-evento-jogo .tag-contra {
  color: #ff8a7a;
  font-size: 0.78rem;
}

/* ===== Blocos colapsáveis ===== */
.cabecalho-colapsavel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
}

.cabecalho-colapsavel h2 {
  margin: 0;
}

.botao-colapsar {
  background: transparent;
  border: 1px solid var(--borda);
  color: var(--texto-suave);
  border-radius: 6px;
  width: 32px;
  height: 32px;
  font-size: 1rem;
  padding: 0;
  flex-shrink: 0;
}

.botao-colapsar:hover {
  color: var(--texto-claro);
  border-color: var(--cartao-amarelo);
}

.secao-colapsavel .conteudo-colapsavel {
  margin-top: 16px;
}

.secao-colapsavel h3 {
  font-family: var(--fonte-display);
  font-size: 1rem;
  color: var(--cartao-amarelo);
  margin: 0 0 10px;
}

/* Fila de potes na página pública: rola pro lado em vez de quebrar linha */
.fila-potes-publica {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 8px;
}

.fila-potes-publica .card-pote-publico {
  min-width: 180px;
  flex-shrink: 0;
}

/* ===== Critérios do sorteio (lista reordenável) ===== */
.lista-criterios-sorteio {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.item-criterio-sorteio {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(244, 242, 234, 0.03);
  border: 1px solid var(--borda);
  border-radius: 8px;
  padding: 10px 14px;
}

.item-criterio-sorteio .numero-prioridade {
  font-family: var(--fonte-display);
  font-weight: 700;
  color: var(--cartao-amarelo);
  min-width: 22px;
}

.item-criterio-sorteio .nome-criterio {
  flex: 1;
}

.item-criterio-sorteio .botoes-mover {
  display: flex;
  gap: 4px;
}

.item-criterio-sorteio .botoes-mover button {
  width: 30px;
  height: 30px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--borda);
  color: var(--texto-suave);
}

.item-criterio-sorteio .botoes-mover button:hover:not(:disabled) {
  color: var(--texto-claro);
  border-color: var(--cartao-amarelo);
}

.item-criterio-sorteio .botoes-mover button:disabled {
  opacity: 0.3;
  cursor: default;
}

/* ===== Caixa de sugestões de nome (adicionar manualmente) ===== */
.caixa-sugestoes-nome {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 20;
  background: var(--gramado);
  border: 1px solid var(--cartao-amarelo);
  border-radius: 8px;
  margin-top: 4px;
  max-height: 200px;
  overflow-y: auto;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

.item-sugestao-nome {
  padding: 8px 12px;
  cursor: pointer;
  font-size: 0.9rem;
  border-bottom: 1px solid rgba(244, 242, 234, 0.08);
}

.item-sugestao-nome:last-child {
  border-bottom: none;
}

.item-sugestao-nome:hover,
.item-sugestao-nome.destacado {
  background: rgba(11, 207, 112, 0.15);
}

/* ===== Botão "trocar" a ligação com o nome sistema ===== */
.botao-trocar-ligacao {
  background: transparent;
  border: none;
  color: var(--texto-suave);
  font-size: 0.72rem;
  text-decoration: underline;
  padding: 0 0 0 6px;
  cursor: pointer;
}

.botao-trocar-ligacao:hover {
  color: var(--cartao-amarelo);
}

/* ===== Prêmios da votação (perfil) ===== */
.grade-premios-votacao {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.emblema-premio {
  background: linear-gradient(160deg, rgba(11, 207, 112, 0.15), rgba(244, 242, 234, 0.03));
  border: 1px solid var(--cartao-amarelo);
  border-radius: 12px;
  padding: 14px 18px;
  text-align: center;
  min-width: 140px;
}

.emblema-premio .icone-premio {
  font-size: 2rem;
  display: block;
  margin-bottom: 6px;
}

.emblema-premio .titulo-premio {
  font-family: var(--fonte-display);
  font-size: 0.85rem;
  color: var(--texto-claro);
  display: block;
}

.emblema-premio .contagem-premio {
  color: var(--cartao-amarelo);
  font-weight: 700;
  font-size: 1.1rem;
  display: block;
  margin-top: 4px;
}

/* ===== Modo Torneio ===== */
.card-jogo-torneio {
  border: 1px solid var(--borda);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 12px;
}

.placar-jogo-torneio {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  font-family: var(--fonte-display);
  font-size: 1.1rem;
}

.placar-jogo-torneio strong {
  color: var(--cartao-amarelo);
  font-size: 1.3rem;
}

.aviso-penaltis {
  background: rgba(192, 57, 43, 0.15);
  border: 1px solid #c0392b;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 0.85rem;
  margin-top: 10px;
}

.bloco-penaltis {
  margin-top: 10px;
}

.lista-cobrancas-penalti {
  margin-top: 8px;
}

.linha-cobranca-penalti {
  font-size: 0.85rem;
  padding: 3px 0;
}

.grade-podio-torneio {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
}

.posicao-podio {
  background: rgba(244, 242, 234, 0.03);
  border: 1px solid var(--borda);
  border-radius: 12px;
  padding: 18px;
  text-align: center;
  font-size: 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.posicao-podio strong {
  font-family: var(--fonte-display);
  font-size: 1.1rem;
}

.posicao-podio span {
  font-size: 0.75rem;
  color: var(--texto-suave);
}

.posicao-podio.ouro {
  border-color: #d4af37;
  background: rgba(212, 175, 55, 0.1);
}

.posicao-podio.prata {
  border-color: #c0c0c0;
  background: rgba(192, 192, 192, 0.1);
}

.posicao-podio.bronze {
  border-color: #cd7f32;
  background: rgba(205, 127, 50, 0.1);
}

/* ===== Contagem regressiva (lista pública agendada) ===== */
.grade-contagem-regressiva {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.unidade-contagem {
  background: rgba(11, 207, 112, 0.1);
  border: 1px solid var(--cartao-amarelo);
  border-radius: 10px;
  padding: 14px 18px;
  text-align: center;
  min-width: 70px;
}

.unidade-contagem span {
  display: block;
  font-family: var(--fonte-display);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--cartao-amarelo);
}

.unidade-contagem small {
  color: var(--texto-suave);
  font-size: 0.75rem;
  text-transform: uppercase;
}

.linha-detalhe-voto {
  font-size: 0.85rem;
  padding: 4px 0;
  border-bottom: 1px solid rgba(244, 242, 234, 0.06);
}

/* ===== Ranking histórico da votação (página pública) ===== */
.grade-ranking-votacao {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.card-categoria-ranking-votacao h4 {
  font-family: var(--fonte-display);
  color: var(--cartao-amarelo);
  margin: 0 0 8px;
  font-size: 0.95rem;
}

.linha-ranking-votacao {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  padding: 3px 0;
}

/* ===== Abas da Lista da Semana (admin) ===== */
.abas-lista-semana {
  display: flex;
  gap: 6px;
  border-bottom: 1px solid var(--borda);
  flex-wrap: wrap;
}

.botao-aba-lista {
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  color: var(--texto-suave);
  padding: 10px 14px;
  font-family: var(--fonte-display);
  font-size: 0.9rem;
  cursor: pointer;
}

.botao-aba-lista.ativa {
  color: var(--cartao-amarelo);
  border-bottom-color: var(--cartao-amarelo);
}

.botao-aba-lista span {
  color: var(--texto-suave);
  font-size: 0.78rem;
}

.conteudo-aba-lista {
  padding-top: 16px;
}

/* ===== Rodada buscada no histórico (página pública) ===== */
.grade-times-compacta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.card-time-compacto {
  background: rgba(244, 242, 234, 0.03);
  border: 1px solid var(--borda);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 0.85rem;
}

.card-time-compacto strong {
  display: block;
  color: var(--cartao-amarelo);
  margin-bottom: 4px;
}

.emblema-mensalista {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: rgba(11, 207, 112, 0.2);
  font-size: 0.85rem;
  flex-shrink: 0;
  cursor: default;
}

/* ===== Painel de gols/estatísticas do confronto (Adicionar Resultado) ===== */
.resumo-confronto {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--borda);
}

.resumo-jogador-confronto {
  font-size: 0.78rem;
  color: var(--texto-suave);
}

.lista-gols-editavel {
  margin-bottom: 14px;
}

.linha-evento-editavel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.botao-excluir-evento-gol {
  background: transparent;
  border: none;
  color: #c0392b;
  cursor: pointer;
  font-size: 0.9rem;
  flex-shrink: 0;
  padding: 2px 6px;
}

.botao-excluir-evento-gol:hover {
  color: #e74c3c;
}

.bloco-substituicao .linha-lancamento {
  flex-wrap: wrap;
}