/* GUI - Fase 12.6B - VERSAO B: drawer lateral da direita.
   Entra pela direita e cobre parte da tela. Uma faixa do mapa fica a mostra de
   proposito, para nao virar "uma nova pagina". */

.drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:10;
  width:80vw;max-width:400px;min-width:296px;
  background:var(--papel-2);
  border-radius:20px 0 0 20px;
  box-shadow:-10px 0 34px rgba(30,25,45,.20);
  display:flex;flex-direction:column;
  transform:translateX(100%);
  transition:transform .28s cubic-bezier(.32,.72,0,1);
  touch-action:pan-y;
  will-change:transform;
  padding-top:var(--seguro-t);
}
.drawer.arrastando{transition:none}
.drawer.aberto{transform:translateX(0)}

.drawer-topo{
  flex:0 0 auto;padding:14px 16px 8px;
  display:flex;align-items:flex-start;justify-content:space-between;gap:10px;
  border-bottom:1px solid var(--linha);
}
.drawer-topo > div:first-child{flex:1;min-width:0}
.drawer-topo .cab-reg{margin-bottom:0}
.drawer-topo .qtd{margin-bottom:0}

.drawer-corpo{
  flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding:12px 16px calc(20px + var(--seguro-b));
}

/* a faixa do mapa que sobra a esquerda continua clicavel:
   trocar de regiao sem fechar o drawer */
.scrim.lateral{background:rgba(28,24,40,.28)}

@media (min-width:900px){
  .drawer{width:400px}
  .scrim.lateral{background:rgba(28,24,40,.18)}
}