/* ============================================================
   Barra superior y botón Biblioteca
   ------------------------------------------------------------
   Capa: componente
   ============================================================ */

/* ═══════════════════════════════════════════════════
   NAVBAR — glass premium
═══════════════════════════════════════════════════ */
nav {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--navbar-h); z-index: 1000;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 28px;
  background: rgba(253,248,240,.88);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(232,224,208,.6);
  transition: background var(--t), border-color var(--t);
}
body.dark-mode nav {
  background: rgba(18,18,31,.88);
  border-bottom-color: rgba(46,46,80,.6);
}
/* Línea de acento gold debajo de la nav */
nav::after {
  content: '';
  position: absolute; bottom: -1px; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--accent) 30%, var(--accent-strong) 70%, transparent 100%);
  opacity: .5;
  pointer-events: none;
}

.nav-logo { display: flex; align-items: center; gap: 14px; }
.nav-logo img { height: 36px; width: auto; }
.nav-brand-info {
  display: flex; flex-direction: column;
  justify-content: center; line-height: 1.2;
}
.nav-brand-info .nav-name {
  font-family: var(--font-mono);
  font-size: .65rem; font-weight: 500;
  color: var(--gray); letter-spacing: .08em;
  text-transform: uppercase;
  transition: color var(--t);
}
.nav-brand-info .nav-topic {
  font-family: var(--font-mono);
  font-size: .76rem; font-weight: 500;
  color: var(--accent-2); letter-spacing: .01em;
  max-width: 260px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  transition: color var(--t);
}
html.dark-mode .nav-brand-info .nav-name, body.dark-mode .nav-brand-info .nav-name { color: var(--gray); }
html.dark-mode .nav-brand-info .nav-topic, body.dark-mode .nav-brand-info .nav-topic { color: var(--accent); }
@media(max-width: 600px) { .nav-brand-info { display: none; } }

.nav-right { display: flex; align-items: center; gap: 12px; }

/* .nav-user-chip se borro en la Fase 6. Era el chip de usuario
   anterior al control con menu; su marcado dejo de existir cuando
   ese control lo reemplazo, y las ultimas paginas que todavia
   nombraban la clase eran los monolitos de Neo, Atlas y Aurora
   —desde SUS PROPIAS hojas, no desde esta—, que ya no existen. */

/* El contador de la prueba gratuita (.nav-cupo) se mudo a
   componentes/usuario.css. Lo dibuja _usuario-control.php, que es
   marcado COMPARTIDO con la Biblioteca, y la Biblioteca enlaza
   usuario.css y admin-modal.css pero NO esta hoja: el chip salia
   ahi sin una sola regla. Ver el comentario en usuario.css. */

/* theme toggle */
#theme-toggle {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  border: 1.5px solid var(--border);
  background: var(--bg2); cursor: pointer;
  font-size: .95rem; color: var(--text);
  transition: all .25s cubic-bezier(.34,1.56,.64,1);
  flex-shrink: 0;
}
#theme-toggle:hover {
  background: var(--accent); border-color: var(--accent); color: var(--on-accent);
  transform: scale(1.12) rotate(20deg);
  box-shadow: 0 0 16px var(--accent-glow);
}
body.dark-mode #theme-toggle { background: var(--card2); border-color: var(--border); }