/* ────────────────────────────────────────────────────────────────────────── Menu lateral (hambúrguer) — navegação completa da app (Dossiê). Botão fica à ESQUERDA do sino (canto sup. direito); drawer desliza da direita. ────────────────────────────────────────────────────────────────────────── */ /* Botão hambúrguer — espelha o .notifbell (par visual), posicionado à sua esquerda. */ .hbtn { position: fixed; top: calc(13px + env(safe-area-inset-top, 0px)); right: calc(50% - 222px); z-index: 100; width: 40px; height: 40px; border-radius: 11px; border: 1px solid var(--line-2); background: var(--card); color: var(--ink-2); display: flex; align-items: center; justify-content: center; box-shadow: 0 3px 12px rgba(26,29,34,.08); cursor: pointer; } .hbtn svg { width: 21px; height: 21px; } .hbtn:active { transform: translateY(1px); } @media (max-width: 515px) { .hbtn { right: 18px; } } /* Da direita p/ esquerda: hambúrguer encostado à borda, sino à sua esquerda. z-index 100 nos DOIS (iguais) — fica acima de qualquer card/sticky de conteúdo (estes vão até 60) e abaixo de modais/overlays (200+). Override ao app_dossie.css (drawer.css carrega depois no , ganha o cascade). */ .notifbell { right: calc(50% - 172px); z-index: 100; } @media (max-width: 515px) { .notifbell { right: 68px; } } /* Backdrop + painel */ .drawer-back { position: fixed; inset: 0; background: rgba(20,20,22,.42); z-index: 5000; opacity: 0; pointer-events: none; transition: opacity .25s; } .drawer-back.show { opacity: 1; pointer-events: auto; } .drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 286px; max-width: 86vw; z-index: 5001; background: var(--paper); box-shadow: -10px 0 40px rgba(0,0,0,.18); transform: translateX(100%); transition: transform .3s cubic-bezier(.22,1,.36,1); display: flex; flex-direction: column; padding: calc(env(safe-area-inset-top, 0px) + 14px) 0 calc(env(safe-area-inset-bottom, 0px) + 16px); } .drawer.show { transform: translateX(0); } .drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 16px 14px; border-bottom: 1px solid var(--line-2); margin-bottom: 8px; } .drawer-brand { font-family: var(--font-display, 'Instrument Serif', serif); font-size: 21px; color: var(--ink); } .drawer-x { width: 34px; height: 34px; border: none; background: none; color: var(--ink-3); border-radius: 9px; display: flex; align-items: center; justify-content: center; cursor: pointer; } .drawer-x svg { width: 20px; height: 20px; } .drawer-x:hover { background: var(--paper-2, #efe9da); color: var(--ink); } .drawer-nav { display: flex; flex-direction: column; gap: 2px; padding: 4px 10px; overflow-y: auto; } .drawer-item { display: flex; align-items: center; gap: 13px; padding: 12px; border-radius: 12px; color: var(--ink-2); text-decoration: none; font-size: 15px; font-weight: 500; } .drawer-item:hover { background: var(--paper-2, #efe9da); color: var(--ink); } .drawer-item.on { background: var(--c-soft, rgba(22,64,126,.10)); color: var(--c-deep); font-weight: 600; } .drawer-item .di-ic { flex: 0 0 auto; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; } .drawer-item .di-ic svg { width: 21px; height: 21px; } .drawer-item .di-tag { margin-left: auto; font-family: var(--font-mono, monospace); font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--gold); border: 1px solid var(--gold); border-radius: 6px; padding: 2px 6px; } .drawer-sep { height: 1px; background: var(--line-2); margin: 9px 16px 7px; } .drawer-sec { font-family: var(--font-mono, monospace); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); padding: 4px 14px 2px; }