/* ============================================================
   InPass — núcleo común a todas las secciones (sitio, panel, mi-baile)
   Variables, reset, tipografía base, íconos, menú de cuenta y scrollbar.
   Lo específico de cada sección vive en su propia plantilla / hoja.
   ============================================================ */

:root {
  --bg:          #131316;
  --bg-0:        #13131600;  /* --bg con alpha 0: degradados sin variación de tono */
  --surface:     #1c1c20;
  --surface-2:   #26262b;
  --surface-3:   #313137;
  --border:      rgba(255,255,255,0.07);
  --border-2:    rgba(255,255,255,0.12);
  --border-mint: rgba(52,224,152,0.22);
  --mint:        #34e098;
  --mint-bright: #5bf0ae;
  --mint-soft:   rgba(52,224,152,0.10);
  --mint-glow:   rgba(52,224,152,0.20);
  --text:        #ebecf0;
  --muted:       #9799a0;
  --muted-2:     #5d5f65;
  --radius:      14px;

  /* alias de compatibilidad (plantillas en transición) */
  --red:        var(--mint);
  --gold:       var(--mint);
  --green-text: var(--mint);
  --white:      var(--text);
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
img { max-width: 100%; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

body {
  font-family: 'Hanken Grotesk', sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* Íconos SVG (sprite) */
.icon { width: 1em; height: 1em; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.125em; }

/* ─── Menú de cuenta: avatar + desplegable (compartido por las 3 secciones) ─── */
.nav-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); cursor: pointer; padding: 0;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.nav-avatar:hover { background: var(--surface-2); border-color: var(--border-mint); color: var(--mint); }
.nav-avatar .icon { width: 19px; height: 19px; }

.nav-dd {
  position: absolute; top: calc(100% + 10px); right: 12px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; min-width: 210px; overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,0.55);
  display: none; flex-direction: column; z-index: 120;
  animation: dropDown 0.2s ease both;
}
@keyframes dropDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
.nav-dd.open { display: flex; }
.nav-dd-user { padding: 12px 16px; font-size: 13px; font-weight: 700; color: var(--text); background: var(--surface-2); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 8px; }
.nav-dd a { display: flex; align-items: center; gap: 11px; padding: 13px 18px; font-size: 14px; font-weight: 500; color: var(--muted); text-decoration: none; transition: background 0.15s, color 0.15s; border-bottom: 1px solid var(--border); }
.nav-dd a:last-child { border-bottom: none; }
.nav-dd a:hover { background: var(--surface-2); color: var(--text); }
.nav-dd-ic { width: 17px; height: 17px; flex-shrink: 0; }

/* ─── Scrollbar / selección ─── */
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted-2); }
::selection { background: var(--mint); color: #06140d; }