/* Hola Books — the cross-tool navigation drawer.
   Tokens carry literal fallbacks because the frozen Provisioning page loads
   only colors.css + this file.
   Shared by Envíos, Inventario and the Teacher Hub tools so the menu behaves the
   same everywhere. Lifted out of inventario/app.css, which had it under --inv-*
   aliases; this version uses the design-system tokens directly.

   Markup:
     <button class="hb-nav-burger" …><span></span><span></span><span></span></button>
     <div class="hb-nav-scrim">
       <nav class="hb-nav">
         .hb-nav-head  > .hb-nav-mark + .hb-nav-close
         .hb-nav-label   (section heading, repeated)
         .hb-nav-link    (× n, aria-current="page" on the active one)
         .hb-nav-foot  > .hb-nav-who + .hb-nav-exit
       </nav>
     </div>
*/

:root { --hb-nav-safe-b: env(safe-area-inset-bottom, 0px); }

.hb-nav-burger {
  width: 40px; height: 40px; flex-shrink: 0;
  border: none; background: transparent; cursor: pointer; border-radius: 10px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.hb-nav-burger:hover { background: var(--hb-cloud); }
.hb-nav-burger span { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--hb-chalkboard); }

.hb-nav-scrim {
  position: fixed; inset: 0; z-index: var(--z-nav, 80);
  background: var(--color-scrim, rgba(54, 53, 53, .4));
  animation: hbNavFade .2s var(--ease-out, cubic-bezier(.22, .61, .36, 1)) both;
}
@keyframes hbNavFade { from { opacity: 0; } to { opacity: 1; } }

.hb-nav {
  position: absolute; top: 0; left: 0; bottom: 0;
  width: min(300px, 86vw); background: var(--hb-paper);
  box-shadow: var(--shadow-drawer, 0 8px 28px rgba(54, 53, 53, .22));
  padding: 16px 16px calc(16px + var(--hb-nav-safe-b));
  display: flex; flex-direction: column;
  overflow-y: auto; overscroll-behavior: contain;
  animation: hbNavIn .28s var(--ease-out, cubic-bezier(.22, .61, .36, 1)) both;
}
@keyframes hbNavIn { from { transform: translateX(-100%); } to { transform: translateX(0); } }

.hb-nav-head { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 8px; }
.hb-nav-mark { width: 150px; height: auto; display: block; margin: -6px 0 0 -4px; }
.hb-nav-close {
  margin-left: auto; width: 44px; height: 44px; margin-top: -6px; margin-right: -6px;
  border: none; background: transparent; color: var(--hb-chalkboard);
  font-size: 22px; cursor: pointer; border-radius: 999px;
}
.hb-nav-close:hover { background: var(--hb-cloud); }

.hb-nav-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: .14em;
  color: var(--hb-muted); padding: 14px 8px 6px;
}
.hb-nav-label:first-of-type { padding-top: 8px; }

.hb-nav-link {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 8px; border-radius: 12px;
  text-decoration: none; color: var(--hb-chalkboard);
  font-size: 14.5px; font-weight: 600;
  border: none; background: transparent; width: 100%; text-align: left;
  font-family: inherit; cursor: pointer;
}
.hb-nav-link:hover { background: var(--hb-cloud); color: var(--hb-chalkboard); }
.hb-nav-link[aria-current="page"] { background: var(--hb-agave-light); }
.hb-nav-icon { width: 34px; height: 34px; object-fit: contain; flex-shrink: 0; }

/* section links sit inside the drawer without an icon, so they indent to the
   same text column as the ones that have one */
.hb-nav-link.is-sub { padding-left: 54px; font-size: 14px; font-weight: 500; }

.hb-nav-foot {
  margin-top: auto; padding-top: 16px; border-top: 1px solid var(--hb-line);
  display: flex; flex-direction: column; gap: 8px;
}
.hb-nav-who { font-size: 12px; color: var(--hb-muted); padding: 0 8px; }
.hb-nav-exit {
  font-size: 13px; font-weight: 600; color: var(--color-link);
  text-decoration: none; padding: 8px; background: none; border: none;
  text-align: left; font-family: inherit; cursor: pointer;
}
.hb-nav-exit:hover { text-decoration: underline; }