/* GraduandOss — tokens de marca e componentes (ver docs/branding/identidade-visual.md) */

:root {
  --gd-azul: #1f3b73;
  --gd-preto: #0e1320;
  --gd-ouro: #c9a227;
  --gd-kimono: #f6f4ef;
  --gd-vermelho: #b3261e;
  --gd-cinza: #6b7280;
  --gd-primaria: var(--gd-azul); /* sobrescrita pela cor da academia no base.html */
}

body {
  background: var(--gd-kimono);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--gd-preto);
}

h1, h2, h3, h4, .display-5, .display-6 {
  font-family: "Sora", system-ui, sans-serif;
  font-weight: 700;
}

/* Botões herdam a cor da academia (Bootstrap 5.3 usa CSS vars) */
.btn-primary {
  --bs-btn-bg: var(--gd-primaria);
  --bs-btn-border-color: var(--gd-primaria);
  --bs-btn-hover-bg: color-mix(in srgb, var(--gd-primaria) 85%, black);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--gd-primaria) 85%, black);
  --bs-btn-active-bg: color-mix(in srgb, var(--gd-primaria) 75%, black);
  --bs-btn-active-border-color: color-mix(in srgb, var(--gd-primaria) 75%, black);
  --bs-btn-disabled-bg: var(--gd-primaria);
  --bs-btn-disabled-border-color: var(--gd-primaria);
}
.btn-outline-primary {
  --bs-btn-color: var(--gd-primaria);
  --bs-btn-border-color: var(--gd-primaria);
  --bs-btn-hover-bg: var(--gd-primaria);
  --bs-btn-hover-border-color: var(--gd-primaria);
  --bs-btn-active-bg: var(--gd-primaria);
  --bs-btn-active-border-color: var(--gd-primaria);
}
.text-primaria { color: var(--gd-primaria) !important; }
.bg-primaria { background-color: var(--gd-primaria) !important; }

a { color: var(--gd-primaria); }

/* ---------- Casca do app ---------- */
.gd-topbar {
  background: var(--gd-preto);
  color: #fff;
}
.gd-topbar .nav-link { color: rgba(255, 255, 255, 0.78); font-weight: 500; }
.gd-topbar .nav-link.active,
.gd-topbar .nav-link:hover { color: var(--gd-ouro); }
/* Logo da academia em evidência no acesso logado (enviada pelo gestor) */
.gd-logo-academia {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  object-fit: contain;
  background: #fff;
  padding: 3px;
}
/* Fallback: marca GraduandOss até o gestor enviar a logo da academia */
.gd-logo-chip {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--gd-kimono);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.gd-logo-chip img { height: 26px; }
.gd-logo-inicial {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--gd-primaria);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  flex: none;
}

main.gd-conteudo { padding-bottom: 84px; } /* espaço para a navegação inferior */
@media (min-width: 992px) {
  main.gd-conteudo { padding-bottom: 2rem; }
}

/* Navegação inferior (celular) — alvos de toque ≥ 44px */
.gd-bottom-nav {
  position: fixed;
  inset: auto 0 0 0;
  background: var(--gd-preto);
  border-top: 2px solid var(--gd-ouro);
  z-index: 1030;
  padding-bottom: env(safe-area-inset-bottom);
}
.gd-bottom-nav a {
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  font-size: 0.72rem;
  min-height: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  flex: 1;
}
.gd-bottom-nav a.active { color: var(--gd-ouro); }
.gd-bottom-nav a i { font-size: 1.25rem; }

/* ---------- Faixa desenhada em CSS ---------- */
.faixa {
  display: inline-flex;
  align-items: stretch;
  width: 92px;
  height: 16px;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.22);
  vertical-align: middle;
  flex: none;
}
.faixa-corpo { position: relative; flex: 1; background: var(--faixa-cor, #ccc); }
.faixa-listra {
  position: absolute;
  inset: 35% 0;
  background: var(--faixa-ponta, transparent);
}
.faixa-ponteira {
  width: 34%;
  background: #15181d;
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  gap: 2px;
  padding: 0 3px;
}
.faixa-ponteira.ponteira-vermelha { background: var(--gd-vermelho); }
.faixa-grau { width: 4px; margin: 2px 0; border-radius: 1px; }
.faixa-grau.g-branco { background: #fff; }
.faixa-grau.g-vermelho { background: var(--gd-vermelho); }
.faixa-grau.g-preto { background: #000; box-shadow: 0 0 0 1px #555; }
.faixa-lg { width: 150px; height: 24px; }
.faixa-lg .faixa-grau { width: 6px; }

/* ---------- Chamada ---------- */
.linha-chamada {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.75rem;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #e5e2da;
}
.linha-chamada.presente {
  border-color: color-mix(in srgb, var(--gd-primaria) 55%, white);
  background: color-mix(in srgb, var(--gd-primaria) 7%, white);
}
.avatar-aluno {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--gd-kimono);
  flex: none;
}
.avatar-inicial {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--gd-cinza);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  flex: none;
}
.btn-presenca {
  min-width: 52px;
  min-height: 48px;
  border-radius: 12px;
  font-size: 1.3rem;
}

/* Selos de estado de graduação */
.selo { font-size: 0.72rem; font-weight: 700; border-radius: 999px; padding: 0.2rem 0.55rem; white-space: nowrap; }
.selo-gradua-hoje { background: var(--gd-ouro); color: #231a00; }
.selo-apto { background: #1b7f3b; color: #fff; }
.selo-proximo { background: color-mix(in srgb, var(--gd-ouro) 30%, white); color: #5a4a0d; }
.selo-bloqueado { background: #e9e5db; color: var(--gd-cinza); }
.selo-vencida { background: var(--gd-vermelho); color: #fff; }

.progresso-grad { height: 8px; border-radius: 999px; background: #e7e3d8; overflow: hidden; }
.progresso-grad > div { height: 100%; background: var(--gd-primaria); border-radius: 999px; }

/* Régua de faixas — assinatura da marca (divisor de seções) */
.regua-faixas {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    #f3f0e8 0 20%, #1565c0 20% 40%, #6a1b9a 40% 60%, #5d4037 60% 80%, #0c0c0c 80% 100%
  );
}

.card { border: 1px solid #e7e3d8; border-radius: 14px; }
.card-header { background: transparent; border-bottom-color: #eee9dd; font-weight: 700; }

/* ---------- Landing ---------- */
.landing { background: var(--gd-kimono); }
.landing-hero {
  background: linear-gradient(160deg, var(--gd-preto) 0%, #16254a 55%, var(--gd-azul) 100%);
  color: #fff;
}
.landing-hero .destaque { color: var(--gd-ouro); }
.landing-hero .lead { color: rgba(255, 255, 255, 0.82); max-width: 560px; }
.landing .navbar { background: transparent; }
.landing .navbar .nav-link, .landing .navbar-brand { color: #fff; }
.btn-ouro {
  --bs-btn-bg: var(--gd-ouro);
  --bs-btn-border-color: var(--gd-ouro);
  --bs-btn-color: #231a00;
  --bs-btn-hover-bg: #b8921f;
  --bs-btn-hover-border-color: #b8921f;
  --bs-btn-hover-color: #231a00;
  font-weight: 700;
}
.cartao-recurso {
  background: #fff;
  border: 1px solid #e7e3d8;
  border-radius: 16px;
  padding: 1.5rem;
  height: 100%;
}
.cartao-recurso i { font-size: 1.6rem; color: var(--gd-primaria); }
.icone-selo {
  width: 48px; height: 48px; border-radius: 12px;
  background: color-mix(in srgb, var(--gd-azul) 10%, white);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 0.75rem;
}
.landing-passo { font-family: "Sora", sans-serif; font-size: 2rem; font-weight: 800; color: var(--gd-ouro); }
.landing-rodape { background: var(--gd-preto); color: rgba(255, 255, 255, 0.7); }
.landing-rodape a { color: rgba(255, 255, 255, 0.85); }

/* Mesa de faixas da landing (decoração do hero) */
.mesa-faixas { display: grid; gap: 10px; }
.mesa-faixas .faixa { width: 100%; height: 22px; }

/* Formulários e utilidades */
.form-control, .form-select { border-radius: 10px; }
label.form-label { font-weight: 600; font-size: 0.9rem; }
.table > :not(caption) > * > * { background: transparent; }
.quadro-numero { font-family: "Sora", sans-serif; font-size: 1.7rem; font-weight: 800; line-height: 1; }