/* ===== Tema + Menu flutuante (extraído/adaptado dos novos arquivos) ===== */
:root{
  --bg:#f7f7fb; --surface:#ffffff; --text:#111827; --muted:#6b7280; --border:#e5e7eb;
  --accent:#2563eb; --accent2:#0ea5e9;
  --shadow:0 10px 30px rgba(0,0,0,.10);
  --shadowStrong:0 18px 50px rgba(0,0,0,.18);
  --radius:16px; --max:1200px;
}

/* Dark mode: funciona com o checkbox #tema (via :has) e também via classe .dark no body (fallback JS). */
body:has(.theme-toggle:checked), body.dark{
  --bg:#0b1220; --surface:#0f1a2f; --text:#e5e7eb; --muted:#9ca3af; --border:rgba(255,255,255,.12);
  --accent:#60a5fa; --accent2:#22d3ee;
  --shadow:0 12px 40px rgba(0,0,0,.35);
}

html, body { height: 100%; }
body{
  background: var(--bg);
  color: var(--text);
  transition: background-color .25s ease, color .25s ease;
}

/* Botão/controle de tema (a UI do switch fica dentro da nav) */
.theme-toggle{ position:absolute; left:-9999px; }

/* ===== Nav flutuante + menu (ids esperados pelo menu.js) ===== */
.nav-float{position:fixed; top:0; left:0; width:100%; z-index:999; padding:12px 0; }
.nav-shell{ width:100%; max-width:var(--max); margin:0 auto; padding:0 1rem; display:flex; justify-content:center; }
.nav-pill{
  width:100%;
  display:flex;
  align-items:center;
  gap:.75rem;
  padding:.75rem 1rem;
  border:1px solid var(--border);
  border-radius:999px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  box-shadow: var(--shadow);
  backdrop-filter: blur(8px);
}
.nav-float.scrolled .nav-pill{ box-shadow: var(--shadowStrong); }

.nav-title{ font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.logo{ display:flex; align-items:center; text-decoration:none; color:inherit; }
.logo-badge{
  width:36px; height:36px; border-radius:12px;
  display:grid; place-items:center;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color:white; font-weight:800;
}

.theme-switch{ margin-left:auto; display:flex; align-items:center; gap:.5rem; cursor:pointer; user-select:none; }
.switch-text{ font-size:.9rem; color:var(--muted); }
.switch-ui{
  width:44px; height:26px; border-radius:999px; border:1px solid var(--border);
  background: var(--surface); position:relative; box-shadow: inset 0 0 0 1px rgba(0,0,0,.02);
}
.switch-dot{
  position:absolute; top:50%; left:3px; transform:translateY(-50%);
  width:20px; height:20px; border-radius:999px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  transition: left .2s ease;
}
body:has(.theme-toggle:checked) .switch-dot, body.dark .switch-dot{ left:21px; }

.menu-btn{
  border:1px solid var(--border);
  background: var(--surface);
  border-radius:12px;
  padding:.45rem .7rem;
  font-size:1.1rem;
  line-height:1;
  cursor:pointer;
  color:var(--text);
}

/* Overlay + menu lateral flutuante */
.menu-overlay{
  position:fixed; inset:0; background: rgba(0,0,0,.35);
  opacity:0; pointer-events:none; transition: opacity .18s ease;
  z-index:998;
}
.menu-overlay.open{ opacity:1; pointer-events:auto; }

.menu-float{
  position:fixed; top:76px; right:16px;
  width:min(320px, calc(100vw - 32px));
  max-height: calc(100vh - 96px);
  overflow:auto;
  background: var(--surface);
  border:1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadowStrong);
  padding: .85rem;
  transform: translateY(-8px) scale(.98);
  opacity:0; pointer-events:none;
  transition: transform .18s ease, opacity .18s ease;
  z-index:999;
}
.menu-float.open{ opacity:1; pointer-events:auto; transform: translateY(0) scale(1); }

.menu-links{ display:flex; flex-direction:column; gap:.35rem; }
.menu-links a{
  padding:.55rem .65rem;
  border-radius:12px;
  text-decoration:none;
  color:var(--text);
  border:1px solid transparent;
}
.menu-links a:hover{ background: color-mix(in srgb, var(--accent) 10%, transparent); }
.menu-links a.active{
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

/* Dá espaço pro conteúdo não ficar debaixo da nav fixa */
body{ padding-top: 88px; }

.logo-img{
  height: 36px;
  width: auto;
  object-fit: contain;
  margin: 0; /* anula a margem global */
}