/* mobile-menu-fix.v3.css */
.mobile-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.45); opacity:0; pointer-events:none; transition:opacity .2s ease; z-index:1200; }
body.menu-open .mobile-overlay{ opacity:1; pointer-events:auto; }
body.menu-open{ overflow:hidden; touch-action:none; }

/* Cerrar (X) oculto por defecto en desktop */
.btn-menu-close{ display:none !important; }

/* Toggler móvil: escondido en desktop por defecto */
.menu-toggle[data-menu-toggle]{ display:none; }

@media (max-width: 900px){
  /* Drawer responsive solo en móvil */
  [data-mobile-drawer]{
    position: fixed; top: 0; left: 0; bottom: 0;
    width: min(320px, 86vw);
    height: 100vh;
    padding-bottom: env(safe-area-inset-bottom, 0);
    background: var(--surface, #141416);
    transform: translateX(-100%);
    transition: transform .25s ease;
    z-index: 1300;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    will-change: transform;
  }
  body.menu-open [data-mobile-drawer].is-open{ transform: translateX(0); }

  /* Mostrar X solo en móvil */
  [data-mobile-drawer] .btn-menu-close{ 
    display: inline-flex !important;
    position:absolute; top: 10px; right: 10px;
    align-items:center; justify-content:center;
    width:36px; height:36px; border-radius:10px;
    border:1px solid rgba(255,255,255,.15);
    background:rgba(0,0,0,.25); color:#e8eaed; z-index:1400;
  }

  /* Mostrar toggler móvil si lo inyectamos */
  .menu-toggle[data-menu-toggle]{
    display:inline-flex;
    align-items:center; justify-content:center;
    width:40px; height:40px; border-radius:12px;
    border:1px solid rgba(255,255,255,.15);
    background:rgba(0,0,0,.25); color:#e8eaed;
  }
}


/* === Mobile z-index & landscape fixes (2025-08-22) === */
@media (max-width: 900px){
  .mobile-overlay{ z-index: 1800 !important; }
  [data-mobile-drawer]{ z-index: 2000 !important; }
  header.header .menu-toggle[data-menu-toggle]{ position: relative; z-index: 2100 !important; }
  /* Ensure menu links are clickable */
  [data-mobile-drawer] a{ pointer-events: auto !important; }
}
@media (orientation: landscape) and (max-height: 480px){
  [data-mobile-drawer]{ height: 100dvh; }
  main, .app-content, .content{ padding-bottom: env(safe-area-inset-bottom, 16px); }
}