/* ============================================================
   FECITEC Bonfim — sistema visual moderno
   Cor de identidade: laranja (#ff7a00), a mesma usada nos e-mails
   ============================================================ */

:root {
  --fx-laranja: #ff7a00;
  --fx-laranja-escuro: #e56e00;
  --fx-laranja-claro: #fff4e8;
  --fx-tinta: #22262b;
  --fx-tinta-suave: #6b7280;
  --fx-fundo: #f6f7f9;
  --fx-superficie: #ffffff;
  --fx-borda: #e5e7eb;
}

body {
  background-color: var(--fx-fundo);
}

/* ---------- topo/banner público ---------- */
.fx-topo-publico {
  background: #fff;
  padding: 16px 20px 0;
  margin-bottom: 8px;
}
.fx-topo-publico-conteudo {
  max-width: 1100px;
  margin: 0 auto;
}
.fx-banner-principal {
  width: 100%;
  height: auto;
  border-radius: 14px;
  display: block;
}

/* ---------- barra de navegação ---------- */
.fx-nav {
  background: var(--fx-superficie);
  border-bottom: 1px solid var(--fx-borda);
}
.fx-nav .nav-item.nav-link {
  color: var(--fx-tinta-suave) !important;
  font-size: 14px;
  font-weight: 500;
  padding: 14px 14px !important;
  transition: color .15s ease;
}
.fx-nav .nav-item.nav-link:hover {
  color: var(--fx-laranja) !important;
}
.fx-nav .nav-item.nav-link i {
  color: var(--fx-laranja);
  margin-right: 5px;
}
.fx-nav .nav-item.nav-link.active {
  color: var(--fx-laranja) !important;
  font-weight: 700;
  border-bottom: 2px solid var(--fx-laranja);
}

/* ---------- botões ---------- */
.fx-btn-primario {
  background: var(--fx-laranja);
  color: #fff !important;
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  display: inline-block;
  text-decoration: none;
}
.fx-btn-primario:hover {
  background: var(--fx-laranja-escuro);
  color: #fff;
  text-decoration: none;
}
.fx-btn-secundario {
  background: var(--fx-superficie);
  color: var(--fx-tinta) !important;
  border: 1px solid var(--fx-borda);
  border-radius: 8px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  display: inline-block;
  text-decoration: none;
}
.fx-btn-secundario:hover {
  background: #fafafa;
  color: var(--fx-tinta);
  text-decoration: none;
}

/* ---------- cartões ---------- */
.fx-card {
  background: var(--fx-superficie);
  border: 1px solid var(--fx-borda);
  border-radius: 12px;
  padding: 18px 20px;
}
.fx-card:hover {
  box-shadow: 0 2px 10px rgba(0,0,0,.05);
}

/* ---------- pílulas de status (reaproveitadas nas telas administrativas) ---------- */
.fx-pill { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; padding:4px 11px; border-radius:20px; }
.fx-pill-rascunho { background:#f1f2f4; color:#6b7280; }
.fx-pill-aguardando { background:#faeeda; color:#854f0b; }
.fx-pill-atrasado { background:#fcebeb; color:#791f1f; }
.fx-pill-avaliado { background:#eaf3de; color:#27500a; }

/* ---------- título "Página Administrativa" antigo, agora mais discreto ---------- */
.barra_saudacao {
  background-color: var(--fx-laranja) !important;
  color: #ffffff;
  padding: 14px;
  border-radius: 10px;
  font-size: 18px !important;
}