/* =============================================
   FORTUNA STORE — MENÚ LATERAL (☰)
   menu.css
   ============================================= */
/* Se incluye en todas las páginas (index, producto, noticias, términos).
   Usa solo variables que existen tanto en styles.css como en producto.css,
   para que el panel se vea igual sin importar desde qué página se abra. */

/* --- Botón hamburguesa, vive en el header --- */
.menu-toggle {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-size: 20px;
  line-height: 1;
  transition: all var(--transition);
}
.menu-toggle:hover {
  border-color: var(--color-gold);
  color: var(--color-gold);
}

/* --- Fondo oscuro semitransparente detrás del panel --- */
.side-menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition);
  z-index: 998;
}
.side-menu-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

/* --- Panel lateral deslizante --- */
.side-menu {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 280px;
  max-width: 84vw;
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
  z-index: 999;
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
  overflow-y: auto;
}
.side-menu.is-open {
  transform: translateX(0);
}

.side-menu__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 18px 16px;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.side-menu__close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 50%;
  color: var(--color-text-muted);
  font-size: 16px;
  transition: all var(--transition);
}
.side-menu__close:hover {
  color: var(--color-text);
  border-color: var(--color-gold);
}

/* --- Logo central, tocable, lleva al catálogo ---
   👉 Para poner tu logo real: reemplaza el emoji de abajo (dentro de
   .side-menu__logo-icon) por <img src="imagenes/logo.webp" alt="Fortuna Store" />.
   Se recorta automáticamente dentro del mismo círculo dorado. */
.side-menu__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 28px 20px 26px;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
  transition: opacity var(--transition);
}
.side-menu__brand:hover {
  opacity: 0.85;
}

.side-menu__logo-icon {
  width: 64px;
  height: 64px;
  background: var(--color-gold);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 28px;
  box-shadow: var(--icon-shadow, var(--shadow-md));
  overflow: hidden;
}
.side-menu__logo-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.side-menu__logo-text {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: -0.3px;
  color: var(--color-text);
}
.side-menu__logo-text span { color: var(--color-gold); }

/* --- Bloque de perfil (cascaron — sistema de login próximamente) --- */
.side-menu__profile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px 16px;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.side-menu__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-surface-2);
  border: 2px solid var(--color-border);
  overflow: hidden;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  font-size: 20px;
  /* 👉 Para poner tu foto default:
     reemplaza el emoji del HTML por
     <img src="imagenes/avatar-default.webp" alt="Perfil" /> */
}
.side-menu__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.side-menu__profile-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.side-menu__profile-name {
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.side-menu__profile-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-muted);
}

.side-menu__profile-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-border);
  flex-shrink: 0;
}

.side-menu__profile-soon {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--color-gold);
  background: rgba(245, 197, 24, 0.1);
  border: 1px solid rgba(245, 197, 24, 0.25);
  border-radius: 50px;
  padding: 2px 8px;
  margin-left: 2px;
}

/* --- Lista de navegación principal --- */
.side-menu__nav {
  display: flex;
  flex-direction: column;
  padding: 10px 12px;
  gap: 2px;
}

.side-menu__link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-size: 14.5px;
  font-weight: 600;
  transition: all var(--transition);
}
.side-menu__link:hover,
.side-menu__link.is-active {
  background: var(--color-surface-2);
  color: var(--color-gold);
}

.side-menu__link-icon {
  font-size: 18px;
  width: 24px;
  flex-shrink: 0;
  text-align: center;
}

/* --- Sección de soporte y contacto, al fondo del panel --- */
.side-menu__section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--color-text-muted);
  padding: 18px 14px 6px;
}

.side-menu__footer {
  margin-top: auto;
  padding: 12px 12px 22px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-top: 1px solid var(--color-border);
}

/* --- Toggle de tema dentro del menú --- */
.side-menu__theme-toggle {
  width: 100%;
  text-align: left;
  justify-content: flex-start;
}

.side-menu__theme-label {
  font-size: 14.5px;
  font-weight: 600;
}

/* Visibilidad de íconos según tema activo */
.theme-toggle__icon-light { display: none; }
:root[data-theme="light"] .theme-toggle__icon-dark { display: none; }
:root[data-theme="light"] .theme-toggle__icon-light { display: flex; }

/* =============================================
   RESPONSIVE
   ============================================= */
@media (min-width: 769px) {
  .side-menu { width: 320px; }
}