:root {
  --verde-escuro: #0f5132;
  --verde-medio: #14804a;
  --verde-claro: #17915a;
  --ouro: #ca8a04;
  --ouro-escuro: #a16207;
  --fundo: #f2f4f8;
  --cartao: #ffffff;
  --texto: #1f2937;
  --texto-muted: #6b7280;
  --borda: #e5e7eb;
  --sucesso-bg: #dcfce7; --sucesso-texto: #15803d;
  --atencao-bg: #fef3c7; --atencao-texto: #b45309;
  --erro-bg: #fee2e2; --erro-texto: #b91c1c;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.5;
}

.topo {
  background: linear-gradient(90deg, var(--verde-escuro), var(--verde-medio));
  color: #fff;
  padding: 16px 20px;
}
.topo-conteudo {
  max-width: 860px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.marca { color: #fff; text-decoration: none; font-weight: 700; font-size: 1.15rem; }
.marca span { font-weight: 400; opacity: .85; }
.selo-clube {
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.3);
  padding: 4px 12px;
  border-radius: 999px;
  font-size: .85rem;
}

.topo-admin {
  background: linear-gradient(135deg, var(--verde-escuro), #123a2b);
  color: #fff;
  padding: 14px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.topo-admin .sair { color: #fff; opacity: .85; text-decoration: none; }
.topo-admin .sair:hover { opacity: 1; text-decoration: underline; }

.conteudo {
  max-width: 860px;
  margin: 0 auto;
  padding: 24px 20px 60px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.conteudo-estreita { max-width: 420px; padding-top: 60px; }

.cartao {
  background: var(--cartao);
  border: 1px solid var(--borda);
  border-radius: 14px;
  padding: 28px;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}

h1 { margin-top: 0; font-size: 1.5rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1.02rem; color: var(--texto); }
.subtitulo { color: var(--texto-muted); margin-top: -8px; }

.formulario { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; }
.formulario label { display: flex; flex-direction: column; gap: 6px; font-size: .9rem; color: var(--texto-muted); }
.formulario input {
  padding: 11px 12px;
  border: 1px solid var(--borda);
  border-radius: 8px;
  font-size: 1rem;
  color: var(--texto);
}
.formulario input:focus { outline: 2px solid var(--verde-claro); border-color: var(--verde-claro); }

.botao {
  display: inline-block;
  text-align: center;
  padding: 12px 20px;
  border-radius: 9px;
  border: none;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  margin-top: 6px;
}
.botao-principal { background: var(--verde-escuro); color: #fff; }
.botao-principal:hover { background: #0c3f27; }
.botao-secundario { background: #fff; color: var(--verde-escuro); border: 1px solid var(--verde-escuro); }
.botao-whatsapp { background: #25d366; color: #fff; }
.botao-whatsapp:hover { background: #1fb955; }
.botao-pequeno { padding: 6px 12px; font-size: .85rem; margin-top: 0; }

.ajuda { color: var(--texto-muted); font-size: .9rem; }

.alerta { padding: 12px 16px; border-radius: 9px; margin: 12px 0; font-size: .95rem; }
.alerta-erro { background: var(--erro-bg); color: var(--erro-texto); }
.alerta-atencao { background: var(--atencao-bg); color: var(--atencao-texto); }
.alerta-sucesso { background: var(--sucesso-bg); color: var(--sucesso-texto); }

.cartao-explicacao p, .cartao-explicacao li { color: #374151; }
.cartao-explicacao ul { padding-left: 20px; }

.barra-progresso { background: #e5e7eb; border-radius: 999px; height: 10px; overflow: hidden; margin: 10px 0; }
.barra-progresso-preenchida { background: linear-gradient(90deg, var(--verde-medio), var(--ouro)); height: 100%; }

.acoes-convite { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 10px; }
.campo-link { flex: 1; min-width: 220px; padding: 10px 12px; border: 1px solid var(--borda); border-radius: 8px; color: var(--texto-muted); }

.grade-cotas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
  margin-top: 12px;
}
.cota {
  border-radius: 10px;
  padding: 8px 6px;
  text-align: center;
  border: 1px solid var(--borda);
  min-height: 64px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}
.cota-livre { background: #f8f9fb; color: var(--texto-muted); }
.cota-ocupada { background: var(--sucesso-bg); color: var(--sucesso-texto); }
.cota-voce { outline: 2px solid var(--ouro); }
.cota-numero { font-weight: 700; font-size: .85rem; }
.cota-titular { font-size: .68rem; line-height: 1.2; }
.cota-titular-vazia { font-style: italic; }

.tabela { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: .92rem; }
.tabela th, .tabela td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--borda); }
.tabela th { color: var(--texto-muted); font-weight: 600; }

.selo { padding: 3px 10px; border-radius: 999px; font-size: .78rem; font-weight: 600; }
.selo-aberto, .selo-livre { background: var(--sucesso-bg); color: var(--sucesso-texto); }
.selo-fechado, .selo-paga { background: #e0e7ff; color: #3730a3; }
.selo-reservada { background: var(--atencao-bg); color: var(--atencao-texto); }

.rodape { max-width: 860px; margin: 0 auto; padding: 0 20px 30px; color: var(--texto-muted); font-size: .78rem; text-align: center; }

.fundo-backoffice { background: var(--fundo); }