/* Bottom tab bar for phones. On a narrow screen the header can only fit icons
   without labels, which nobody can decode, so the three main destinations
   move to a labelled bar at the bottom (where the thumb is) and the header
   keeps just the logo, upload and login. Shared by every page. */
.tabbar{display:none;}
@media(max-width:640px){
  .header-nav .nav-link,.explorar-badge{display:none !important;}
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom));}
  .tabbar{
    display:grid;grid-template-columns:repeat(3,1fr);
    position:fixed;left:0;right:0;bottom:0;z-index:800;
    background:rgba(255,255,255,.97);border-top:1px solid #e1ddd2;
    padding-bottom:env(safe-area-inset-bottom);
    -webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px);
  }
  .tabbar a{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    min-height:56px;padding:6px 4px;
    font-size:11.5px;font-weight:700;color:#6b6558;text-decoration:none;
    -webkit-tap-highlight-color:transparent;
  }
  .tabbar a svg{width:22px;height:22px;}
  .tabbar a[aria-current="page"]{color:#b84e08;}
  .tabbar a:active{background:#f4f2ee;}
  #toast-container{bottom:calc(76px + env(safe-area-inset-bottom)) !important;}
}