/* mobile-dropdown.css — dropdown en móvil (v3, fondo oscuro) */
@media (max-width: 768px){
  .nav-wrap{ position: relative; }
  .menu-btn{ position: relative; z-index: 1501; }

  .drawer{
    position: absolute;
    top: calc(100% + 6px);
    right: 6px;
    left: auto;
    z-index: 1500;
    display: none !important;       /* se abre con .open */
    flex-direction: column;
    gap: 6px;
    min-width: 220px;
    max-width: 88vw;
    max-height: 70vh !important;
    padding: 10px;
    background: rgba(15,19,30,0.95) !important;
    border: 1px solid rgba(255,255,255,0.14) !important;
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(0,0,0,.35);
    overflow: auto;
    transform-origin: top right;
  }
  .drawer.open{ display:flex !important; animation: ppDropdownIn .18s ease; }
  @keyframes ppDropdownIn{ from{opacity:0;transform:translateY(-4px) scale(.98)} to{opacity:1;transform:translateY(0) scale(1)} }

  .nav .navlink{ display:none !important; }
  .drawer .navlink{ display:block !important; padding: 9px 10px; border-radius: 8px; color:#e5e7eb }
  .drawer .navlink:hover{ background: rgba(255,255,255,.06) }
  .nav, .nav-wrap{ overflow: visible }

  /* Asegurar visibilidad del menú en móvil: ocultar saludo de usuario en topbar */
  .nav .hello{ display:none !important; }

  /* Mantener el botón de hamburguesa siempre visible a la derecha */
  .nav-row{ gap:8px; }
  .menu-btn{ margin-left:auto; }

}