/* =============================================
   FORTUNA STORE — MENÚ LATERAL (☰)
   menu.css
   ============================================= */


.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-text);
}


.side-menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition);
  z-index: 4190;
}
.side-menu-overlay.is-open {
  opacity: 1;
  visibility: visible;
}


.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: 4200;
  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);
}


.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-text); }


.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;
  
}
.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-text);
  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;
}


.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-text);
}

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


.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);
}


.side-menu__theme-toggle {
  width: 100%;
  text-align: left;
  justify-content: flex-start;
}

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


.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; }
}


/* Rediseño V1 — estados preparados para el futuro panel */
.side-menu__link--disabled {
  opacity: .58;
  cursor: default;
  user-select: none;
}
.side-menu__link--disabled:hover { background: transparent; color: var(--color-text); }
.side-menu__mini-badge {
  margin-left: auto;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid rgba(245,197,24,.22);
  background: rgba(245,197,24,.08);
  color: var(--color-gold-text);
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .45px;
}
.side-menu__profile-badge { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 190px; }

/* =============================================
   FORTUNA STORE — CAMPANA / VISTA PREVIA
   ============================================= */
.public-notification-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.public-notification-btn {
  position: relative;
}
.public-notification-badge {
  position: absolute;
  top: -5px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--color-gold);
  color: #111;
  border: 2px solid var(--color-bg);
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
  display: grid;
  place-items: center;
}
.public-notification-badge[hidden],
.public-notification-panel[hidden] { display: none !important; }
.public-notification-panel {
  position: absolute;
  z-index: 1200;
  right: 0;
  top: calc(100% + 10px);
  width: min(390px, calc(100vw - 24px));
  max-height: min(520px, calc(100vh - 90px));
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: 0 24px 70px rgba(0,0,0,.45);
}
.public-notification-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 15px 12px;
  border-bottom: 1px solid var(--color-border);
}
.public-notification-panel__head strong { font-size: .92rem; }
.public-notification-panel__head span {
  color: var(--color-text-muted);
  font-size: .69rem;
}
.public-notification-list {
  display: grid;
  max-height: 370px;
  overflow-y: auto;
}
.public-notification-item {
  display: grid;
  grid-template-columns: 34px minmax(0,1fr);
  align-items: start;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--color-border);
  background: transparent;
}
.public-notification-item.is-unread { background: rgba(245,197,24,.045); }
.public-notification-item__icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  font-size: .92rem;
}
.public-notification-item__copy { min-width: 0; display: grid; gap: 3px; }
.public-notification-item__title { display: flex; align-items: center; gap: 7px; min-width: 0; }
.public-notification-item__title strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .79rem;
}
.public-notification-item__title i {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--color-gold);
  box-shadow: 0 0 0 3px rgba(245,197,24,.08);
}
.public-notification-item p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: .69rem;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.public-notification-item small {
  color: var(--color-text-muted);
  font-size: .61rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.public-notification-panel__footer {
  padding: 10px 12px;
  background: var(--color-surface-2);
  border-top: 1px solid var(--color-border);
}
.public-notification-panel__footer a {
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  color: var(--color-gold-text);
  font-size: .75rem;
  font-weight: 850;
  transition: background var(--transition), color var(--transition);
}
.public-notification-panel__footer a:hover { background: rgba(245,197,24,.08); }
.public-notification-empty {
  min-height: 170px;
  padding: 24px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
}
.public-notification-empty > span { font-size: 1.35rem; }
.public-notification-empty strong { font-size: .82rem; }
.public-notification-empty p {
  margin: 0;
  max-width: 260px;
  color: var(--color-text-muted);
  font-size: .69rem;
  line-height: 1.45;
}
.public-notification-empty a {
  margin-top: 6px;
  padding: 8px 12px;
  border-radius: 9px;
  background: var(--color-gold);
  color: #111;
  font-size: .72rem;
  font-weight: 850;
}

@media (max-width: 768px) {
  .public-notification-wrap .public-notification-btn {
    display: grid !important;
  }
  .public-notification-panel {
    position: fixed;
    z-index: 1300;
    top: 66px;
    left: 10px;
    right: 10px;
    width: auto;
    max-height: min(68vh, 500px);
    border-radius: 15px;
  }
  .public-notification-list { max-height: min(48vh, 350px); }
  .public-notification-panel__head { padding: 13px 14px 11px; }
  .public-notification-item { padding: 11px 12px; }
}

/* Paso 12.3.2 — las vistas previas de la campana son accesos directos */
.public-notification-item{width:100%;border:0;border-bottom:1px solid var(--color-border);color:var(--color-text);text-align:left;cursor:pointer;font:inherit}
.public-notification-item:hover{background:rgba(245,197,24,.035)}
.public-notification-item:focus-visible{outline:2px solid rgba(245,197,24,.55);outline-offset:-2px}

/* =============================================
   PASO 13 — SESIÓN PÚBLICA / MENÚ DE USUARIO
   ============================================= */
.public-account-wrap{position:relative;display:flex;align-items:center;flex:0 0 auto}
.public-account-btn{min-height:38px;max-width:170px;padding:3px 8px 3px 4px;display:flex;align-items:center;gap:8px;border:1px solid var(--color-border);border-radius:12px;background:var(--color-surface-2);color:var(--color-text);transition:border-color var(--transition),background var(--transition),transform var(--transition)}
.public-account-btn:hover,.public-account-btn[aria-expanded="true"]{border-color:rgba(245,197,24,.48);background:var(--color-surface);transform:translateY(-1px)}
.public-account-avatar{width:30px;height:30px;display:grid;place-items:center;flex:0 0 auto;border-radius:9px;background:var(--color-gold);color:#111;font-size:.72rem;font-weight:950;letter-spacing:.02em}
.public-account-copy{min-width:0;display:grid;gap:1px;text-align:left;line-height:1.12}
.public-account-copy strong{max-width:102px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.74rem;font-weight:850;color:var(--color-text)}
.public-account-copy small{max-width:108px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.59rem;color:var(--color-text-muted)}
.public-account-chevron{font-size:.7rem;color:var(--color-text-muted);transition:transform var(--transition)}
.public-account-btn[aria-expanded="true"] .public-account-chevron{transform:rotate(180deg)}
.public-account-panel[hidden]{display:none!important}
.public-account-panel{position:absolute;z-index:1250;right:0;top:calc(100% + 10px);width:min(286px,calc(100vw - 24px));overflow:hidden;border:1px solid var(--color-border);border-radius:16px;background:var(--color-surface);box-shadow:0 24px 70px rgba(0,0,0,.45);color:var(--color-text)}
.public-account-panel__identity{display:grid;grid-template-columns:42px minmax(0,1fr);align-items:center;gap:11px;padding:14px;border-bottom:1px solid var(--color-border);background:linear-gradient(135deg,rgba(245,197,24,.07),transparent 72%)}
.public-account-panel__avatar{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:var(--color-gold);color:#111;font-size:.82rem;font-weight:950}
.public-account-panel__identity div{min-width:0;display:grid;gap:3px}.public-account-panel__identity strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.84rem}.public-account-panel__identity small{color:var(--color-text-muted);font-size:.67rem}
.public-account-panel__nav{display:grid;padding:7px}
.public-account-panel__nav a,.public-account-logout{width:100%;min-height:41px;display:grid;grid-template-columns:26px minmax(0,1fr) auto;align-items:center;gap:7px;padding:0 9px;border-radius:10px;color:var(--color-text-muted);text-align:left;transition:background var(--transition),color var(--transition)}
.public-account-panel__nav a:hover,.public-account-logout:hover{background:var(--color-surface-2);color:var(--color-text)}
.public-account-panel__nav a>span,.public-account-logout>span{font-size:.92rem;text-align:center}.public-account-panel__nav b,.public-account-logout b{font-size:.74rem;font-weight:760}.public-account-panel__nav em{min-width:19px;height:19px;padding:0 5px;display:grid;place-items:center;border-radius:99px;background:rgba(245,197,24,.12);color:var(--color-gold-text);font-size:.58rem;font-style:normal;font-weight:900}
.public-account-logout{border:0;border-top:1px solid var(--color-border);border-radius:0;padding:0 16px;grid-template-columns:26px minmax(0,1fr);min-height:46px;background:transparent}
.public-account-panel__guest{min-height:205px;padding:22px 18px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;text-align:center}.public-account-panel__guest>span{font-size:1.45rem}.public-account-panel__guest strong{font-size:.86rem}.public-account-panel__guest p{max-width:230px;margin:0;color:var(--color-text-muted);font-size:.68rem;line-height:1.5}.public-account-primary{margin-top:6px;min-height:36px;padding:0 15px;display:inline-flex;align-items:center;justify-content:center;border-radius:10px;background:var(--color-gold);color:#111;font-size:.72rem;font-weight:900}
.side-menu__profile.is-session-profile{cursor:pointer;transition:background var(--transition)}.side-menu__profile.is-session-profile:hover{background:var(--color-surface-2)}.side-menu__profile-dot.is-online{background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.10)}.side-menu__avatar-initials{width:100%;height:100%;display:grid;place-items:center;background:var(--color-gold);color:#111;font-size:.75rem;font-weight:950}
@media(max-width:1100px) and (min-width:769px){.public-account-copy small{display:none}.public-account-btn{max-width:128px}.public-account-copy strong{max-width:70px}}
@media(max-width:768px){.public-account-wrap{display:flex!important}.public-account-btn{width:36px;height:36px;min-height:36px;padding:2px;border-radius:11px;background:transparent}.public-account-avatar{width:30px;height:30px}.public-account-copy,.public-account-chevron{display:none}.public-account-panel{position:fixed;z-index:1320;top:66px;left:10px;right:10px;width:auto}.header__actions--minimal .public-account-wrap{display:flex!important}}


/* 13.8.5 B7.2 — vista comercial del personal dentro del menú lateral */
.side-menu__catalog-preview{
  margin:2px 12px 10px;
  padding:12px;
  border-top:1px solid var(--color-border);
  border-bottom:1px solid var(--color-border);
  display:grid;
  gap:8px;
}
.side-menu__catalog-preview .side-menu__section-title{margin:0;color:var(--color-gold-text)}
.side-menu__catalog-preview p{margin:0;color:var(--color-text-muted);font-size:.66rem;line-height:1.45}
.side-menu__catalog-preview-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.side-menu__catalog-preview-actions button,
.side-menu__catalog-preview-status button{
  min-height:34px;
  border:1px solid var(--color-border);
  border-radius:9px;
  background:var(--color-surface-2);
  color:var(--color-text-muted);
  font-size:.68rem;
  font-weight:850;
  cursor:pointer;
  transition:background var(--transition),border-color var(--transition),color var(--transition);
}
.side-menu__catalog-preview-actions button:hover,
.side-menu__catalog-preview-actions button.is-active{
  border-color:rgba(245,197,24,.45);
  background:rgba(245,197,24,.09);
  color:var(--color-text);
}
.side-menu__catalog-preview-actions button.is-active{box-shadow:inset 0 0 0 1px rgba(245,197,24,.08)}
.side-menu__catalog-preview-status{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:2px}
.side-menu__catalog-preview-status span{display:inline-flex;align-items:center;gap:5px;color:var(--color-gold-text);font-size:.61rem;font-weight:850}
.side-menu__catalog-preview-status span::before{content:'•';font-size:.9rem}
.side-menu__catalog-preview-status button{min-height:28px;padding:0 9px;background:transparent;font-size:.62rem}
.side-menu__catalog-preview-status button:hover{border-color:rgba(245,197,24,.4);color:var(--color-text)}