:root {
  /* Paleta baseada na logo "Santo Fole - Gaita e Pesca no Pantanal" (roxo + verde-limão) */
  --cor-primaria: #6b21a8;         /* roxo vibrante da logo, usado em botões e destaques */
  --cor-primaria-escura: #4c1480;  /* roxo mais profundo, para hover/contraste */
  --cor-secundaria: #7c3aed;       /* roxo médio, tom do céu do pôr do sol */
  --cor-sucesso: #4d9a00;          /* verde-limão escurecido, legível em fundo claro (confirmações) */
  --cor-alerta: #c0267a;           /* magenta/rosa arroxeado, para alertas sem fugir da paleta */
  --cor-fundo: #f6f2fc;            /* lavanda bem clara, fundo da tela */
  --cor-card: #ffffff;
  --cor-texto: #2a1244;            /* roxo muito escuro, quase preto, para leitura confortável */
  --cor-destaque: #a3e635;         /* verde-limão neon da logo, para detalhes, badges e bordas */
  --raio-borda: 18px;
  --sombra-card: 0 10px 30px rgba(76, 20, 128, 0.15);
}

body {
  background-color: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: 'Segoe UI', system-ui, sans-serif;
}

.pagina-central {
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 16px;
}

.card-viagem {
  width: 100%;
  max-width: 640px;
  background: var(--cor-card);
  border-radius: var(--raio-borda);
  box-shadow: var(--sombra-card);
  overflow: hidden;
}

.card-viagem .capa {
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  display: block;
}

.card-viagem .conteudo {
  padding: 24px;
}

@media (max-width: 480px) {
  .card-viagem .conteudo {
    padding: 18px;
  }
}

.btn-primario {
  background-color: var(--cor-primaria);
  border-color: var(--cor-primaria);
}

.btn-primario:hover {
  background-color: var(--cor-primaria-escura);
  border-color: var(--cor-primaria-escura);
}

.aba-pessoa {
  border-radius: 12px;
}

.badge-crianca {
  background-color: #ffc107;
  color: #212529;
}

.resumo-financeiro td, .resumo-financeiro th {
  vertical-align: middle;
}

.saldo-devedor {
  font-size: 1.4rem;
  font-weight: 700;
}

.tarja-alerta {
  background-color: var(--cor-alerta);
  color: #fff;
  text-align: center;
  font-weight: 600;
  padding: 10px 16px;
  font-size: 0.9rem;
}