/* Se carga antes que tema.css (E-924): por eso va con #tabbar, que gana a .tabbar del tema.
   Menú lateral (☰ arriba a la izquierda): sustituye a la barra de pestañas de abajo. El cajón
   sale desde la izquierda y se cierra al elegir, al tocar fuera, con Escape o con «atrás». */
.menu-btn { position: absolute; top: calc(10px + env(safe-area-inset-top)); left: 12px; z-index: 40; width: 46px; height: 46px;
  display: none; place-items: center; border-radius: 15px; cursor: pointer; color: var(--txt);
  background: var(--vidrio); border: 1px solid rgba(238, 246, 240, .12);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.con-menu .menu-btn { display: grid; }
.menu-btn .ic { width: 24px; height: 24px; }
.menu-btn .dot { position: absolute; top: 8px; right: 8px; width: 9px; height: 9px; border-radius: 50%; display: none;
  background: var(--danger); box-shadow: 0 0 0 2px var(--bg); }
.menu-btn .dot.show { display: block; }
.con-menu .screen:not(.con-foto) { padding-top: calc(70px + env(safe-area-inset-top)); }
.con-menu .screen { padding-bottom: 40px; }

.menu-fondo { position: absolute; inset: 0; z-index: 45; background: rgba(0, 0, 0, .6); opacity: 0; pointer-events: none;
  transition: opacity .25s; }
.menu-abierto .menu-fondo { opacity: 1; pointer-events: auto; }

#tabbar, #tabbar.show { position: absolute; top: 0; bottom: 0; left: 0; right: auto; width: min(300px, 84%); height: auto;
  display: flex; flex-direction: column; align-items: stretch; gap: 4px; z-index: 50; overflow-y: auto;
  padding: calc(22px + env(safe-area-inset-top)) 14px calc(20px + env(safe-area-inset-bottom));
  border: 0; border-right: 1px solid var(--line); border-radius: 0 26px 26px 0; background: var(--bg-2);
  box-shadow: 24px 0 60px rgba(0, 0, 0, .5); transform: translateX(-105%); visibility: hidden;
  transition: transform .28s cubic-bezier(.2, .8, .2, 1), visibility 0s .28s; }
.menu-abierto #tabbar { transform: none; visibility: visible; transition: transform .28s cubic-bezier(.2, .8, .2, 1); }
#tabbar .logo { padding: 6px 10px 18px; }
#tabbar .tab { flex: 0 0 auto; flex-direction: row; justify-content: flex-start; gap: 14px; padding: 13px 16px;
  font-size: 15px; letter-spacing: 0; border-radius: 16px; color: var(--txt); }
#tabbar .tab .ic { width: 22px; height: 22px; color: var(--mint); }
#tabbar .tab.active, #tabbar .tab.active .ic { color: var(--ink); transform: none; }
#tabbar .tab .dot { position: static; margin-left: auto; }
#tabbar .separa { height: 1px; background: var(--line); margin: 8px 6px; }