.nav-bar { position: fixed; z-index: 20; left: 50%; bottom: max(10px, env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; align-items: center; gap: 4px; width: max-content; max-width: calc(100vw - 20px - var(--safe-l) - var(--safe-r)); padding: 5px; border: 1px solid var(--faint); border-radius: var(--radius); background: color-mix(in srgb, var(--paper) 92%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 8px 24px rgb(26 18 8 / .12); overflow-x: auto; scrollbar-width: none; overscroll-behavior: contain; }
.nav-bar::-webkit-scrollbar { display: none; }
.nav-links { display: contents; }
.nav-menu { display: none; }
.nav-btn { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; min-height: 44px; padding: 7px 11px; border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; color: var(--mid); font: 600 .84rem/1 var(--serif); text-decoration: none; white-space: nowrap; cursor: pointer; touch-action: manipulation; }
.nav-glyph { font-style: normal; }
.nav-btn:hover, .nav-btn.active-nav { border-color: var(--faint); color: var(--ink); background: var(--paper-dark); text-decoration: none; }
.nav-btn:active { transform: translateY(1px); }
.nav-btn--theme { width: auto; padding-inline: 12px; }
.nav-btn--lang { padding-inline: 10px; letter-spacing: .04em; }

/* anchos medios: una fila sin glifo */
@media (max-width: 760px) { .nav-bar { gap: 2px; } .nav-btn { padding-inline: 9px; } .nav-glyph { display: none; } }

/* teléfonos: pastilla colapsada + hoja que se abre hacia arriba */
@media (max-width: 640px) {
  .nav-bar { width: calc(100vw - 20px - var(--safe-l) - var(--safe-r)); max-width: 460px; justify-content: space-between; gap: 6px; overflow: visible; }
  .nav-menu { display: flex; flex: 1 1 auto; align-items: center; gap: 8px; min-height: 44px; padding: 6px 12px; border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; color: var(--ink); font: 600 1rem/1 var(--serif); text-align: left; cursor: pointer; touch-action: manipulation; }
  .nav-menu:active { background: var(--paper-dark); }
  .nav-menu-glyph { color: var(--accent); }
  .nav-current { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .nav-chevron { color: var(--mid); font-size: .8rem; transition: transform .2s ease; }
  .nav-bar.open .nav-chevron { transform: rotate(180deg); }
  .nav-links { position: absolute; left: 0; right: 0; bottom: calc(100% + 8px); display: none; grid-template-columns: 1fr 1fr; gap: 4px; padding: 6px; border: 1px solid var(--faint); border-radius: var(--radius); background: var(--paper); box-shadow: 0 12px 32px rgb(26 18 8 / .18); }
  .nav-bar.open .nav-links { display: grid; }
  .nav-links .nav-btn { min-height: 48px; padding: 8px 10px; font-size: .98rem; justify-content: flex-start; }
  .nav-links .nav-glyph { display: inline; color: var(--accent); }
  .nav-btn--theme { min-height: 44px; padding-inline: 12px; }
}

/* móviles en horizontal: poca altura; si cabe, fila completa */
@media (min-width: 641px) and (max-height: 480px) and (orientation: landscape) {
  .nav-bar { overflow-x: auto; }
  .nav-btn { min-height: 38px; padding-block: 5px; }
}