/* ─── Variáveis de cor ────────────────────────────────── */
:root {
  --laranja: #FF7043;
  --amarelo: #FFC107;
  --verde:   #4CAF50;
  --azul:    #2196F3;
  --roxo:    #9C27B0;
  --rosa:    #E91E63;
  --fundo:   #FFF8F0;
}

body { background: var(--fundo); font-family: 'Segoe UI', sans-serif; }

/* ─── Navbar ──────────────────────────────────────────── */
.navbar-main { background: linear-gradient(135deg, var(--laranja), #E64A19); }
.navbar-main .navbar-brand { font-size: 1.4rem; font-weight: 800; color: #fff !important; }
.navbar-main .nav-link { color: rgba(255,255,255,.9) !important; font-weight: 500; }
.navbar-main .nav-link:hover { color: var(--amarelo) !important; }

/* ─── Hero ────────────────────────────────────────────── */
.hero {
  background: linear-gradient(135deg, var(--laranja) 0%, var(--amarelo) 100%);
  color: #fff; padding: 80px 0; text-align: center;
}
.hero h1 { font-size: 2.8rem; font-weight: 900; text-shadow: 0 2px 8px rgba(0,0,0,.2); }
.hero p  { font-size: 1.25rem; opacity: .95; }

/* ─── Seções ──────────────────────────────────────────── */
.section-title {
  font-size: 2rem; font-weight: 800; position: relative; display: inline-block;
}
.section-title::after {
  content: ''; display: block; height: 4px; border-radius: 2px;
  background: linear-gradient(90deg, var(--laranja), var(--amarelo));
  margin-top: 6px;
}

/* ─── Cards ───────────────────────────────────────────── */
.card-custom {
  border: none; border-radius: 16px; overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,.10);
  transition: transform .25s, box-shadow .25s;
}
.card-custom:hover { transform: translateY(-6px); box-shadow: 0 12px 32px rgba(0,0,0,.15); }
.card-custom img { height: 200px; object-fit: cover; }
.card-custom .card-body { padding: 1.2rem; }
.card-custom .card-title { font-weight: 700; font-size: 1.05rem; }

/* ─── Badges de categoria ─────────────────────────────── */
.badge-cat {
  font-size: .75rem; border-radius: 50px; padding: 4px 12px; font-weight: 600;
}
.badge-afiliado { background: var(--azul);    color: #fff; }
.badge-receita  { background: var(--verde);   color: #fff; }
.badge-exercicio{ background: var(--roxo);    color: #fff; }
.badge-cha      { background: var(--rosa);    color: #fff; }

/* ─── Botões ──────────────────────────────────────────── */
.btn-laranja  { background: var(--laranja); color: #fff; border: none; border-radius: 50px; font-weight: 700; }
.btn-laranja:hover  { background: #E64A19; color: #fff; }
.btn-verde    { background: var(--verde);   color: #fff; border: none; border-radius: 50px; font-weight: 700; }
.btn-verde:hover    { background: #388E3C; color: #fff; }
.btn-roxo     { background: var(--roxo);    color: #fff; border: none; border-radius: 50px; font-weight: 700; }
.btn-azul     { background: var(--azul);    color: #fff; border: none; border-radius: 50px; font-weight: 700; }
.btn-rosa     { background: var(--rosa);    color: #fff; border: none; border-radius: 50px; font-weight: 700; }

/* ─── Filtros ─────────────────────────────────────────── */
.filtro-btn {
  border-radius: 50px; padding: 6px 18px; font-weight: 600;
  border: 2px solid var(--laranja); color: var(--laranja);
  background: #fff; cursor: pointer; transition: all .2s;
}
.filtro-btn.active, .filtro-btn:hover {
  background: var(--laranja); color: #fff;
}

/* ─── Footer ──────────────────────────────────────────── */
footer {
  background: linear-gradient(135deg, #37474F, #263238);
  color: rgba(255,255,255,.85); padding: 40px 0;
}
footer a { color: var(--amarelo); text-decoration: none; }
footer a:hover { text-decoration: underline; }

/* ─── Admin ───────────────────────────────────────────── */
.admin-sidebar { background: #263238; min-height: 100vh; }
.admin-sidebar .nav-link { color: rgba(255,255,255,.8); border-radius: 8px; }
.admin-sidebar .nav-link:hover, .admin-sidebar .nav-link.active { background: var(--laranja); color: #fff; }
.admin-card { border: none; border-radius: 12px; box-shadow: 0 2px 12px rgba(0,0,0,.08); }

/* ─── Utilitários ─────────────────────────────────────── */
.loading { text-align: center; padding: 60px; color: #aaa; font-size: 1.1rem; }
.empty   { text-align: center; padding: 60px; color: #bbb; }