/* ===== BARRA DE ARRIBA Y MENÚ LATERAL =====
   Lo comparten el inicio y la tienda. Antes vivía suelto dentro de
   index.html; se sacó aquí para no tener dos copias que se desincronicen. */

    /* ===== NAVBAR EXTRAS ===== */
    .navbar-inner { gap: 16px; flex-wrap: nowrap; }
    .nav-links { display: flex; align-items: center; gap: 14px; flex-wrap: nowrap; }
    .nav-link, .nav-dd-btn { white-space: nowrap; }
    button.nav-link {
      background: none; border: none; cursor: pointer; font-family: inherit;
      font-size: 14px; color: var(--text-secondary); padding: 0;
    }
    button.nav-link:hover { color: var(--text); }
    #nav-auth-area { display: flex; align-items: center; gap: 14px; white-space: nowrap; }
    #nav-auth-area span.nav-link { max-width: 130px; overflow: hidden; text-overflow: ellipsis; }
    .nav-dd { position: relative; }
    .nav-dd-btn { display: flex; align-items: center; gap: 5px; background: none; border: none; color: var(--text-secondary); font-size: 14px; cursor: pointer; padding: 8px 4px; font-family: inherit; text-decoration: none; }
    .nav-dd-btn:hover { color: var(--text); }
    .nav-dd-menu {
      position: absolute; top: 100%; left: 0; display: none; flex-direction: column;
      background: #111; border: 1px solid var(--border); border-radius: 10px;
      padding: 6px; min-width: 190px; z-index: 60;
    }
    .nav-dd:hover .nav-dd-menu, .nav-dd:focus-within .nav-dd-menu { display: flex; }
    .nav-dd-menu a, .nav-dd-menu button {
      background: none; border: none; text-align: left; color: var(--text-secondary);
      font-size: 13.5px; padding: 9px 12px; border-radius: 7px; cursor: pointer; text-decoration: none; font-family: inherit;
    }
    .nav-dd-menu a:hover, .nav-dd-menu button:hover { background: rgba(255,255,255,.06); color: var(--text); }
    .nav-search {
      display: flex; align-items: center; gap: 8px;
      background: #111; border: 1px solid var(--border); border-radius: 100px;
      padding: 7px 13px; width: 170px; flex-shrink: 1; min-width: 120px;
    }
    .nav-search input { background: none; border: none; outline: none; color: var(--text); font-size: 13.5px; width: 100%; font-family: inherit; }
    .nav-search input::placeholder { color: var(--text-muted); }
    @media (max-width: 1200px) { .nav-search { display: none; } }
    /* móvil: ocultar menú completo y usar hamburguesa */
    .nav-auth-mobile {
      display: none; align-items: center; gap: 6px; white-space: nowrap;
      border: 1px solid var(--border); border-radius: 100px; background: #111;
      color: var(--text); font-size: 13px; font-weight: 600; text-decoration: none;
      padding: 8px 14px; margin-left: auto;
    }
    @media (max-width: 960px) {
      .nav-links { display: none; }
      .hamburger { display: flex; }
      .nav-auth-mobile { display: inline-flex; }
      body { overflow-x: hidden; }
    }

    /* menú lateral: botones con borde */
    #nav-drawer a, #nav-drawer button:not(.nav-drawer-close) {
      display: flex; align-items: center; gap: 10px;
      border: 1px solid var(--border); border-radius: 12px; background: #111;
      padding: 13px 16px; margin-bottom: 10px; width: 100%;
      color: var(--text); font-size: 14.5px; font-weight: 600; text-align: left;
      text-decoration: none; cursor: pointer; font-family: inherit;
    }
    #nav-drawer a:hover, #nav-drawer button:not(.nav-drawer-close):hover { background: #1a1a1a; }