/* Menu do painel do cliente no celular (3 risquinhos no canto direito). Só vale em telas até 820px; no computador nada muda. */
.pm-bar, .pm-fundo, .pm-x{ display:none }
@media (max-width:820px){
  html.pm-trava, html.pm-trava body{ overflow:hidden }
  .app-shell{ flex-direction:column }
  .pm-bar{ position:sticky; top:0; z-index:60; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 12px; padding-top:calc(8px + env(safe-area-inset-top, 0px)); background:var(--panel); border-bottom:1px solid var(--border) }
  .pm-btn{ width:44px; height:44px; flex:none; display:grid; place-items:center; border:1px solid var(--border); border-radius:12px; background:var(--panel); color:var(--text); cursor:pointer; -webkit-tap-highlight-color:transparent }
  .pm-btn:active{ background:var(--bg) }
  .pm-btn:focus-visible{ outline:2px solid var(--portal-accent, var(--primary, #e8830f)); outline-offset:2px }
  .pm-btn svg{ width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round }
  .pm-logo{ height:30px; width:auto; max-width:140px; display:block }
  .pm-fundo{ display:block; position:fixed; inset:0; z-index:100; background:rgba(15,18,25,.45); opacity:0; pointer-events:none; transition:opacity .25s ease }
  .app-shell.pm-open .pm-fundo{ opacity:1; pointer-events:auto }

  /* o menu vira uma gaveta que desliza da esquerda (o botão dos risquinhos fica à direita) */
  .sidebar.portal{ position:fixed; top:0; left:0; bottom:0; z-index:101; width:min(82vw, 300px); height:100vh; height:100dvh; flex-direction:column; align-items:stretch; overflow-x:hidden; overflow-y:auto;
    padding-top:env(safe-area-inset-top, 0px); transform:translateX(-105%); visibility:hidden; transition:transform .25s ease, visibility 0s linear .25s; box-shadow:none }
  .app-shell.pm-open .sidebar.portal{ transform:none; visibility:visible; transition:transform .25s ease, visibility 0s; box-shadow:8px 0 30px rgba(15,18,25,.22) }
  .sidebar.portal .logo-wrap{ padding:22px 20px 16px; border-right:none; border-bottom:1px solid var(--border) }
  .sidebar.portal .logo-wrap img{ max-width:130px }
  .sidebar.portal .navlist{ display:block; flex:1; padding:14px; overflow-y:auto }
  .sidebar.portal .nav-group{ display:block }
  .sidebar.portal .nav-group-items{ display:block }
  .sidebar.portal .nav-item{ flex-direction:row; gap:12px; padding:12px; font-size:.98rem; white-space:normal; border-radius:10px }
  .sidebar.portal .nav-item svg{ width:20px; height:20px }
  .sidebar.portal .nav-badge{ margin-left:auto; font-size:.72rem; padding:2px 8px }
  .sidebar.portal .sidebar-foot{ display:block; align-items:initial; padding:14px 18px calc(14px + env(safe-area-inset-bottom, 0px)); border-left:none; border-top:1px solid #ececef; font-size:.8rem; white-space:normal }
  .sidebar.portal{ border-left:none; border-right:1px solid var(--border) }
}
@media (max-width:820px){
  .sidebar.portal .pm-x{ display:grid; place-items:center; position:absolute; top:calc(12px + env(safe-area-inset-top, 0px)); right:12px; z-index:2; width:40px; height:40px; border:1px solid var(--border); border-radius:12px; background:var(--panel); color:var(--text); cursor:pointer }
  .pm-x svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round }
  .sidebar.portal .logo-wrap{ padding-right:64px }
}
@media (prefers-reduced-motion:reduce){ .sidebar.portal, .pm-fundo{ transition:none !important } }