/* SimuFísica 3.0 — design system das páginas institucionais (sobre/ajuda/colaboradores/downloads/
   material-apoio/... — ver docs/redesign-3.0.md secao 8). Compartilhado entre essas páginas — não
   confundir com sf3-auth.css (login/cadastro/perfil/...) nem com assets/css/sf3/redesign.css
   (simuladores). Cada página mantém, no próprio <style>, só as classes exclusivas do seu conteúdo.

   Convenção: toggles de estado (menu mobile aberto, dropdown de idioma aberto, link de nav ativo)
   usam uma classe modificadora (`.is-open`, `.is-active`) somada via classList no JS de cada
   página — nenhuma delas mexe em `style.display` diretamente, pra manter o CSS como única fonte
   de verdade sobre a aparência. */

body.sf3-static {
	margin: 0;
	background: #ffffff;
	color: #0f172a;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
body.sf3-static * { box-sizing: border-box; }
body.sf3-static ::selection { background: rgba(43,120,197,0.18); }
a { color: inherit; }
/* Remove o retângulo de contorno/realce que ficava em qualquer link após o
   clique/toque (pedido do usuário 07/09/2026 — print mostrando o retângulo
   preso em volta de um link nas Referências). */
a { -webkit-tap-highlight-color: transparent; }
a:focus, a:active { outline: none; }

.sf3-page { min-height: 100vh; width: 100%; }

/* TOPBAR */
.sf3-topbar { background: #0f172a; color: #cbd5e1; font-size: 13px; }
.sf3-topbar-inner { max-width: 1280px; margin: 0 auto; padding: 8px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.sf3-lang-wrap { position: relative; }
.sf3-lang-btn { background: none; border: none; color: #cbd5e1; font-size: 13px; cursor: pointer; display: flex; align-items: center; gap: 6px; padding: 2px 0; }
.sf3-lang-caret { font-size: 9px; }
.sf3-lang-dropdown { display: none; position: absolute; top: 26px; inset-inline-start: 0; background: #ffffff; border: 1px solid #e2e8f0; border-radius: 8px; box-shadow: 0 8px 24px rgba(15,23,42,0.12); min-width: 160px; padding: 6px; z-index: 50; }
.sf3-lang-dropdown.is-open { display: block; }
.sf3-lang-link { display: block; padding: 8px 10px; font-size: 13px; color: #0f172a; border-radius: 6px; text-decoration: none; }
.sf3-login { display: flex; align-items: center; gap: 10px; }
.sf3-login-link { color: #cbd5e1; font-size: 13px; text-decoration: none; }
.sf3-login-name { color: #ffffff; font-weight: 600; text-decoration: none; }
.sf3-login-sep { color: #475569; margin: 0 8px; }
.sf3-login-logout { color: #cbd5e1; font-size: 13px; text-decoration: none; }

/* HEADER */
.sf3-header { position: sticky; top: 0; z-index: 40; background: rgba(255,255,255,0.9); backdrop-filter: blur(8px); border-bottom: 1px solid #e2e8f0; }
.sf3-header-inner { max-width: 1280px; margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.sf3-logo-header { height: 32px; width: auto; display: block; }
.sf3-desktop-nav { display: flex; align-items: center; gap: 28px; flex: 1; justify-content: center; }
.sf3-nav-link { text-decoration: none; font-size: 14px; font-weight: 500; white-space: nowrap; color: #334155; }
.sf3-nav-link.is-active { color: #2B78C5; }
.sf3-mobile-menu-btn { display: none; background: none; border: 1px solid #e2e8f0; border-radius: 8px; width: 38px; height: 38px; align-items: center; justify-content: center; cursor: pointer; }
.sf3-mobile-menu-btn-bars { display: flex; flex-direction: column; gap: 4px; }
.sf3-mobile-menu-btn-bar { width: 16px; height: 2px; background: #0f172a; border-radius: 2px; }
.sf3-mobile-menu { display: none; border-top: 1px solid #e2e8f0; padding: 16px 24px; flex-direction: column; gap: 4px; background: #ffffff; }
.sf3-mobile-menu.is-open { display: flex; }
.sf3-mobile-nav-link { color: #334155; text-decoration: none; font-size: 15px; font-weight: 500; padding: 10px 4px; border-bottom: 1px solid #f1f5f9; }
.sf3-mobile-nav-link.is-active { color: #2B78C5; }

/* FOOTER */
.sf3-footer { border-top: 1px solid #e2e8f0; background: #f8fafc; }
.sf3-footer-grid { max-width: 1280px; margin: 0 auto; padding: 48px 24px 28px; display: grid; grid-template-columns: repeat(4,1fr); gap: 32px; }
.sf3-logo-footer { height: 26px; width: auto; margin-bottom: 12px; }
.sf3-footer-desc { font-size: 13px; color: #64748b; line-height: 1.6; max-width: 220px; }
.sf3-footer-col-title { font-size: 13px; font-weight: 600; color: #0f172a; margin-bottom: 14px; }
.sf3-footer-links { display: flex; flex-direction: column; gap: 10px; }
.sf3-footer-link { color: #475569; text-decoration: none; font-size: 13px; }
.sf3-footer-funding-wrap { max-width: 1280px; margin: 0 auto; padding: 0 24px 28px; }
.sf3-footer-funding-inner { border-top: 1px solid #e2e8f0; padding-top: 24px; text-align: center; }
.sf3-footer-funding-label { font-size: 12px; color: #94a3b8; margin-bottom: 14px; }
.sf3-footer-funding-logos { display: flex; justify-content: center; align-items: center; gap: 40px; flex-wrap: wrap; max-width: 100%; }
.sf3-footer-funding-logo { height: 60px; width: auto; max-width: 100%; opacity: 0.75; filter: grayscale(1); }
.sf3-footer-bottom { max-width: 1280px; margin: 0 auto; padding: 16px 24px 28px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; border-top: 1px solid #e2e8f0; }
.sf3-footer-copy { font-size: 12px; color: #94a3b8; }
.sf3-footer-bottom-links { display: flex; gap: 18px; }
.sf3-footer-bottom-link { color: #94a3b8; text-decoration: none; font-size: 12px; }

/* Alterna automaticamente entre o menu horizontal e o botão (☰) quando o conteúdo
   não cabe no cabeçalho — ver sf3AjustarNavResponsiva() no <script> de cada página. */
body.sf3-nav-compacta .sf3-desktop-nav { display: none !important; }
body.sf3-nav-compacta .sf3-mobile-menu-btn { display: flex !important; }
body.sf3-nav-compacta #sf3-mobile-menu { position: absolute !important; top: 100% !important; left: 0 !important; right: 0 !important; z-index: 39 !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; box-shadow: 0 12px 24px rgba(15,23,42,0.12); }

@media (max-width: 900px) {
	body.sf3-static .sf3-desktop-nav { display: none !important; }
	body.sf3-static .sf3-mobile-menu-btn { display: flex !important; }
	body.sf3-static #sf3-mobile-menu { position: absolute !important; top: 100% !important; left: 0 !important; right: 0 !important; z-index: 39 !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; box-shadow: 0 12px 24px rgba(15,23,42,0.12); }
	body.sf3-menu-aberto { overflow: hidden !important; }
	body.sf3-static .sf3-footer-grid { grid-template-columns: repeat(2,1fr) !important; }
}
@media (max-width: 520px) {
	body.sf3-static .sf3-footer-grid { grid-template-columns: 1fr !important; }
}
