/* ═══════════════════════════════════════════════════════════════════════════
   THE GLOBAL HEADER — language picker, sign-in, notification bell, account chip and
   its dropdown, plus the slide-out menu behind the hamburger.

   These rules used to live in css/lobby.css, which only the homepage loads. That is why
   La Esquina had no hamburger and a different account control: the behaviour could have
   been shared, but the LOOK could not follow it across.

   They are unchanged — moved, not rewritten — and style.css still imports them, so the
   homepage is byte-identical in effect. esquina.html now links this one file and gets
   the same header (see js/siteHeader.js, which builds the markup it styles).
   ═══════════════════════════════════════════════════════════════════════════ */

/* The CLUSTER ITSELF. This was the one global-header rule left behind in lobby.css when the
   rest moved here, and because only the homepage loads that file, .nav-right fell back to
   display:block everywhere else — so on La Esquina and the rules page the language pill, the
   bell and the account chip stacked VERTICALLY, one per line, instead of sitting in a row.
   That is the whole reason those headers looked scattered on a phone. */
.nav-left, .nav-right { display: flex; align-items: center; }
.nav-left  { gap: 12px; }
.nav-right { gap: 10px; }

/* The hamburger the cluster sits opposite. Stranded in lobby.css exactly as the rule above
   was, and with the same result: on every page except the homepage it fell back to the
   BROWSER'S default button — #f0f0f0 fill, a 2px black border, square corners — which is the
   pale box that stood out at the left of La Esquina's header. Nothing here is new; it is the
   homepage's own burger, now available to the pages that mount the same one.
   css/home.css still re-tints it for the homepage, and it loads later, so that is unchanged. */
#siteNav .nav-burger {
  background: transparent; border: none; color: #cfe0ff; font-size: 20px;
  padding: 6px 9px; margin: 0; border-radius: 8px; cursor: pointer; line-height: 1; width: auto;
}
#siteNav .nav-burger:hover { background: rgba(120,160,255,.16); color: #fff; }

/* language selector */
.lang-select { position: relative; }
#siteNav .nav-lang {
  display: inline-flex; align-items: center; gap: 6px; width: auto; margin: 0;
  background: transparent; border: 1px solid rgba(140,170,255,.22); color: #cfe0ff;
  font-size: 13px; font-weight: 700; padding: 7px 12px; border-radius: 999px; cursor: pointer;
}
#siteNav .nav-lang:hover { border-color: rgba(140,170,255,.55); color: #fff; }
.caret { font-size: 9px; opacity: .8; }

/* "Iniciar sesión" button (logged out) */
#siteNav .nav-login {
  width: auto; margin: 0; cursor: pointer;
  font-size: 14px; font-weight: 800; letter-spacing: .02em; color: #fff;
  padding: 9px 18px; border: none; border-radius: 999px;
  background: linear-gradient(180deg, #e0313f, #b81f2d);
  box-shadow: 0 6px 16px rgba(184,31,45,.4);
}
#siteNav .nav-login:hover { filter: brightness(1.07); }

/* profile chip + dropdown (logged in) */
.profile-chip { position: relative; }
#siteNav .profile-trigger {
  display: inline-flex; align-items: center; gap: 7px; width: auto; margin: 0; cursor: pointer;
  background: rgba(46,125,50,.18); border: 1px solid rgba(76,175,80,.5); color: #cdeecd;
  font-size: 13px; font-weight: 700; padding: 6px 12px; border-radius: 999px;
}
#siteNav .profile-trigger:hover { background: rgba(46,125,50,.28); color: #fff; }
.profile-av { font-size: 14px; }
.profile-name { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* generic dropdown menu */
.dropdown {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 45; min-width: 200px;
  background: #0e2150; border: 1px solid rgba(120,160,255,.22); border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0,0,0,.5); padding: 6px;
}
.lang-menu { min-width: 172px; }
#siteNav .dd-item {
  display: flex; align-items: center; gap: 8px; width: 100%; margin: 0; text-align: left;
  background: transparent; border: none; color: #cdddff; font-size: 13px; font-weight: 600;
  padding: 9px 11px; border-radius: 8px; cursor: pointer; text-decoration: none;
}
#siteNav .dd-item span { flex: 1; }
#siteNav .dd-item:hover { background: rgba(120,160,255,.14); color: #fff; }
#siteNav .dd-item.sel { color: #fff; }
#siteNav .dd-item.soon { color: #8ea3cf; cursor: default; }
#siteNav .dd-item.soon:hover { background: rgba(120,160,255,.05); }
.dd-item em {
  font-style: normal; font-size: 9px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: #f0c36a; background: rgba(240,195,106,.12); border: 1px solid rgba(240,195,106,.32);
  padding: 2px 6px; border-radius: 999px;
}
.dd-sep { height: 1px; background: rgba(120,160,255,.16); margin: 5px 4px; }
#siteNav .dd-logout { color: #ff9d9d; }
#siteNav .dd-logout:hover { background: rgba(207,20,43,.18); color: #fff; }

/* --- slide-out side menu --- */
.menu-overlay {
  position: fixed; inset: 0; z-index: 40; background: rgba(4,10,26,.55);
  opacity: 0; visibility: hidden; transition: opacity .25s; backdrop-filter: blur(2px);
}
.menu-overlay.open { opacity: 1; visibility: visible; }
.side-menu {
  position: fixed; top: 0; left: 0; z-index: 41; height: 100%; width: min(300px, 84vw);
  transform: translateX(-100%); transition: transform .28s cubic-bezier(.3,.7,.3,1);
  background: linear-gradient(180deg, #0e2150, #091634);
  border-right: 1px solid rgba(120,160,255,.16); box-shadow: 18px 0 40px rgba(0,0,0,.45);
  display: flex; flex-direction: column; padding: 14px 12px; overflow-y: auto;
}
.side-menu.open { transform: translateX(0); }
.side-menu-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px 12px; }
.side-brand { font-family: 'Cinzel', Georgia, serif; font-weight: 700; font-size: 18px; color: #fff; letter-spacing: .08em; }
#siteNav .side-close { background: transparent; border: none; color: #a9bde6; font-size: 18px; cursor: pointer; padding: 4px 8px; margin: 0; width: auto; border-radius: 8px; }
#siteNav .side-close:hover { color: #fff; background: rgba(120,160,255,.14); }
.side-nav { display: flex; flex-direction: column; gap: 2px; }
.side-item {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px;
  color: #cdddff; font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none;
}
.side-item span { flex: 1; }
.side-item:hover { background: rgba(120,160,255,.12); color: #fff; }
.side-item.soon { color: #8ea3cf; cursor: default; }
.side-item.soon:hover { background: rgba(120,160,255,.05); color: #9fb4dd; }
.side-item em {
  font-style: normal; font-size: 9px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: #f0c36a; background: rgba(240,195,106,.12); border: 1px solid rgba(240,195,106,.32);
  padding: 2px 7px; border-radius: 999px;
}
.side-sep { height: 1px; background: rgba(120,160,255,.14); margin: 10px 6px; }
.side-version { margin-top: auto; padding: 14px 12px 6px; color: #6f86b6; font-size: 12px; }