/* ============================================================
   FUNDAY — Vai, Vai Jonas | Tema colorido infantil
   ============================================================ */
:root {
  --roxo: #6d28d9;
  --roxo-escuro: #4c1d95;
  --roxo-claro: #ede9fe;
  --amarelo: #ffd93b;
  --amarelo-escuro: #f5a623;
  --azul: #1d4ed8;
  --azul-claro: #dbeafe;
  --oceano: #0e7490;
  --rosa: #ec4899;
  --verde: #16a34a;
  --vermelho: #dc2626;
  --tinta: #2b2158;
  --branco: #ffffff;
  --fundo: #f5f3ff;
  --raio: 22px;
  --sombra: 0 10px 30px rgba(76, 29, 149, .18);
}

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

body {
  font-family: "Baloo 2", "Comic Sans MS", "Segoe UI", system-ui, sans-serif;
  background:
    radial-gradient(circle at 8% 10%, rgba(255,217,59,.25) 0 180px, transparent 181px),
    radial-gradient(circle at 92% 20%, rgba(236,72,153,.16) 0 200px, transparent 201px),
    radial-gradient(circle at 15% 85%, rgba(29,78,216,.14) 0 220px, transparent 221px),
    var(--fundo);
  color: var(--tinta);
  line-height: 1.5;
  min-height: 100vh;
}

.container { max-width: 980px; margin: 0 auto; padding: 20px 16px 60px; }

/* ---------- Cabeçalho ---------- */
.topo {
  background: linear-gradient(135deg, var(--roxo-escuro), var(--roxo) 55%, var(--rosa));
  border-radius: 0 0 40px 40px;
  color: var(--branco);
  text-align: center;
  padding: 34px 16px 26px;
  box-shadow: var(--sombra);
}
.topo h1 {
  font-size: clamp(2.2rem, 7vw, 3.6rem);
  letter-spacing: 2px;
  color: var(--amarelo);
  text-shadow: 3px 3px 0 var(--roxo-escuro), 6px 6px 0 rgba(0,0,0,.25);
  transform: rotate(-2deg);
  display: inline-block;
}
.topo .sub {
  display: inline-block;
  background: var(--amarelo);
  color: var(--roxo-escuro);
  font-weight: 800;
  font-size: clamp(1.1rem, 3.5vw, 1.6rem);
  padding: 4px 22px;
  border-radius: 999px;
  transform: rotate(-2deg);
  margin-top: 8px;
  box-shadow: 0 4px 0 rgba(0,0,0,.2);
}
.topo .igreja { margin-top: 14px; font-weight: 600; opacity: .95; }

/* ---------- Cartões de informação ---------- */
.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin: -30px auto 24px;
  max-width: 900px;
  padding: 0 16px;
}
.card-info {
  background: var(--branco);
  border-radius: var(--raio);
  padding: 16px;
  text-align: center;
  box-shadow: var(--sombra);
  border-top: 6px solid var(--amarelo);
}
.card-info:nth-child(2) { border-top-color: var(--rosa); }
.card-info:nth-child(3) { border-top-color: var(--azul); }
.card-info:nth-child(4) { border-top-color: var(--verde); }
.card-info .emoji { font-size: 2rem; }
.card-info strong { display: block; font-size: 1.05rem; margin-top: 4px; }
.card-info small { color: #6b6394; }

/* ---------- Poster ---------- */
.poster-wrap { text-align: center; margin-bottom: 26px; }
.poster {
  max-width: 560px;
  width: 100%;
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  border: 6px solid var(--branco);
}

/* ---------- Botões ---------- */
.btn {
  display: inline-block;
  font-family: inherit;
  font-size: 1.15rem;
  font-weight: 800;
  padding: 14px 34px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn:active { transform: scale(.97); }
.btn-amarelo {
  background: linear-gradient(180deg, var(--amarelo), var(--amarelo-escuro));
  color: var(--roxo-escuro);
  box-shadow: 0 6px 0 #c47f0a;
}
.btn-amarelo:hover { transform: translateY(-2px); }
.btn-roxo {
  background: linear-gradient(180deg, var(--roxo), var(--roxo-escuro));
  color: var(--branco);
  box-shadow: 0 6px 0 #371a78;
}
.btn-verde { background: var(--verde); color: #fff; box-shadow: 0 5px 0 #116232; }
.btn-vermelho { background: var(--vermelho); color: #fff; box-shadow: 0 5px 0 #991b1b; }
.btn-mini { font-size: .85rem; padding: 7px 14px; }
.btn-centro { text-align: center; margin-top: 10px; }

/* ---------- Formulário ---------- */
.form-card {
  background: var(--branco);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 28px 24px;
  max-width: 640px;
  margin: 0 auto;
}
.secao-titulo {
  display: inline-block;
  background: var(--roxo);
  color: var(--branco);
  font-weight: 800;
  padding: 6px 18px;
  border-radius: 999px;
  margin-bottom: 18px;
  font-size: .95rem;
}
.secao-perguntas .secao-titulo { background: var(--oceano); }
.campo { margin-bottom: 18px; }
.campo label {
  display: block;
  font-weight: 700;
  margin-bottom: 6px;
}
.campo .req { color: var(--vermelho); }
.campo .hint { font-size: .82rem; color: #6b6394; margin-top: 4px; }
.campo input[type=text], .campo input[type=number], .campo input[type=tel],
.campo input[type=email], .campo input[type=date],
.campo textarea, .campo select {
  width: 100%;
  font-family: inherit;
  font-size: 1rem;
  padding: 12px 14px;
  border: 3px solid var(--roxo-claro);
  border-radius: 14px;
  outline: none;
  background: #fdfcff;
  transition: border-color .15s;
}
.campo input:focus, .campo textarea:focus, .campo select:focus {
  border-color: var(--amarelo-escuro);
}
.campo textarea { min-height: 90px; resize: vertical; }
.opcoes label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  padding: 10px 14px;
  border: 3px solid var(--roxo-claro);
  border-radius: 14px;
  margin-bottom: 8px;
  cursor: pointer;
  background: #fdfcff;
}
.opcoes label:hover { border-color: var(--amarelo); }
.opcoes input { width: 20px; height: 20px; accent-color: var(--roxo); }
.campo-erro { color: var(--vermelho); font-size: .85rem; margin-top: 4px; }
.detextra { margin-top: 8px; display: none; }
.detextra.visivel { display: block; }

/* ---------- Alertas ---------- */
.alerta {
  border-radius: 16px;
  padding: 16px 18px;
  margin-bottom: 18px;
  font-weight: 600;
}
.alerta-ok    { background: #dcfce7; color: #166534; border: 3px solid #86efac; }
.alerta-erro  { background: #fee2e2; color: #991b1b; border: 3px solid #fca5a5; }
.alerta-info  { background: var(--azul-claro); color: #1e3a8a; border: 3px solid #93c5fd; }

/* ---------- Ingresso ---------- */
.ingresso {
  max-width: 520px;
  margin: 0 auto;
  border-radius: 26px;
  overflow: hidden;
  box-shadow: var(--sombra);
  background: var(--branco);
}
.ingresso-topo {
  background: linear-gradient(135deg, var(--roxo-escuro), var(--roxo) 60%, var(--rosa));
  color: var(--branco);
  text-align: center;
  padding: 26px 16px 20px;
  position: relative;
}
.ingresso-topo::after {
  content: "";
  position: absolute;
  bottom: -1px; left: 0; right: 0;
  height: 24px;
  background: radial-gradient(circle at 12px -6px, transparent 16px, var(--branco) 17px);
  background-size: 28px 24px;
  background-repeat: repeat-x;
}
.ingresso-topo .selo {
  display: inline-block;
  background: var(--amarelo);
  color: var(--roxo-escuro);
  font-weight: 800;
  font-size: .8rem;
  letter-spacing: 2px;
  padding: 4px 16px;
  border-radius: 999px;
  text-transform: uppercase;
}
.ingresso-topo h2 {
  color: var(--amarelo);
  font-size: 2rem;
  text-shadow: 3px 3px 0 var(--roxo-escuro);
  margin-top: 8px;
  transform: rotate(-2deg);
}
.ingresso-topo .sub { font-weight: 700; font-size: 1.1rem; }
.ingresso-corpo { padding: 22px 24px 26px; text-align: center; }
.ingresso-nome {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--roxo-escuro);
}
.ingresso-idade {
  display: inline-block;
  background: var(--amarelo);
  color: var(--roxo-escuro);
  border-radius: 999px;
  font-weight: 800;
  padding: 4px 16px;
  margin: 8px 0 4px;
}
.ingresso-dados {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 18px 0;
  text-align: left;
}
.ingresso-dados div {
  background: var(--roxo-claro);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: .85rem;
}
.ingresso-dados small { display: block; color: var(--roxo); font-weight: 700; text-transform: uppercase; font-size: .65rem; letter-spacing: 1px; }
.ingresso-dados strong { font-size: .95rem; }
.qr-wrap {
  margin: 8px auto 0;
  background: var(--branco);
  border: 4px dashed var(--roxo);
  border-radius: 18px;
  padding: 14px;
  display: inline-block;
}
.qr-wrap img, .qr-wrap canvas { display: block; }
.qr-codigo {
  font-family: "Courier New", monospace;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--roxo-escuro);
  margin-top: 8px;
  font-size: 1.05rem;
}
.ingresso-rodape {
  margin-top: 16px;
  font-size: .8rem;
  color: #6b6394;
}

/* ---------- Consulta ---------- */
.mini-lista { list-style: none; padding: 0; }
.mini-lista li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  background: var(--roxo-claro);
  border-radius: 14px;
  padding: 12px 16px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.mini-lista strong { color: var(--roxo-escuro); }

/* ---------- Admin ---------- */
.admin-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}
.stat {
  background: var(--branco);
  border-radius: 18px;
  padding: 18px;
  text-align: center;
  box-shadow: var(--sombra);
}
.stat .num { font-size: 2.2rem; font-weight: 800; color: var(--roxo); }
.stat:nth-child(2) .num { color: var(--verde); }
.stat:nth-child(3) .num { color: var(--amarelo-escuro); }
.stat small { font-weight: 700; color: #6b6394; }

.admin-busca { margin-bottom: 16px; }
.admin-busca input {
  width: 100%;
  font-family: inherit;
  font-size: 1rem;
  padding: 12px 16px;
  border: 3px solid var(--roxo-claro);
  border-radius: 999px;
  outline: none;
}
.tabela-wrap { overflow-x: auto; background: var(--branco); border-radius: 18px; box-shadow: var(--sombra); }
table.admin { width: 100%; border-collapse: collapse; min-width: 760px; }
table.admin th {
  background: var(--roxo);
  color: #fff;
  padding: 12px 10px;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align: left;
}
table.admin td { padding: 10px; border-bottom: 2px solid var(--roxo-claro); font-size: .92rem; vertical-align: middle; }
.badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-weight: 800;
  font-size: .75rem;
}
.badge-ok { background: #dcfce7; color: #166534; }
.badge-pendente { background: #fef9c3; color: #854d0e; }
.detalhes-resp { font-size: .82rem; color: #555; }
.detalhes-resp b { color: var(--roxo-escuro); }
.filtro-acao { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; align-items: center; }

/* ---------- Scanner ---------- */
#leitor { max-width: 480px; margin: 0 auto 20px; border-radius: 18px; overflow: hidden; box-shadow: var(--sombra); }
#resultado-scan {
  max-width: 480px;
  margin: 0 auto 20px;
  display: none;
}

/* ---------- Rodapé ---------- */
.rodape { text-align: center; color: #6b6394; font-size: .85rem; padding: 10px 0 30px; }
.rodape strong { color: var(--roxo); }

/* ---------- Impressão do ingresso ---------- */
@media print {
  body { background: #fff; }
  .no-print { display: none !important; }
  .ingresso { box-shadow: none; max-width: 100%; }
}