/* Nav responsivo compartido para las páginas de la app (dashboard, buscar,
   comunidades, mensajes, perfil-publico, que-es-nextwork).

   A propósito los 3 links de arriba (Explorar perfiles/Comunidades/
   Mensajes o Cómo funciona) se quedan VISIBLES en celular -- no se
   esconden detrás de un menú. Se comprimen (letra más chica, menos
   espacio entre ellos, "Explorar perfiles" se acorta a solo "Perfiles"
   -- ver .nl-full/.nl-short en el HTML, "Explorar" solo no se entendía)
   para caber entre el logo NW y la campana/avatar de la derecha.

   Los selectores llevan "nav " de más a propósito: el <style> propio de
   cada página se carga DESPUÉS de este archivo, y sus reglas sin media
   query (".nav-links{gap:1.8rem}", "nav{padding:0 2.5rem}") tienen la
   misma especificidad que las de acá -- sin el prefijo extra, la regla
   de la página gana por venir después en el documento, sin importar el
   ancho de pantalla real. */

.nl-short{display:none}

@media(max-width:640px){
  /* height:auto + flex-wrap es respaldo, no el plan principal: si algun
     dia el contenido de la derecha crece (mas botones, etc.) y ya no cabe
     ni comprimido, esto lo baja a una segunda linea en vez de cortarlo o
     desbordar la pantalla. Mismo patron que ya probó dashboard.html. */
  html body nav{padding:0 .7rem;height:auto;min-height:62px;flex-wrap:wrap;row-gap:6px}
  nav .nav-links{gap:.5rem}
  nav .nav-links a{font-size:10.5px;white-space:nowrap}
  .nl-full{display:none}
  .nl-short{display:inline}
  nav .nw-nav-name{display:none}
  nav .nav-login,nav .nav-cta{padding:6px 10px;font-size:11px}
}