/* WondarCore — código propio, no generado. Se puede modificar libremente. */

/* Botón hamburguesa — mismo estilo redondo que lang-btn/user-btn (38px, borde 1.5px #ccc).
   Oculto en desktop por default; @media lo muestra y esconde .quick-menu en su lugar (ver
   layout.css, breakpoint mobile). */
.mnav-btn {
  display: none;
  background: none;
  border: 1.5px solid #ccc;
  border-radius: 50%;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  color: #333;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.15s;
}

.mnav-btn:hover { border-color: #999; }

.mnav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 16, 30, 0.45);
  z-index: 1001;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.mnav-overlay--visible { opacity: 1; pointer-events: auto; }

/* Entra desde la izquierda (a diferencia de .gp-drawer, que entra desde la derecha) para no
   competir con el panel de Guardados. */
.mnav-drawer {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 320px;
  max-width: 85vw;
  background: #fff;
  border-right: 3px solid #2563eb;
  z-index: 1002;
  box-shadow: 8px 0 32px rgba(0, 0, 0, 0.14);
  transform: translateX(-105%);
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.mnav-drawer--open { transform: translateX(0); }

.mnav-drawer-header {
  display: flex;
  justify-content: flex-end;
  padding: 0.6rem 0.6rem 0;
  flex-shrink: 0;
}

.mnav-drawer-close {
  background: none;
  border: none;
  color: #555;
  font-size: 1.3rem;
  line-height: 1;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  cursor: pointer;
}

.mnav-drawer-close:hover { background: #f4f5f7; }

.mnav-list {
  display: flex;
  flex-direction: column;
  padding: 0.5rem 0.75rem 1.5rem;
  gap: 2px;
}

.mnav-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 10px;
  border-radius: 10px;
  color: #1a1a1a;
  text-decoration: none;
  min-height: 44px;
}

/* .mnav-item--active (2026-07-31) — mismo criterio que .qm-item--active en layout.css: marca en
   el drawer mobile el botón de la sección donde está el usuario, con el mismo gris que ya usa el
   hover acá (no el azul de desktop, para no romper la paleta propia que ya tiene este drawer). */
.mnav-item:hover,
.mnav-item--active { background: #f4f5f7; }

.mnav-item svg { flex-shrink: 0; color: #2563eb; }

.mnav-item-title {
  font-size: 0.95rem;
  font-weight: 600;
}

@media (min-width: 769px) {
  /* La drawer/overlay/botón son mobile-only — si por algún motivo quedan abiertos y la ventana
     crece a desktop (resize), no deben quedar flotando sobre el quick-menu real. */
  .mnav-overlay, .mnav-drawer { display: none; }
}