/* ============================================================
   SALA LONDON RADIO — v3.0
   Design: Warm Minimalism · Brown · Crimson · Cream
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;0,900;1,400;1,600&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600&display=swap');

/* ── Design Tokens ─────────────────────────────────────────── */
:root {
  --bg:          #FAF9F6;
  --white:       #FFFFFF;
  --brown-950:   #140A04;
  --brown-900:   #2C1A10;
  --brown-800:   #4A2A18;
  --brown-700:   #6B3D24;
  --brown-600:   #8B5230;
  --brown-500:   #AA6B44;
  --brown-400:   #C68A62;
  --brown-300:   #DBA882;
  --brown-200:   #EDCFB0;
  --brown-100:   #F5E6D4;
  --brown-50:    #FBF3EB;
  --red-700:     #9B1E26;
  --red-600:     #C4313A;
  --red-500:     #DC4550;
  --red-100:     #FAEAEA;
  --gray-800:    #3D2E28;
  --gray-600:    #7A6560;
  --gray-400:    #A8958F;
  --gray-200:    #E4DAD6;
  --gray-100:    #F2EDEB;
  --text:        #1E1008;

  --font-d: 'Playfair Display', Georgia, serif;
  --font-b: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  --r-sm:   6px;
  --r-md:   12px;
  --r-lg:   20px;
  --r-xl:   32px;
  --r-pill: 9999px;

  --sh-xs: 0 1px 4px rgba(44,26,16,.06);
  --sh-sm: 0 2px 10px rgba(44,26,16,.08);
  --sh-md: 0 4px 24px rgba(44,26,16,.11);
  --sh-lg: 0 8px 48px rgba(44,26,16,.15);
  --sh-xl: 0 16px 80px rgba(44,26,16,.20);

  --t-f:  150ms ease;
  --t-b:  260ms ease;
  --t-s:  420ms ease;
  --t-sp: 500ms cubic-bezier(.34,1.56,.64,1);
}

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body { font-family: var(--font-b); background: var(--bg); color: var(--text); line-height: 1.6; overflow-x: hidden; }
img  { max-width: 100%; height: auto; display: block; }
a    { text-decoration: none; color: inherit; }
button { cursor: pointer; border: none; background: none; font-family: inherit; line-height: 1; }
input, textarea, select { font-family: inherit; }

/* ── Navigation ────────────────────────────────────────────── */
#sl-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 900;
  height: 60px;
  background: rgba(10,5,2,.48);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: flex; align-items: center;
  padding: 0 clamp(1.25rem,4vw,2.5rem);
  transition: background var(--t-b), box-shadow var(--t-b);
}
#sl-nav.scrolled {
  background: rgba(250,249,246,.94);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 1px 0 rgba(228,218,214,.6);
}

.nav-logo { display: flex; align-items: center; gap: .55rem; flex-shrink: 0; }
.nav-logo img { height: 28px; width: auto; }
.nav-logo-text {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400; font-size: 1.2rem;
  color: rgba(255,255,255,.95); letter-spacing: .03em;
  text-shadow: 0 1px 8px rgba(0,0,0,.45);
  transition: color var(--t-b), text-shadow var(--t-b);
}
.nav-logo-text em {
  font-family: var(--font-b);
  font-style: normal; font-weight: 500;
  letter-spacing: .12em; font-size: .68rem;
  color: var(--brown-300);
  vertical-align: middle;
  margin-left: .1rem;
}
#sl-nav.scrolled .nav-logo-text       { color: var(--brown-900); text-shadow: none; }
#sl-nav.scrolled .nav-logo-text em    { color: var(--brown-500); }

.nav-space { flex: 1; }

.nav-links { display: flex; align-items: center; list-style: none; gap: .1rem; }

.nav-link {
  display: block; padding: .45rem .85rem;
  font-size: .82rem; font-weight: 400;
  color: rgba(255,255,255,.75); cursor: pointer; white-space: nowrap;
  text-shadow: 0 1px 6px rgba(0,0,0,.5);
  transition: color var(--t-b);
}
.nav-link:hover  { color: rgba(255,255,255,1); }
.nav-link.active { color: rgba(255,255,255,1); font-weight: 500; }
#sl-nav.scrolled .nav-link        { color: var(--gray-600); }
#sl-nav.scrolled .nav-link:hover  { color: var(--brown-900); }
#sl-nav.scrolled .nav-link.active { color: var(--brown-900); }

/* Comunidad — amarillo en fondo oscuro, dorado apagado en fondo claro */
.nav-link--comunidad                        { color: #f5c518 !important; }
.nav-link--comunidad:hover                  { color: #ffd84d !important; }
#sl-nav.scrolled .nav-link--comunidad       { color: #b8920a !important; }
#sl-nav.scrolled .nav-link--comunidad:hover { color: #8a6c00 !important; }

/* Nav separator */
.nav-sep {
  width: 1px; height: 16px;
  background: rgba(255,255,255,.2);
  margin: 0 .4rem;
  flex-shrink: 0;
  transition: background var(--t-b);
}
#sl-nav.scrolled .nav-sep { background: var(--gray-200); }

/* External nav links — slightly dimmer */
.nav-link-ext { color: rgba(255,255,255,.42) !important; font-size: .78rem; }
.nav-link-ext:hover { color: rgba(255,255,255,.8) !important; }
#sl-nav.scrolled .nav-link-ext       { color: var(--gray-400) !important; }
#sl-nav.scrolled .nav-link-ext:hover { color: var(--gray-600) !important; }

/* Nav login button */
.nav-login-btn {
  padding: .38rem .9rem;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--r-pill);
  color: rgba(255,255,255,.85);
  font-size: .78rem; font-family: var(--font-b); font-weight: 500;
  cursor: pointer; white-space: nowrap;
  transition: background var(--t-f), border-color var(--t-f);
}
.nav-login-btn:hover { background: rgba(255,255,255,.22); }
#sl-nav.scrolled .nav-login-btn {
  background: var(--brown-600); border-color: var(--brown-600); color: #fff;
}
#sl-nav.scrolled .nav-login-btn:hover { background: var(--brown-700); border-color: var(--brown-700); }

/* Nav user pill */
.nav-user-pill {
  position: relative;
  display: flex; align-items: center; gap: .45rem;
  padding: .3rem .6rem .3rem .35rem;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background var(--t-f);
}
.nav-user-pill:hover { background: rgba(255,255,255,.1); }
#sl-nav.scrolled .nav-user-pill:hover { background: var(--gray-100); }
.nav-user-avatar {
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-d); font-size: .75rem; font-weight: 600; color: #fff;
}
.nav-user-name {
  font-size: .78rem; color: rgba(255,255,255,.8); white-space: nowrap;
}
#sl-nav.scrolled .nav-user-name { color: var(--brown-800); }
.nav-user-dropdown {
  display: none;
  position: absolute; top: 100%; right: 0;
  padding-top: 8px; /* puente invisible — elimina el gap que rompía el hover */
  min-width: 160px; z-index: 200;
}
.nav-user-dropdown-inner {
  background: #fff; border-radius: var(--r-md);
  box-shadow: var(--sh-lg); border: 1px solid var(--gray-200);
  overflow: hidden;
}
.nav-user-pill:hover .nav-user-dropdown { display: block; }
.nav-user-dd-item {
  display: block; padding: .6rem 1rem;
  font-size: .82rem; color: var(--gray-800);
  text-decoration: none; transition: background var(--t-f);
}
.nav-user-dd-item:hover { background: var(--gray-100); }
.nav-user-dd-logout { color: var(--red-600); }

/* LIVE pill */
.nav-live-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 14px; border-radius: var(--r-pill);
  background: var(--red-600); color: white;
  font-size: .72rem; font-weight: 600; letter-spacing: .04em;
  cursor: pointer; transition: background var(--t-f); flex-shrink: 0;
}
.nav-live-pill:hover { background: var(--red-500); }
.nav-live-dot {
  width: 6px; height: 6px; background: white; border-radius: 50%;
  animation: liveDot 1.2s ease infinite;
}

/* Hamburger → X */
.nav-hamburger {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  padding: 10px 8px; margin-left: .5rem;
  transition: opacity var(--t-f);
}
.nav-hamburger:hover { opacity: .7; }
.nav-hamburger span {
  display: block; width: 22px; height: 1px;
  background: rgba(255,255,255,.85); border-radius: 2px;
  transition: transform var(--t-b), opacity var(--t-b), background var(--t-b);
  transform-origin: center;
}
#sl-nav.scrolled .nav-hamburger span { background: var(--brown-900); }
.nav-hamburger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Mobile nav — full-screen dark overlay */
.nav-mobile-panel {
  display: flex; flex-direction: column; justify-content: flex-start; align-items: center;
  position: fixed; inset: 0; z-index: 850;
  background: rgba(14,7,3,.97);
  padding: 4.5rem 2rem 3rem;
  gap: 0;
  overflow-y: auto;
  opacity: 0; pointer-events: none;
  transition: opacity var(--t-s);
}
.nav-mobile-panel.open { opacity: 1; pointer-events: auto; }
.nav-mobile-panel .nav-link {
  font-family: var(--font-d);
  font-size: 1.55rem; font-weight: 400; letter-spacing: -.01em;
  color: rgba(255,255,255,.55);
  padding: .7rem 0; text-align: center; width: 100%;
  border: none; background: none;
  transition: color var(--t-b);
}
.nav-mobile-panel .nav-link:hover { color: rgba(255,255,255,.95); }
.nav-mobile-panel a.nav-link { display: block; }

/* Mobile nav — user section */
.nav-mob-sep {
  width: 44px; height: 1px;
  background: rgba(255,255,255,.12);
  margin: 1.1rem auto .9rem;
}
.nav-mob-user {
  display: flex; align-items: center; gap: .75rem;
  margin-bottom: .6rem;
}
.nav-mob-avatar {
  width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-d); font-size: 1.15rem; color: #fff; font-weight: 700;
  flex-shrink: 0; text-transform: uppercase; overflow: hidden;
}
.nav-mob-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.nav-mob-name {
  font-family: var(--font-d); font-size: 1.05rem;
  color: rgba(255,255,255,.85); font-weight: 600; letter-spacing: -.01em;
}
.nav-mob-actions {
  display: flex; flex-direction: column; align-items: center; gap: .1rem;
}
.nav-mob-action {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .82rem; color: rgba(255,255,255,.45);
  background: none; border: none; cursor: pointer;
  padding: .38rem 1rem; text-decoration: none;
  transition: color .15s; font-family: var(--font-b);
}
.nav-mob-action svg { opacity: .7; flex-shrink: 0; }
.nav-mob-action:hover { color: rgba(255,255,255,.88); }
.nav-mob-logout { color: rgba(196,49,58,.65); }
.nav-mob-logout:hover { color: var(--red-400); }
.nav-mob-enter {
  margin-top: .5rem;
  padding: .65rem 2.75rem;
  background: var(--red-700); color: #fff;
  border: none; border-radius: var(--r-pill);
  font-family: var(--font-b); font-size: .95rem; font-weight: 600;
  cursor: pointer; transition: background .15s; letter-spacing: .01em;
}
.nav-mob-enter:hover { background: var(--red-600); }

/* ── HERO / PLAYER ──────────────────────────────────────────── */
#hero {
  min-height: 100vh;
  padding-top: 60px;
  display: flex; align-items: center;
  position: relative; overflow: hidden;
  background: var(--bg);
}

/* ── Hero background slider ──────────────────────────────────── */
.hero-bg-slider {
  position: absolute; inset: 0; z-index: 0;
}
.hero-slide {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0;
  will-change: opacity;
}
.hero-slide-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(
    to right,
    rgba(10,5,2,.84) 0%,
    rgba(10,5,2,.70) 24%,
    rgba(10,5,2,.36) 40%,
    rgba(251,243,235,.72) 52%,
    rgba(251,243,235,.94) 63%,
    rgba(251,243,235,1)   74%
  );
}
@media (max-width: 1023px) {
  .hero-slide-overlay {
    background: linear-gradient(
      to bottom,
      rgba(10,5,2,.76) 0%,
      rgba(10,5,2,.42) 26%,
      rgba(251,243,235,.88) 46%,
      rgba(251,243,235,.97) 58%,
      rgba(251,243,235,1)   68%
    );
  }
}

/* Soft background blobs */
.hero-blob {
  position: absolute; border-radius: 50%;
  pointer-events: none; filter: blur(80px);
}
.hero-blob-1 {
  width: 600px; height: 500px;
  top: -100px; left: -150px;
  background: radial-gradient(circle, rgba(107,61,36,.08) 0%, transparent 70%);
}
.hero-blob-2 {
  width: 500px; height: 400px;
  bottom: -50px; right: -100px;
  background: radial-gradient(circle, rgba(196,49,58,.06) 0%, transparent 70%);
}

/* Floating genre watermarks */
.hero-watermarks {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
}
.hero-wm {
  position: absolute; font-family: var(--font-d);
  font-weight: 900; color: rgba(107,61,36,.04);
  letter-spacing: -.04em; user-select: none; white-space: nowrap;
  animation: wmFloat 22s ease-in-out infinite;
}
.hero-wm:nth-child(1) { font-size: 7rem; top:  8%; left: -3%; animation-delay:  0s; }
.hero-wm:nth-child(2) { font-size: 5rem; top: 38%; right: -5%; animation-delay: -6s; }
.hero-wm:nth-child(3) { font-size: 8rem; bottom: 12%; left: 15%; animation-delay: -11s; }
.hero-wm:nth-child(4) { font-size: 4rem; top: 65%; right: 12%; animation-delay: -17s; }
.hero-wm:nth-child(5) { font-size: 6rem; top: 20%; left: 38%; animation-delay: -8s; opacity: .6; }
.hero-wm:nth-child(6) { font-size: 3.5rem; bottom: 6%; right: 28%; animation-delay: -3s; }

/* Hero layout */
.hero-inner {
  max-width: 1200px; margin: 0 auto; width: 100%;
  padding: 4rem clamp(1rem,4vw,2rem);
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 4rem; align-items: center;
  position: relative; z-index: 1;
}

@media (min-width: 1024px) {
  .hero-inner {
    max-width: none;
    width: 100%;
    grid-template-columns: minmax(360px, 1fr) 470px;
    padding-left: 1.5rem;
    padding-right: 100px;
    gap: 2rem;
  }
}

@media (min-width: 1024px) {
  .player-side {
    text-align: left;
    align-items: flex-start;
    justify-self: end;
  }
  .player-copy-panel {
    align-items: flex-start;
  }
  .player-song-copy {
    align-items: flex-start;
  }
  .player-controls {
    justify-content: flex-start;
  }
  .player-meta {
    justify-content: flex-start;
  }
  .hero-efemeride {
    text-align: left;
  }
  .hero-efe-main {
    justify-content: flex-start;
  }
}

/* ── Vinyl Record — Víctor redesign ─────────────────────────── */
/*
   TARGET MOOD: Sala de escucha privada, 2am. Una Technics SL-1200
   sobre madera negra. Un foco rasante desde arriba-izquierda.
   El vinilo gira. Hay peso. Hay calor. Hay quietud controlada.

   PALETA:
   #0A0503  — negro vinilo (base profunda)
   #1E0F08  — marrón oscuro (grooves mid)
   #3C2518  — marrón cálido (área central)
   #C47A3A  — ámbar dorado (acento calor, pivot)
   #E8DDD0  — crema metálica (brazo/aguja)
   rgba(255,210,140,.xx) — luz rasante cálida
*/

.vinyl-side {
  display: flex; justify-content: center; align-items: center;
  position: relative;
}

/* Sombra de objeto real — ancla el disco en el espacio */
.vinyl-side::after {
  content: '';
  position: absolute;
  bottom: -28px; left: 50%;
  transform: translateX(-50%);
  width: 300px; height: 36px;
  background: radial-gradient(ellipse at 50% 50%, rgba(0,0,0,.65) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

/* Luz rasante estática — foco de luz diagonal sobre el vinilo giratorio.
   El disco gira DEBAJO de esta capa. La ilusión es la del material real. */
.vinyl-side::before {
  content: '';
  position: absolute;
  width: 380px; height: 380px;
  border-radius: 50%;
  background: conic-gradient(
    from 195deg at 50% 50%,
    transparent           0deg,
    transparent          50deg,
    rgba(255,210,140,.00) 70deg,
    rgba(255,210,140,.07) 88deg,
    rgba(255,210,140,.14) 96deg,
    rgba(255,210,140,.07) 104deg,
    rgba(255,210,140,.00) 122deg,
    transparent          160deg,
    transparent          360deg
  );
  z-index: 6;
  pointer-events: none;
}

/* Ambient rings — más cálidas, más vivas */
.vinyl-ambient {
  position: absolute;
  width: 420px; height: 420px;
  border-radius: 50%;
}
.vinyl-ring {
  position: absolute; border-radius: 50%;
  border: 1px solid rgba(196,122,58,.14);
  transition: border-color var(--t-s);
}
.vinyl-ring-1 { inset: -18px; animation: ringBreath 3.5s ease-in-out infinite; }
.vinyl-ring-2 { inset: -36px; animation: ringBreath 3.5s ease-in-out infinite; animation-delay: .6s;  border-color: rgba(196,122,58,.08); }
.vinyl-ring-3 { inset: -54px; animation: ringBreath 3.5s ease-in-out infinite; animation-delay: 1.2s; border-color: rgba(196,122,58,.04); }

/* Platter wrapper — contiene disco + brazo, ambos escalan juntos */
.vinyl-platter {
  position: relative;
  width: 380px; height: 380px;
  flex-shrink: 0;
}

/* El disco */
.vinyl-record {
  --vinyl-highlight: #4B2C1B;
  --vinyl-core: #3C2518;
  --vinyl-mid: #1E0F08;
  --vinyl-edge: #080402;
  --vinyl-inner-core: #2E1A10;
  --vinyl-inner-edge: #130804;
  --vinyl-aura-1: rgba(196,100,40,.16);
  --vinyl-aura-peak: rgba(220,146,82,.22);
  --vinyl-aura-2: rgba(130,50,10,.14);
  width: 380px; height: 380px; border-radius: 50%;
  background:
    radial-gradient(circle at 48% 42%,
      var(--vinyl-highlight) 0%,
      var(--vinyl-core) 15%,
      var(--vinyl-mid) 38%,
      var(--vinyl-mid) 70%,
      var(--vinyl-edge) 100%);
  position: relative;
  box-shadow:
    0 2px  0   rgba(255,255,255,.04),   /* micro rim light */
    0 8px 32px rgba(0,0,0,.60),
    0 24px 80px rgba(0,0,0,.40),
    inset 0 0 0 1px rgba(255,255,255,.04);
  transition: transform var(--t-s), box-shadow var(--t-s), filter .8s ease;
}
.vinyl-record.playing {
  animation: spin 4.5s linear infinite, vinylAura 4s ease-in-out infinite;
  animation-play-state: running;
  transform-origin: center center;
  transition: box-shadow var(--t-s);
}
@keyframes vinylAura {
  0%,100% { box-shadow:
    0 2px  0   rgba(255,255,255,.04),
    0 8px 32px rgba(0,0,0,.60),
    0 24px 80px rgba(0,0,0,.40),
    0 0  55px var(--vinyl-aura-1),
    inset 0 0 0 1px rgba(255,255,255,.04); }
  50% { box-shadow:
    0 2px  0   rgba(255,255,255,.05),
    0 8px 40px rgba(0,0,0,.60),
    0 28px 90px rgba(0,0,0,.42),
    0 0  80px var(--vinyl-aura-peak),
    0 0 130px var(--vinyl-aura-2),
    inset 0 0 0 1px rgba(255,255,255,.05); }
}

/* Ranuras — visibles, dos capas de densidad */
.vinyl-grooves {
  position: absolute; inset: 0; border-radius: 50%;
  background:
    repeating-radial-gradient(
      circle at 50% 50%,
      transparent 0px, transparent 3.2px,
      rgba(255,255,255,.028) 3.2px, rgba(255,255,255,.028) 4px
    ),
    repeating-radial-gradient(
      circle at 50% 50%,
      transparent 0px, transparent 9px,
      rgba(255,255,255,.010) 9px, rgba(255,255,255,.010) 10px
    );
}

.vinyl-genre-etch {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.vinyl-genre-etch::before {
  content: '';
  position: absolute;
  inset: 14.5%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%,
      transparent 0 42%,
      rgba(214,151,99,.07) 42.4%,
      rgba(68,32,14,.24) 43.3%,
      rgba(146,94,56,.12) 47.4%,
      rgba(33,14,6,.16) 52.4%,
      transparent 54.6%);
  opacity: .9;
}

.vinyl-genre-etch::after {
  content: '';
  position: absolute;
  inset: 22%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%,
      transparent 0 51%,
      rgba(232,175,126,.05) 51.6%,
      rgba(40,18,8,.16) 52.8%,
      transparent 54.2%);
  opacity: .75;
}

.vinyl-genre-etch svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  text-rendering: geometricPrecision;
}

.vinyl-genre-etch-text {
  font-family: var(--font-b);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .2em;
  fill: rgba(154,105,69,.42);
  stroke: rgba(18,7,3,.82);
  stroke-width: 1.05px;
  stroke-linejoin: round;
  paint-order: stroke fill;
  opacity: .9;
}

.vinyl-genre-etch-text--outer {
  font-size: 15px;
}

.vinyl-genre-etch-text--mid {
  font-size: 13.5px;
}

.vinyl-genre-etch-text--inner {
  font-size: 12.5px;
}

.vinyl-genre-etch-text--acidjazz {
  letter-spacing: .13em;
  font-size: 13px;
  opacity: .84;
}

.vinyl-genre-etch-text--funk,
.vinyl-genre-etch-text--disco,
.vinyl-genre-etch-text--house {
  letter-spacing: .18em;
}

.vinyl-genre-etch-text--rnb {
  letter-spacing: .16em;
  opacity: .95;
}

/* Inner dark zone — zona sin ranuras antes de la galleta */
.vinyl-record::before {
  content: ''; position: absolute; inset: 14%; border-radius: 50%;
  background: radial-gradient(circle at 48% 42%, var(--vinyl-inner-core) 15%, var(--vinyl-inner-edge) 100%);
  border: 1px solid rgba(255,255,255,.05);
}

/* Galleta central */
.vinyl-label {
  position: absolute;
  width: 130px; height: 130px; border-radius: 50%;
  top: 50%; left: 50%; transform: translate(-50%,-50%);
  background: linear-gradient(145deg, #4A2E1A, #1E0F08);
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 14px;
  box-shadow:
    0 3px 16px rgba(0,0,0,.7),
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 0 0 1px rgba(255,255,255,.04);
  z-index: 2; overflow: hidden;
  transition: background 1.2s ease;
}
/* Ring decorativo en la galleta */
.vinyl-label::before {
  content: '';
  position: absolute; inset: 6px; border-radius: 50%;
  border: 1px solid rgba(196,122,58,.20);
  pointer-events: none;
}
.vinyl-label-brand {
  font-family: var(--font-d);
  font-size: .4rem; font-weight: 300; letter-spacing: .2em;
  text-transform: uppercase; color: rgba(255,255,255,.40);
}
.vinyl-label-artist {
  font-family: var(--font-b);
  font-size: .4rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: rgba(255,255,255,.95);
  max-width: 82px; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-top: 8px;
  transition: opacity .35s;
}
.vinyl-label-title {
  font-family: var(--font-b);
  font-size: .33rem; font-weight: 400; letter-spacing: .02em;
  color: rgba(255,255,255,.55);
  max-width: 82px; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-top: 3px;
  transition: opacity .35s;
}
.vinyl-label-url {
  font-size: .32rem; letter-spacing: .08em;
  color: rgba(255,255,255,.20); text-transform: lowercase;
  margin-top: 6px;
}

/* Album art — fade in cuando hay portada */
.vinyl-art-cover {
  position: absolute; inset: 0; border-radius: 50%;
  background-size: cover; background-position: center;
  opacity: 0; transition: opacity .8s ease; z-index: 1;
}
.vinyl-art-cover.loaded { opacity: 1; }
.vinyl-art-cover.loaded ~ .vinyl-label-brand,
.vinyl-art-cover.loaded ~ .vinyl-label-artist,
.vinyl-art-cover.loaded ~ .vinyl-label-title,
.vinyl-art-cover.loaded ~ .vinyl-label-url {
  opacity: 0; transition: opacity .4s ease;
}

/* Agujero central */
.vinyl-hole {
  position: absolute; width: 12px; height: 12px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #1a0d08, #040201);
  top: 50%; left: 50%; transform: translate(-50%,-50%);
  z-index: 3;
  box-shadow: 0 0 0 1.5px rgba(255,255,255,.10), 0 0 6px rgba(0,0,0,.8);
}

/* ── TONEARM — SVG (posicionado en % del .vinyl-platter) ─────── */
/* Pivote en borde DERECHO del plato (como SL-1200 real)          */
.vinyl-needle-wrap {
  display: block !important;
  position: absolute;
  top: -2%; right: -3%;
  width: 55%; height: 70%;
  transform-origin: 95% 10%;
  transform: rotate(-28deg);
  transition: transform 1.1s cubic-bezier(.34,1.2,.64,1);
  z-index: 10;
  overflow: visible;
}
.vinyl-needle-wrap.playing { transform: rotate(-16deg); }

.tonearm-svg {
  display: block;
  width: 100%; height: 100%;
  overflow: visible;
}

/* ── Player Info (right side) ───────────────────────────────── */
.player-side {
  display: flex; flex-direction: column; gap: 1.5rem;
  max-width: 470px;
  width: min(100%, 470px);
  justify-self: end;
}

.player-copy-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  z-index: 1;
}

.player-song-copy {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .28rem;
}

.player-now-tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .7rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--red-600);
}
.player-now-tag::before { content: ''; width: 28px; height: 2px; background: var(--red-600); }

/* Waveform animation (inline with NOW PLAYING) */
.player-waveform {
  display: flex; align-items: center; gap: 2px; height: 14px; margin-left: 6px;
}
.player-waveform .wbar {
  width: 2px; border-radius: 2px; background: var(--red-600);
  animation: waveAnim 1.1s ease-in-out infinite;
}
.player-waveform .wbar:nth-child(1) { height: 6px; animation-delay: .0s; }
.player-waveform .wbar:nth-child(2) { height: 12px; animation-delay: .12s; }
.player-waveform .wbar:nth-child(3) { height: 9px; animation-delay: .24s; }
.player-waveform .wbar:nth-child(4) { height: 14px; animation-delay: .36s; }
.player-waveform .wbar:nth-child(5) { height: 8px; animation-delay: .48s; }
.player-waveform.paused .wbar { animation-play-state: paused; height: 3px !important; opacity: .35; transition: all .3s; }

.player-artist {
  font-family: var(--font-d);
  font-size: clamp(1.2rem, 2.4vw, 1.7rem);
  font-weight: 400; font-style: italic;
  color: var(--brown-500); line-height: 1.2;
  min-height: 2.1rem; transition: opacity .3s;
}
.player-title {
  font-family: var(--font-d);
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 700; color: var(--brown-900);
  line-height: 1.1; letter-spacing: -.03em;
  min-height: 3.1rem; transition: opacity .3s;
}
.player-copy-panel .player-now-tag {
  margin-bottom: .15rem;
}
.player-copy-panel .player-title {
  max-width: 12ch;
}
.player-dedication {
  display: none; align-items: center; gap: .5rem;
  font-size: .85rem; color: var(--gray-600); font-style: italic;
  padding: .6rem 1rem; background: var(--brown-50);
  border-radius: var(--r-md); border-left: 3px solid var(--brown-300);
}
.player-dedication.visible { display: flex; }
.player-dedication svg { width: 14px; height: 14px; flex-shrink: 0; }

.player-request-tag {
  display: none; align-items: center; gap: 6px;
  font-size: .75rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--brown-700);
  padding: .4rem .9rem; background: var(--brown-100);
  border-radius: var(--r-pill); width: fit-content;
}
.player-request-tag.visible { display: inline-flex; }
#player-requester-name {
  font-weight: 800; color: var(--brown-900);
  text-transform: none; letter-spacing: .01em;
}
.player-requester-avatar {
  display: none;
  width: 22px; height: 22px; border-radius: 50%;
  font-size: .7rem; font-weight: 800; color: #fff;
  align-items: center; justify-content: center;
  flex-shrink: 0; text-transform: uppercase;
  line-height: 1; border: 1.5px solid rgba(255,255,255,.4);
}

/* Play/Pause + Volume */
.player-controls { display: flex; align-items: center; gap: 1.25rem; }

.btn-playpause {
  width: 68px; height: 68px; border-radius: 50%;
  background: var(--brown-900); color: white;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; position: relative; overflow: hidden;
  box-shadow: 0 4px 24px rgba(44,26,16,.3);
  transition: transform var(--t-sp), box-shadow var(--t-sp);
}
.btn-playpause::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: var(--red-600); transform: scale(0); transition: transform var(--t-sp);
}
.btn-playpause:hover { transform: scale(1.08); box-shadow: 0 8px 36px rgba(44,26,16,.4); }
.btn-playpause:hover::before { transform: scale(1); }
.btn-playpause:active { transform: scale(.96); }
.btn-playpause svg { position: relative; z-index: 1; width: 26px; height: 26px; }

.volume-area { display: flex; align-items: center; gap: .6rem; flex: 1; }

.btn-mute {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--brown-500); transition: all var(--t-f);
}
.btn-mute:hover { background: var(--brown-100); color: var(--brown-900); }
.btn-mute svg { width: 18px; height: 18px; }

.volume-slider {
  -webkit-appearance: none; appearance: none;
  height: 4px; flex: 1; border-radius: var(--r-pill);
  background: var(--gray-200); outline: none; cursor: pointer;
}
.volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%;
  background: var(--brown-900); cursor: pointer;
  box-shadow: var(--sh-xs); transition: all var(--t-f);
}
.volume-slider::-webkit-slider-thumb:hover { background: var(--red-600); transform: scale(1.25); }
.volume-slider::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%; border: none;
  background: var(--brown-900); cursor: pointer;
}

/* Like + Listeners */
.player-meta { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }

.btn-like {
  display: inline-flex; align-items: center; gap: 6px;
  padding: .45rem 1rem; border-radius: var(--r-pill);
  background: var(--red-100); color: var(--red-600);
  font-size: .85rem; font-weight: 600;
  transition: all var(--t-sp);
}
.btn-like:hover { background: var(--red-600); color: white; transform: scale(1.05); }
.btn-like.liked { background: var(--red-600); color: white; animation: heartBeat .4s ease; }
.btn-like svg { width: 15px; height: 15px; }

.btn-listeners {
  display: inline-flex; align-items: center; gap: 6px;
  padding: .45rem .9rem; border-radius: var(--r-pill);
  font-size: .82rem; color: var(--brown-700);
  cursor: pointer; transition: all var(--t-f);
  background: var(--brown-50); border: 1px solid var(--brown-200);
}
.btn-listeners:hover {
  background: var(--brown-100); color: var(--brown-900);
  border-color: var(--brown-400); transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(44,26,16,.12);
}
.btn-listeners svg { width: 14px; height: 14px; }

.player-pending-badge {
  display: none; align-items: center; gap: 6px;
  padding: .35rem .8rem; border-radius: var(--r-pill);
  background: var(--brown-50); color: var(--brown-600);
  font-size: .75rem; border: 1px solid var(--brown-200);
}
.player-pending-badge.visible { display: inline-flex; }

/* Slogan */
.hero-slogan {
  padding-top: 1.5rem; margin-top: .5rem;
  border-top: 1px solid var(--gray-200);
}
.hero-slogan-main {
  font-family: var(--font-d); font-size: clamp(1rem,1.8vw,1.3rem);
  font-style: italic; font-weight: 400; color: var(--brown-500);
}
.hero-slogan-sub { font-size: .78rem; color: var(--gray-400); margin-top: 3px; letter-spacing: .04em; }

/* Efemérides del día */
.hero-efemeride {
  margin-top: 1.1rem;
  padding-top: .9rem;
  border-top: 1px solid rgba(180, 140, 100, .18);
}
.hero-efe-label {
  font-size: .58rem;
  text-transform: uppercase;
  letter-spacing: .13em;
  color: var(--red-500);
  font-weight: 700;
  margin-bottom: .45rem;
  opacity: .85;
}
.hero-efe-main {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  flex-wrap: wrap;
  line-height: 1.25;
}
.hero-efe-year {
  font-family: var(--font-d);
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  font-weight: 700;
  color: var(--red-500);
  line-height: 1;
  flex-shrink: 0;
}
.hero-efe-titulo {
  font-family: var(--font-d);
  font-size: clamp(.88rem, 1.4vw, 1.05rem);
  font-style: italic;
  font-weight: 400;
  color: var(--brown-500);
  line-height: 1.3;
}
.hero-efe-sub {
  font-size: .72rem;
  color: var(--gray-400);
  margin-top: .25rem;
  letter-spacing: .03em;
}

/* ── Section shared ─────────────────────────────────────────── */
.sl-section {
  padding: 4rem clamp(1rem,4vw,2rem);
  max-width: 1200px; margin: 0 auto;
}
.section-divider {
  height: 1px; margin: 0 clamp(1rem,4vw,2rem);
  background: linear-gradient(to right, transparent, var(--gray-200) 30%, var(--gray-200) 70%, transparent);
}
.section-head {
  display: flex; align-items: flex-start;
  justify-content: space-between; margin-bottom: 2rem;
  padding-bottom: 1.25rem; border-bottom: 1px solid var(--gray-200);
  gap: 1rem; flex-wrap: wrap;
}
.section-title {
  font-family: var(--font-d); font-size: clamp(1.4rem,2.5vw,1.9rem);
  font-weight: 700; color: var(--brown-900); letter-spacing: -.02em;
}
.section-subtitle { font-size: .82rem; color: var(--gray-400); margin-top: 2px; }
.section-action {
  font-size: .82rem; font-weight: 500; color: var(--brown-500); cursor: pointer;
  padding: .4rem .8rem; border-radius: var(--r-pill); transition: all var(--t-f);
  white-space: nowrap;
}
.section-action:hover { background: var(--brown-100); color: var(--brown-900); }

/* ── Playlist section ───────────────────────────────────────── */
#playlist-section {
  background: #F2EFE9;   /* pergamino — claramente distinto del blanco de festivales */
  border-top: 1px solid rgba(107,61,36,.1);
}

.playlist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px,1fr));
  gap: .55rem;
}

.track-card {
  display: flex; align-items: center; gap: .8rem;
  padding: .85rem 1rem .85rem .9rem;
  border-radius: var(--r-lg);
  background: white;
  border: 1px solid var(--gray-100);
  cursor: pointer;
  transition: transform var(--t-b), box-shadow var(--t-b), border-color var(--t-b), background var(--t-b);
  position: relative; overflow: hidden;
}
.track-card::after {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: transparent; transition: background var(--t-b);
  border-radius: var(--r-lg) 0 0 var(--r-lg);
}
.track-card:hover {
  background: var(--brown-50); border-color: var(--brown-200);
  transform: translateY(-2px); box-shadow: 0 6px 24px rgba(107,61,36,.1);
}
.track-card:hover::after { background: var(--brown-300); }
.track-card:active { transform: translateY(0); }

/* Now playing — prominent accent with pulse */
.track-card.now-playing {
  background: linear-gradient(135deg, #FFF9F5 0%, #FEF3EC 100%);
  border-color: rgba(196,49,58,.35);
  box-shadow: 0 4px 24px rgba(196,49,58,.13);
  animation: npCardPulse 3s ease-in-out infinite;
}
.track-card.now-playing::after {
  background: var(--red-600);
  box-shadow: 2px 0 8px rgba(196,49,58,.4);
}
@keyframes npCardPulse {
  0%, 100% { box-shadow: 0 4px 24px rgba(196,49,58,.13); border-color: rgba(196,49,58,.35); }
  50%       { box-shadow: 0 6px 32px rgba(196,49,58,.22); border-color: rgba(196,49,58,.55); }
}

/* Time badge */
.track-num {
  font-size: .7rem; font-weight: 700; letter-spacing: .02em;
  color: var(--gray-400);
  min-width: 36px; text-align: center;
  background: var(--gray-100); border-radius: 6px;
  padding: 3px 5px; flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.track-card:hover .track-num { background: var(--brown-100); color: var(--brown-600); }
.track-card.now-playing .track-num { display: none; }

/* Animated bars for now-playing */
.track-play-icon {
  display: none; align-items: flex-end; gap: 2.5px;
  min-width: 36px; height: 20px; justify-content: center; flex-shrink: 0;
}
.track-card.now-playing .track-play-icon { display: flex; }
.track-play-icon .bar {
  width: 3px; background: var(--red-600); border-radius: 2px;
  animation: waveAnim .9s ease-in-out infinite;
}
.track-play-icon .bar:nth-child(2) { animation-delay: .18s; }
.track-play-icon .bar:nth-child(3) { animation-delay: .36s; }

/* Song info */
.track-info { flex: 1; min-width: 0; }
.track-title {
  font-weight: 600; font-size: .875rem; color: var(--brown-950);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  line-height: 1.3; margin-bottom: 2px;
}
.track-card.now-playing .track-title { color: var(--red-700); }
.track-artist {
  font-size: .75rem; color: var(--gray-500);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-style: italic;
}
.track-card:hover .track-artist { color: var(--brown-500); }

.track-time { font-size: .72rem; color: var(--gray-400); flex-shrink: 0; }

/* Request badge */
.track-req-badge {
  flex-shrink: 0; padding: 3px 8px; border-radius: var(--r-pill);
  font-size: .6rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  background: var(--brown-900); color: var(--brown-50);
}
.track-card.now-playing .track-req-badge {
  background: var(--red-600); color: white;
}

/* Session badge */
.track-sess-badge {
  flex-shrink: 0; padding: 3px 8px; border-radius: var(--r-pill);
  font-size: .6rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  background: linear-gradient(135deg, #7C3AED, #A855F7);
  color: #fff;
}

.track-ded-badge { flex-shrink: 0; font-size: .85rem; }

.playlist-controls {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; flex-shrink: 0;
}

.playlist-load-more {
  grid-column: 1 / -1; text-align: center; padding: 1.25rem 0 .25rem;
}
.btn-load-more {
  font-size: .8rem; font-weight: 600; letter-spacing: .04em;
  color: var(--brown-700); background: var(--brown-100);
  border: 1px solid var(--brown-200); border-radius: var(--r-pill);
  padding: .55rem 1.4rem; cursor: pointer; transition: all var(--t-b);
}
.btn-load-more:hover { background: var(--brown-900); color: white; border-color: var(--brown-900); }

.playlist-refresh {
  display: flex; align-items: center; gap: .5rem;
  font-size: .8rem; color: var(--gray-400); cursor: pointer;
}
.toggle-pill {
  width: 34px; height: 18px; border-radius: var(--r-pill);
  background: var(--gray-200); position: relative; transition: background var(--t-b);
}
.toggle-pill::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 14px; height: 14px; border-radius: 50%;
  background: white; transition: transform var(--t-b); box-shadow: var(--sh-xs);
}
.toggle-pill.on { background: var(--brown-900); }
.toggle-pill.on::after { transform: translateX(16px); }

/* ── reQuests section ───────────────────────────────────────── */
/* background set in redesign block below */
#requests-section { }

/* ── Tabs: editorial record-label style ── */
.req-tabs {
  display: flex; gap: .4rem; margin-bottom: 1.75rem;
  width: fit-content;
}
.req-tab {
  padding: .42rem 1.15rem; border-radius: var(--r-pill);
  font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--brown-500);
  background: transparent;
  border: 1.5px solid #d8cbc3;
  cursor: pointer; transition: all var(--t-b);
}
.req-tab:hover:not(.active) { border-color: var(--brown-400); color: var(--brown-700); background: rgba(107,61,36,.04); }
.req-tab.active {
  background: var(--brown-900); color: #fff;
  border-color: var(--brown-900);
  box-shadow: 0 3px 14px rgba(44,26,16,.28);
}

.req-panel { display: none; flex-direction: column; gap: 1rem; }
.req-panel.active { display: flex; }

/* ── Search — editorial / big ── */
.search-wrap {
  position: relative;
  max-width: 540px;
}
.search-input {
  width: 100%; box-sizing: border-box;
  padding: .9rem 3.6rem .9rem 0;
  border: none; border-bottom: 2px solid #d8cbc3;
  border-radius: 0;
  font-size: 1.05rem; font-family: var(--font-d);
  background: transparent; color: var(--brown-900);
  outline: none;
  transition: border-color 200ms ease;
}
.search-input:focus { border-bottom-color: var(--red-600); }
.search-input::placeholder { color: var(--brown-300); font-family: var(--font-d); font-style: italic; }
.search-go {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--brown-900); color: #fff;
  display: flex; align-items: center; justify-content: center;
  border: none; cursor: pointer;
  box-shadow: 0 4px 16px rgba(44,26,16,.25);
  transition: background var(--t-f), transform var(--t-sp), box-shadow var(--t-f);
}
.search-go:hover { background: var(--red-600); transform: translateY(-50%) scale(1.08); box-shadow: 0 6px 20px rgba(196,49,58,.4); }
.search-go svg { width: 16px; height: 16px; }

/* ── Genre filter chips ── */
.genre-filters { display: flex; flex-wrap: wrap; gap: .5rem; }
.genre-filter-btn {
  padding: .48rem 1.1rem; border-radius: var(--r-pill);
  font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  background: transparent; color: var(--brown-600);
  border: 1.5px solid #d8cbc3;
  cursor: pointer; transition: all var(--t-b);
  position: relative; overflow: hidden;
}
.genre-filter-btn::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--brown-900); opacity: 0;
  transition: opacity var(--t-b);
}
.genre-filter-btn span { position: relative; z-index: 1; }
.genre-filter-btn:hover { border-color: var(--brown-700); color: var(--brown-900); }
.genre-filter-btn.active {
  background: var(--brown-900); color: #fff; border-color: var(--brown-900);
  box-shadow: 0 3px 12px rgba(44,26,16,.3);
}

.sl-select {
  padding: .72rem 2.5rem .72rem 1rem;
  border: 1.5px solid #d8cbc3; border-radius: var(--r-md);
  font-size: .88rem; font-family: var(--font-b);
  background: var(--white); color: var(--text);
  outline: none; cursor: pointer; width: 100%; max-width: 400px;
  transition: border-color var(--t-b), box-shadow var(--t-b); appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B3D24' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.sl-select:focus { border-color: var(--brown-600); box-shadow: 0 0 0 3px rgba(107,61,36,.08); }

/* ── Dedication textarea ── */
.dedication-box {
  width: 100%; max-width: 540px; box-sizing: border-box;
  padding: .8rem 1rem;
  border: none; border-bottom: 1.5px solid #d8cbc3;
  border-radius: 0;
  font-size: .875rem; font-family: var(--font-b);
  resize: none; height: 72px;
  background: transparent; color: var(--text); outline: none;
  transition: border-color var(--t-b);
}
.dedication-box:focus { border-bottom-color: var(--brown-500); }
.dedication-box::placeholder { color: var(--brown-300); font-style: italic; }

/* ── Primary CTA button ── */
.btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: .72rem 1.65rem; border-radius: var(--r-pill);
  background: var(--red-600); color: #fff;
  font-size: .875rem; font-weight: 700; cursor: pointer;
  border: none;
  box-shadow: 0 4px 18px rgba(196,49,58,.35);
  transition: background var(--t-f), transform 150ms ease, box-shadow var(--t-f);
}
.btn-primary:hover { background: var(--red-500); transform: translateY(-2px); box-shadow: 0 7px 24px rgba(196,49,58,.42); }
.btn-primary:active { transform: translateY(0); }
.btn-primary:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }

.btn-secondary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: .65rem 1.4rem; border-radius: var(--r-pill);
  background: transparent; color: var(--brown-700);
  font-size: .875rem; font-weight: 500; cursor: pointer;
  border: 1.5px solid #d8cbc3; transition: all var(--t-b);
}
.btn-secondary:hover { background: var(--brown-50); border-color: var(--brown-400); color: var(--brown-900); }

/* ── Random reQuest — special shimmer button ── */
@keyframes req-random-shine {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}
.btn-random {
  display: inline-flex; align-items: center; gap: 8px;
  padding: .6rem 1.35rem; border-radius: var(--r-pill);
  font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--brown-700);
  background: var(--white);
  border: 1.5px solid #d8cbc3;
  cursor: pointer; position: relative; overflow: hidden;
  transition: color var(--t-b), border-color var(--t-b), box-shadow var(--t-b);
}
.btn-random::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 20%, rgba(196,49,58,.08) 40%, rgba(170,107,68,.12) 60%, transparent 80%);
  background-size: 200% 100%;
  animation: req-random-shine 2.4s linear infinite;
}
.btn-random:hover {
  color: var(--brown-900); border-color: var(--brown-500);
  box-shadow: 0 3px 14px rgba(107,61,36,.15);
}

/* ── Search results ── */
.search-results { display: flex; flex-direction: column; gap: .35rem; margin-top: .85rem; }
.search-result-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: .8rem 1rem .8rem 1.15rem; border-radius: var(--r-md);
  border: 1px solid transparent;
  background: var(--white);
  box-shadow: 0 1px 4px rgba(44,26,16,.06);
  cursor: pointer;
  transition: all var(--t-b);
  position: relative;
}
.search-result-item::before {
  content: ''; position: absolute; left: 0; top: 20%; bottom: 20%;
  width: 3px; border-radius: 9999px;
  background: var(--red-600); opacity: 0;
  transition: opacity var(--t-b);
}
.search-result-item:hover {
  border-color: rgba(107,61,36,.12);
  background: var(--brown-50);
  transform: translateX(4px);
  box-shadow: 0 3px 12px rgba(44,26,16,.09);
}
.search-result-item:hover::before { opacity: 1; }
.search-result-name { font-weight: 600; font-size: .875rem; color: var(--brown-900); }
.search-result-meta { font-size: .76rem; color: var(--gray-400); }

/* ── Selected song preview ── */
#req-selected-song {
  padding: .9rem 1.15rem !important;
  background: linear-gradient(120deg, #2C1A10, #1C0C06) !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  border-radius: var(--r-md) !important;
  position: relative; overflow: hidden;
}
#req-selected-song::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(196,49,58,.5), transparent);
}
#req-selected-title { color: rgba(255,255,255,.92) !important; font-weight: 700 !important; }
#req-selected-artist { color: rgba(170,107,68,.8) !important; margin-top: .2rem; }

/* ── Status messages ── */
.req-status {
  padding: 1rem 1.25rem; border-radius: var(--r-md);
  font-size: .875rem; font-weight: 500;
}
.req-status.success {
  background: linear-gradient(120deg, #f0fdf4, #e8f5ec);
  color: #166534; border: 1px solid #a7f3d0;
}
.req-status.error {
  background: rgba(196,49,58,.06); color: var(--red-700);
  border: 1px solid rgba(196,49,58,.2); border-left: 3px solid var(--red-600);
}
.req-status.info {
  background: var(--brown-50); color: var(--brown-700);
  border: 1px solid #e8d5c4; border-left: 3px solid var(--brown-400);
}

/* ── reQuests guest prompt ───────────────────────────────────── */
.req-guest {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 2.5rem;
  padding: 2.5rem 2.5rem 2.5rem 2rem;
  border-radius: var(--r-lg);
  background: linear-gradient(125deg, #1C0C06 0%, #2C1A10 45%, #1A0A06 100%);
  box-shadow: 0 8px 40px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.04);
}
/* Red ambient glow top-right */
.req-guest-glow {
  position: absolute; top: -60px; right: -40px;
  width: 260px; height: 260px; border-radius: 50%;
  background: radial-gradient(circle, rgba(196,49,58,.22) 0%, transparent 70%);
  pointer-events: none;
}
/* Warm bottom shine */
.req-guest::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(170,107,68,.4), transparent);
}

/* CSS vinyl illustration */
.req-guest-vinyl {
  flex-shrink: 0;
  width: 130px; height: 130px; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
    #1A0805 0%, #110503 18%, #2A1408 18.5%,
    #0D0402 35%, #241009 35.5%,
    #0A0302 52%, #1E0D07 52.5%,
    #080201 68%, #180B05 68.5%,
    #060100 100%);
  position: relative;
  box-shadow: 0 4px 24px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.04);
  animation: req-vinyl-slow 12s linear infinite;
}
@keyframes req-vinyl-slow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.req-guest-grooves {
  position: absolute; inset: 0; border-radius: 50%;
  background: repeating-radial-gradient(circle at 50%,
    transparent 0, transparent 3px,
    rgba(255,255,255,.015) 3px, rgba(255,255,255,.015) 3.5px
  );
}
.req-guest-label-ring {
  position: absolute; width: 42px; height: 42px; border-radius: 50%;
  top: 50%; left: 50%; transform: translate(-50%,-50%);
  background: linear-gradient(145deg, var(--brown-700), var(--brown-900));
  box-shadow: 0 2px 8px rgba(0,0,0,.5);
}
.req-guest-center {
  position: absolute; width: 8px; height: 8px; border-radius: 50%;
  top: 50%; left: 50%; transform: translate(-50%,-50%);
  background: #0A0302;
  box-shadow: 0 0 0 2px rgba(255,255,255,.1);
}

/* Text block */
.req-guest-body { flex: 1; }
.req-guest-eyebrow {
  font-family: var(--font-b);
  font-size: .68rem; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--brown-400);
  margin-bottom: .6rem; display: block;
}
.req-guest-headline {
  font-family: var(--font-d);
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 700; line-height: 1.1;
  color: rgba(255,255,255,.95);
  margin-bottom: .75rem;
}
.req-guest-headline em {
  font-style: italic; color: var(--red-500);
}
.req-guest-sub {
  font-size: .875rem; line-height: 1.6;
  color: rgba(255,255,255,.45);
  margin-bottom: 1.4rem; max-width: 380px;
}
.req-guest-actions {
  display: flex; align-items: center; gap: .85rem; flex-wrap: wrap;
}
.req-guest-cta {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .65rem 1.4rem;
  background: var(--red-600);
  color: #fff; border: none; border-radius: var(--r-pill);
  font-family: var(--font-b); font-size: .82rem; font-weight: 600;
  cursor: pointer; letter-spacing: .02em;
  transition: background var(--t-f), transform var(--t-f), box-shadow var(--t-f);
  box-shadow: 0 4px 16px rgba(196,49,58,.4);
}
.req-guest-cta:hover {
  background: var(--red-500);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(196,49,58,.5);
}
.req-guest-cta svg { flex-shrink: 0; }
.req-guest-ghost {
  background: none; border: none;
  font-family: var(--font-b); font-size: .82rem; font-weight: 500;
  color: rgba(255,255,255,.4); cursor: pointer;
  padding: .5rem 0;
  transition: color var(--t-f);
  text-decoration: underline; text-underline-offset: 3px;
}
.req-guest-ghost:hover { color: rgba(255,255,255,.75); }

/* Mobile: stack vertically */
@media (max-width: 600px) {
  .req-guest { flex-direction: column; align-items: flex-start; gap: 1.5rem; padding: 1.75rem 1.25rem; }
  .req-guest-vinyl { width: 90px; height: 90px; }
  .req-guest-label-ring { width: 30px; height: 30px; }
}

/* ── Chat guest bar — see main chat CSS block below ───────────── */

/* ── Things section ─────────────────────────────────────────── */
#things-section { background: var(--bg); }

/* ── Festivales: blanco editorial puro — contraste máximo tras las oscuras ── */
#festivales-section {
  background: #FFFFFF;
  border-top: 3px solid var(--brown-900);
}

/* ── Estadísticas: sección oscura — dashboard de datos premium ── */
#estadisticas-section {
  background: #0B0805;
  border-top: 1px solid rgba(219,168,130,.15);
  position: relative;
}
#estadisticas-section::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 280px;
  background: radial-gradient(ellipse at 50% 0%,
    rgba(219,168,130,.08) 0%,
    transparent 65%);
  pointer-events: none;
}
#estadisticas-section .sl-section { position: relative; z-index: 1; }
#estadisticas-section .section-title  { color: #FDF4EC; }
#estadisticas-section .section-subtitle { color: rgba(219,168,130,.5); }
#estadisticas-section .section-head {
  border-bottom-color: rgba(255,255,255,.07);
}

/* Botones de estadísticas sobre fondo oscuro */
#estadisticas-section .stat-btn {
  background: #1C1309 !important;
  border: 1px solid rgba(219,168,130,.14) !important;
  border-left: 3px solid transparent !important;
  color: rgba(253,244,236,.7) !important;
  box-shadow: none !important;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease !important;
}
#estadisticas-section .stat-btn:hover {
  background: #271B0B !important;
  border-color: rgba(219,168,130,.38) !important;
  border-left-color: rgba(219,168,130,.6) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 28px rgba(0,0,0,.5) !important;
}
#estadisticas-section .stat-btn:hover .stat-icon,
#estadisticas-section .stat-btn:hover .stat-label { color: #DBA882 !important; }
#estadisticas-section .stat-btn.active {
  background: linear-gradient(135deg, #2A1609, #1E1006) !important;
  border-color: rgba(196,49,58,.3) !important;
  border-left-color: var(--red-600) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.4) !important;
}
#estadisticas-section .stat-btn.active .stat-label { color: #DBA882 !important; font-weight: 700 !important; }
#estadisticas-section .stat-label { color: rgba(219,168,130,.52) !important; }

/* Área de resultados sobre fondo oscuro */
#estadisticas-section .stats-result-empty {
  background: #160F07 !important;
  border: 1px solid rgba(219,168,130,.1) !important;
  color: rgba(219,168,130,.4) !important;
}
#estadisticas-section .stat-result-header {
  background: #1E1409 !important;
  border-color: rgba(219,168,130,.12) !important;
}
#estadisticas-section .stat-result-title { color: #FDF4EC !important; }
#estadisticas-section .stat-result-count { color: rgba(219,168,130,.4) !important; }
#estadisticas-section .stat-rank-list {
  background: #160F07 !important;
  border-color: rgba(219,168,130,.1) !important;
}
#estadisticas-section .stat-rank-item {
  border-bottom-color: rgba(255,255,255,.04) !important;
}
#estadisticas-section .stat-rank-item:hover { background: rgba(219,168,130,.03) !important; }
#estadisticas-section .stat-rank-pos { color: rgba(219,168,130,.18) !important; }
#estadisticas-section .stat-rank-item:nth-child(-n+3) .stat-rank-pos { color: rgba(219,168,130,.6) !important; }
#estadisticas-section .stat-rank-item:first-child .stat-rank-pos { color: var(--red-500) !important; }
#estadisticas-section .stat-rank-name { color: #FDF4EC !important; }
#estadisticas-section .stat-rank-artist { color: rgba(219,168,130,.55) !important; }
#estadisticas-section .stat-rank-val { color: rgba(219,168,130,.35) !important; }

.things-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; }

.news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: 1rem; }
.news-grid-full { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); gap: 1.25rem; }

.news-card {
  border-radius: var(--r-lg); overflow: hidden; background: var(--white);
  border: 1px solid var(--gray-200); cursor: pointer; transition: all var(--t-b);
  display: flex; flex-direction: column;
}
.news-card:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); border-color: var(--brown-300); }
.news-card img { width: 100%; height: 160px; object-fit: cover; }
.news-card-body { padding: 1rem; flex: 1; }
.news-card-tag { font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--red-600); margin-bottom: 4px; }
.news-card-date {
  font-size: .72rem; font-weight: 600; color: var(--brown-500);
  letter-spacing: .02em; margin-bottom: 5px;
}
.news-card-title { font-family: var(--font-d); font-size: 1rem; font-weight: 700; color: var(--brown-900); line-height: 1.3; }

/* Festival image wrap + location badge */
.news-card-img-wrap { position: relative; flex-shrink: 0; }
.news-card-loc {
  position: absolute; bottom: 8px; left: 10px;
  background: rgba(10,5,2,.62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color: rgba(255,255,255,.92); font-size: .58rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 3px 10px; border-radius: var(--r-pill);
  pointer-events: none;
}

/* Gradient festival cards */
.news-card-gradient {
  background: linear-gradient(145deg, var(--grad-a), var(--grad-b));
  border-color: transparent; min-height: 200px;
}
.news-card-gradient:hover { border-color: transparent; }
.news-card-grad-inner {
  flex: 1; display: flex; flex-direction: column; justify-content: center;
  padding: 1.5rem 1.25rem 1rem;
}
.news-card-grad-loc {
  font-size: .65rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.55); margin-bottom: .5rem;
}
.news-card-grad-name {
  font-family: var(--font-d); font-size: 1.3rem; font-weight: 700;
  color: #fff; line-height: 1.2; margin-bottom: .3rem;
}
.news-card-grad-sub {
  font-size: .75rem; color: rgba(255,255,255,.65); line-height: 1.4;
}
.news-card-gradient .news-card-body {
  background: rgba(0,0,0,.22); border-top: 1px solid rgba(255,255,255,.1);
}
.news-card-gradient .news-card-tag { color: rgba(255,255,255,.7); }
.news-card-gradient .news-card-title { color: #fff; }

/* DB festival date badge */
.news-card-db-date {
  display: flex; align-items: baseline; gap: .4rem; margin-bottom: .6rem;
}
.news-card-db-day {
  font-family: var(--font-d); font-size: 2.4rem; font-weight: 700;
  color: #DBA882; line-height: 1;
}
.news-card-db-mon {
  font-size: .75rem; color: rgba(255,255,255,.65);
  text-transform: uppercase; letter-spacing: .06em; line-height: 1;
}

.stats-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: .65rem; }
.stat-btn {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 1.1rem 1rem 1rem;
  border-radius: 14px; text-align: left;
  background: var(--bg); border: 1px solid var(--gray-200);
  border-left: 3px solid transparent;
  cursor: pointer; transition: all 160ms ease;
  min-height: 88px; justify-content: space-between;
  position: relative; overflow: hidden;
}
.stat-btn::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, transparent 60%, rgba(44,26,16,.04));
  pointer-events: none;
}
.stat-btn:hover {
  background: var(--brown-50); border-color: var(--brown-200);
  border-left-color: var(--brown-500);
  transform: translateY(-2px); box-shadow: 0 8px 24px rgba(44,26,16,.1);
}
.stat-btn:hover .stat-icon, .stat-btn:hover .stat-label { color: var(--brown-700); }
.stat-btn.active {
  background: var(--brown-50); border-color: var(--brown-300);
  border-left-color: var(--red-600);
  box-shadow: 0 4px 16px rgba(44,26,16,.08);
}
.stat-btn.active .stat-label { color: var(--brown-700); font-weight: 700; }
.stat-icon { font-size: 1.5rem; line-height: 1; }
.stat-label {
  font-size: .72rem; font-weight: 600; color: var(--brown-500);
  transition: color 160ms ease; line-height: 1.3;
  letter-spacing: .02em; text-transform: uppercase;
}
.stats-result {
  margin-top: 1rem; padding: 0; background: transparent;
  border-radius: var(--r-md); border: none;
  min-height: 60px; font-size: .875rem;
}
.stats-result-empty {
  padding: 1.5rem 1.25rem;
  color: var(--gray-400); font-size: .82rem;
  font-style: italic; text-align: center;
  background: var(--white); border-radius: var(--r-md);
  border: 1px solid var(--gray-200);
}
.stat-result-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: .85rem 1.2rem;
  background: var(--brown-50); border-radius: 14px 14px 0 0;
  border: 1px solid var(--gray-200); border-bottom: 1px solid var(--gray-100);
}
.stat-result-title {
  font-family: var(--font-d); font-size: .95rem; font-weight: 700;
  color: var(--brown-900);
}
.stat-result-count {
  font-size: .68rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--brown-400);
}
.stat-rank-list {
  background: var(--white); border: 1px solid var(--gray-200);
  border-top: none; border-radius: 0 0 14px 14px; overflow: hidden;
}
.stat-rank-item {
  display: flex; align-items: center; gap: .9rem;
  padding: .6rem 1.2rem;
  border-bottom: 1px solid var(--gray-100);
  transition: background 120ms ease;
}
.stat-rank-item:last-child { border-bottom: none; }
.stat-rank-item:hover { background: var(--brown-50); }
.stat-rank-pos {
  font-family: var(--font-d); font-size: 1rem; font-weight: 700;
  color: var(--gray-200); min-width: 2rem; text-align: right; line-height: 1;
}
.stat-rank-item:nth-child(-n+3) .stat-rank-pos { color: var(--brown-400); }
.stat-rank-item:first-child .stat-rank-pos { color: var(--red-600); }
.stat-rank-info { flex: 1; min-width: 0; }
.stat-rank-name {
  font-size: .83rem; font-weight: 600; color: var(--brown-900);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.stat-rank-artist {
  font-size: .72rem; color: var(--brown-400); margin-top: .1rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.stat-rank-val {
  font-size: .68rem; color: var(--gray-400); font-variant-numeric: tabular-nums;
  white-space: nowrap; font-weight: 600; letter-spacing: .03em;
}
.stat-rank-actions {
  display: flex; align-items: center; gap: .35rem; flex-shrink: 0;
}
.stat-action-btn {
  display: flex; align-items: center; justify-content: center; gap: .3rem;
  height: 26px; border-radius: var(--r-pill);
  border: 1px solid var(--gray-200); background: var(--white);
  color: var(--gray-500); cursor: pointer; font-size: .7rem; font-weight: 600;
  padding: 0 .55rem;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
  flex-shrink: 0; white-space: nowrap;
}
.stat-fav-btn { width: 26px; padding: 0; border-radius: 50%; }
.stat-action-btn:hover { border-color: var(--brown-400); color: var(--brown-700); background: var(--brown-50); }
.stat-fav-btn.is-faved { color: var(--red-500); border-color: var(--red-500); background: #fff1f2; }
#estadisticas-section .stat-action-btn {
  border-color: rgba(219,168,130,.25) !important;
  background: rgba(255,255,255,.05) !important;
  color: rgba(219,168,130,.6) !important;
}
#estadisticas-section .stat-action-btn:hover {
  border-color: rgba(219,168,130,.6) !important;
  color: #fff !important;
  background: rgba(219,168,130,.15) !important;
}
#estadisticas-section .stat-fav-btn.is-faved {
  color: var(--red-500) !important;
  border-color: var(--red-500) !important;
  background: rgba(220,69,80,.18) !important;
}

/* ── Footer ─────────────────────────────────────────────────── */
footer {
  background: var(--brown-950); color: var(--brown-300);
  padding: 4rem clamp(1rem,4vw,2rem) 2rem;
}
.footer-inner {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 4rem;
}
.footer-brand-name {
  font-family: var(--font-d); font-size: 1.4rem; font-weight: 700;
  color: var(--white); margin-bottom: .5rem;
}
.footer-brand-name em {
  font-family: var(--font-b); font-style: normal;
  font-weight: 600; letter-spacing: .06em; font-size: 1.1rem;
  color: var(--red-500);
}
.footer-taglines { display: flex; flex-direction: column; gap: .4rem; margin-top: .75rem; }
.footer-tagline {
  font-style: italic; font-size: .88rem; color: var(--brown-400); line-height: 1.5;
}
.footer-social { display: flex; gap: .5rem; margin-top: 1.25rem; }
.footer-social-btn {
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255,255,255,.07); color: var(--brown-400);
  display: flex; align-items: center; justify-content: center;
  transition: all var(--t-b);
}
.footer-social-btn:hover { background: var(--red-600); color: white; transform: translateY(-2px); }
.footer-social-btn svg { width: 16px; height: 16px; }

.footer-col-title {
  font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--brown-500); margin-bottom: 1rem;
}
.footer-links { list-style: none; display: flex; flex-direction: column; gap: .5rem; }
.footer-links a { font-size: .875rem; color: var(--brown-400); transition: color var(--t-f); }
.footer-links a:hover { color: white; }

.footer-bottom {
  max-width: 1200px; margin: 3rem auto 0;
  padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.06);
  display: flex; align-items: center; justify-content: space-between;
  font-size: .78rem; color: var(--brown-500);
  flex-wrap: wrap; gap: 1rem;
}
.footer-bottom-links { display: flex; gap: 1.25rem; }
.footer-bottom-links a { color: var(--brown-500); transition: color var(--t-f); }
.footer-bottom-links a:hover { color: white; }

/* ── Modals ─────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(44,26,16,.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: none;
}
.modal-overlay.open { display: block; }

.sl-modal {
  position: fixed; inset: 0; z-index: 1010;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.sl-modal.open { pointer-events: auto; }

.sl-modal-inner {
  background: var(--white); border-radius: var(--r-xl);
  padding: 2rem; width: calc(100% - 2rem); max-width: 440px;
  box-shadow: var(--sh-xl); position: relative;
  animation: modalPop .4s cubic-bezier(.34,1.56,.64,1);
  max-height: 90vh; overflow-y: auto;
}
.sl-modal-live {
  background: var(--brown-950); color: white; text-align: center;
}
.sl-modal-live h2 {
  font-family: var(--font-d); font-size: 1.8rem; color: white; margin: 1rem 0 .5rem;
}
.sl-modal-live p { color: var(--brown-300); margin-bottom: 1.5rem; }

.live-pulse-ring {
  width: 72px; height: 72px; border-radius: 50%;
  border: 2px solid var(--red-600); margin: 0 auto 1rem;
  animation: pulseRing 1.4s ease infinite;
}
.live-logo-img { max-width: 200px; margin: 0 auto; }
.btn-live-enter {
  display: block; padding: .9rem 2rem;
  background: var(--red-600); color: white;
  border-radius: var(--r-pill); font-weight: 700; font-size: .95rem;
  max-width: 220px; margin: 0 auto 1rem; text-align: center;
  transition: all var(--t-sp);
}
.btn-live-enter:hover { background: var(--red-500); transform: scale(1.05); }
.btn-live-dismiss { font-size: .82rem; color: var(--brown-400); cursor: pointer; transition: color var(--t-f); }
.btn-live-dismiss:hover { color: white; }

.modal-title { font-family: var(--font-d); font-size: 1.3rem; font-weight: 700; color: var(--brown-900); margin-bottom: 1.25rem; }
.modal-close-btn {
  position: absolute; top: 1rem; right: 1rem;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--gray-100); color: var(--gray-600);
  display: flex; align-items: center; justify-content: center;
  transition: all var(--t-b);
}
.modal-close-btn:hover { background: var(--brown-900); color: white; }
.modal-close-btn svg { width: 16px; height: 16px; }

/* ── Song Info Modal ─────────────────────────────────────────── */
.song-info-wrap { text-align: center; padding: .5rem 0 0; }

.si-art {
  width: 130px; height: 130px;
  border-radius: var(--r-md);
  background-size: cover;
  background-position: center;
  background-color: var(--brown-100);
  margin: 0 auto 1.25rem;
  box-shadow: 0 6px 24px rgba(44,26,16,.15);
}

.si-header { margin-bottom: 1.75rem; }
.si-title {
  font-family: var(--font-d); font-size: 1.45rem; font-weight: 700;
  color: var(--brown-950); line-height: 1.2; margin-bottom: .35rem;
}
.si-artist {
  font-size: .92rem; font-style: italic;
  color: var(--brown-500); letter-spacing: .01em;
}
.si-stats {
  display: grid; grid-template-columns: repeat(3,1fr); gap: .75rem;
  margin-bottom: 1.5rem;
}
.si-stat {
  padding: 1.1rem .75rem 1rem;
  background: var(--brown-50);
  border-radius: var(--r-md);
  border: 1px solid var(--gray-200);
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
  transition: border-color var(--t-b);
}
.si-stat:hover { border-color: var(--brown-300); }
.si-stat-icon {
  width: 20px; height: 20px;
  color: var(--brown-400);
  margin-bottom: .15rem;
}
.si-stat:first-child .si-stat-icon { color: var(--red-500); }
.si-stat-num {
  font-family: var(--font-d); font-size: 1.4rem; font-weight: 700;
  color: var(--brown-900); line-height: 1;
}
.si-stat-lbl { font-size: .68rem; color: var(--gray-400); letter-spacing: .03em; text-transform: uppercase; }
.si-last-req { font-size: .78rem; color: var(--gray-400); margin-bottom: 1.25rem; }
.si-stats-solo { grid-template-columns: 1fr; max-width: 140px; margin: 0 auto 1.5rem; }
.si-actions {
  display: flex; flex-direction: column; gap: .6rem; align-items: stretch; margin-bottom: .25rem;
}
.si-action-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: .6rem 1.25rem; border-radius: var(--r-pill); border: none; cursor: pointer;
  font-size: .82rem; font-weight: 600; letter-spacing: .01em;
  transition: all var(--t-sp);
}
.si-action-fav {
  background: var(--red-50); color: var(--red-600);
  border: 1.5px solid var(--red-200);
}
.si-action-fav:hover { background: var(--red-600); color: white; border-color: var(--red-600); transform: scale(1.03); }
.si-action-req {
  background: var(--brown-50); color: var(--brown-800);
  border: 1.5px solid var(--brown-200);
}
.si-action-req:hover { background: var(--brown-800); color: white; border-color: var(--brown-800); transform: scale(1.03); }
.si-yt-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: .6rem 1.5rem; border-radius: var(--r-pill);
  background: #FF0000; color: white;
  font-size: .82rem; font-weight: 600; letter-spacing: .01em;
  transition: all var(--t-sp);
}
.si-yt-btn:hover { background: #CC0000; transform: scale(1.04); color: white; }
.si-yt-btn svg { flex-shrink: 0; }

/* ── Cookie bar ─────────────────────────────────────────────── */
.cookie-bar {
  position: fixed; bottom: 1.25rem; left: 50%; transform: translateX(-50%);
  z-index: 1100; background: var(--brown-950); color: white;
  border-radius: var(--r-lg); padding: .9rem 1.5rem;
  display: flex; align-items: center; gap: 1.25rem;
  font-size: .875rem; box-shadow: var(--sh-xl);
  max-width: 500px; width: calc(100% - 2rem);
  animation: slideUp .4s ease;
}
.cookie-bar p { color: var(--brown-300); }
.cookie-link { color: var(--brown-400); text-decoration: underline; }
.cookie-accept-btn {
  padding: .5rem 1.25rem; background: var(--red-600); color: white;
  border-radius: var(--r-pill); font-size: .82rem; font-weight: 600;
  white-space: nowrap; cursor: pointer; transition: background var(--t-f);
}
.cookie-accept-btn:hover { background: var(--red-500); }

/* ── Utilities ──────────────────────────────────────────────── */
.hidden   { display: none !important; }
.loading-spinner {
  width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid var(--gray-200); border-top-color: var(--brown-600);
  animation: spinAnim .8s linear infinite; margin: 1.5rem auto;
}

/* ── Animations ─────────────────────────────────────────────── */
@keyframes spin         { to { transform: rotate(360deg); } }
@keyframes spinAnim     { to { transform: rotate(360deg); } }
@keyframes liveDot      { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:.4; transform:scale(.7); } }
@keyframes ringBreath   { 0%,100% { opacity:.7; transform:scale(1); } 50% { opacity:1; transform:scale(1.015); } }
@keyframes waveAnim     { 0%,100% { transform:scaleY(.35); } 50% { transform:scaleY(1); } }
@keyframes wmFloat      { 0%,100% { transform:translateY(0) translateX(0); } 33% { transform:translateY(-18px) translateX(10px); } 66% { transform:translateY(-8px) translateX(-8px); } }
@keyframes heartBeat    { 0% { transform:scale(1); } 30% { transform:scale(1.35); } 60% { transform:scale(.95); } 80% { transform:scale(1.12); } 100% { transform:scale(1); } }
@keyframes slGlow       { 0% { box-shadow:0 0 0 0 rgba(196,49,58,.65); } 70% { box-shadow:0 0 0 8px rgba(196,49,58,0); } 100% { box-shadow:0 0 0 0 rgba(196,49,58,0); } }
@keyframes sgbAnim      { 0%,100% { transform:scaleY(1); } 50% { transform:scaleY(.3); } }
@keyframes pulseRing    { 0% { transform:scale(1); opacity:1; } 100% { transform:scale(1.6); opacity:0; } }
@keyframes modalPop     { from { opacity:0; transform:scale(.84) translateY(16px); } to { opacity:1; transform:scale(1) translateY(0); } }
@keyframes fadeUp       { from { opacity:0; transform:translateY(7px); } to { opacity:1; transform:translateY(0); } }
@keyframes slideUp      { from { opacity:0; transform:translateX(-50%) translateY(18px); } to { opacity:1; transform:translateX(-50%) translateY(0); } }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1279px) {
  .nav-links { display: none; }
  .nav-hamburger { display: flex; }
  .things-grid { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
}

@media (max-width: 1023px) {
  .hero-inner { grid-template-columns: 1fr; text-align: center; gap: 3rem; }
  .vinyl-side { margin: 0 auto; }
  .player-side {
    max-width: 100%;
    align-items: center;
    position: relative;
    padding: 0;
    text-align: center;
    justify-self: center;
  }
  .player-side::after { display: none; }
  .player-side::before {
    content: '';
    position: absolute;
    top: -.65rem;
    left: 50%;
    transform: translateX(-50%);
    width: min(92vw, 760px);
    height: 215px;
    border-radius: 50%;
    background: radial-gradient(ellipse at 50% 40%, rgba(251,243,235,.78) 0%, rgba(251,243,235,.52) 42%, rgba(251,243,235,0) 78%);
    filter: blur(6px);
    pointer-events: none;
    z-index: 0;
  }
  .player-copy-panel {
    width: min(100%, 700px);
    margin: 0 auto;
    padding: 0;
    gap: .55rem;
    align-items: center;
  }
  .player-now-tag {
    align-self: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: .1rem;
    text-shadow: 0 1px 0 rgba(255,255,255,.45);
  }
  .player-copy-panel::before {
    display: none;
  }
  .player-song-copy {
    padding: 0;
    align-items: center;
  }
  .player-song-copy::before {
    display: none;
  }
  .player-artist {
    color: #945635;
    text-shadow: 0 1px 0 rgba(255,255,255,.5), 0 10px 28px rgba(251,243,235,.52);
  }
  .player-title {
    text-shadow: 0 1px 0 rgba(255,255,255,.48), 0 12px 32px rgba(251,243,235,.5);
  }
  .player-controls { justify-content: center; }
  .player-meta { justify-content: center; }
  .hero-slogan { text-align: center; }
  .hero-efemeride { text-align: center; }
  .hero-efe-main { justify-content: center; }
}

@media (max-width: 768px) {
  .player-now-tag {
    font-size: .66rem;
    letter-spacing: .12em;
  }
  .player-side::before {
    width: min(96vw, 680px);
    height: 190px;
    top: -.45rem;
  }
  .vinyl-platter { width: 280px; height: 280px; }
  .vinyl-record { width: 280px; height: 280px; }
  .vinyl-ambient { width: 360px; height: 360px; }
  .vinyl-label  { width: 96px; height: 96px; }
  .vinyl-label img { width: 54px; }
  .vinyl-side::before { width: 280px; height: 280px; }
  .vinyl-side::after  { width: 220px; }
  .sl-section { padding: 2rem 1rem; }
  .section-head { margin-bottom: 1rem; padding-bottom: .75rem; }
  .playlist-grid { grid-template-columns: 1fr; gap: .4rem; }
  .track-card {
    padding: .75rem .85rem;
    border-radius: var(--r-md);
    transform: none !important;
  }
  .track-card:hover { box-shadow: none; }
  .track-card.now-playing { padding-left: .85rem; }
  .track-num { min-width: 36px; font-size: .65rem; }
  .track-title { font-size: .83rem; }
  .track-artist { font-size: .72rem; }
  .track-req-badge { font-size: .58rem; padding: 1px 5px; }
  .playlist-refresh-label { display: none; }
  .playlist-controls { gap: .5rem; }
  #playlist-section .section-subtitle { display: none; }
  #playlist-section .section-head { flex-wrap: nowrap; align-items: center; }
  .playlist-load-more { padding: 1rem 0; }
  .btn-load-more { width: 100%; text-align: center; }
  .track-time { display: none; }
  .stats-grid { grid-template-columns: repeat(2,1fr); }
  .footer-inner { grid-template-columns: 1fr; gap: 2rem; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .things-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .player-now-tag {
    gap: 8px;
    font-size: .62rem;
    letter-spacing: .11em;
  }
  .hero-slide-overlay {
    background: linear-gradient(
      to bottom,
      rgba(10,5,2,.74) 0%,
      rgba(10,5,2,.36) 24%,
      rgba(251,243,235,.84) 44%,
      rgba(251,243,235,.96) 58%,
      rgba(251,243,235,1) 72%
    );
  }
  .player-side::before {
    width: 108%;
    height: 168px;
    top: -.2rem;
    background: radial-gradient(ellipse at 50% 42%, rgba(251,243,235,.82) 0%, rgba(251,243,235,.54) 42%, rgba(251,243,235,0) 76%);
    filter: blur(4px);
  }
  .vinyl-platter { width: 220px; height: 220px; }
  .vinyl-record { width: 220px; height: 220px; }
  .vinyl-ambient { width: 300px; height: 300px; }
  .vinyl-label  { width: 76px; height: 76px; }
  .vinyl-label img { width: 44px; }
  .hero-wm { display: none; }
  .vinyl-side::before { width: 220px; height: 220px; }
  .vinyl-side::after  { width: 170px; }
}

/* ── Auth Modal ────────────────────────────────────────────── */

@keyframes authCardIn {
  from { opacity: 0; transform: scale(.95) translateY(10px); }
  to   { opacity: 1; transform: scale(1)   translateY(0); }
}
@keyframes authSpinner {
  to { transform: rotate(360deg); }
}

.auth-modal {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(20,8,2,.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 1rem;
}
.auth-card {
  background: var(--white);
  border-radius: var(--r-lg);
  box-shadow: 0 24px 64px rgba(20,8,2,.45), 0 4px 16px rgba(20,8,2,.2);
  width: 100%; max-width: 400px;
  overflow: hidden;
  position: relative;
  animation: authCardIn 280ms cubic-bezier(.34,1.56,.64,1) both;
}

/* ── Dark header strip ── */
.auth-card-header {
  background: var(--brown-900);
  padding: .85rem 1.1rem .85rem 1.25rem;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.auth-card-brand {
  display: flex; align-items: center; gap: .5rem;
  font-family: var(--font-b); font-size: .78rem; font-weight: 500;
  color: rgba(255,255,255,.55); letter-spacing: .08em; text-transform: uppercase;
}
.auth-card-brand em {
  font-family: var(--font-b); font-style: normal; font-weight: 600;
  color: var(--red-500); letter-spacing: .06em;
}
.auth-close {
  width: 26px; height: 26px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.1);
  border-radius: 50%; cursor: pointer;
  color: rgba(255,255,255,.5);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--t-f), color var(--t-f);
  flex-shrink: 0;
}
.auth-close:hover { background: rgba(255,255,255,.16); color: #fff; }

/* ── Card body ── */
.auth-card-body {
  padding: 1.5rem 1.75rem 1.75rem;
}

.auth-tabs {
  display: flex; gap: 0;
  border-bottom: 1px solid var(--gray-100);
  margin-bottom: 1.4rem;
}
.auth-tab {
  flex: 1; padding: .55rem .5rem;
  background: none; border: none;
  border-bottom: 2px solid transparent;
  font-size: .83rem; font-family: var(--font-b); font-weight: 500;
  color: var(--gray-400); cursor: pointer;
  transition: color var(--t-f), border-color var(--t-f);
  margin-bottom: -1px;
}
.auth-tab.active { color: var(--brown-800); border-bottom-color: var(--red-600); font-weight: 600; }
.auth-tab:hover:not(.active) { color: var(--brown-600); }

.auth-panel { display: flex; flex-direction: column; gap: .7rem; }

.auth-label {
  display: flex; flex-direction: column; gap: .28rem;
  font-size: .72rem; font-weight: 600; color: var(--brown-700);
  letter-spacing: .04em; text-transform: uppercase;
}
.auth-hint { font-weight: 400; color: var(--gray-400); font-size: .7rem; text-transform: none; letter-spacing: 0; }

.auth-input {
  width: 100%; box-sizing: border-box;
  border: 1px solid #e8ddd6; border-radius: var(--r-md);
  padding: .62rem .9rem;
  font-size: .88rem; font-family: var(--font-b);
  color: var(--brown-900); background: var(--brown-50);
  outline: none; transition: border-color var(--t-f), box-shadow var(--t-f), background var(--t-f);
}
.auth-input::placeholder { color: var(--gray-400); }
.auth-input:focus {
  border-color: var(--brown-400);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(170,107,68,.12);
}
.auth-error {
  padding: .5rem .75rem; border-radius: var(--r-md);
  font-size: .77rem; line-height: 1.45;
  border-left: 3px solid var(--red-500);
}

/* ── CTA Submit button ── */
.auth-submit {
  width: 100%; margin-top: .4rem;
  background: var(--red-600); color: #fff;
  border: none; border-radius: var(--r-pill);
  padding: .72rem 1.5rem;
  font-size: .88rem; font-family: var(--font-b); font-weight: 600;
  letter-spacing: .04em; cursor: pointer;
  box-shadow: 0 4px 18px rgba(196,49,58,.35);
  transition: background var(--t-f), transform 150ms ease, box-shadow var(--t-f);
  display: flex; align-items: center; justify-content: center; gap: .5rem;
}
.auth-submit:hover { background: var(--red-500); transform: translateY(-1px); box-shadow: 0 6px 22px rgba(196,49,58,.42); }
.auth-submit:active { transform: translateY(0); box-shadow: 0 2px 10px rgba(196,49,58,.3); }
.auth-submit:disabled { opacity: .6; cursor: not-allowed; transform: none; box-shadow: none; }
.auth-submit.loading { pointer-events: none; }
.auth-submit.loading::after {
  content: '';
  width: 14px; height: 14px; flex-shrink: 0;
  border: 2px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: authSpinner 550ms linear infinite;
}
.auth-submit-outline {
  background: transparent;
  border: 1.5px solid var(--brown-200);
  color: var(--brown-700);
  box-shadow: none;
}
.auth-submit-outline:hover { background: var(--brown-50); border-color: var(--brown-400); color: var(--brown-900); transform: none; box-shadow: none; }
.auth-submit-outline.loading::after { border-top-color: var(--brown-700); border-color: rgba(107,61,36,.25); }

.auth-link-btn {
  background: none; border: none; padding: .3rem 0;
  font-size: .76rem; color: var(--gray-400); cursor: pointer;
  font-family: var(--font-b); text-align: center;
  transition: color var(--t-f);
}
.auth-link-btn:hover { color: var(--brown-600); text-decoration: underline; }
.auth-sub { font-size: .82rem; color: var(--gray-600); margin: 0 0 .5rem; line-height: 1.5; }
.auth-legal {
  font-size: .7rem; color: var(--gray-400); text-align: center;
  margin: .1rem 0 0; line-height: 1.4;
}

/* ── Terms checkbox ── */
.auth-terms-label {
  display: flex; align-items: flex-start; gap: .55rem;
  font-size: .76rem; line-height: 1.5; color: var(--gray-500);
  cursor: pointer; margin: .25rem 0 .1rem;
}
.auth-terms-check {
  margin-top: .2rem; flex-shrink: 0;
  width: 16px; height: 16px;
  accent-color: var(--red-600);
  cursor: pointer;
}
.auth-terms-label a {
  color: var(--brown-700); text-decoration: underline;
  text-underline-offset: 2px;
}
.auth-terms-label a:hover { color: var(--red-600); }

/* ── Avatar wrap ── */
.auth-avatar-wrap {
  display: flex; flex-direction: column; align-items: center; gap: .4rem;
  padding: .25rem 0 .5rem;
}
.auth-avatar-label {
  font-size: .7rem; color: var(--gray-400);
  font-family: var(--font-b); letter-spacing: .02em;
}
.auth-avatar-preview {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--gray-200);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-d); font-size: 1.5rem; font-weight: 600; color: #fff;
  box-shadow: 0 2px 12px rgba(20,8,2,.18);
  transition: background 300ms ease, transform 200ms ease;
}
.auth-avatar-preview:not(:empty):not([data-val='?']) { transform: scale(1.04); }

/* ── Success panel ── */
.auth-success-panel {
  align-items: center !important; text-align: center;
  padding: .5rem 0 .75rem; gap: .9rem !important;
}
.auth-success-icon {
  width: 68px; height: 68px;
  background: linear-gradient(135deg, #fff8f2, var(--brown-50));
  border: 1.5px solid #e8d5c4;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--red-600);
  box-shadow: 0 4px 20px rgba(196,49,58,.12);
}
.auth-success-title {
  font-family: var(--font-d); font-size: 1.3rem; font-weight: 700;
  color: var(--brown-900); margin: 0; line-height: 1.2;
}
.auth-success-body {
  font-size: .86rem; color: var(--gray-600); line-height: 1.55; margin: 0;
}
.auth-success-body strong { color: var(--brown-800); font-weight: 600; }
.auth-success-note {
  font-size: .74rem; color: var(--gray-400); line-height: 1.55;
  margin: 0; padding: .6rem .5rem;
  background: var(--brown-50); border-radius: var(--r-md);
  width: 100%; box-sizing: border-box;
}

/* ── Profile Modal ─────────────────────────────────────────── */

@keyframes profileCardIn {
  from { opacity: 0; transform: scale(.96) translateY(10px); }
  to   { opacity: 1; transform: scale(1)   translateY(0); }
}

/* ── Password show/hide toggle ──────────────────────────────────────────────── */
.pw-wrap { position: relative; display: flex; align-items: center; }
.pw-wrap .auth-input,
.pw-wrap .profile-input { padding-right: 2.6rem; width: 100%; }
.pw-eye {
  position: absolute; right: .55rem;
  background: none; border: none; cursor: pointer;
  padding: .3rem; color: var(--gray-400);
  display: flex; align-items: center; justify-content: center;
  transition: color .15s; flex-shrink: 0;
  min-width: 36px; min-height: 36px;
}
.pw-eye:hover { color: var(--brown-700); }
.pw-eye:focus { outline: 2px solid var(--brown-400); border-radius: 4px; }
.pw-eye svg { pointer-events: none; display: block; }
.pw-eye-off { display: none; }

.profile-modal {
  position: fixed; inset: 0; z-index: 9990;
  display: flex; align-items: center; justify-content: center;
  background: rgba(20,8,2,.68);
  backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
  padding: 1rem;
}
.profile-card {
  background: var(--white);
  border-radius: var(--r-lg);
  box-shadow: 0 28px 70px rgba(20,8,2,.5), 0 4px 16px rgba(20,8,2,.2);
  width: 100%; max-width: 460px;
  overflow: hidden; position: relative;
  opacity: 0; transform: scale(.96) translateY(10px);
  transition: opacity 220ms ease, transform 220ms ease;
}
.profile-card.is-open {
  opacity: 1; transform: scale(1) translateY(0);
}

/* Dark header */
.profile-card-header {
  background: var(--brown-900);
  padding: 1.5rem 1.25rem 1.25rem;
  display: flex; align-items: center; gap: 1rem;
  border-bottom: 1px solid rgba(255,255,255,.06);
  position: relative;
}
/* Avatar area */
.profile-avatar-area {
  position: relative; flex-shrink: 0;
}
.profile-avatar-big {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--brown-600);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-d); font-size: 1.6rem; font-weight: 700; color: #fff;
  box-shadow: 0 4px 18px rgba(0,0,0,.4);
  overflow: hidden; position: relative;
}
.profile-avatar-big img {
  width: 100%; height: 100%; object-fit: cover;
}
.profile-avatar-cam {
  position: absolute; bottom: -2px; right: -2px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--red-600); color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; border: 2px solid var(--brown-900);
  transition: background var(--t-f);
}
.profile-avatar-cam:hover { background: var(--red-500); }
.profile-photo-uploading {
  position: absolute; inset: 0; border-radius: 50%;
  background: rgba(20,8,2,.6);
  display: flex; align-items: center; justify-content: center;
}
.profile-photo-spinner {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.3);
  border-top-color: #fff;
  animation: authSpinner 550ms linear infinite;
}

/* Header info */
.profile-header-info {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: .15rem;
}
.profile-header-alias {
  font-family: var(--font-d); font-size: 1.05rem; font-weight: 700;
  color: rgba(255,255,255,.92); letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.profile-header-email {
  font-size: .72rem; color: rgba(255,255,255,.35); letter-spacing: .02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Close button */
.profile-close {
  position: absolute; top: .85rem; right: .85rem;
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.5); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--t-f), color var(--t-f);
}
.profile-close:hover { background: rgba(255,255,255,.16); color: #fff; }

/* Tabs */
.profile-tabs {
  display: flex; border-bottom: 1px solid var(--gray-100);
}
.profile-tab {
  flex: 1; padding: .58rem .5rem;
  background: none; border: none;
  border-bottom: 2px solid transparent;
  font-size: .78rem; font-family: var(--font-b); font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--gray-400); cursor: pointer;
  transition: color var(--t-f), border-color var(--t-f);
  margin-bottom: -1px;
}
.profile-tab.active { color: var(--brown-800); border-bottom-color: var(--red-600); }
.profile-tab:hover:not(.active) { color: var(--brown-600); }

/* Body */
.profile-card-body { padding: 1.4rem 1.6rem 1.6rem; }

/* Panels */
.profile-panel {
  display: flex; flex-direction: column; gap: .75rem;
}

/* Labels & inputs (editorial, border-bottom only) */
.profile-label {
  display: flex; flex-direction: column; gap: .28rem;
  font-size: .69rem; font-weight: 700; color: var(--brown-600);
  letter-spacing: .07em; text-transform: uppercase;
}
.profile-label svg { display: inline; vertical-align: middle; margin-right: 3px; }
.profile-hint { font-weight: 400; color: var(--gray-400); font-size: .68rem; text-transform: none; letter-spacing: 0; }

.profile-input {
  width: 100%; box-sizing: border-box;
  border: none; border-bottom: 1.5px solid #ddd6d0;
  border-radius: 0;
  padding: .5rem 0;
  font-size: .88rem; font-family: var(--font-b); color: var(--brown-900);
  background: transparent; outline: none;
  transition: border-color 180ms ease;
}
.profile-input:focus { border-bottom-color: var(--red-600); }
.profile-input::placeholder { color: var(--brown-300); font-style: italic; }
.profile-textarea {
  resize: vertical; min-height: 68px; max-height: 140px;
  font-family: var(--font-b); line-height: 1.5;
}

/* Social row */
.profile-social-row { display: flex; gap: 1.25rem; }
.profile-label-half { flex: 1; min-width: 0; }

/* Submit */
.profile-submit {
  width: 100%; margin-top: .5rem;
  background: var(--red-600); color: #fff;
  border: none; border-radius: var(--r-pill);
  padding: .72rem 1.5rem;
  font-size: .88rem; font-family: var(--font-b); font-weight: 700;
  letter-spacing: .04em; cursor: pointer;
  box-shadow: 0 4px 18px rgba(196,49,58,.35);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--t-f), transform 150ms ease, box-shadow var(--t-f);
}
.profile-submit:hover { background: var(--red-500); transform: translateY(-1px); box-shadow: 0 6px 22px rgba(196,49,58,.42); }
.profile-submit:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
.profile-submit.loading::after {
  content: ''; width: 13px; height: 13px; flex-shrink: 0;
  border: 2px solid rgba(255,255,255,.3); border-top-color: #fff;
  border-radius: 50%; animation: authSpinner 550ms linear infinite; margin-left: .5rem;
}

/* Nav avatar photo */
.nav-avatar-photo {
  width: 100%; height: 100%; border-radius: 50%; object-fit: cover;
}
.nav-user-dd-profile {
  background: none; border: none; width: 100%; text-align: left;
  cursor: pointer; font-family: var(--font-b);
}

/* Messages */
.profile-msg {
  padding: .55rem .85rem; border-radius: var(--r-md);
  font-size: .78rem; line-height: 1.45;
  border-left: 3px solid transparent;
}
.profile-msg-ok {
  background: rgba(74,124,89,.08); color: #2e6b3e; border-left-color: #4A7C59;
}
.profile-msg-err {
  background: rgba(196,49,58,.07); color: #9B1E26; border-left-color: var(--red-500);
}

/* Responsive */
@media (max-width: 480px) {
  .profile-card { border-radius: var(--r-md); }
  .profile-card-body { padding: 1.1rem 1.1rem 1.4rem; }
  .profile-social-row { flex-direction: column; gap: .75rem; }
  .profile-avatar-big { width: 54px; height: 54px; font-size: 1.35rem; }
}

/* ── Nav dropdown items with icons ── */
.nav-user-dd-item {
  display: flex; align-items: center; gap: .5rem;
}

/* Toast notifications */
.sl-toast {
  position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--brown-900); color: #fff;
  padding: .65rem 1.25rem; border-radius: var(--r-pill);
  font-size: .84rem; font-family: var(--font-b);
  box-shadow: var(--sh-lg); z-index: 2000;
  opacity: 0; transition: opacity .3s, transform .3s;
  white-space: nowrap; pointer-events: none;
}
.sl-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.sl-toast.sl-toast-err { background: var(--red-700); }

/* ── reQuests: preview mode (guest) ─────────────────────────────────────────── */
.req-preview-wrap {
  position: relative;
  padding-bottom: 2.5rem; /* space for the fade */
}

/* Floating badge top-right */
.req-preview-badge {
  display: inline-flex; align-items: center; gap: .4rem;
  position: absolute; top: 0; right: 0;
  background: var(--brown-900); color: rgba(253,250,247,.75);
  font-size: .7rem; font-weight: 600; letter-spacing: .04em;
  padding: .3rem .75rem; border-radius: var(--r-pill);
  z-index: 2; white-space: nowrap;
}
.req-preview-badge svg { flex-shrink: 0; opacity: .65; }
.req-preview-badge button {
  background: none; border: none; padding: 0;
  color: #DBA882; font-size: .7rem; font-weight: 700;
  cursor: pointer; text-decoration: underline;
  text-underline-offset: 2px; font-family: var(--font-b);
}
.req-preview-badge button:hover { color: #fff; }

/* Pointer on every interactive element inside preview */
.req-preview-wrap .req-tab,
.req-preview-wrap .genre-filter-btn,
.req-preview-wrap .btn-random { cursor: pointer; }

/* Bottom fade that fades out the genre chips, hinting there's more */
.req-preview-fade {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 80px; pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--bg, #FDFAF7));
}

/* ══════════════════════════════════════════════════════════════════════════════
   reQuests · Dark Studio Console — Víctor design v2
   Mood: sala de control soul, 2am, roja de on-air, calor de válvulas
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Section shell: deep wine-dark, not black ── */
#requests-section {
  background: #180A0A;
  border-top: 1px solid rgba(196,49,58,.3);
  position: relative;
  overflow: hidden;
}

/* Large visible ember bloom from top center */
#requests-section::before {
  content: '';
  position: absolute;
  top: -80px; left: 50%; transform: translateX(-50%);
  width: 80%; height: 360px;
  background: radial-gradient(ellipse at 50% 0%,
    rgba(196,49,58,.32) 0%,
    rgba(180,90,30,.14) 45%,
    transparent 72%);
  pointer-events: none; z-index: 0;
}

/* Bottom separator — warm crimson line */
#requests-section::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(196,49,58,.4) 20%,
    rgba(219,168,130,.3) 50%,
    rgba(196,49,58,.4) 80%,
    transparent 100%);
  z-index: 0;
}

#requests-section .sl-section { position: relative; z-index: 1; }

/* ── Section title ── */
#requests-section .section-title {
  color: #FDF4EC;
  text-shadow: 0 2px 30px rgba(196,49,58,.35);
}
#requests-section .section-subtitle {
  color: rgba(219,168,130,.65);
  letter-spacing: .04em;
}
#requests-section .section-head {
  border-bottom: 1px solid rgba(255,255,255,.1);
  padding-bottom: 1.5rem;
  margin-bottom: 2rem;
}

/* ── On-air badge: lit indicator ── */
.req-onair-badge {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .32rem .9rem;
  background: linear-gradient(135deg, rgba(196,49,58,.18), rgba(196,49,58,.08));
  border: 1px solid rgba(196,49,58,.35);
  border-radius: var(--r-pill);
  font-size: .62rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
  color: #E85460;
  box-shadow: 0 0 20px rgba(196,49,58,.12), inset 0 1px 0 rgba(255,255,255,.06);
}
.req-onair-badge-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #C4313A;
  box-shadow: 0 0 8px rgba(196,49,58,.8);
  animation: req-onair-pulse 1.8s ease-in-out infinite;
}
@keyframes req-onair-pulse {
  0%,100% { opacity: 1; box-shadow: 0 0 8px rgba(196,49,58,.8); }
  50%     { opacity: .5; box-shadow: 0 0 3px rgba(196,49,58,.3); }
}

/* ── Tabs: console channel selectors ── */
#requests-section .req-tabs {
  display: flex;
  gap: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.07) !important;
  margin-bottom: 2rem !important;
  padding-bottom: 0 !important;
  width: 100% !important;
}
#requests-section .req-tab {
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  padding: .65rem 1.5rem !important;
  background: transparent !important;
  color: rgba(253,244,236,.22) !important;
  font-size: .68rem !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  box-shadow: none !important;
  margin-bottom: -1px !important;
  transition: color 200ms ease !important;
  cursor: pointer !important;
}
#requests-section .req-tab:hover:not(.active) {
  color: rgba(253,244,236,.55) !important;
  background: transparent !important;
}
#requests-section .req-tab.active {
  color: #FDF4EC !important;
  border-bottom-color: #C4313A !important;
  background: transparent !important;
}

/* ── Panels ── */
#requests-section .req-panel { gap: 1.5rem; }

/* ── Search input: console fader — visible surface ── */
#requests-section .search-wrap {
  max-width: 100% !important;
  background: linear-gradient(180deg, #221212, #1C0D0D) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-top-color: rgba(255,255,255,.2) !important;
  border-radius: 16px !important;
  padding: 1.25rem 1.4rem !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.08) inset,
    0 -1px 0 rgba(0,0,0,.6) inset,
    0 12px 48px rgba(0,0,0,.55),
    0 4px 16px rgba(0,0,0,.4) !important;
  transition: border-color 220ms ease, box-shadow 220ms ease !important;
}
#requests-section .search-wrap:focus-within {
  border-color: rgba(196,49,58,.55) !important;
  border-top-color: rgba(196,49,58,.7) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.08) inset,
    0 -1px 0 rgba(0,0,0,.6) inset,
    0 12px 48px rgba(0,0,0,.5),
    0 0 0 1px rgba(196,49,58,.25),
    0 0 40px rgba(196,49,58,.15) !important;
}
#requests-section .search-input {
  color: #FDF4EC !important;
  border-bottom: none !important;
  background: transparent !important;
  font-size: 1.1rem !important;
  font-weight: 400 !important;
  letter-spacing: .01em !important;
  padding: .5rem 3.2rem .5rem 0 !important;
}
#requests-section .search-input::placeholder {
  color: rgba(253,244,236,.18) !important;
  font-style: italic !important;
}
#requests-section .search-go {
  right: 1rem !important;
  width: 38px !important; height: 38px !important;
  background: #C4313A !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 16px rgba(196,49,58,.5), 0 1px 0 rgba(255,255,255,.1) inset !important;
  transition: transform 160ms ease, box-shadow 160ms ease !important;
}
#requests-section .search-go:hover {
  background: #D94450 !important;
  transform: scale(1.06) !important;
  box-shadow: 0 6px 24px rgba(196,49,58,.65), 0 1px 0 rgba(255,255,255,.15) inset !important;
}

/* ── Genre chips: illuminated console buttons ── */
#requests-section .genre-filters {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: .5rem !important;
}
#requests-section .genre-filter-btn {
  background: linear-gradient(180deg, #2A1212, #1F0D0D) !important;
  color: rgba(219,168,130,.8) !important;
  border: 1px solid rgba(219,168,130,.25) !important;
  border-bottom-color: rgba(0,0,0,.5) !important;
  font-size: .68rem !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  padding: .45rem 1.1rem !important;
  border-radius: 8px !important;
  transition: all 180ms ease !important;
  box-shadow: 0 3px 0 rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08) !important;
}
#requests-section .genre-filter-btn:hover {
  color: #F0C490 !important;
  background: linear-gradient(180deg, #341515, #261010) !important;
  border-color: rgba(219,168,130,.45) !important;
  border-bottom-color: rgba(0,0,0,.5) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 5px 0 rgba(0,0,0,.5), 0 6px 20px rgba(219,168,130,.18), inset 0 1px 0 rgba(255,255,255,.1) !important;
}
#requests-section .genre-filter-btn.active {
  background: linear-gradient(180deg, #D94450, #B82832) !important;
  color: #fff !important;
  border-color: #C4313A !important;
  border-bottom-color: #8C1E26 !important;
  box-shadow: 0 2px 0 #8C1E26, 0 4px 20px rgba(196,49,58,.45), inset 0 1px 0 rgba(255,255,255,.12) !important;
  transform: translateY(0) !important;
}

/* ── Custom genre artist select ── */
.sl-cselect { position: relative; width: 100%; }
.sl-cselect__trigger {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  padding: .8rem 1.1rem; cursor: pointer; text-align: left;
  background: linear-gradient(180deg, #2A1010, #1E0D0D);
  border: 1px solid rgba(219,168,130,.25); border-radius: 10px;
  color: #DBA882; font-size: .9rem; font-family: inherit;
  transition: border-color 180ms, box-shadow 180ms;
}
.sl-cselect__trigger:hover { border-color: rgba(219,168,130,.5); }
.sl-cselect__trigger svg { flex-shrink:0; transition: transform 220ms; }
.sl-cselect.open .sl-cselect__trigger { border-color: rgba(219,168,130,.5); border-radius: 10px 10px 0 0; }
.sl-cselect.open .sl-cselect__trigger svg { transform: rotate(180deg); }
.sl-cselect__panel {
  display: none;
  background: #1E0D0D; border: 1px solid rgba(219,168,130,.25); border-top: none;
  border-radius: 0 0 10px 10px; box-shadow: 0 4px 16px rgba(0,0,0,.4);
}
.sl-cselect.open .sl-cselect__panel { display: block; }
.sl-cselect__tools {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .5rem .6rem;
  border-bottom: 1px solid rgba(219,168,130,.1);
}
.sl-cselect__search { flex: 1 1 auto; min-width: 0; }
.sl-cselect__search input {
  width: 100%; background: rgba(255,255,255,.05); border: 1px solid rgba(219,168,130,.15);
  border-radius: 6px; padding: .45rem .75rem; color: #FDF4EC; font-size: .85rem;
  font-family: inherit; outline: none; box-sizing: border-box;
}
.sl-cselect__search input::placeholder { color: rgba(219,168,130,.4); }
.sl-cselect__search input:focus { border-color: rgba(219,168,130,.4); }
.sl-cselect__sort {
  display: inline-flex;
  align-items: center;
  gap: .28rem;
  flex-shrink: 0;
  padding: .18rem;
  border: 1px solid rgba(219,168,130,.14);
  border-radius: 999px;
  background: rgba(255,255,255,.03);
}
.sl-cselect__sort-btn {
  border: none;
  background: transparent;
  color: rgba(219,168,130,.7);
  padding: .42rem .72rem;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, box-shadow 140ms ease;
}
.sl-cselect__sort-btn:hover {
  color: #F7D6BA;
  background: rgba(219,168,130,.08);
}
.sl-cselect__sort-btn.active {
  color: #fff;
  background: linear-gradient(180deg, #D94450, #B82832);
  box-shadow: 0 3px 10px rgba(196,49,58,.28);
}
.sl-cselect__list {
  max-height: 260px; overflow-y: auto; padding: .3rem 0;
  scrollbar-width: thin; scrollbar-color: rgba(219,168,130,.2) transparent;
}
.sl-cselect__item {
  padding: .6rem 1.1rem; cursor: pointer; font-size: .88rem; color: #DBA882;
  transition: background 120ms, color 120ms;
}
.sl-cselect__item:hover { background: rgba(219,168,130,.1); color: #FDF4EC; }
.sl-cselect__item--cooldown {
  opacity: .45;
  cursor: default;
  pointer-events: none;
}
.sl-cselect__cooldown {
  font-size: .62rem;
  color: #d97706;
  margin-left: .4rem;
  font-weight: 600;
}
.sl-cselect__item.hidden { display: none; }
.sl-cselect__empty { padding: .8rem 1.1rem; font-size: .85rem; color: rgba(219,168,130,.45); font-style: italic; }

/* ── Select dropdowns ── */
#requests-section .sl-select {
  background-color: #1E0D0D !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23DBA882' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  border: 1px solid rgba(219,168,130,.2) !important;
  color: #FDF4EC !important;
  border-radius: 10px !important;
}
#requests-section .sl-select option {
  background: #1E0D0D;
  color: #FDF4EC;
}
#requests-section .sl-select:focus {
  border-color: rgba(219,168,130,.5) !important;
  box-shadow: 0 0 0 3px rgba(219,168,130,.1), 0 4px 16px rgba(0,0,0,.3) !important;
  outline: none !important;
}

/* ── Dedication textarea ── */
#requests-section .dedication-box {
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 12px !important;
  color: #FDF4EC !important;
  max-width: 100% !important;
  resize: vertical !important;
  transition: border-color 180ms ease, box-shadow 180ms ease !important;
}
#requests-section .dedication-box:focus {
  border-color: rgba(219,168,130,.35) !important;
  box-shadow: 0 0 0 3px rgba(219,168,130,.07) !important;
  outline: none !important;
}
#requests-section .dedication-box::placeholder { color: rgba(255,255,255,.16) !important; }

/* ── Buttons ── */
#requests-section .btn-primary {
  background: linear-gradient(180deg, #D94450, #C4313A) !important;
  box-shadow: 0 2px 0 #8C1E26, 0 6px 24px rgba(196,49,58,.4) !important;
  border: none !important;
  transition: transform 150ms ease, box-shadow 150ms ease !important;
}
#requests-section .btn-primary:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 3px 0 #8C1E26, 0 10px 32px rgba(196,49,58,.55) !important;
}
#requests-section .btn-primary:active {
  transform: translateY(1px) !important;
  box-shadow: 0 1px 0 #8C1E26, 0 3px 12px rgba(196,49,58,.3) !important;
}
#requests-section .btn-secondary {
  background: transparent !important;
  color: rgba(253,244,236,.35) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  transition: all 180ms ease !important;
}
#requests-section .btn-secondary:hover {
  background: rgba(255,255,255,.05) !important;
  border-color: rgba(255,255,255,.2) !important;
  color: rgba(253,244,236,.7) !important;
}

/* ── Random button: amber glow ── */
#requests-section .btn-random {
  color: rgba(219,168,130,.7) !important;
  background: rgba(219,168,130,.05) !important;
  border: 1px solid rgba(219,168,130,.18) !important;
  border-bottom-color: rgba(0,0,0,.3) !important;
  box-shadow: 0 2px 0 rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04) !important;
  font-size: .72rem !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  transition: all 180ms ease !important;
}
#requests-section .btn-random:hover {
  color: #F0C490 !important;
  background: rgba(219,168,130,.1) !important;
  border-color: rgba(219,168,130,.35) !important;
  border-bottom-color: rgba(0,0,0,.3) !important;
  box-shadow: 0 4px 0 rgba(0,0,0,.35), 0 6px 20px rgba(219,168,130,.12), inset 0 1px 0 rgba(255,255,255,.06) !important;
  transform: translateY(-1px) !important;
}

/* ── Search results: tuner list ── */
#requests-section .search-results { gap: .25rem !important; }
#requests-section .search-result-item {
  background: #1E1010 !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  border-radius: 10px !important;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease !important;
}
#requests-section .search-result-item:hover {
  background: #261414 !important;
  border-color: rgba(219,168,130,.3) !important;
  transform: translateX(4px) !important;
  box-shadow: -3px 0 0 rgba(196,49,58,.7), 0 6px 24px rgba(0,0,0,.4) !important;
}
#requests-section .search-result-name {
  color: #FDF4EC !important;
  font-size: .9rem !important;
  font-weight: 600 !important;
}
#requests-section .search-result-meta {
  color: rgba(219,168,130,.45) !important;
  font-size: .75rem !important;
}
#requests-section #artist-results-count {
  color: rgba(253,244,236,.22) !important;
  font-size: .72rem !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
}
#requests-section #song-results-artist { color: #DBA882 !important; font-weight: 700 !important; }

/* ── Selected song: chosen track card ── */
#requests-section #req-selected-song {
  background: linear-gradient(135deg, rgba(196,49,58,.12), rgba(196,49,58,.06)) !important;
  border: 1px solid rgba(196,49,58,.25) !important;
  border-radius: 12px !important;
  box-shadow: 0 0 0 1px rgba(196,49,58,.1) inset !important;
}
#requests-section #req-selected-title {
  color: #FDF4EC !important;
  font-size: .95rem !important;
  font-weight: 700 !important;
}
#requests-section #req-selected-artist {
  color: rgba(219,168,130,.75) !important;
  font-size: .82rem !important;
}

/* ── Status messages ── */
#requests-section .req-status.success {
  background: rgba(16,185,129,.07) !important;
  color: #6ee7b7 !important;
  border-color: rgba(16,185,129,.2) !important;
}
#requests-section .req-status.error {
  background: rgba(196,49,58,.1) !important;
  color: #fca5a5 !important;
  border-color: rgba(196,49,58,.25) !important;
}
#requests-section .req-status.info {
  background: rgba(219,168,130,.06) !important;
  color: #DBA882 !important;
  border-color: rgba(219,168,130,.15) !important;
  border-left: 3px solid rgba(219,168,130,.5) !important;
  padding-left: 1rem !important;
}

/* ── Gate card (guest / no registrado) ── */
.req-gate {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; padding: 2.5rem 1.5rem 2rem;
  gap: 0;
}

/* Vinyl icon */
.req-gate-vinyl {
  width: 80px; height: 80px; margin-bottom: 1.5rem;
  animation: req-vinyl-spin 18s linear infinite;
  opacity: .85;
  filter: drop-shadow(0 0 18px rgba(196,49,58,.35));
}
@keyframes req-vinyl-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Headlines */
.req-gate-title {
  font-family: var(--font-h); font-size: 1.5rem; font-weight: 700;
  color: #FDF4EC; line-height: 1.2; margin: 0 0 .65rem;
  letter-spacing: -.01em;
}
.req-gate-sub {
  font-size: .88rem; color: rgba(219,168,130,.7); line-height: 1.6;
  margin: 0 0 1.6rem; max-width: 340px;
}

/* Feature list */
.req-gate-features {
  list-style: none; padding: 0; margin: 0 0 2rem;
  display: flex; flex-direction: column; gap: .6rem;
  width: 100%; max-width: 320px; text-align: left;
}
.req-gate-features li {
  display: flex; align-items: center; gap: .65rem;
  font-size: .83rem; color: rgba(253,244,236,.7); line-height: 1.4;
}
.req-gate-feat-icon {
  flex-shrink: 0; width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-sm);
  background: rgba(219,168,130,.1); border: 1px solid rgba(219,168,130,.15);
  color: #DBA882;
}

/* CTA button */
.req-gate-cta {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .75rem 2.25rem; border-radius: var(--r-pill);
  background: linear-gradient(135deg, #C4313A, #9B1E26);
  color: #fff; font-size: .9rem; font-weight: 700;
  letter-spacing: .04em; border: none; cursor: pointer;
  box-shadow: 0 4px 20px rgba(196,49,58,.4);
  transition: opacity .15s, transform .15s, box-shadow .15s;
  width: 100%; max-width: 260px;
}
.req-gate-cta:hover {
  opacity: .9; transform: translateY(-1px);
  box-shadow: 0 6px 28px rgba(196,49,58,.5);
}
.req-gate-cta:active { transform: none; }

/* Login link */
.req-gate-login {
  margin: .9rem 0 0; font-size: .78rem; color: rgba(219,168,130,.45);
}
.req-gate-login button {
  background: none; border: none; padding: 0; cursor: pointer;
  color: rgba(219,168,130,.75); font-size: .78rem; font-weight: 600;
  text-decoration: underline; text-underline-offset: 2px;
  font-family: inherit;
}
.req-gate-login button:hover { color: #DBA882; }

@media (max-width: 500px) {
  .req-gate { padding: 2rem 1rem 1.5rem; }
  .req-gate-title { font-size: 1.25rem; }
  .req-gate-cta { max-width: 100%; }
}

/* ── Schedule off message ── */
#requests-section .req-status.info#req-schedule-msg {
  background: rgba(219,168,130,.06) !important;
  color: rgba(219,168,130,.7) !important;
}

/* ── Blocked-by-schedule card (registered users) ── */
.req-sched-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2.5rem 1.5rem;
  gap: .75rem;
  color: var(--brown-600);
}
.req-sched-block svg { opacity: .35; }
.req-sched-block-title {
  font-weight: 600;
  font-size: 1rem;
  color: var(--brown-800);
  margin: 0;
}
.req-sched-block-sub {
  font-size: .85rem;
  color: var(--gray-500);
  margin: 0;
}

/* ── Pending request: song card + dedication editor ── */
.req-pending-block {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
}
.req-pending-header {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--brown-500);
  opacity: .75;
}
.req-pending-header svg { opacity: .6; flex-shrink: 0; }

.req-pending-song {
  display: flex;
  align-items: center;
  gap: .85rem;
  background: rgba(219,168,130,.09);
  border: 1px solid rgba(219,168,130,.18);
  border-radius: var(--r-md);
  padding: .85rem 1rem;
}
.req-pending-song-icon { font-size: 1.5rem; line-height: 1; flex-shrink: 0; }
.req-pending-song-info { flex: 1; min-width: 0; }
.req-pending-song-title {
  font-weight: 700;
  font-size: .95rem;
  color: rgba(219,168,130,.95);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.req-pending-song-artist {
  font-size: .78rem;
  color: rgba(219,168,130,.6);
  margin-top: .15rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.req-pending-ded { display: flex; flex-direction: column; gap: .6rem; }
.req-ded-label {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(219,168,130,.65);
}
.req-ded-optional { font-weight: 400; text-transform: none; opacity: .7; }

.req-ded-field-wrap {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: .5rem;
}
.req-ded-textarea {
  flex: 1;
  min-height: 72px;
  max-height: 140px;
  resize: vertical;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(219,168,130,.22);
  border-radius: var(--r-sm);
  color: rgba(219,168,130,.9);
  font-size: .875rem;
  font-family: var(--font-b);
  padding: .6rem .75rem;
  line-height: 1.5;
  transition: border-color var(--t-b), background var(--t-b);
}
.req-ded-textarea::placeholder { color: rgba(219,168,130,.35); }
.req-ded-textarea:focus {
  outline: none;
  border-color: rgba(219,168,130,.45);
  background: rgba(0,0,0,.3);
}

.req-emoji-toggle {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  background: rgba(219,168,130,.08);
  border: 1px solid rgba(219,168,130,.18);
  border-radius: var(--r-sm);
  font-size: 1.1rem;
  cursor: pointer;
  transition: background var(--t-f);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.req-emoji-toggle:hover { background: rgba(219,168,130,.18); }

.req-emoji-grid {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
  padding: .5rem;
  background: rgba(0,0,0,.3);
  border: 1px solid rgba(219,168,130,.18);
  border-radius: var(--r-sm);
  max-height: 160px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(219,168,130,.25) transparent;
}
.req-emoji-btn {
  width: 34px;
  height: 34px;
  font-size: 1.1rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--t-f), border-color var(--t-f);
}
.req-emoji-btn:hover {
  background: rgba(219,168,130,.15);
  border-color: rgba(219,168,130,.25);
}

.req-pending-actions { display: flex; justify-content: flex-end; }
.req-update-btn {
  padding: .55rem 1.25rem;
  border-radius: var(--r-pill);
  background: linear-gradient(135deg, var(--brown-600), var(--brown-700));
  color: #fff;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .04em;
  border: none;
  cursor: pointer;
  transition: opacity var(--t-f), transform var(--t-f);
}
.req-update-btn:hover:not(:disabled) { opacity: .88; transform: translateY(-1px); }
.req-update-btn:disabled { opacity: .45; cursor: not-allowed; }

.req-pending-status {
  font-size: .8rem;
  min-height: 1.2em;
  text-align: right;
}
.req-pending-ok  { color: #6ee7b7; }
.req-pending-err { color: #fca5a5; }
.req-pending-saving { color: rgba(219,168,130,.65); }

/* ══════════════════════════════════════════════════════════════════════════════
   Chat · On-Air Room — Redesign v4
   Mood: luz natural, minimalista moderno — tonos cálidos, aireado, premium
   Inspiración: iMessage clarity + Linear minimalism + warm editorial
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── CSS custom props: chat palette ── */
:root {
  --chat-bg:        #FEFCFA;
  --chat-surface:   #FFFFFF;
  --chat-border:    rgba(0,0,0,.07);
  --chat-accent:    #C4313A;
  --chat-warm:      #D4814A;
  --chat-text:      #1C120A;
  --chat-text-dim:  #9A8070;
  --chat-r:         18px;
}

/* ── Section wrapper ── */
#chat-section {
  background: #F2EBE2;
  border-top: none;
  position: relative;
}
#chat-section .section-title { color: #1C120A; }
#chat-section .section-subtitle { color: #9A8070; }
#chat-section .section-head {
  border-bottom: 1px solid rgba(0,0,0,.08);
  padding-bottom: 1.5rem;
  margin-bottom: 1.75rem;
}
#chat-section .section-action {
  color: #9A8070 !important;
  border-color: rgba(0,0,0,.12) !important;
  font-size: .7rem !important;
}
#chat-section .section-action:hover {
  color: var(--chat-accent) !important;
  background: rgba(196,49,58,.05) !important;
  border-color: rgba(196,49,58,.2) !important;
}

/* ══════════════════════════════════════════════════
   CHAT WRAP — the main container
   ══════════════════════════════════════════════════ */
.chat-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 580px;
  background: var(--chat-surface);
  border: 1px solid rgba(0,0,0,.09);
  border-radius: var(--chat-r);
  overflow: hidden;
  box-shadow:
    0 2px 8px rgba(0,0,0,.05),
    0 12px 40px rgba(0,0,0,.08);
}

/* ══════════════════════════════════════════════════
   MESSAGES AREA
   ══════════════════════════════════════════════════ */
.chat-messages {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 1.25rem .75rem .75rem;
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--chat-bg);
  scroll-behavior: smooth;
}

.chat-messages::-webkit-scrollbar { width: 4px; }
.chat-messages::-webkit-scrollbar-track { background: transparent; }
.chat-messages::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,.12);
  border-radius: 9999px;
}
.chat-messages::-webkit-scrollbar-thumb:hover {
  background: rgba(0,0,0,.22);
}

/* ══════════════════════════════════════════════════
   MESSAGE ROW — clean, airy, Slack-like
   ══════════════════════════════════════════════════ */
.chat-msg {
  position: relative;
  display: flex;
  gap: 0;
  align-items: flex-start;
  padding: .28rem .75rem .28rem .75rem;
  border-radius: 8px;
  transition: background 120ms ease;
  margin: 0;
}
.chat-msg:hover { background: rgba(0,0,0,.027); }
.chat-msg:hover .chat-delete-btn { opacity: 1; pointer-events: auto; }

.chat-msg:not(.chat-msg-grouped) {
  margin-top: .75rem;
  padding-top: .3rem;
}
.chat-msg:first-child { margin-top: 0; }

.chat-msg-grouped {
  padding-top: .05rem;
  padding-bottom: .05rem;
  margin-top: 0;
}

/* ── Avatar ── */
.chat-avatar {
  width: 32px; height: 32px; min-width: 32px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-d); font-size: .72rem; font-weight: 800;
  color: #fff; letter-spacing: .01em;
  margin-top: 1px;
  margin-right: .7rem;
  flex-shrink: 0; overflow: hidden;
  transition: transform 140ms ease;
  box-shadow: 0 1px 4px rgba(0,0,0,.15);
}
.chat-avatar-photo { padding: 0; }
.chat-msg:hover .chat-avatar { transform: scale(1.04); }

.chat-msg-spacer {
  width: 32px; min-width: 32px; flex-shrink: 0;
  margin-right: .7rem;
}

.chat-msg-body { flex: 1; min-width: 0; }

/* ── Meta line: alias + time on same row ── */
.chat-msg-meta {
  display: flex;
  align-items: baseline;
  gap: .45rem;
  margin-bottom: .14rem;
  line-height: 1;
}
.chat-msg-alias {
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .01em;
  line-height: 1.2;
}
.chat-msg-time {
  font-size: .62rem;
  color: rgba(0,0,0,.35);
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}
.chat-msg-time--grouped {
  align-self: center;
  margin-left: .4rem;
  flex-shrink: 0;
}

/* ── Bubble / text ── */
.chat-bubble { display: block; max-width: 100%; }
.chat-bubble-text {
  display: inline;
  font-size: .875rem;
  line-height: 1.55;
  color: #2A1E14;
  word-break: break-word;
  letter-spacing: .005em;
}
.chat-msg-grouped .chat-bubble-text { color: #5A4838; }

/* ── Chat photo (message-attached image) ── */
.chat-msg-photo {
  display: inline-block;
  margin-top: .5rem;
  max-width: 240px;
  border-radius: 12px;
  overflow: visible;
  cursor: zoom-in;
  position: relative;
  vertical-align: top;
}
.chat-msg-photo img {
  display: block; width: 100%; height: auto;
  max-height: 220px; object-fit: cover;
  border-radius: 12px;
  transition: opacity 150ms ease, transform 200ms ease;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 2px 10px rgba(0,0,0,.1);
}
.chat-msg-photo:hover img { opacity: .92; transform: scale(1.01); }

.chat-photo-remove {
  position: absolute; top: 6px; right: 6px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(0,0,0,.55);
  border: none; color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; opacity: 0;
  transition: opacity 150ms ease, background 140ms ease;
}
.chat-msg-photo:hover .chat-photo-remove { opacity: 1; }
.chat-photo-remove:hover { background: rgba(196,49,58,.9); }
.chat-photo-remove svg { width: 10px; height: 10px; }

/* ── Photo actions bar (like button) ── */
.chat-photo-actions {
  display: flex;
  align-items: center;
  gap: .3rem;
  margin-top: .3rem;
}

.chat-photo-like-btn {
  display: inline-flex;
  align-items: center;
  gap: .28rem;
  padding: .22rem .55rem .22rem .4rem;
  border-radius: var(--r-pill);
  border: 1px solid rgba(0,0,0,.1);
  background: rgba(255,255,255,.7);
  color: var(--gray-400);
  font-size: .72rem;
  font-weight: 600;
  font-family: var(--font-b);
  cursor: pointer;
  transition: all 180ms ease;
  backdrop-filter: blur(4px);
}
.chat-photo-like-btn svg {
  width: 13px; height: 13px;
  flex-shrink: 0;
  transition: transform 200ms cubic-bezier(.34,1.56,.64,1), color 180ms ease;
}
.chat-photo-like-btn:hover {
  border-color: rgba(196,49,58,.35);
  color: var(--red-600);
  background: rgba(255,255,255,.9);
}
.chat-photo-like-btn.liked {
  color: var(--red-500);
  border-color: rgba(196,49,58,.3);
  background: rgba(220,69,80,.08);
}
.chat-photo-like-btn.liked svg {
  color: var(--red-500);
}
.chat-photo-like-count {
  min-width: 8px;
  transition: opacity 150ms ease;
}

/* Pop animation on click */
@keyframes chatLikePop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.35); }
  70%  { transform: scale(.9); }
  100% { transform: scale(1); }
}
.chat-like-pop svg { animation: chatLikePop .38s cubic-bezier(.34,1.56,.64,1) both; }

/* Like badge for guests */
.chat-photo-like-badge {
  font-size: .72rem;
  color: var(--gray-400);
  font-family: var(--font-b);
  font-weight: 600;
}

/* ── Delete button (admin/mod only, shown on hover) ── */
.chat-delete-btn {
  position: absolute;
  top: 50%; right: .55rem;
  transform: translateY(-50%);
  width: 22px; height: 22px;
  border-radius: 6px;
  border: 1px solid rgba(0,0,0,.1);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(6px);
  color: rgba(196,49,58,.55);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; opacity: 0; pointer-events: none;
  transition: opacity 120ms ease, background 120ms ease, color 120ms ease;
  z-index: 5;
}
.chat-delete-btn svg { width: 10px; height: 10px; }
.chat-delete-btn:hover { background: #C4313A; color: #fff; border-color: #C4313A; }

@keyframes chatMsgOut {
  from { opacity: 1; max-height: 80px; }
  to   { opacity: 0; max-height: 0; padding: 0; margin: 0; }
}
.chat-msg-deleting {
  animation: chatMsgOut .25s ease forwards;
  overflow: hidden; pointer-events: none;
}

@keyframes chatFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.chat-msg-new { animation: chatFadeIn .18s cubic-bezier(.22,.68,0,1.15) both; }

/* ── "N nuevos mensajes" pill ── */
.chat-new-btn {
  position: absolute; bottom: 80px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: .35rem;
  padding: .3rem .9rem;
  background: #C4313A;
  color: #fff; border: none; border-radius: var(--r-pill);
  font-size: .68rem; font-weight: 800; font-family: var(--font-b);
  letter-spacing: .07em; text-transform: uppercase;
  cursor: pointer; white-space: nowrap; z-index: 10;
  box-shadow: 0 3px 14px rgba(196,49,58,.35);
  transition: transform 150ms ease, box-shadow 150ms ease;
}
.chat-new-btn:hover {
  transform: translateX(-50%) translateY(-2px);
  box-shadow: 0 6px 20px rgba(196,49,58,.5);
}

/* ══════════════════════════════════════════════════
   INPUT BAR — clean, light
   ══════════════════════════════════════════════════ */
.chat-input-bar {
  position: relative;
  border-top: 1px solid rgba(0,0,0,.07);
  padding: .7rem .9rem .8rem;
  background: #FFFFFF;
  flex-shrink: 0;
}

/* User badge row */
.chat-user-row {
  display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem;
}
.chat-avatar-sm {
  width: 18px; height: 18px; min-width: 18px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-d); font-size: .52rem; font-weight: 800; color: #fff;
  flex-shrink: 0; overflow: hidden;
}
.chat-badge-name {
  font-size: .65rem; font-weight: 700;
  color: rgba(0,0,0,.28); letter-spacing: .07em; text-transform: uppercase;
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Live indicator dot */
.chat-live-dot {
  width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0;
  background: #3DCC7E;
  animation: livePulse 2.2s ease-in-out infinite;
}
@keyframes livePulse {
  0%,100% { opacity: 1; }
  50%      { opacity: .5; }
}

/* Photo preview strip */
.chat-photo-preview {
  display: none;
  align-items: center;
  gap: .5rem;
  margin-bottom: .45rem;
  padding: .4rem .65rem;
  background: #F5EFE8;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,.07);
}
.chat-photo-preview.visible { display: flex; }
.chat-photo-preview img {
  width: 40px; height: 40px; object-fit: cover;
  border-radius: 6px; flex-shrink: 0;
}
.chat-photo-preview-name {
  font-size: .74rem; color: #5A4A3A;
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chat-photo-preview-remove {
  width: 20px; height: 20px; border: none; background: none;
  color: #9A8070; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  transition: background 120ms ease, color 120ms ease;
}
.chat-photo-preview-remove:hover { background: rgba(196,49,58,.1); color: #C4313A; }
.chat-photo-preview-remove svg { width: 12px; height: 12px; }

/* Input row: photo + emoji + field + char + send */
.chat-input-row { display: flex; align-items: center; gap: .45rem; }

/* ── Photo button ── */
.chat-photo-btn {
  width: 36px; height: 36px; min-width: 36px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.1);
  background: #F5EFE8;
  color: #9A8070;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.chat-photo-btn svg { width: 16px; height: 16px; }
.chat-photo-btn:hover { background: #EDE5DB; color: var(--chat-warm); border-color: rgba(212,129,74,.3); }
.chat-photo-btn.has-photo { background: rgba(212,129,74,.12); color: var(--chat-warm); border-color: rgba(212,129,74,.45); }

/* ── Emoji trigger button ── */
.chat-emoji-btn {
  width: 36px; height: 36px; min-width: 36px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.1);
  background: #F5EFE8;
  color: #9A8070;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease, transform 120ms ease;
}
.chat-emoji-btn svg { width: 17px; height: 17px; }
.chat-emoji-btn:hover { background: #EDE5DB; color: var(--chat-warm); border-color: rgba(212,129,74,.3); }
.chat-emoji-btn:active { transform: scale(.92); }
.chat-emoji-btn.active { background: rgba(212,129,74,.12); color: var(--chat-warm); border-color: rgba(212,129,74,.45); }

/* ── Text input ── */
.chat-msg-input {
  flex: 1;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 11px;
  padding: .56rem .95rem;
  font-size: .875rem; font-family: var(--font-b);
  background: #FAFAF8;
  color: #1C120A;
  outline: none;
  min-width: 0;
  transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}
.chat-msg-input::placeholder { color: rgba(0,0,0,.28); }
.chat-msg-input:focus {
  border-color: rgba(196,49,58,.4);
  background: #FFFFFF;
  box-shadow:
    inset 0 2px 8px rgba(0,0,0,.45),
    0 0 0 2.5px rgba(219,168,130,.07),
    0 0 20px rgba(219,168,130,.04);
}

/* Char counter */
.chat-char {
  font-size: .6rem; color: rgba(0,0,0,.2);
  min-width: 22px; text-align: right;
  font-variant-numeric: tabular-nums; flex-shrink: 0;
  transition: color 160ms ease;
}

/* ── Cooldown bar ── */
.chat-cooldown-wrap {
  height: 2px; border-radius: 9999px;
  margin-top: .45rem; overflow: hidden;
  background: rgba(0,0,0,.06);
}
.chat-cooldown-bar {
  height: 100%; border-radius: 9999px;
  background: linear-gradient(90deg, var(--chat-warm), var(--chat-accent));
  width: 100%; transition: width .1s linear;
}

/* ══════════════════════════════════════════════════
   SEND BUTTON
   ══════════════════════════════════════════════════ */
.chat-send-btn {
  width: 38px; height: 38px; min-width: 38px;
  border-radius: 11px;
  background: var(--chat-accent);
  border: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: #fff; flex-shrink: 0;
  box-shadow: 0 2px 10px rgba(196,49,58,.28);
  transition: transform 130ms ease, box-shadow 130ms ease, background 130ms ease;
}
.chat-send-btn svg { width: 15px; height: 15px; }
.chat-send-btn:hover:not(:disabled) {
  background: #A82730;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(196,49,58,.42);
}
.chat-send-btn:active:not(:disabled) {
  transform: translateY(1px);
  box-shadow: 0 1px 5px rgba(196,49,58,.2);
}
.chat-send-btn:disabled {
  opacity: .25; cursor: not-allowed;
  box-shadow: none;
}

/* ══════════════════════════════════════════════════
   EMOJI PICKER — floating panel (light)
   ══════════════════════════════════════════════════ */
.chat-emoji-picker {
  position: absolute;
  bottom: 100%;
  left: .9rem;
  width: 308px;
  max-width: calc(100vw - 1.8rem);
  background: #FFFFFF;
  border: 1px solid rgba(0,0,0,.1);
  border-radius: 16px;
  box-shadow: 0 -4px 16px rgba(0,0,0,.05), 0 20px 50px rgba(0,0,0,.12);
  z-index: 100; overflow: hidden;
  opacity: 0;
  transform: translateY(8px) scale(.97);
  transform-origin: bottom left;
  pointer-events: none;
  transition: opacity 160ms cubic-bezier(.22,.68,0,1.2), transform 160ms cubic-bezier(.22,.68,0,1.2);
}
.chat-emoji-picker.open {
  opacity: 1;
  transform: translateY(-6px) scale(1);
  pointer-events: auto;
}

.cep-header {
  padding: .55rem .6rem .35rem;
  border-bottom: 1px solid rgba(0,0,0,.07);
  background: #F8F4F0;
}
.cep-cats { display: flex; gap: .25rem; }
.cep-cat {
  width: 32px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; border-radius: 8px;
  border: 1px solid transparent; background: transparent;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, transform 100ms ease;
  line-height: 1; padding: 0;
}
.cep-cat:hover { background: rgba(0,0,0,.06); transform: scale(1.12); }
.cep-cat.active { background: rgba(196,49,58,.1); border-color: rgba(196,49,58,.25); }

.cep-body { height: 200px; overflow-y: auto; padding: .4rem .5rem; }
.cep-body::-webkit-scrollbar { width: 3px; }
.cep-body::-webkit-scrollbar-track { background: transparent; }
.cep-body::-webkit-scrollbar-thumb { background: rgba(0,0,0,.12); border-radius: 9999px; }

.cep-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(32px, 1fr)); gap: .1rem; }
.cep-emoji {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem; border-radius: 7px;
  border: none; background: transparent; cursor: pointer;
  transition: background 100ms ease, transform 100ms ease;
  line-height: 1; padding: 0;
}
.cep-emoji:hover { background: rgba(0,0,0,.06); transform: scale(1.22); }
.cep-emoji:active { transform: scale(1.05); }

/* ══════════════════════════════════════════════════
   GUEST BAR — light, warm
   ══════════════════════════════════════════════════ */
.chat-guest-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; flex-wrap: wrap;
  padding: .85rem 1.1rem;
  background: #F8F2EB;
  border-top: 1px solid rgba(0,0,0,.07);
  border-radius: 0 0 var(--chat-r) var(--chat-r);
}
.chat-guest-left { display: flex; align-items: center; gap: .8rem; }
.chat-guest-dots { display: flex; gap: 4px; align-items: center; flex-shrink: 0; }
.chat-guest-dots span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--chat-warm);
  animation: chat-dot-pulse 1.6s ease-in-out infinite;
}
.chat-guest-dots span:nth-child(2) { animation-delay: .25s; background: var(--chat-accent); }
.chat-guest-dots span:nth-child(3) { animation-delay: .5s; }
@keyframes chat-dot-pulse {
  0%,80%,100% { transform: scale(.65); opacity: .4; }
  40%         { transform: scale(1);   opacity: 1; }
}
.chat-guest-text { display: flex; flex-direction: column; gap: .08rem; }
.chat-guest-text strong { font-family: var(--font-b); font-size: .8rem; font-weight: 700; color: #1C120A; }
.chat-guest-text span { font-size: .72rem; color: #9A8070; }
.chat-guest-actions { display: flex; align-items: center; gap: .5rem; }
.chat-guest-cta   { padding: .44rem 1rem; font-size: .74rem; }
.chat-guest-ghost { font-size: .74rem; color: #9A8070; }
@media (max-width: 500px) {
  .chat-guest-bar { flex-direction: column; align-items: flex-start; }
}

/* ── Chat bar (full-width top notification, below nav) ───────────────────── */
#chat-bar {
  position: fixed;
  top: 60px; left: 0; right: 0;
  z-index: 890;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .85rem 1.5rem .85rem 0;
  background: #1A0A04;
  border-bottom: 1px solid rgba(219,168,130,.15);
  box-shadow: 0 6px 40px rgba(0,0,0,.55);
  transform: translateY(-100%);
  will-change: transform;
  overflow: hidden;
}
#chat-bar.chat-bar--in  { animation: chatBarIn  .45s cubic-bezier(.22,1,.36,1) forwards; }
#chat-bar.chat-bar--out { animation: chatBarOut .35s ease forwards; }
@keyframes chatBarIn  { from { transform: translateY(-100%); } to { transform: translateY(0); } }
@keyframes chatBarOut { from { transform: translateY(0); }    to { transform: translateY(-100%); } }

.chat-bar-accent {
  width: 4px; align-self: stretch; flex-shrink: 0;
  background: linear-gradient(180deg, #C4313A, #9B1E26);
}
.chat-bar-avatar {
  width: 40px; height: 40px; min-width: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; flex-shrink: 0;
  border: 2px solid rgba(255,255,255,.1);
}
.chat-bar-avatar-img { width: 100%; height: 100%; object-fit: cover; }
.chat-bar-avatar-letter {
  font-size: .8rem; font-weight: 800; color: #fff; text-transform: uppercase;
}
.chat-bar-body { flex: 1; min-width: 0; }
.chat-bar-top  {
  display: flex; align-items: center; gap: .5rem;
  flex-wrap: wrap; margin-bottom: .18rem;
}
.chat-bar-alias {
  font-size: .82rem; font-weight: 700; line-height: 1;
}
.chat-bar-count {
  font-size: .7rem; font-weight: 600;
  color: rgba(219,168,130,.55); line-height: 1;
}
.chat-bar-ded {
  font-size: .65rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  background: rgba(170,107,68,.2); border: 1px solid rgba(170,107,68,.3);
  color: #C68A62; border-radius: 20px; padding: .1rem .45rem;
}
.chat-bar-preview {
  font-size: .83rem; color: rgba(219,168,130,.7);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-bar-cta {
  flex-shrink: 0;
  background: #9B1E26;
  color: #fff;
  border: none; border-radius: var(--r-md);
  padding: .5rem 1.1rem;
  font-size: .8rem; font-weight: 700;
  cursor: pointer; white-space: nowrap;
  transition: background .2s;
}
.chat-bar-cta:hover { background: #C4313A; }
.chat-bar-close {
  flex-shrink: 0;
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1);
  color: rgba(219,168,130,.5);
  font-size: .7rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; margin-right: .25rem;
  transition: background .2s, color .2s;
}
.chat-bar-close:hover { background: rgba(255,255,255,.14); color: #fff; }

/* ── Admin message modal ("Mensaje desde la cabina") ────────────────────── */
#admin-msg-modal {
  position: fixed; inset: 0; z-index: 9992;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(circle at top, rgba(196,49,58,.08), transparent 36%),
    rgba(22, 12, 8, .38);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  padding: 1rem;
  animation: fadeIn .35s ease;
}
.admin-msg-card {
  background:
    radial-gradient(circle at 50% -12%, rgba(196,49,58,.16), transparent 32%),
    linear-gradient(160deg, rgba(255,252,247,.98) 0%, rgba(248,239,228,.98) 100%);
  border: 1px solid rgba(160, 122, 96, .28);
  border-radius: 26px;
  padding: 2rem 2rem 1.45rem;
  max-width: 560px; width: 100%;
  text-align: left;
  display: flex; flex-direction: column; align-items: stretch; gap: 1rem;
  box-shadow:
    0 32px 80px rgba(44, 26, 16, .20),
    0 8px 24px rgba(44, 26, 16, .10);
  animation: admMsgIn .45s cubic-bezier(.22,1,.36,1) both;
  position: relative;
  overflow: hidden;
}
.admin-msg-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, #c4313a, #d08952, #c4313a);
  opacity: .9;
}
.admin-msg-card::after {
  content: '';
  position: absolute;
  top: -72px;
  left: 50%;
  transform: translateX(-50%);
  width: 220px;
  height: 140px;
  background: radial-gradient(circle, rgba(196,49,58,.14), transparent 72%);
  pointer-events: none;
}
@keyframes admMsgIn {
  from { transform: scale(.88) translateY(18px); opacity: 0; }
  to   { transform: scale(1)   translateY(0);    opacity: 1; }
}
.admin-msg-header {
  display: flex; align-items: center; justify-content: center;
  padding: .1rem 0 .2rem;
}
.admin-msg-logo-stage {
  position: relative;
  width: 112px;
  height: 112px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.admin-msg-logo-halo {
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(196,49,58,.16) 0%, rgba(196,49,58,.06) 42%, transparent 72%);
  filter: blur(2px);
}
.admin-msg-logo-ring {
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, transparent 56%, rgba(255,255,255,.72) 57%, rgba(255,255,255,.72) 61%, transparent 62%),
    conic-gradient(from 180deg, rgba(196,49,58,.22), rgba(208,137,82,.06), rgba(196,49,58,.22));
  opacity: .95;
}
.admin-msg-logo {
  position: relative;
  z-index: 2;
  width: 74px; height: 74px; object-fit: contain; border-radius: 24px;
  background: linear-gradient(145deg, #2c1a10 0%, #4b2819 100%);
  padding: 10px; flex-shrink: 0;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.06),
    0 18px 34px rgba(44,26,16,.24),
    0 0 0 10px rgba(255,255,255,.58);
}
.admin-msg-text {
  font-size: 1.1rem; line-height: 1.74;
  color: #3b2418;
  font-family: var(--font-serif);
  font-style: italic;
  max-width: 31ch;
  margin: -.15rem auto 0;
  text-align: center;
}
.admin-msg-sig {
  font-size: .74rem; color: #9a6644; letter-spacing: .05em;
  text-align: center;
  margin-top: -.2rem;
}
.admin-msg-prompt {
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #b27a55;
  text-align: center;
  margin-top: .3rem;
  opacity: .82;
}
.admin-msg-note {
  font-size: .84rem;
  line-height: 1.55;
  color: #8a6246;
  text-align: center;
  max-width: 34ch;
  margin: -.2rem auto .15rem;
}
.admin-msg-fav-card {
  display: flex;
  align-items: center;
  gap: .7rem;
  width: 100%;
  border: 1px solid rgba(196,49,58,.18);
  border-radius: 18px;
  padding: .72rem .8rem;
  background: linear-gradient(165deg, rgba(196,49,58,.08), rgba(255,255,255,.95) 50%, rgba(253,248,241,.95));
  color: #633726;
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.admin-msg-fav-card:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: rgba(196,49,58,.3);
  box-shadow: 0 14px 28px rgba(196,49,58,.12);
}
.admin-msg-fav-card:disabled {
  cursor: default;
}
.admin-msg-fav-card.is-saved,
.admin-msg-fav-card.is-done {
  background: linear-gradient(165deg, rgba(212,129,74,.10), rgba(255,255,255,.96) 50%, rgba(253,248,241,.95));
  border-color: rgba(212,129,74,.22);
}
.admin-msg-fav-heart {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #c4313a, #d4814a);
  color: #fff;
  font-size: 1rem;
  flex-shrink: 0;
  box-shadow: 0 10px 20px rgba(196,49,58,.18);
}
.admin-msg-fav-copy {
  font-size: .76rem;
  line-height: 1.35;
  text-align: left;
  overflow-wrap: anywhere;
}
.admin-msg-fav-card--solo {
  margin-top: .2rem;
}
.admin-msg-replies {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
  margin-top: .2rem;
}
.admin-msg-btn {
  background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(253,248,241,.92));
  color: #4b2819;
  border: 1px solid rgba(160,122,96,.28);
  border-radius: 22px;
  padding: 1rem 1rem 1rem 4.15rem;
  font-size: .9rem; font-weight: 700;
  cursor: pointer; margin-top: 0;
  transition: background .18s, color .18s, border-color .18s, transform .18s, box-shadow .18s;
  position: relative;
  overflow: hidden;
}
.admin-msg-btn:hover {
  background: #fff;
  color: #2c1a10;
  border-color: rgba(196,49,58,.40);
  transform: translateY(-2px) scale(1.01);
  box-shadow:
    0 14px 28px rgba(44,26,16,.10),
    0 0 0 1px rgba(196,49,58,.05);
}
.admin-msg-reply-btn {
  width: 100%;
  min-height: 120px;
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: .32rem;
}
.admin-msg-reply-btn--featured {
  grid-column: 1 / -1;
  min-height: 112px;
  background:
    linear-gradient(160deg, rgba(196,49,58,.08), rgba(255,255,255,.96) 34%, rgba(253,248,241,.94) 100%);
  border-color: rgba(196,49,58,.28);
}
.admin-msg-reply-btn--featured .admin-msg-reply-title {
  font-size: 1.02rem;
}
.admin-msg-reply-btn::before {
  content: '♪';
  position: absolute;
  left: 1rem;
  top: 1rem;
  width: 38px;
  height: 38px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(145deg, #c4313a, #aa6b44);
  box-shadow: 0 10px 22px rgba(196,49,58,.20);
}
.admin-msg-reply-btn::after {
  content: '↗';
  position: absolute;
  right: 1rem;
  top: 1rem;
  font-size: 1rem;
  color: rgba(107,76,53,.45);
  transition: transform .18s ease, color .18s ease;
}
.admin-msg-reply-btn:hover::after {
  transform: translateX(2px);
  color: #c4313a;
}
.admin-msg-reply-btn[data-kind="request"] {
  background: linear-gradient(165deg, rgba(196,49,58,.10), rgba(255,255,255,.98) 42%, rgba(253,248,241,.95));
  border-color: rgba(196,49,58,.28);
}
.admin-msg-reply-btn[data-kind="request"]::before { content: '♪'; }
.admin-msg-reply-btn[data-kind="join"] {
  background: linear-gradient(165deg, rgba(196,49,58,.10), rgba(255,255,255,.98) 42%, rgba(253,248,241,.95));
  border-color: rgba(196,49,58,.28);
}
.admin-msg-reply-btn[data-kind="join"]::before { content: '+'; }
.admin-msg-reply-btn[data-kind="login"] {
  background: linear-gradient(165deg, rgba(212,129,74,.10), rgba(255,255,255,.98) 42%, rgba(253,248,241,.94));
}
.admin-msg-reply-btn[data-kind="login"]::before {
  content: '→';
  background: linear-gradient(145deg, #d4814a, #b55d3d);
}
.admin-msg-reply-btn[data-kind="chat"] {
  background: linear-gradient(165deg, rgba(212,129,74,.10), rgba(255,255,255,.98) 42%, rgba(253,248,241,.94));
}
.admin-msg-reply-btn[data-kind="chat"]::before {
  content: '✦';
  background: linear-gradient(145deg, #d4814a, #b55d3d);
}
.admin-msg-reply-btn[data-kind="community"] {
  background: linear-gradient(165deg, rgba(154,102,68,.08), rgba(255,255,255,.98) 42%, rgba(253,248,241,.95));
}
.admin-msg-reply-btn[data-kind="community"]::before {
  content: '♥';
  background: linear-gradient(145deg, #9a6644, #7a4d33);
}
.admin-msg-reply-kicker {
  display: block;
  font-size: .62rem;
  line-height: 1.15;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #b27a55;
  padding-right: 1.35rem;
}
.admin-msg-reply-title {
  display: block;
  font-size: 1.03rem;
  line-height: 1.18;
  font-weight: 800;
  color: #3b2418;
  max-width: calc(100% - 1.6rem);
}
.admin-msg-reply-meta {
  display: block;
  font-size: .68rem;
  line-height: 1.2;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #a2724f;
}
.admin-msg-close {
  background: transparent;
  color: #9a6644;
  border: none;
  cursor: pointer;
  font-size: .78rem;
  font-weight: 700;
  margin-top: .1rem;
  letter-spacing: .02em;
  align-self: center;
}
.admin-msg-close:hover { color: #6b4c35; }
@media (max-width: 560px) {
  .admin-msg-card {
    padding: 1.35rem .9rem 1rem;
    border-radius: 20px;
  }
  .admin-msg-logo-stage {
    width: 96px;
    height: 96px;
  }
  .admin-msg-logo {
    width: 58px;
    height: 58px;
    border-radius: 18px;
  }
  .admin-msg-text {
    font-size: 1rem;
  }
  .admin-msg-note {
    font-size: .8rem;
  }
  .admin-msg-fav-copy {
    font-size: .72rem;
    line-height: 1.3;
  }
  .admin-msg-replies {
    grid-template-columns: 1fr;
  }
  .admin-msg-btn {
    padding: .95rem .95rem 1rem 3.9rem;
  }
  .admin-msg-reply-btn {
    min-height: 88px;
  }
  .admin-msg-reply-btn::before {
    left: .95rem;
    top: .95rem;
    width: 34px;
    height: 34px;
    border-radius: 12px;
  }
  .admin-msg-reply-btn::after { top: .9rem; }
}

/* ── Chat nav badge ─────────────────────────────────────────────────────── */
.chat-nav-badge {
  position: absolute;
  top: -5px; right: -8px;
  background: #9B1E26;
  color: #fff;
  font-size: .58rem; font-weight: 800;
  min-width: 16px; height: 16px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 3px;
  pointer-events: none;
  animation: chatBadgePop .25s cubic-bezier(.34,1.5,.64,1) both;
  letter-spacing: .02em;
}
@keyframes chatBadgePop {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

/* ── Kicked modal (single-session enforcement) ─────────────────────────── */
#kicked-modal {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  animation: fadeIn .3s ease;
}
.kicked-card {
  background: var(--brown-950);
  border: 1px solid var(--brown-800);
  border-radius: var(--r-lg);
  padding: 2.25rem 2.5rem;
  max-width: 380px; width: 90%;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.kicked-icon { font-size: 2.75rem; line-height: 1; }
.kicked-title {
  font-size: 1.1rem; font-weight: 700;
  color: var(--brown-100);
  font-family: var(--font-serif);
}
.kicked-text {
  font-size: .85rem; color: var(--brown-400);
  line-height: 1.55; max-width: 28ch; margin: 0 auto;
}
.kicked-btn {
  background: var(--brown-500);
  color: #fff;
  border: none; border-radius: var(--r-md);
  padding: .7rem 2rem;
  font-weight: 600; font-size: .9rem;
  cursor: pointer; margin-top: .25rem;
  transition: background .2s;
}
.kicked-btn:hover { background: var(--brown-400); }

/* ── Dedication message ── */
.chat-msg--dedication {
  background: linear-gradient(100deg, rgba(170,107,68,.08), rgba(196,49,58,.05));
  border-left: 3px solid rgba(170,107,68,.4);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  margin-left: -2px;
  padding: .55rem .9rem .55rem .85rem !important;
}
.chat-msg--dedication:hover { background: linear-gradient(100deg, rgba(170,107,68,.12), rgba(196,49,58,.07)); }

.chat-dedication-badge {
  display: inline-flex;
  align-items: center;
  padding: .1rem .5rem;
  border-radius: var(--r-pill);
  background: rgba(170,107,68,.15);
  border: 1px solid rgba(170,107,68,.25);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #C68A62;
  margin-left: .2rem;
}

.chat-bubble--dedication {
  background: transparent !important;
  padding: 0 !important;
}
.chat-ded-song {
  font-size: .82rem;
  font-weight: 600;
  color: #DBA882;
  line-height: 1.4;
  margin-bottom: .2rem;
}
.chat-ded-text {
  font-size: .875rem;
  color: #C68A62;
  font-style: italic;
  line-height: 1.45;
}

/* ── Photo lightbox ── */
.chat-lightbox {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.82);
  z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  cursor: zoom-out;
  animation: lbFadeIn .18s ease;
}
@keyframes lbFadeIn { from { opacity: 0; } to { opacity: 1; } }
.chat-lightbox img {
  max-width: 92vw; max-height: 92vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 20px 80px rgba(0,0,0,.5);
}

/* ── Chat date separators ── */
.chat-date-sep {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 1rem .5rem .5rem;
  color: var(--brown-400);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.chat-date-sep::before,
.chat-date-sep::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(0,0,0,.07);
}

/* ── Chat now-playing bar ── */
.chat-np-bar {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .45rem 1rem;
  background: linear-gradient(135deg, rgba(196,49,58,.06) 0%, rgba(212,129,74,.06) 100%);
  border-bottom: 1px solid rgba(196,49,58,.1);
  font-size: .75rem;
  color: var(--brown-700);
  overflow: hidden;
}
.chat-np-bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 14px;
  flex-shrink: 0;
}
.chat-np-bars span {
  display: block;
  width: 3px;
  background: var(--red-600);
  border-radius: 2px;
  animation: chatNpPulse 1s ease-in-out infinite alternate;
}
.chat-np-bars span:nth-child(1) { height: 6px;  animation-delay: 0s;    }
.chat-np-bars span:nth-child(2) { height: 12px; animation-delay: .2s;   }
.chat-np-bars span:nth-child(3) { height: 8px;  animation-delay: .35s;  }
@keyframes chatNpPulse {
  from { transform: scaleY(.4); opacity: .6; }
  to   { transform: scaleY(1);  opacity: 1;  }
}
.chat-np-label {
  color: var(--red-600);
  font-weight: 700;
  font-size: .68rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-right: .15rem;
}
.chat-np-song {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Section entrance animations ── */
.sl-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .65s cubic-bezier(.22,.68,0,1.2),
              transform .65s cubic-bezier(.22,.68,0,1.2);
}
.sl-reveal.sl-visible {
  opacity: 1;
  transform: translateY(0);
}
.sl-reveal-fast {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .45s ease, transform .45s ease;
}
.sl-reveal-fast.sl-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ══════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .chat-wrap { height: 520px; }
  .chat-new-btn { bottom: 84px; }
  .chat-msg { padding: .28rem .55rem; }
  .chat-emoji-picker {
    /* On mobile: anchor to bottom of wrap, span nearly full width */
    left: .5rem;
    right: .5rem;
    width: auto;
    max-width: none;
    bottom: 100%;
    transform-origin: bottom center;
  }
  .chat-emoji-picker.open {
    transform: translateY(-4px) scale(1);
  }
  .cep-body { height: 180px; }
  #requests-section .search-wrap { padding: .9rem 1rem !important; }
}
@media (max-width: 480px) {
  .chat-wrap { height: 460px; border-radius: 14px; }
  .chat-bubble-text { font-size: .845rem; }
  .chat-input-bar { padding: .6rem .75rem .7rem; }
  .chat-guest-bar { border-radius: 0 0 14px 14px; }
  .chat-avatar { width: 28px; height: 28px; min-width: 28px; }
  .chat-msg-spacer { width: 28px; min-width: 28px; }
  .chat-send-btn { width: 36px; height: 36px; min-width: 36px; }
  .chat-emoji-btn { width: 34px; height: 34px; min-width: 34px; }
  .chat-photo-btn { width: 34px; height: 34px; min-width: 34px; }
  .chat-msg-photo { max-width: 180px; }
}

/* ── Estadísticas: guest gate ─────────────────────────────────────────────── */
.stats-guest {
  position: relative; overflow: hidden;
  background: linear-gradient(145deg, #1e0c05 0%, #3a1508 55%, #1a0804 100%);
  border-radius: var(--r-xl);
  padding: 3rem 2.5rem 3rem;
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 0;
}
.stats-guest-glow {
  position: absolute; top: -60px; left: 50%; transform: translateX(-50%);
  width: 500px; height: 300px; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(196,49,58,.18) 0%, transparent 70%);
  pointer-events: none;
}

/* Animated equalizer bars top decoration */
.stats-guest-bars {
  display: flex; align-items: flex-end; gap: 5px; height: 48px;
  margin-bottom: 1.5rem;
}
.sgb {
  display: block; width: 6px; border-radius: 3px;
  background: linear-gradient(180deg, #C4313A 0%, #8b1e26 100%);
  animation: sgbAnim var(--dur, .8s) ease-in-out infinite var(--del, 0s);
  opacity: .8;
}
.sgb-1 { --dur:.9s;  --del:0s;    height: 20px; }
.sgb-2 { --dur:.7s;  --del:.12s;  height: 36px; }
.sgb-3 { --dur:1.1s; --del:.05s;  height: 28px; }
.sgb-4 { --dur:.8s;  --del:.22s;  height: 48px; }
.sgb-5 { --dur:.95s; --del:.08s;  height: 32px; }
.sgb-6 { --dur:.75s; --del:.18s;  height: 40px; }
.sgb-7 { --dur:1s;   --del:.03s;  height: 22px; }
@keyframes sgbAnim {
  0%,100% { transform: scaleY(1); }
  50%      { transform: scaleY(.3); }
}
@media (prefers-reduced-motion: reduce) {
  .sgb { animation: none; }
}

.stats-guest-body { max-width: 480px; }
.stats-guest-eyebrow {
  font-size: .72rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(219,168,130,.7);
  margin-bottom: .75rem;
}
.stats-guest-headline {
  font-family: var(--font-d); font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 600; color: #FDFAF7; line-height: 1.2;
  margin: 0 0 .9rem;
}
.stats-guest-headline em { color: #DBA882; font-style: italic; }
.stats-guest-sub {
  font-size: .88rem; color: rgba(253,250,247,.55);
  line-height: 1.65; margin-bottom: 1.5rem; max-width: 400px; margin-left: auto; margin-right: auto;
}

/* Fake ranking preview (blurred) */
.stats-guest-preview {
  display: flex; flex-direction: column; gap: .45rem;
  margin-bottom: 1.75rem; max-width: 320px;
  margin-left: auto; margin-right: auto;
}
.sgp-item {
  display: flex; align-items: center; gap: .75rem;
}
.sgp-item.sgp-blur { filter: blur(4px); opacity: .4; pointer-events: none; }
.sgp-num {
  font-size: .7rem; font-weight: 700; font-family: var(--font-d);
  color: rgba(219,168,130,.7); width: 20px; text-align: right; flex-shrink: 0;
}
.sgp-bar {
  height: 8px; border-radius: 4px;
  background: linear-gradient(90deg, #C4313A, #8b1e26);
}
.sgp-bar-full { width: 100%; }
.sgp-bar-lg   { width: 78%;  }
.sgp-bar-md   { width: 60%;  }
.sgp-bar-sm   { width: 44%;  }
.sgp-bar-xs   { width: 30%;  }

.stats-guest-actions {
  display: flex; justify-content: center; gap: .75rem; flex-wrap: wrap;
}

@media (max-width: 600px) {
  .stats-guest { padding: 2rem 1.25rem; }
  .stats-guest-bars { height: 36px; }
  .sgb-4 { height: 36px; }
}

/* ── Auth gate toast ──────────────────────────────────────────────────────── */
#auth-gate-toast {
  position: fixed;
  bottom: 2rem; left: 50%;
  transform: translateX(-50%) translateY(140%);
  z-index: 9800;
  display: flex; align-items: flex-start; gap: 1rem;
  background: #2C1A10;
  border-radius: 18px;
  padding: 1.2rem 1.1rem 1.2rem 1.4rem;
  box-shadow: 0 20px 60px rgba(0,0,0,.4), 0 4px 16px rgba(0,0,0,.2);
  max-width: min(500px, calc(100vw - 2rem));
  transition: transform 360ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 280ms ease;
  opacity: 0;
}
#auth-gate-toast.visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}
.gate-icon {
  font-size: 1.75rem; line-height: 1; flex-shrink: 0; margin-top: .1rem;
}
.gate-body { flex: 1; min-width: 0; }
.gate-text {
  font-size: .9rem; font-weight: 700; color: #FDFAF7;
  line-height: 1.4; margin-bottom: .2rem;
}
.gate-sub {
  font-size: .78rem; color: rgba(253,250,247,.55);
  line-height: 1.4; margin-bottom: .8rem;
}
.gate-actions {
  display: flex; gap: .5rem; flex-wrap: wrap;
}
.gate-cta {
  background: #C4313A; color: #fff; border: none;
  border-radius: var(--r-pill); padding: .42rem 1.1rem;
  font-size: .8rem; font-weight: 700; font-family: var(--font-b);
  cursor: pointer; transition: background 160ms ease, transform 120ms ease;
  white-space: nowrap;
}
.gate-cta:hover { background: #a82830; transform: translateY(-1px); }
.gate-ghost {
  background: rgba(255,255,255,.1); color: rgba(253,250,247,.8);
  border: 1px solid rgba(255,255,255,.18); border-radius: var(--r-pill);
  padding: .42rem 1rem; font-size: .8rem; font-family: var(--font-b);
  cursor: pointer; transition: background 160ms ease; white-space: nowrap;
}
.gate-ghost:hover { background: rgba(255,255,255,.18); }
.gate-close {
  background: none; border: none; color: rgba(255,255,255,.35);
  cursor: pointer; padding: .2rem; flex-shrink: 0;
  line-height: 1; transition: color 160ms ease; margin-top: -.1rem;
  align-self: flex-start;
}
.gate-close:hover { color: rgba(255,255,255,.8); }

/* Playlist guest gate card */
.playlist-guest-gate {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, #2C1A10 0%, #4a2010 100%);
  border-radius: var(--r-lg);
  padding: 2rem 2rem 2rem;
  text-align: center;
  position: relative; overflow: hidden;
}
.playlist-guest-gate::before {
  content: '';
  position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Ccircle cx='30' cy='30' r='28'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}
.playlist-guest-gate-icon { font-size: 2rem; margin-bottom: .5rem; }
.playlist-guest-gate-title {
  font-family: var(--font-d); font-size: 1.1rem; color: #FDFAF7;
  margin-bottom: .35rem;
}
.playlist-guest-gate-sub {
  font-size: .82rem; color: rgba(253,250,247,.55); margin-bottom: 1.25rem;
  line-height: 1.5;
}
.playlist-guest-gate-actions {
  display: flex; justify-content: center; gap: .6rem; flex-wrap: wrap;
}

/* Blur rows above the gate */
.track-card.track-blurred {
  filter: blur(3px);
  pointer-events: none;
  user-select: none;
  opacity: .55;
}

@media (max-width: 480px) {
  #auth-gate-toast { bottom: 1rem; border-radius: 14px; padding: 1rem; gap: .75rem; }
  .gate-text { font-size: .85rem; }
  .gate-sub  { font-size: .73rem; }
}

/* ── Mis Favoritas — heart buttons in search results ────────────────────── */
.fav-heart-btn {
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid transparent;
  background: transparent; cursor: pointer;
  color: var(--gray-400);
  transition: color 180ms ease, background 180ms ease, border-color 180ms ease, transform 150ms ease;
  margin-left: auto; padding: 0;
}
.fav-heart-btn:hover {
  color: #C4313A;
  background: rgba(196,49,58,.08);
  border-color: rgba(196,49,58,.2);
  transform: scale(1.15);
}
.fav-heart-btn.is-fav { color: #C4313A; }
.fav-heart-btn.is-fav:hover { color: #9B1C24; transform: scale(1.15); }

/* Dark theme override (requests section) */
#requests-section .fav-heart-btn {
  color: rgba(219,168,130,.78) !important;
  border-color: rgba(219,168,130,.18) !important;
}
#requests-section .fav-heart-btn:hover {
  color: #C4313A !important;
  background: rgba(196,49,58,.15) !important;
  border-color: rgba(196,49,58,.3) !important;
}
#requests-section .fav-heart-btn.is-fav { color: #C4313A !important; }

/* ── Mis Favoritas — panel ───────────────────────────────────────────────── */
.favs-count {
  font-size: .76rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--gray-400); margin-bottom: .75rem;
}
.favs-empty {
  display: flex; flex-direction: column; align-items: center;
  gap: .5rem; padding: 2rem 1rem; text-align: center;
  color: var(--gray-400);
}
.favs-empty p   { font-size: .9rem; margin: 0; }
.favs-empty small { font-size: .78rem; opacity: .7; }

.favs-song-list { display: flex; flex-direction: column; gap: .3rem; }
.fav-song-item {
  display: flex; align-items: center; gap: .75rem;
  padding: .7rem 1rem; border-radius: var(--r-md);
  border: 1px solid rgba(255,255,255,.07);
  background: #1E1010; transition: background 150ms ease, border-color 150ms ease;
}
.fav-song-item:hover { background: #261414; border-color: rgba(219,168,130,.2); }
.fav-song-info {
  display: flex; flex-direction: column; gap: .15rem; flex: 1; min-width: 0;
}
.fav-song-title {
  font-size: .86rem; font-weight: 700; color: #FDF4EC;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fav-song-artist {
  font-size: .74rem; color: rgba(219,168,130,.7);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fav-song-actions {
  display: flex; align-items: center; gap: .4rem; flex-shrink: 0;
}
.fav-request-btn {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .32rem .8rem; border-radius: var(--r-pill);
  font-size: .73rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  background: linear-gradient(180deg, #D94450, #B82832);
  color: #fff; border: none; cursor: pointer;
  transition: opacity 150ms ease, transform 150ms ease;
  white-space: nowrap;
}
.fav-request-btn:hover { opacity: .88; transform: translateY(-1px); }
.fav-request-btn:active { transform: translateY(0); }
.fav-request-btn--disabled,
.fav-request-btn--disabled:hover,
.fav-request-btn--disabled:active {
  background: rgba(255,255,255,.07) !important;
  color: rgba(255,255,255,.28) !important;
  cursor: not-allowed !important;
  transform: none !important;
  opacity: 1 !important;
}

/* Queue note (shown when user already has a song in queue) */
.favs-queue-note {
  font-size: .75rem; color: rgba(219,168,130,.6);
  background: rgba(219,168,130,.06); border: 1px solid rgba(219,168,130,.12);
  border-radius: var(--r-sm); padding: .5rem .85rem; margin-bottom: .65rem;
  letter-spacing: .02em;
}

/* Dark panel count + empty text */
#requests-section .favs-count { color: rgba(219,168,130,.5) !important; }
#requests-section .favs-empty { color: rgba(219,168,130,.5) !important; }

/* ── Mis Favoritas: Tabla ordenable ──────────────────────────────────────── */
.favs-table-wrap {
  overflow-x: auto;
  border-radius: var(--r-lg);
  border: 1px solid rgba(255,255,255,.07);
  margin-top: .25rem;
}
.favs-table {
  width: 100%; border-collapse: collapse; font-size: .84rem;
}
.favs-table thead tr { border-bottom: 1px solid rgba(255,255,255,.09); }
.favs-th {
  padding: .65rem .85rem;
  text-align: left;
  font-size: .68rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--gray-500, #64748B);
  background: rgba(0,0,0,.25);
  white-space: nowrap; cursor: pointer; user-select: none;
  transition: color .15s;
}
.favs-th:hover { color: rgba(219,168,130,.7); }
.favs-th.sorted { color: #DBA882; }
.favs-th:last-child { cursor: default; }
.favs-th:last-child:hover { color: var(--gray-500, #64748B); }
.favs-th-inner { display: flex; align-items: center; gap: .35rem; }
.favs-sort-icon { font-size: .72rem; opacity: .5; line-height: 1; }
.favs-th.sorted .favs-sort-icon { opacity: 1; }

.favs-tr { transition: background .12s; }
.favs-tr:hover .favs-td { background: rgba(219,168,130,.05); }
.favs-td {
  padding: .65rem .85rem;
  vertical-align: middle;
  border-bottom: 1px solid rgba(255,255,255,.04);
  transition: background .12s;
}
.favs-tr:last-child .favs-td { border-bottom: none; }
.favs-td-artist { font-weight: 700; color: #DBA882; font-size: .82rem; }
.favs-td-title  { color: #FDF4EC; font-size: .84rem; }
.favs-td-date   { font-size: .75rem; color: var(--gray-400, #94A3B8); white-space: nowrap; }
.favs-td-actions { white-space: nowrap; display: flex; gap: .4rem; align-items: center; }

/* Status badges */
.fav-badge {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .2rem .6rem; border-radius: 999px;
  font-size: .68rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; white-space: nowrap;
}
.fav-badge--ok      { background: rgba(52,211,153,.13);  color: #34D399; border: 1px solid rgba(52,211,153,.2); }
.fav-badge--recent  { background: rgba(251,191,36,.12);  color: #FBBF24; border: 1px solid rgba(251,191,36,.2); }
.fav-badge--playing { background: rgba(239,68,68,.13);   color: #F87171; border: 1px solid rgba(239,68,68,.2);
                      animation: fav-playing-pulse 2s ease-in-out infinite; }
.fav-badge--queue   { background: rgba(148,163,184,.08); color: #94A3B8; border: 1px solid rgba(148,163,184,.15); }
@keyframes fav-playing-pulse {
  0%,100% { opacity: 1; } 50% { opacity: .6; }
}

/* Action buttons in table */
.fav-table-btn {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .28rem .65rem; border-radius: var(--r-sm);
  font-size: .73rem; font-weight: 700; letter-spacing: .04em;
  border: none; cursor: pointer;
  transition: opacity .15s, background .15s, color .15s, border-color .15s;
  white-space: nowrap;
}
.fav-table-btn--pedir {
  background: linear-gradient(180deg, #D94450, #B82832);
  color: #fff;
}
.fav-table-btn--pedir:hover:not(:disabled) { opacity: .85; }
.fav-table-btn--pedir:disabled {
  background: rgba(255,255,255,.07); color: rgba(255,255,255,.25); cursor: not-allowed;
}
.fav-table-btn--quitar {
  background: transparent; color: var(--gray-500, #64748B);
  border: 1px solid rgba(255,255,255,.1); padding: .28rem .45rem;
}
.fav-table-btn--quitar:hover { color: #F87171; border-color: rgba(248,113,113,.35); background: rgba(248,113,113,.06); }
.fav-table-btn--quitar.is-confirm {
  color: #F87171; border-color: rgba(248,113,113,.5);
  background: rgba(248,113,113,.12); font-size: .7rem; padding: .28rem .7rem;
}

/* Ver más */
.favs-load-more {
  display: flex; align-items: center; justify-content: center; gap: .4rem;
  width: 100%; margin-top: .65rem;
  padding: .6rem 1rem; border-radius: var(--r-md);
  background: rgba(219,168,130,.07); border: 1px solid rgba(219,168,130,.15);
  color: rgba(219,168,130,.8); font-size: .78rem; font-weight: 600;
  cursor: pointer; transition: background .15s, color .15s;
}
.favs-load-more:hover { background: rgba(219,168,130,.13); color: #DBA882; }

/* Mobile: card layout */
@media (max-width: 680px) {
  .favs-table-wrap { border: none; }
  .favs-table thead { display: none; }
  .favs-table, .favs-table tbody { display: block; }
  .favs-tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
    gap: .15rem .5rem;
    padding: .75rem 1rem;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: var(--r-md);
    margin-bottom: .45rem;
    background: rgba(0,0,0,.18);
  }
  .favs-tr:hover { background: rgba(219,168,130,.05); }
  .favs-td { display: block; padding: 0; border: none; background: transparent !important; }
  .favs-td-artist { grid-column: 1 / -1; font-size: .85rem; color: #DBA882; }
  .favs-td-title  { grid-column: 1 / -1; color: #FDF4EC; font-size: .82rem; margin-bottom: .2rem; }
  .favs-td-date   { font-size: .71rem; }
  .favs-td-date::before   { content: attr(data-label) ': '; color: var(--gray-500, #64748B); font-size: .65rem; text-transform: uppercase; letter-spacing: .04em; }
  .favs-td[data-label="Estado"] { display: flex; align-items: center; justify-content: flex-end; }
  .favs-td-actions { grid-column: 1 / -1; display: flex; gap: .4rem; margin-top: .35rem; padding-top: .45rem; border-top: 1px solid rgba(255,255,255,.05); }
  .fav-table-btn--quitar { margin-left: auto; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Club Gate — sección gramola para guests (reemplaza Festivales + Conciertos)
   ══════════════════════════════════════════════════════════════════════════ */

.club-gate-section {
  background: #FFFFFF;
  border-top: 3px solid var(--brown-900);
  border-bottom: 1px solid var(--gray-200);
  overflow: hidden;
  position: relative;
}

/* Faint warm texture bloom */
.club-gate-section::before {
  content: '';
  position: absolute;
  top: -60px; left: 50%; transform: translateX(-50%);
  width: 70%; height: 320px;
  background: radial-gradient(ellipse at 50% 0%,
    rgba(170,107,68,.08) 0%,
    rgba(219,168,130,.04) 40%,
    transparent 70%);
  pointer-events: none;
}

/* ── Intro ── */
.cg-intro {
  text-align: center;
  max-width: 600px;
  margin: 0 auto 3.5rem;
  position: relative;
}

.cg-coin-wrap {
  display: flex; justify-content: center; margin-bottom: 1.75rem;
}
.cg-coin-svg {
  filter: drop-shadow(0 4px 18px rgba(170,107,68,.35));
  animation: cg-coin-appear .9s cubic-bezier(.34,1.56,.64,1) both,
             cg-coin-float 4s ease-in-out 1s infinite;
}
@keyframes cg-coin-appear {
  from { transform: translateY(-30px) scale(.7); opacity: 0; }
  to   { transform: translateY(0) scale(1);      opacity: 1; }
}
@keyframes cg-coin-float {
  0%,100% { transform: translateY(0) rotate(0deg); }
  50%     { transform: translateY(-7px) rotate(4deg); }
}

.cg-eyebrow {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .68rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--brown-500);
  margin-bottom: .9rem;
}
.cg-eyebrow-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--brown-500); flex-shrink: 0;
}

.cg-title {
  font-family: var(--font-d);
  font-size: clamp(1.85rem, 4.5vw, 2.8rem);
  font-weight: 700; color: var(--brown-900);
  line-height: 1.15; margin: 0 0 .3rem;
  letter-spacing: -.02em;
}
.cg-tagline {
  font-family: var(--font-d);
  font-size: clamp(1.4rem, 3.2vw, 2.1rem);
  font-style: italic; color: var(--red-600);
  margin: 0 0 1.4rem; line-height: 1.2;
}
.cg-body {
  font-size: .92rem; color: var(--gray-600);
  line-height: 1.75; margin: 0;
}

/* ── Cards grid ── */
.cg-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  margin-bottom: 3rem;
  position: relative;
}

.cg-card {
  position: relative;
  border-radius: var(--r-lg);
  padding: 1.5rem 1.25rem 1.35rem;
  border: 1.5px solid var(--gray-200);
  background: #FFF;
  transition: transform var(--t-b), box-shadow var(--t-b), border-color var(--t-b);
  overflow: hidden;
}
.cg-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-md);
  border-color: var(--brown-200);
}

/* Active card — reQuests */
.cg-card--active {
  border-color: rgba(52,211,153,.28);
  background: linear-gradient(155deg, #F0FDF8 0%, #FFF 55%);
}
.cg-card--active:hover { border-color: rgba(52,211,153,.5); }

.cg-card-check {
  position: absolute; top: .9rem; right: .9rem;
  width: 22px; height: 22px; border-radius: 50%;
  background: #34D399; color: #fff;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* Locked cards */
.cg-card--locked {
  background: #FAFAFA;
  border-color: var(--gray-100);
}
.cg-card--locked:hover { border-color: var(--brown-200); }

.cg-card-lock {
  position: absolute; top: .9rem; right: .9rem;
  color: var(--gray-400); opacity: .6;
}

.cg-card-emoji {
  display: flex; align-items: center; justify-content: flex-start;
  margin-bottom: 1rem;
  color: var(--brown-700);
}
.cg-card--locked .cg-card-emoji { color: var(--gray-400); }

.cg-card h3 {
  font-family: var(--font-d);
  font-size: 1.1rem; font-weight: 700;
  color: var(--brown-900); margin: 0 0 .5rem;
  line-height: 1.2;
}
.cg-card--locked h3 { color: var(--gray-600); }

.cg-card p {
  font-size: .8rem; line-height: 1.55;
  color: var(--gray-600); margin: 0 0 1rem;
}
.cg-card--locked p { color: var(--gray-400); }

.cg-card-badge {
  display: inline-flex; align-items: center;
  padding: .2rem .65rem; border-radius: 999px;
  font-size: .64rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase;
}
.cg-card-badge--active {
  background: rgba(52,211,153,.12); color: #16A34A;
  border: 1px solid rgba(52,211,153,.25);
}
.cg-card-badge--locked {
  background: rgba(219,168,130,.1); color: var(--brown-500);
  border: 1px solid rgba(219,168,130,.22);
}

/* ── CTA block ── */
.cg-cta-wrap {
  display: flex; flex-direction: column; align-items: center;
  gap: .9rem; text-align: center;
  padding: 2.75rem 0 .5rem;
  border-top: 1px solid var(--gray-200);
  position: relative;
}

.cg-cta-btn {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .9rem 2.75rem; border-radius: var(--r-pill);
  background: linear-gradient(135deg, var(--brown-900) 0%, var(--brown-700) 100%);
  color: var(--brown-100); font-family: var(--font-b);
  font-size: .95rem; font-weight: 700; letter-spacing: .03em;
  border: none; cursor: pointer;
  box-shadow: 0 6px 28px rgba(44,26,16,.22), 0 1px 0 rgba(255,255,255,.06) inset;
  transition: opacity .15s, transform .15s, box-shadow .15s;
}
.cg-cta-btn:hover {
  opacity: .92; transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(44,26,16,.3), 0 1px 0 rgba(255,255,255,.06) inset;
}
.cg-cta-btn:active { transform: none; opacity: 1; }

.cg-footer-note {
  font-size: .76rem; color: var(--gray-400);
  letter-spacing: .04em; margin: 0;
}
.cg-login-link {
  font-size: .8rem; color: var(--gray-400); margin: 0;
}
.cg-login-link button {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--brown-600); font-size: .8rem; font-weight: 600;
  font-family: inherit; text-decoration: underline;
  text-underline-offset: 2px;
}
.cg-login-link button:hover { color: var(--brown-900); }

/* ── Nav pill club ── */
.nav-link--club { color: var(--brown-500) !important; font-style: italic; }
.nav-link--club:hover { color: var(--brown-700) !important; }

/* ── Responsive ── */
@media (max-width: 960px) {
  .cg-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .cg-intro { margin-bottom: 2rem; }
  .cg-cards { grid-template-columns: 1fr; gap: .75rem; }
  .cg-cta-btn { width: 100%; max-width: 100%; justify-content: center; }
  .cg-title { font-size: 1.65rem; }
  .cg-tagline { font-size: 1.3rem; }
}

/* ── Player: favorita indicator ─────────────────────────────────────────── */
.player-fav-indicator {
  display: none; align-items: center; gap: 5px;
  font-size: .74rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase;
  color: #C4313A;
  padding: .35rem .85rem; border-radius: var(--r-pill);
  background: rgba(196,49,58,.1);
  border: 1px solid rgba(196,49,58,.25);
  width: fit-content;
  animation: fav-pulse 3s ease-in-out infinite;
}
.player-fav-indicator.visible { display: inline-flex; }
.player-fav-indicator svg { flex-shrink: 0; }

@keyframes fav-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .65; }
}

/* ── Favoritas toast notification ───────────────────────────────────────── */
.fav-toast {
  position: fixed;
  bottom: 2.5rem; left: 50%;
  transform: translateX(-50%) translateY(8px);
  z-index: 9900;
  background: #2C1A10; color: #FDF4EC;
  padding: .65rem 1.3rem; border-radius: var(--r-pill);
  font-size: .83rem; font-weight: 600;
  box-shadow: 0 8px 28px rgba(0,0,0,.35);
  opacity: 0;
  transition: opacity .35s ease, transform .35s ease;
  pointer-events: none;
  white-space: nowrap;
}
.fav-toast-err { background: #4A0E12; }

/* ── Tab heart icon color ────────────────────────────────────────────────── */
#requests-section #tab-favs svg { fill: currentColor; }
#requests-section #tab-favs.active svg { fill: #fff; }

/* ═══════════════════════════════════════════════════════════════════════════
   ARTIST PHOTO — hero background layer
   ═══════════════════════════════════════════════════════════════════════════ */

.hero-artist-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  opacity: 0;
  filter: blur(28px) brightness(0.45) saturate(1.3);
  transform: scale(1.08); /* compensate blur edge artefacts */
  transition: opacity 1.4s ease;
  will-change: opacity;
  pointer-events: none;
}
/* Artist bg disabled — original slider preserved */
.hero-artist-bg.loaded { opacity: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   STICKY MINIPLAYER
   ═══════════════════════════════════════════════════════════════════════════ */

.miniplayer {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 950;
  height: 62px;
  background: rgba(14, 7, 3, 0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(219,168,130,.18);
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0 clamp(1rem, 4vw, 2rem);
  transform: translateY(100%);
  transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: transform;
  box-shadow: 0 -8px 32px rgba(0,0,0,.5), 0 -1px 0 rgba(219,168,130,.08);
}
.miniplayer.visible { transform: translateY(0); }

/* CSS-only spinning vinyl */
.mini-vinyl {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  background: radial-gradient(circle at 50% 50%, #3C2518 0%, #1E0F08 42%, #0E0605 100%);
  position: relative;
  box-shadow: 0 2px 10px rgba(0,0,0,.6);
}
.mini-vinyl.spinning { animation: spin 4.5s linear infinite; }

.mini-vinyl-label {
  position: absolute; width: 15px; height: 15px; border-radius: 50%;
  top: 50%; left: 50%; transform: translate(-50%,-50%);
  background: linear-gradient(145deg, var(--brown-700), var(--brown-900));
  z-index: 2;
}
.mini-vinyl-hole {
  position: absolute; width: 4px; height: 4px; border-radius: 50%;
  background: #080402;
  top: 50%; left: 50%; transform: translate(-50%,-50%);
  z-index: 3;
}

/* Song info */
.mini-info {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 1px;
}
.mini-artist {
  font-size: .65rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(219,168,130,.65);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mini-title {
  font-family: var(--font-d); font-size: .88rem; font-weight: 600;
  color: rgba(253,244,236,.95);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Buttons */
.mini-btn-play {
  width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
  background: var(--brown-800); color: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--t-f), transform var(--t-f);
  box-shadow: 0 2px 10px rgba(0,0,0,.4);
}
.mini-btn-play:hover  { background: var(--red-600); transform: scale(1.08); }
.mini-btn-play:active { transform: scale(.93); }
.mini-btn-play svg    { width: 16px; height: 16px; }

.mini-btn-mute {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: rgba(219,168,130,.45);
  transition: color var(--t-f), background var(--t-f);
}
.mini-btn-mute:hover { color: rgba(253,244,236,.9); background: rgba(255,255,255,.07); }
.mini-btn-mute svg   { width: 16px; height: 16px; }

@media (max-width: 480px) {
  .miniplayer { height: 58px; gap: .65rem; padding: 0 .9rem; }
  .mini-vinyl { width: 36px; height: 36px; }
  .mini-title  { font-size: .82rem; }
  .mini-artist { font-size: .6rem; }
  .mini-btn-play { width: 38px; height: 38px; }
  .mini-btn-play svg { width: 14px; height: 14px; }
  .mini-btn-mute { display: none; } /* save space on very small phones */
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE POLISH — comprehensive small-screen fixes
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* Hero: tighter padding on tablet/phone */
  .hero-inner { padding: 2.5rem 1rem; gap: 2rem; }
  .player-title  { font-size: clamp(1.6rem, 6vw, 2.8rem); }
  .player-artist { font-size: clamp(1.04rem, 3.6vw, 1.76rem); }

  /* reQuests tabs: wrap so 3 tabs never overflow horizontally */
  #requests-section .req-tabs {
    flex-wrap: wrap !important;
    gap: .35rem !important;
  }
  #requests-section .req-tab {
    padding: .55rem 1rem !important;
    flex: 1;
    text-align: center;
    min-width: 0;
  }

  /* Onair badge: smaller to fit in section head */
  .req-onair-badge { font-size: .62rem !important; padding: .28rem .7rem !important; }

  /* Favorites panel: compact on tablet */
  .fav-song-item  { padding: .6rem .8rem; }
  .fav-request-btn { padding: .28rem .7rem; font-size: .68rem; }
}

@media (max-width: 480px) {
  /* Hero: compact on phone */
  .hero-inner { padding: 2rem .85rem; gap: 1.5rem; }
  .player-title  { font-size: clamp(1.45rem, 7.5vw, 2.8rem); }
  .player-artist { font-size: clamp(1rem, 4.1vw, 1.7rem); }

  /* Vinyl ambient glow: prevent horizontal overflow on 375px screens */
  .vinyl-ambient { width: 258px !important; height: 258px !important; }

  /* Stats grid: keep 2 cols on phone (was incorrectly reset to 3 at this breakpoint) */
  .stats-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* Slogan: smaller on phone */
  .hero-slogan-main { font-size: .92rem; }
  .hero-slogan-sub  { font-size: .71rem; }

  /* Efeméride: compact on phone */
  .hero-efe-year   { font-size: 1.2rem; }
  .hero-efe-titulo { font-size: .86rem; }
  .hero-efe-sub    { font-size: .68rem; }

  /* Section titles: tighter minimum */
  .section-title { font-size: clamp(1.25rem, 5.5vw, 1.9rem) !important; }

  /* reQuests tabs: very compact on phone */
  #requests-section .req-tab {
    padding: .46rem .65rem !important;
    font-size: .59rem !important;
    letter-spacing: .1em !important;
  }

  /* Search console: tighter padding on phone */
  #requests-section .search-wrap {
    padding: .85rem .95rem !important;
    border-radius: 12px !important;
  }

  /* Genre chips: more compact on phone */
  #requests-section .genre-filter-btn {
    padding: .38rem .8rem !important;
    font-size: .62rem !important;
    letter-spacing: .1em !important;
  }

  .sl-cselect__tools {
    flex-direction: column;
    align-items: stretch;
    gap: .55rem;
  }

  .sl-cselect__sort {
    width: 100%;
    justify-content: space-between;
  }

  .sl-cselect__sort-btn {
    flex: 1 1 50%;
    text-align: center;
    padding: .5rem .6rem;
    font-size: .64rem;
  }

  /* Random button: compact */
  #requests-section .btn-random {
    font-size: .67rem !important;
    padding: .5rem 1rem !important;
  }

  /* Onair badge: hide on very small (section head gets crowded) */
  .req-onair-badge { display: none !important; }

  /* Favorites: compact on phone */
  .fav-song-item   { padding: .55rem .7rem; gap: .5rem; }
  .fav-song-title  { font-size: .82rem; }
  .fav-song-artist { font-size: .7rem; }
  .fav-request-btn { padding: .24rem .55rem; font-size: .64rem; letter-spacing: .04em; }

  /* Toast: full-width on phone, no overflow */
  .fav-toast {
    left: 1rem; right: 1rem;
    transform: translateX(0) translateY(8px);
    white-space: normal; text-align: center;
  }

  /* Auth close button: bigger tap target on phone */
  .auth-close { width: 34px !important; height: 34px !important; }
}

/* ── Back to top ──────────────────────────────────────────────────────────── */
.back-to-top {
  position: fixed;
  bottom: 5.2rem;
  right: 2rem;
  z-index: 999;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  background: var(--red-600);
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 18px rgba(196,49,58,.40);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(.9);
  transition: opacity .25s ease, visibility .25s ease, transform .25s ease, background .2s ease, box-shadow .2s ease;
}
.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}
.back-to-top:hover {
  background: var(--brown-900);
  box-shadow: 0 6px 24px rgba(107,61,36,.45);
  transform: translateY(-3px) scale(1.06);
}
.back-to-top:active {
  transform: scale(.94);
}
@media (max-width: 480px) {
  .back-to-top { bottom: 5rem; right: 1.2rem; width: 42px; height: 42px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ALBUM ART IN PLAYLIST CARDS
   ═══════════════════════════════════════════════════════════════════════════ */

/* Wrapper that holds both thumbnail and animated bars */
.track-thumb-wrap {
  position: relative;
  width: 42px; height: 42px;
  flex-shrink: 0;
  border-radius: 8px;
  overflow: hidden;
}

/* The album art thumbnail */
.track-thumb {
  width: 42px; height: 42px;
  background-size: cover;
  background-position: center;
  border-radius: 8px;
  opacity: 0;
  animation: artFadeIn .55s cubic-bezier(.4,0,.2,1) .05s forwards;
}

/* Fallback: Sala London logo — contain + dark bg so it doesn't stretch */
.track-thumb.track-thumb-logo {
  background-size: 72%;
  background-repeat: no-repeat;
  background-color: var(--brown-900);
}

@keyframes artFadeIn {
  from { opacity: 0; transform: scale(1.08); }
  to   { opacity: 1; transform: scale(1);    }
}

/* Regular cards with art: hide the bars (thumbnail is enough) */
.track-card.has-art .track-play-icon {
  display: none;
}

/* Now-playing card with art: overlay the animated bars on the thumbnail */
.track-card.now-playing.has-art .track-play-icon {
  display: flex;
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .54);
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: 100%;
  border-radius: 0;
}

/* White bars on dark overlay look premium */
.track-card.now-playing.has-art .track-play-icon .bar {
  background: rgba(255, 255, 255, .9);
}

/* ═══════════════════════════════════════════════════════════════════════════
   REQUESTS — CLOSED STATE
   ═══════════════════════════════════════════════════════════════════════════ */

.req-offair-badge {
  font-size: .7rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255, 255, 255, .3);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--r-pill);
  padding: 4px 12px;
}

.req-closed-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 3.5rem 1.5rem;
  gap: .7rem;
}

.req-closed-icon {
  width: 60px; height: 60px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .1);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255, 255, 255, .4);
  margin-bottom: .5rem;
}

.req-closed-title {
  font-size: 1.05rem; font-weight: 700;
  color: rgba(255, 255, 255, .65);
  margin: 0; letter-spacing: -.01em;
}

.req-closed-sub {
  font-size: .875rem; line-height: 1.65;
  color: rgba(255, 255, 255, .32);
  margin: 0;
}

/* ══════════════════════════════════════════════════════════════
   PERFIL OVERLAY  ·  cubre la pantalla sin salir de la web
   ══════════════════════════════════════════════════════════════ */

.perfil-overlay {
  position: fixed;
  inset: 0;
  z-index: 9980;
  background: var(--gray-50, #FAFAF8);
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform .32s cubic-bezier(.4, 0, .2, 1);
  will-change: transform;
}
.perfil-overlay.is-open {
  transform: translateY(0);
}

/* Prevent body scroll while overlay is open */
body.perfil-ov-noscroll { overflow: hidden; }

/* ── Top bar ──────────────────────────────────────────────────── */
.perfil-ov-bar {
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 2;
  background: rgba(250, 250, 248, .95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--gray-200);
  padding: .65rem 1.25rem;
  display: flex;
  align-items: center;
}

.perfil-ov-close-btn {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .82rem;
  font-weight: 600;
  color: var(--brown-600);
  background: none;
  border: none;
  cursor: pointer;
  padding: .4rem .6rem;
  border-radius: var(--r-pill);
  transition: background var(--t-f), color var(--t-f);
  line-height: 1;
}
.perfil-ov-close-btn:hover {
  background: var(--brown-100);
  color: var(--brown-900);
}

/* ── Scrollable content ───────────────────────────────────────── */
.perfil-overlay-content {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── Spinner ──────────────────────────────────────────────────── */
.perfil-ov-spinner-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5rem 2rem;
}
.perfil-ov-spinner {
  width: 36px; height: 36px;
  border: 3px solid var(--gray-200);
  border-top-color: var(--brown-500);
  border-radius: 50%;
  animation: spin .75s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Error state ──────────────────────────────────────────────── */
.perfil-ov-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 4rem 2rem;
  text-align: center;
  color: var(--gray-400);
  font-size: .88rem;
}

/* ══════════════════════════════════════════════════════════════
   PÁGINA DE PERFIL DE USUARIO  ·  perfil.php
   ══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   SALA LONDON'S MUSIC — sección géneros
   ══════════════════════════════════════════════════════════════ */

.generos-section {
  background: #1A1410;
  padding: 5rem clamp(1rem, 5vw, 3rem) 5rem;
  position: relative;
  overflow: hidden;
}

/* Subtle texture overlay */
.generos-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 10% 20%, rgba(180,120,60,.08) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 90% 80%, rgba(100,60,180,.06) 0%, transparent 60%);
  pointer-events: none;
}

/* ── Header ───────────────────────────────────────────────────── */
.generos-header {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}
.generos-section .section-title   { color: #FDF4EC; }
.generos-section .section-subtitle { color: rgba(219,168,130,.5); }
.generos-section .section-head    { border-bottom-color: rgba(255,255,255,.07); }

/* ── Grid ─────────────────────────────────────────────────────── */
.generos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.25rem;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}

/* ── Cards ────────────────────────────────────────────────────── */
.genero-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 1.75rem 1.5rem 1.5rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  transition: background .25s ease, transform .25s ease, border-color .25s ease, box-shadow .25s ease;
  position: relative;
  overflow: hidden;
}
.genero-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--gc, #AA6B44);
  opacity: 0;
  transition: opacity .25s ease;
}
.genero-card:hover,
.genero-card:focus-visible {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.16);
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0,0,0,.4), 0 0 0 0 var(--gc);
  outline: none;
}
.genero-card:hover::before,
.genero-card:focus-visible::before {
  opacity: 1;
}

.genero-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.genero-icono {
  font-size: 1.75rem;
  line-height: 1;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.4));
}
.genero-era {
  font-size: .67rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--gc, #AA6B44);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--r-pill);
  padding: 3px 10px;
}

.genero-nombre {
  font-family: var(--font-d);
  font-size: clamp(1.4rem, 2.5vw, 1.75rem);
  font-weight: 700;
  color: #fff;
  letter-spacing: -.025em;
  line-height: 1.1;
  margin: 0;
}

.genero-resumen {
  font-size: .83rem;
  color: rgba(255,255,255,.55);
  line-height: 1.65;
  margin: 0;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.genero-artistas {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}
.genero-artista-chip {
  font-size: .65rem;
  font-weight: 600;
  color: var(--gc, #AA6B44);
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--r-pill);
  padding: 2px 8px;
  white-space: nowrap;
}

.genero-card-cta {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .75rem;
  font-weight: 700;
  color: var(--gc, #AA6B44);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-top: .25rem;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity .2s ease, transform .2s ease;
}
.genero-card:hover .genero-card-cta,
.genero-card:focus-visible .genero-card-cta {
  opacity: 1;
  transform: translateX(0);
}

/* ══════════════════════════════════════════════════════════════
   GÉNERO OVERLAY — detalle completo
   ══════════════════════════════════════════════════════════════ */

.genero-overlay {
  position: fixed;
  inset: 0;
  z-index: 9985;
  background: #141010;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform .32s cubic-bezier(.4, 0, .2, 1);
  will-change: transform;
}
.genero-overlay.is-open { transform: translateY(0); }

.genero-ov-bar {
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 2;
  background: rgba(20,16,16,.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.08);
  padding: .65rem 1.25rem;
  display: flex;
  align-items: center;
}
.genero-ov-bar .perfil-ov-close-btn {
  color: rgba(255,255,255,.6);
}
.genero-ov-bar .perfil-ov-close-btn:hover {
  background: rgba(255,255,255,.07);
  color: #fff;
}

.genero-overlay-content {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── Detail: Hero ─────────────────────────────────────────────── */
.genero-detail-hero {
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--gc, #AA6B44) 25%, #1A1410),
    #1A1410 65%
  );
  padding: 3rem clamp(1rem, 8vw, 5rem) 2.5rem;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.genero-detail-hero-inner {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  gap: 1.75rem;
}
.genero-detail-icono {
  font-size: 3.5rem;
  line-height: 1;
  flex-shrink: 0;
  filter: drop-shadow(0 4px 16px rgba(0,0,0,.5));
}
.genero-detail-era {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--gc, #AA6B44);
  margin-bottom: .5rem;
}
.genero-detail-nombre {
  font-family: var(--font-d);
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 700;
  color: #fff;
  letter-spacing: -.035em;
  line-height: 1;
  margin: 0 0 .75rem;
}
.genero-detail-resumen {
  font-size: .95rem;
  color: rgba(255,255,255,.55);
  line-height: 1.7;
  margin: 0;
  max-width: 560px;
  font-style: italic;
}

/* ── Detail: Body ─────────────────────────────────────────────── */
.genero-detail-body {
  max-width: 760px;
  margin: 0 auto;
  padding: 2.5rem clamp(1rem, 8vw, 5rem) 5rem;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}
.genero-detail-texto p {
  font-size: .97rem;
  color: rgba(255,255,255,.7);
  line-height: 1.85;
  margin: 0 0 1.25rem;
}
.genero-detail-texto p:last-child { margin-bottom: 0; }

/* first paragraph bigger */
.genero-detail-texto p:first-child {
  font-size: 1.05rem;
  color: rgba(255,255,255,.85);
}

.genero-detail-bloque { }
.genero-detail-bloque-titulo {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--gc, #AA6B44);
  margin: 0 0 1rem;
}

.genero-detail-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.genero-detail-chip {
  font-size: .8rem;
  font-weight: 500;
  color: rgba(255,255,255,.8);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--r-pill);
  padding: .35rem .85rem;
}

.genero-detail-albums {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.genero-detail-albums li {
  display: flex;
  align-items: baseline;
  gap: .75rem;
  padding: .65rem 1rem;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 10px;
}
.genero-album-titulo {
  font-size: .88rem;
  font-weight: 600;
  color: rgba(255,255,255,.85);
  font-style: italic;
  flex: 1;
}
.genero-album-artista {
  font-size: .78rem;
  color: rgba(255,255,255,.4);
  white-space: nowrap;
}

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 640px) {
  .generos-grid { grid-template-columns: 1fr 1fr; gap: .75rem; }
  .genero-card { padding: 1.25rem 1rem; }
  .genero-nombre { font-size: 1.2rem; }
  .genero-resumen { -webkit-line-clamp: 2; font-size: .78rem; }
  .genero-detail-hero-inner { flex-direction: column; gap: 1rem; }
  .genero-detail-icono { font-size: 2.5rem; }
}
@media (max-width: 400px) {
  .generos-grid { grid-template-columns: 1fr; }
}

/* ── Chat alias clickable ─────────────────────────────────────── */
.chat-msg-alias--link {
  cursor: pointer;
  text-decoration: none;
  transition: opacity var(--t-f);
}
.chat-msg-alias--link:hover {
  opacity: .75;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ══════════════════════════════════════════════════════════════
   COMUNIDAD  ·  pulso de la sala + miembros
   ══════════════════════════════════════════════════════════════ */

.com-wrap {
  padding: 0 0 4rem;
  max-width: 100%;
}

/* ── Hero header ──────────────────────────────────────────────── */
.com-hero {
  background: #090604;
  padding: 2.5rem clamp(1.5rem, 6vw, 4rem) 2rem;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgba(170,107,68,.15);
}
.com-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 150% at 0% 100%, rgba(170,107,68,.22) 0%, transparent 55%),
    radial-gradient(ellipse 40% 100% at 100% 0%,  rgba(170,107,68,.10) 0%, transparent 50%);
  pointer-events: none;
}
.com-hero-eyebrow {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin-bottom: .75rem;
  position: relative;
}
.com-hero-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #AA6B44;
  box-shadow: 0 0 8px rgba(170,107,68,.8);
}
.com-hero-label {
  font-size: .68rem;
  letter-spacing: .22em;
  color: rgba(170,107,68,.75);
  text-transform: uppercase;
  font-weight: 500;
}
.com-hero-title {
  font-family: var(--font-d);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 800;
  color: #fff;
  letter-spacing: -.03em;
  line-height: 1;
  margin: 0 0 .5rem;
  position: relative;
}
.com-hero-sub {
  font-size: .82rem;
  color: rgba(255,255,255,.38);
  margin: 0;
  position: relative;
  max-width: 54ch;
}
.com-hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  margin-top: 1rem;
  position: relative;
}
.com-hero-stat {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .45rem .78rem;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(170,107,68,.18);
  color: rgba(255,255,255,.72);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .02em;
}

.com-toolbar {
  display: flex;
  flex-direction: column;
  gap: .95rem;
  padding: 1.4rem clamp(1.5rem, 6vw, 4rem) 1rem;
  background: var(--bg-page, #f7f3ef);
}

.com-view-switch,
.com-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
}

.com-filter-row {
  align-items: center;
  gap: .55rem;
  padding: .18rem 0 0;
}

.com-filter-label {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  margin-right: .15rem;
  color: var(--gray-400);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.com-view-btn,
.com-filter-btn {
  appearance: none;
  border: 1px solid rgba(91,58,37,.12);
  background: #fff;
  color: var(--brown-700);
  border-radius: 999px;
  padding: .62rem 1rem;
  font-size: .79rem;
  font-weight: 700;
  letter-spacing: .01em;
  cursor: pointer;
  transition: background var(--t-f), color var(--t-f), border-color var(--t-f), box-shadow var(--t-f), transform var(--t-f);
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
}

.com-view-btn:hover,
.com-filter-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(170,107,68,.28);
}

.com-filter-btn {
  min-height: 38px;
  padding: .56rem .9rem;
  border-radius: 12px;
  background: rgba(255,255,255,.82);
}

.com-filter-btn--songs {
  color: #c4313a;
  border-color: rgba(196,49,58,.20);
  background: rgba(255, 244, 246, .92);
}

.com-filter-btn--requests {
  color: #3a2013;
  border-color: rgba(58,32,19,.18);
  background: rgba(247, 241, 235, .92);
}

.com-filter-btn--festivals {
  color: #9a5f17;
  border-color: rgba(196,122,32,.18);
  background: rgba(255, 248, 239, .92);
}

.com-filter-btn--concerts {
  color: #0c6f8d;
  border-color: rgba(19,134,168,.18);
  background: rgba(239, 249, 252, .92);
}

.com-view-btn.is-active,
.com-filter-btn.is-active {
  background: linear-gradient(180deg, #3A2013 0%, #1A0E08 100%);
  color: #fff6ee;
  border-color: rgba(58,32,19,.72);
  box-shadow: 0 10px 24px rgba(35,16,8,.16);
}

.com-filter-btn--songs.is-active {
  background: linear-gradient(180deg, #d54a54 0%, #b52d37 100%);
  color: #fff7f7;
  border-color: rgba(181,45,55,.78);
  box-shadow: 0 10px 24px rgba(181,45,55,.18);
}

.com-filter-btn--festivals.is-active {
  background: linear-gradient(180deg, #d7a04c 0%, #9a5f17 100%);
  color: #fff9f2;
  border-color: rgba(154,95,23,.72);
  box-shadow: 0 10px 24px rgba(154,95,23,.16);
}

.com-filter-btn--concerts.is-active {
  background: linear-gradient(180deg, #5aa8c6 0%, #0c6f8d 100%);
  color: #f5fcff;
  border-color: rgba(12,111,141,.72);
  box-shadow: 0 10px 24px rgba(12,111,141,.16);
}

/* ── Search bar ───────────────────────────────────────────────── */
.com-search-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0;
  background: transparent;
}
.com-search-inner {
  flex: 1;
  min-width: 200px;
  display: flex;
  align-items: center;
  gap: .6rem;
  background: #fff;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--r-pill);
  padding: .6rem 1.1rem;
  transition: border-color var(--t-f), box-shadow var(--t-f);
  color: var(--gray-400);
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
}
.com-search-inner:focus-within {
  border-color: var(--brown-400);
  box-shadow: 0 0 0 3px rgba(170, 107, 68, .1);
}
.com-search-input {
  flex: 1;
  border: none;
  outline: none;
  font-size: .88rem;
  color: var(--brown-900);
  background: transparent;
  font-family: var(--font-s, 'DM Sans', sans-serif);
}
.com-search-input::placeholder { color: var(--gray-300); }
.com-count {
  font-size: .75rem;
  color: var(--gray-400);
  white-space: nowrap;
  background: var(--brown-50);
  border: 1px solid var(--brown-100);
  padding: .3rem .75rem;
  border-radius: 100px;
  font-weight: 600;
}

.com-pulse-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
  padding: .35rem clamp(1.5rem, 6vw, 4rem) 0;
}

.com-pulse-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: .95rem;
  background: #fff;
  border: 1px solid rgba(91,58,37,.08);
  border-radius: 18px;
  padding: 1rem;
  box-shadow: 0 10px 34px rgba(30,14,7,.06);
}

.com-pulse-card--song {
  background: linear-gradient(180deg, #fffdfa 0%, #ffffff 100%);
}

.com-pulse-card--request {
  background: linear-gradient(180deg, #fff9f9 0%, #ffffff 100%);
  box-shadow: 0 12px 36px rgba(148, 28, 42, .08);
}

.com-pulse-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--uc, #AA6B44) 0%, rgba(255,255,255,0) 100%);
  opacity: .95;
}

.com-pulse-card--song::before {
  background: linear-gradient(90deg, #d6818e 0%, rgba(214,129,142,0) 100%);
}

.com-pulse-card--request::before {
  background: linear-gradient(90deg, #3a2013 0%, rgba(58,32,19,0) 100%);
}

.com-pulse-card--festival::before {
  background: linear-gradient(90deg, #c47a20 0%, rgba(196,122,32,0) 100%);
}

.com-pulse-card--concert::before {
  background: linear-gradient(90deg, #1386a8 0%, rgba(19,134,168,0) 100%);
}

.com-pulse-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem;
}

.com-pulse-cover {
  position: relative;
  width: min(100%, 188px);
  aspect-ratio: 1 / 1;
  height: auto;
  align-self: center;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid rgba(91,58,37,.08);
  background:
    radial-gradient(circle at 50% 50%, rgba(232,193,143,.78) 0 8%, rgba(76,42,28,.96) 8.5% 12%, rgba(10,6,6,.98) 12.5% 100%),
    linear-gradient(145deg, #241310 0%, #100908 68%, #1b100f 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 -18px 30px rgba(0,0,0,.28);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.com-pulse-cover--song {
  border-color: rgba(214,129,142,.24);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 10px 24px rgba(120,69,53,.08);
}

.com-pulse-cover--request {
  border-color: rgba(196,49,58,.24);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 12px 28px rgba(148,28,42,.10);
}

.com-pulse-cover.is-loaded {
  border-color: rgba(91,58,37,.10);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 12px 28px rgba(30,14,7,.10);
}

.com-pulse-cover-disc {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 136px;
  height: 136px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(circle at 50% 50%, #c78f5a 0 11%, #2f1a16 11.5% 16%, transparent 16.5%),
    repeating-radial-gradient(circle at 50% 50%, #18100f 0 2px, #251614 2px 4px, #140c0b 4px 6px),
    linear-gradient(140deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 28%, rgba(0,0,0,.16) 62%, rgba(255,255,255,.03) 100%);
  box-shadow: 0 16px 24px rgba(8,5,4,.22), inset 0 1px 0 rgba(255,255,255,.05);
  transition: opacity .28s ease, transform .28s ease;
}

.com-pulse-cover-disc::before {
  content: '';
  position: absolute;
  inset: 50%;
  width: 8px;
  height: 8px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #0b0706;
  box-shadow: 0 0 0 4px rgba(255,255,255,.08);
}

.com-pulse-cover-disc-label {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: radial-gradient(circle, #e9cfaf 0%, #cb9a68 66%, #8f5637 100%);
  color: #28140f;
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .08em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4);
}

.com-pulse-cover-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(19,11,9,.06) 0%, rgba(19,11,9,.18) 100%),
              linear-gradient(135deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 32%, rgba(255,255,255,0) 64%, rgba(0,0,0,.14) 100%);
  pointer-events: none;
}

.com-pulse-cover--song .com-pulse-cover-shade {
  background: linear-gradient(180deg, rgba(165,93,104,.08) 0%, rgba(19,11,9,.18) 100%),
              linear-gradient(135deg, rgba(255,247,244,.24) 0%, rgba(255,255,255,0) 36%, rgba(255,255,255,0) 64%, rgba(120,69,53,.10) 100%);
}

.com-pulse-cover--request .com-pulse-cover-shade {
  background: linear-gradient(180deg, rgba(196,49,58,.14) 0%, rgba(19,11,9,.20) 100%),
              linear-gradient(135deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 30%, rgba(255,255,255,0) 60%, rgba(113,21,31,.18) 100%);
}

.com-pulse-cover.is-loaded .com-pulse-cover-disc {
  opacity: 0;
  transform: translate(-50%, -50%) scale(.9);
}

.com-pulse-user {
  display: flex;
  align-items: center;
  gap: .72rem;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  text-align: left;
  min-width: 0;
}

.com-pulse-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(26,10,6,.15);
}

.com-pulse-avatar img,
.com-pulse-avatar span {
  display: block;
  width: 100%;
  height: 100%;
}

.com-pulse-avatar img {
  object-fit: cover;
}

.com-pulse-avatar span {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: var(--font-d);
  font-size: 1rem;
  font-weight: 700;
}

.com-pulse-user-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.com-pulse-user-copy strong {
  font-size: .88rem;
  color: var(--brown-900);
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.com-pulse-user-copy span {
  font-size: .71rem;
  color: var(--gray-400);
  margin-top: .18rem;
}

.com-pulse-kind {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .32rem;
  flex-shrink: 0;
  min-height: 24px;
  padding: .22rem .46rem;
  border-radius: 9px;
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  border: 1px solid rgba(91,58,37,.08);
  background: rgba(255,255,255,.76);
  color: var(--brown-700);
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 12px rgba(30, 14, 7, .05);
}

.com-pulse-kind--song {
  background: rgba(255, 244, 246, .94);
  border-color: rgba(196,49,58,.24);
  color: #c4313a;
}

.com-pulse-kind--request {
  background: rgba(247, 241, 235, .94);
  border-color: rgba(58,32,19,.18);
  color: #3a2013;
}

.com-pulse-kind--festival {
  background: rgba(255, 248, 239, .92);
  border-color: rgba(196,122,32,.16);
  color: #9a5f17;
}

.com-pulse-kind--concert {
  background: rgba(239, 249, 252, .92);
  border-color: rgba(19,134,168,.16);
  color: #0c6f8d;
}

.com-pulse-body {
  display: flex;
  flex-direction: column;
  gap: .32rem;
  min-height: 92px;
}

.com-pulse-kicker {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gray-400);
}

.com-pulse-card--song .com-pulse-kicker {
  color: #b07b71;
}

.com-pulse-card--request .com-pulse-kicker {
  color: #b1252f;
}

.com-pulse-title {
  font-family: var(--font-d);
  font-size: 1.18rem;
  line-height: 1.08;
  color: var(--brown-900);
}

.com-pulse-subtitle {
  font-size: .8rem;
  color: var(--gray-500);
  line-height: 1.45;
}

.com-affinity-badge,
.com-card-match {
  display: inline-flex;
  align-items: center;
  gap: .38rem;
  width: fit-content;
  max-width: 100%;
  padding: .38rem .62rem;
  border-radius: 999px;
  background: rgba(196,49,58,.08);
  border: 1px solid rgba(196,49,58,.12);
  color: #b1252f;
  font-size: .7rem;
  font-weight: 700;
  line-height: 1.1;
}

.com-pulse-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin-top: auto;
}

@media (max-width: 640px) {
  .com-filter-label {
    width: 100%;
    min-height: auto;
    margin: 0 0 .1rem;
  }

  .com-pulse-card {
    padding: .92rem;
    gap: .88rem;
  }

  .com-pulse-cover {
    width: 100%;
    max-width: none;
    border-radius: 13px;
  }

  .com-pulse-cover-disc {
    width: 126px;
    height: 126px;
  }
}

.com-pulse-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: .62rem .92rem;
  border-radius: 999px;
  border: 1px solid rgba(91,58,37,.12);
  background: #fff;
  color: var(--brown-800);
  font-size: .76rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--t-f), box-shadow var(--t-f), border-color var(--t-f), background var(--t-f), color var(--t-f);
}

.com-pulse-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(32,16,8,.08);
}

.com-pulse-btn.is-primary {
  background: linear-gradient(180deg, #C9434B 0%, #C4313A 100%);
  color: #fff;
  border-color: #C4313A;
}

.com-pulse-btn.is-saved,
.com-pulse-btn:disabled {
  background: var(--brown-50);
  color: var(--gray-400);
  border-color: var(--brown-100);
  box-shadow: none;
  cursor: default;
  transform: none;
}

/* ── Grid ─────────────────────────────────────────────────────── */
.com-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.25rem;
  padding: .5rem clamp(1.5rem, 6vw, 4rem) 0;
}

.com-card {
  background: #fff;
  border: 1px solid var(--gray-100);
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow var(--t-f), transform var(--t-f);
  box-shadow: 0 1px 6px rgba(0,0,0,.05);
}
.com-card:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,.10);
  transform: translateY(-4px);
}

/* mini cover using user color */
.com-card-cover {
  height: 80px;
  background: var(--uc, #0D0806);
  position: relative;
  overflow: hidden;
  /* avatar peeks out via absolute positioning + z-index on avatar */
}
.com-card-cover::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 140% at 20% 100%, var(--uc, #AA6B44) 0%, transparent 60%);
  opacity: 0.45;
}
/* mini EQ bars */
.com-card-cover-eq {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 100%;
  display: flex;
  align-items: flex-end;
  gap: 1.5px;
  padding: 0 2px;
}
.com-card-cover-eq span {
  flex: 1;
  min-width: 0;
  border-radius: 1px 1px 0 0;
  background: linear-gradient(to top, rgba(255,255,255,.7), rgba(255,255,255,.05));
  opacity: 0.45;
  animation: eq-bar 1.4s ease-in-out infinite alternate;
  height: 30%;
}
.com-card-cover-eq span:nth-child(2n)  { animation-duration: 1.1s; animation-delay: -.4s; }
.com-card-cover-eq span:nth-child(3n)  { animation-duration: 1.8s; animation-delay: -.8s; }
.com-card-cover-eq span:nth-child(5n)  { animation-duration: 0.9s; animation-delay: -.2s; --eq-lo:5%; --eq-hi:80%; }
.com-card-cover-eq span:nth-child(7n)  { animation-duration: 2.0s; animation-delay:-1.1s; }
.com-card-cover-eq span:nth-child(4n)  { --eq-lo:20%; --eq-hi:60%; }

.com-card-body {
  padding: 44px 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .4rem;
  position: relative;
}

.com-card-avatar {
  width: 68px; height: 68px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  position: absolute;
  top: -34px;
  left: 50%;
  transform: translateX(-50%);
  border: 3px solid #fff;
  box-shadow: 0 2px 12px rgba(0,0,0,.18);
  background: var(--gray-100);
  z-index: 10;
}
.com-card-avatar img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.com-card-avatar span {
  display: flex;
  width: 100%; height: 100%;
  align-items: center;
  justify-content: center;
  font-family: var(--font-d);
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
}

.com-card-alias {
  font-weight: 700;
  font-size: .92rem;
  color: var(--brown-900);
  letter-spacing: -.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}
.com-card-bio {
  font-size: .72rem;
  color: var(--gray-400);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  width: 100%;
}
.com-card-since {
  font-size: .65rem;
  color: var(--gray-300);
  text-transform: uppercase;
  letter-spacing: .09em;
  margin-top: .15rem;
}

.com-card-match {
  margin-top: .15rem;
}

/* ── Empty ────────────────────────────────────────────────────── */
.com-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 5rem 2rem;
  color: var(--gray-300);
  text-align: center;
}
.com-empty p { font-size: .88rem; color: var(--gray-400); margin: 0; }

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 480px) {
  .com-toolbar { padding: 1rem 1rem .75rem; }
  .com-grid { grid-template-columns: repeat(2, 1fr); gap: .75rem; padding: .5rem 1rem 0; }
  .com-pulse-list { grid-template-columns: 1fr; gap: .8rem; padding: .35rem 1rem 0; }
  .com-hero { padding: 2rem 1rem 1.5rem; }
  .com-pulse-title { font-size: 1.04rem; }
  .com-search-bar { padding: 0; }
}

/* ── Root body ───────────────────────────────────────────────── */
.perfil-body-page {
  background: var(--gray-50, #FAFAF8);
  min-height: 100vh;
}

/* ── Main container ──────────────────────────────────────────── */
.perfil-main {
  padding-top: 70px; /* nav height */
  padding-bottom: 5rem;
  min-height: calc(100vh - 70px);
}

/* Fragment (inside overlay — no nav offset needed) */
.perfil-fragment {
  padding-bottom: 4rem;
}

/* ── HERO ────────────────────────────────────────────────────── */
/* ── Cover banner ────────────────────────────────────────────── */
.perfil-cover {
  position: relative;
  height: 200px;
  background: #090604;
  overflow: hidden;
}

/* Base color glow — bottom-left bloom */
.perfil-cover::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 160% at 10% 110%, var(--user-color, #AA6B44) 0%, transparent 58%),
    radial-gradient(ellipse 50% 100% at 90%  30%, rgba(170,107,68,.18)   0%, transparent 55%);
  opacity: 0.38;
  z-index: 1;
}

/* Top vignette — darker at top, fades to nothing */
.perfil-cover::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.55) 0%, transparent 60%);
  z-index: 3;
}

/* ── EQ visualizer bars ─────────────────────────────────────── */
.perfil-cover-eq {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 100%;
  display: flex;
  align-items: flex-end;
  gap: 2px;
  padding: 0 2px;
  z-index: 2;
}
.perfil-cover-eq span {
  flex: 1;
  min-width: 0;
  border-radius: 2px 2px 0 0;
  background: linear-gradient(
    to top,
    var(--user-color, #AA6B44) 0%,
    rgba(255,255,255,.35)      55%,
    transparent                100%
  );
  opacity: 0.55;
  animation: eq-bar 1.4s ease-in-out infinite alternate;
  transform-origin: bottom;
  height: 25%;
}
@keyframes eq-bar {
  from { height: var(--eq-lo, 8%);  }
  to   { height: var(--eq-hi, 75%); }
}

/* ── Stagger durations & delays via nth-child ───────────────── */
.perfil-cover-eq span:nth-child(2n)   { animation-duration: 1.1s; animation-delay: -.45s; }
.perfil-cover-eq span:nth-child(3n)   { animation-duration: 1.7s; animation-delay: -.9s;  }
.perfil-cover-eq span:nth-child(5n)   { animation-duration: 0.85s; animation-delay: -.2s; }
.perfil-cover-eq span:nth-child(7n)   { animation-duration: 2.2s; animation-delay: -1.3s; }
.perfil-cover-eq span:nth-child(11n)  { animation-duration: 1.5s; animation-delay: -.65s; }
.perfil-cover-eq span:nth-child(13n)  { animation-duration: 1.0s; animation-delay: -.05s; }
.perfil-cover-eq span:nth-child(4n)   { --eq-lo: 20%; --eq-hi: 65%; }
.perfil-cover-eq span:nth-child(6n)   { --eq-lo: 5%;  --eq-hi: 90%; }
.perfil-cover-eq span:nth-child(8n)   { --eq-lo: 30%; --eq-hi: 55%; }
.perfil-cover-eq span:nth-child(9n)   { --eq-lo: 12%; --eq-hi: 80%; opacity: .60; }
.perfil-cover-eq span:nth-child(10n)  { --eq-lo: 3%;  --eq-hi: 50%; opacity: .40; }
.perfil-cover-eq span:nth-child(14n)  { --eq-lo: 40%; --eq-hi: 70%; opacity: .65; }

/* Bottom fade-out overlay */
.perfil-cover-overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 60px;
  background: linear-gradient(to bottom, transparent, rgba(9,6,4,.6));
  z-index: 4;
  pointer-events: none;
}

.perfil-hero {
  background: #fff;
  border-bottom: 1px solid var(--gray-100);
  padding: 0 clamp(1rem, 5vw, 3rem) 2rem;
  position: relative;
}

.perfil-hero-inner {
  max-width: 860px;
  margin: 0 auto;
  display: flex;
  align-items: flex-end;
  gap: 1.75rem;
  flex-wrap: wrap;
  padding-top: 1rem;
}

/* ── Avatar ──────────────────────────────────────────────────── */
.perfil-avatar-wrap {
  position: relative;
  flex-shrink: 0;
  margin-top: -52px;
}

.perfil-avatar-img,
.perfil-avatar-letter {
  width: 110px; height: 110px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-d);
  font-size: 2.8rem; font-weight: 700;
  color: #fff;
  box-shadow: 0 0 0 4px #fff, 0 8px 32px rgba(0,0,0,.18);
  border: none;
  object-fit: cover;
  overflow: hidden;
}

.perfil-avatar-edit {
  position: absolute;
  bottom: 2px; right: 2px;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--brown-700);
  color: #fff;
  border: 2px solid #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background var(--t-f);
}
.perfil-avatar-edit:hover { background: var(--brown-900); }

/* ── Info block ──────────────────────────────────────────────── */
.perfil-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .55rem;
  padding-top: .35rem;
}

.perfil-alias-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
}

.perfil-alias {
  font-family: var(--font-d);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  color: var(--brown-900);
  letter-spacing: -.025em;
  line-height: 1;
  margin: 0;
}

.perfil-public-badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .67rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: #059669;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  border-radius: var(--r-pill);
  padding: 2px 8px;
}

.perfil-bio {
  font-size: .9rem;
  color: var(--brown-700);
  line-height: 1.6;
  margin: 0;
  max-width: 520px;
}

.perfil-affinity-box {
  display: inline-flex;
  flex-direction: column;
  gap: .42rem;
  padding: .78rem .95rem;
  margin: .1rem 0 .1rem;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(196,49,58,.06) 0%, rgba(255,255,255,.88) 100%);
  border: 1px solid rgba(196,49,58,.12);
  box-shadow: 0 8px 24px rgba(26,10,6,.04);
}

.perfil-affinity-title {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .83rem;
  font-weight: 800;
  color: #a82530;
  letter-spacing: -.01em;
}

.perfil-affinity-breakdown {
  display: flex;
  flex-wrap: wrap;
  gap: .42rem;
}

.perfil-affinity-breakdown span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: .32rem .55rem;
  border-radius: 999px;
  background: rgba(255,255,255,.8);
  border: 1px solid rgba(196,49,58,.10);
  color: var(--brown-700);
  font-size: .7rem;
  font-weight: 700;
}

.perfil-meta-row {
  display: flex;
  align-items: center;
  gap: .9rem;
  flex-wrap: wrap;
}

.perfil-meta-item {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .75rem;
  color: var(--gray-400);
  margin-top: .75rem;
}

.perfil-social-link {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .75rem;
  color: var(--brown-500);
  text-decoration: none;
  transition: color var(--t-f);
}
.perfil-social-link:hover { color: var(--brown-900); }

/* ── Hero actions ─────────────────────────────────────────────── */
.perfil-hero-actions {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  flex-shrink: 0;
  padding-top: .35rem;
}

.perfil-edit-btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .78rem;
  font-weight: 600;
  color: var(--brown-700);
  background: rgba(255,255,255,.75);
  border: 1px solid var(--brown-300);
  border-radius: var(--r-pill);
  padding: .45rem 1rem;
  cursor: pointer;
  transition: all var(--t-f);
  white-space: nowrap;
  backdrop-filter: blur(4px);
}
.perfil-edit-btn:hover {
  background: var(--brown-100);
  border-color: var(--brown-500);
  color: var(--brown-900);
}

/* ── Back to comunidad btn — injected left of avatar ─────────── */
.perfil-back-comunidad-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem .9rem;
  border-radius: 100px;
  border: 1.5px solid var(--brown-200);
  background: var(--brown-50);
  color: var(--brown-600);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .02em;
  cursor: pointer;
  transition: background var(--t-f), border-color var(--t-f), color var(--t-f);
  white-space: nowrap;
  align-self: flex-end;
  margin-bottom: .5rem;
}
.perfil-back-comunidad-btn:hover {
  background: var(--brown-100);
  border-color: var(--brown-400);
  color: var(--brown-900);
}

.perfil-community-btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .55rem 1.1rem;
  border-radius: 100px;
  border: 1.5px solid var(--brown-300);
  background: var(--brown-50);
  color: var(--brown-700);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .03em;
  cursor: pointer;
  transition: background var(--t-f), border-color var(--t-f), color var(--t-f);
  white-space: nowrap;
}
.perfil-community-btn:hover {
  background: var(--brown-100);
  border-color: var(--brown-500);
  color: var(--brown-900);
}

.perfil-privacy-btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .78rem;
  font-weight: 600;
  border-radius: var(--r-pill);
  padding: .45rem 1rem;
  cursor: pointer;
  transition: all var(--t-f);
  white-space: nowrap;
  border: 1px solid transparent;
}
.perfil-privacy-btn.is-private {
  color: var(--gray-500);
  background: rgba(255,255,255,.65);
  border-color: var(--gray-300);
}
.perfil-privacy-btn.is-public {
  color: #059669;
  background: #ecfdf5;
  border-color: #a7f3d0;
}
.perfil-privacy-btn:hover { filter: brightness(.94); }

/* ── Stats bar ───────────────────────────────────────────────── */
.perfil-stats-bar {
  max-width: 860px;
  margin: 2.5rem auto 0;
  padding: 0 clamp(1.5rem, 6vw, 4rem);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.1rem;
}

.perfil-stat-card {
  background: #fff;
  border: 1px solid var(--gray-100);
  border-top: 3px solid var(--sc, var(--brown-300));
  border-radius: var(--r-lg, 12px);
  padding: 1.4rem 1rem 1.2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  text-align: center;
  cursor: pointer;
  transition: box-shadow var(--t-f), transform var(--t-f), border-color var(--t-f);
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
}
.perfil-stat-match {
  display: flex;
  align-items: center;
  gap: .3rem;
  font-size: .65rem;
  font-weight: 600;
  color: #e53e3e;
  letter-spacing: .02em;
  margin-top: .1rem;
}

.perfil-stat-card:hover {
  box-shadow: 0 6px 24px rgba(0,0,0,.09);
  transform: translateY(-3px);
}
.perfil-stat-card.is-active {
  box-shadow: 0 6px 24px rgba(0,0,0,.1);
  transform: translateY(-3px);
  background: color-mix(in srgb, var(--sc, var(--brown-300)) 5%, white);
}

.perfil-stat-icon {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--sb, var(--brown-50));
  color: var(--sc, var(--brown-500));
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.perfil-stat-num {
  font-family: var(--font-d);
  font-size: clamp(1.6rem, 2.5vw, 2.1rem);
  font-weight: 800;
  color: var(--brown-900);
  line-height: 1;
  letter-spacing: -.04em;
}

.perfil-stat-label {
  font-size: .67rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--gray-400);
  line-height: 1.2;
}

/* ── Content area ────────────────────────────────────────────── */
.perfil-content {
  max-width: 860px;
  margin: 2rem auto 0;
  padding: 0 clamp(1rem, 5vw, 3rem);
}

.perfil-section-card {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--r-lg, 12px);
  overflow: hidden;
}

.perfil-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.4rem 1.5rem 1rem;
  border-bottom: 1px solid var(--gray-100);
  flex-wrap: wrap;
}

.perfil-section-title {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-d);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--brown-900);
  margin: 0;
}

.perfil-count-badge {
  font-family: var(--font-s, 'DM Sans', sans-serif);
  font-size: .72rem;
  font-weight: 700;
  color: var(--brown-700);
  background: var(--brown-100);
  border-radius: var(--r-pill);
  padding: 1px 7px;
}

.perfil-section-hint {
  font-size: .72rem;
  color: var(--gray-400);
}

/* ── Favorites tracklist ─────────────────────────────────────── */
.perfil-favs-grid {
  display: flex;
  flex-direction: column;
  counter-reset: track-num;
}

.perfil-fav-item {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: .75rem;
  padding: .8rem 1.5rem;
  background: #fff;
  border-bottom: 1px solid var(--gray-50);
  transition: background var(--t-f);
  min-width: 0;
  counter-increment: track-num;
}
.perfil-fav-item:last-child { border-bottom: none; }
.perfil-fav-item.is-clickable { cursor: pointer; }
.perfil-fav-item.is-clickable:hover { background: var(--brown-50, #fdf9f5); }

/* track number + play icon */
.perfil-fav-disc {
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  width: 28px; position: relative;
}
.perfil-fav-disc::before {
  content: counter(track-num);
  font-size: .78rem;
  font-weight: 500;
  color: var(--gray-300);
  font-family: var(--font-s);
  font-variant-numeric: tabular-nums;
  transition: opacity var(--t-f);
}
.perfil-fav-disc svg {
  position: absolute;
  opacity: 0;
  transition: opacity var(--t-f);
  color: var(--brown-500);
}
.perfil-fav-item.is-clickable:hover .perfil-fav-disc::before { opacity: 0; }
.perfil-fav-item.is-clickable:hover .perfil-fav-disc svg { opacity: 1; }

.perfil-fav-info {
  flex: 1;
  min-width: 0;
}

.perfil-fav-titulo {
  font-size: .88rem;
  font-weight: 600;
  color: var(--brown-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.perfil-fav-artista {
  font-size: .75rem;
  color: var(--gray-400);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

.perfil-fav-request-hint {
  color: var(--brown-400);
  opacity: 0;
  transition: opacity var(--t-f);
  flex-shrink: 0;
}
.perfil-fav-item.is-clickable:hover .perfil-fav-request-hint { opacity: 1; }

/* ── Add to fav button (other users' profiles) ───────────────── */
.perfil-add-fav-btn {
  flex-shrink: 0;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1.5px solid var(--gray-200);
  background: none;
  color: var(--gray-400);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: color var(--t-f), border-color var(--t-f), background var(--t-f), transform var(--t-f);
}
.perfil-add-fav-btn:hover {
  color: #e53e3e;
  border-color: #fca5a5;
  background: rgba(229,62,62,.06);
  transform: scale(1.1);
}
.perfil-add-fav-btn.is-faved {
  color: #e53e3e;
  border-color: #fca5a5;
  background: rgba(229,62,62,.06);
  cursor: default;
}
.perfil-add-fav-btn:disabled { cursor: default; }

/* ── Empty states ────────────────────────────────────────────── */
.perfil-empty-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .6rem;
  padding: 3rem 2rem;
  color: var(--gray-300);
}
.perfil-empty-list p {
  font-size: .85rem;
  color: var(--gray-400);
  margin: 0;
}

.perfil-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
  padding: 5rem 2rem;
  max-width: 480px;
  margin: 0 auto;
}

.perfil-empty-icon {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--gray-100);
  display: flex; align-items: center; justify-content: center;
  color: var(--gray-300);
}

.perfil-empty-title {
  font-family: var(--font-d);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--brown-900);
  margin: 0;
}

.perfil-empty-sub {
  font-size: .88rem;
  color: var(--gray-400);
  line-height: 1.6;
  margin: 0;
}

.perfil-btn-back {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .82rem;
  font-weight: 600;
  color: var(--brown-600);
  background: var(--brown-100);
  border-radius: var(--r-pill);
  padding: .55rem 1.2rem;
  text-decoration: none;
  transition: all var(--t-f);
  margin-top: .5rem;
}
.perfil-btn-back:hover { background: var(--brown-200); color: var(--brown-900); }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 700px) {
  .perfil-stats-bar {
    grid-template-columns: repeat(3, 1fr);
  }
  .perfil-hero-inner {
    gap: 1.25rem;
  }
  .perfil-hero-actions {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .perfil-cover { height: 140px; }
}

@media (max-width: 480px) {
  .perfil-avatar-img,
  .perfil-avatar-letter {
    width: 86px; height: 86px;
    font-size: 2.1rem;
  }
  .perfil-avatar-wrap { margin-top: -40px; }
  .perfil-stats-bar {
    grid-template-columns: repeat(3, 1fr);
    gap: .5rem;
  }
  .perfil-stat-num { font-size: 1.5rem; }
  .perfil-alias { font-size: 1.35rem; }
  .perfil-cover { height: 110px; }
}

/* ============================================================
   CONCIERTOS SECTION
   Warm cream — visual continuity with Festivales (ambos claros)
   ============================================================ */

.conciertos-section {
  position: relative;
  background: var(--brown-50);
  padding: 5rem 0 5.5rem;
  overflow: hidden;
  border-top: 1px solid var(--brown-100);
}

/* Top: subtle warm line separating from Festivales white */
.conciertos-section::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(to right,
    transparent 0%,
    rgba(170,107,68,.35) 30%,
    rgba(170,107,68,.35) 70%,
    transparent 100%);
  pointer-events: none;
  z-index: 2;
}

/* Bottom: hard transition into dark Estadísticas */
.conciertos-section::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(to right,
    transparent 0%,
    rgba(44,26,16,.55) 30%,
    rgba(44,26,16,.55) 70%,
    transparent 100%);
  pointer-events: none;
  z-index: 2;
}

/* Radial warm glow behind the title */
.conciertos-glow {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 700px;
  height: 300px;
  background: radial-gradient(ellipse at center, rgba(170,107,68,.08) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.conciertos-section .sl-section {
  position: relative;
  z-index: 1;
}

/* ── Head ── */
.conciertos-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 2.5rem;
}

.conciertos-eyebrow {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-b);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brown-400);
  margin-bottom: .55rem;
}

.conciertos-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--brown-500);
  box-shadow: 0 0 8px rgba(170,107,68,.7);
  animation: concDotPulse 2s ease-in-out infinite;
}

@keyframes concDotPulse {
  0%, 100% { box-shadow: 0 0 6px rgba(170,107,68,.6); }
  50%       { box-shadow: 0 0 14px rgba(170,107,68,1); }
}

/* ── Country filter tabs ── */
.conciertos-filters {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  margin-bottom: 1.5rem;
}

.conciertos-search {
  display: flex;
  align-items: center;
}

.conciertos-search-box {
  width: min(100%, 430px);
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .72rem .95rem;
  border-radius: 18px;
  border: 1px solid rgba(44,26,16,.14);
  background: rgba(255,255,255,.76);
  box-shadow: 0 6px 18px rgba(44,26,16,.04);
  transition: border-color var(--t-f), box-shadow var(--t-f), background var(--t-f);
}

.conciertos-search-box:focus-within {
  border-color: rgba(170,107,68,.38);
  box-shadow: 0 12px 24px rgba(170,107,68,.08);
  background: rgba(255,255,255,.9);
}

.conciertos-search-box svg {
  width: 16px;
  height: 16px;
  color: rgba(44,26,16,.42);
  flex-shrink: 0;
}

.conciertos-search-input {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--brown-900);
  font-family: var(--font-b);
  font-size: .85rem;
  outline: none;
}

.conciertos-search-input::placeholder {
  color: rgba(44,26,16,.42);
}

.conciertos-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  align-items: center;
}

.conciertos-tabs-mes .conciertos-tab {
  font-size: .72rem;
  padding: .26rem .7rem;
  opacity: .85;
}

.conciertos-count {
  font-size: .78rem;
  color: rgba(44,26,16,.45);
  margin: -.5rem 0 1rem;
  letter-spacing: .04em;
}

.conciertos-empty {
  display: none;
  margin: .25rem 0 1.4rem;
  padding: 1rem 1.1rem;
  border-radius: 18px;
  border: 1px solid rgba(44,26,16,.1);
  background: rgba(255,255,255,.72);
  color: rgba(44,26,16,.62);
}

.conciertos-empty strong {
  display: block;
  font-family: var(--font-b);
  font-size: .92rem;
  color: var(--brown-900);
  margin-bottom: .2rem;
}

.conciertos-empty span {
  font-size: .78rem;
}

.conciertos-tab {
  padding: .32rem .85rem;
  border-radius: var(--r-pill);
  border: 1px solid rgba(44,26,16,.15);
  background: rgba(255,255,255,.75);
  color: rgba(44,26,16,.65);
  font-family: var(--font-b);
  font-size: .78rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--t-b);
  white-space: nowrap;
}

.conciertos-tab:hover {
  border-color: rgba(170,107,68,.5);
  color: rgba(44,26,16,.9);
  background: rgba(170,107,68,.1);
}

.conciertos-tab.is-active {
  background: var(--brown-600);
  border-color: var(--brown-500);
  color: #fff;
}

/* ── Grid ── */
.conciertos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 1.25rem;
}

/* ── Card ── */
.concierto-card {
  background: #FFFFFF;
  border: 1px solid rgba(44,26,16,.1);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: transform var(--t-b), box-shadow var(--t-b), border-color var(--t-b);
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 10px rgba(44,26,16,.06);
  position: relative;
}

.concierto-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 32px rgba(44,26,16,.14);
  border-color: rgba(170,107,68,.35);
}

/* ── Poster (image area) ── */
.concierto-poster {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: #EDE0D4;
}

.concierto-img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}

.concierto-card:hover .concierto-img {
  transform: scale(1.04);
}

/* Gradient overlay — bottom fade for date readability */
.concierto-poster-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    transparent 30%,
    rgba(0,0,0,.55) 65%,
    rgba(0,0,0,.82) 100%);
  pointer-events: none;
}

/* No-image fallback — vinyl record style */
.concierto-noimg {
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0;
  background: radial-gradient(ellipse at 40% 30%, #2a2030 0%, #0f0e14 100%);
  position: relative;
}

.concierto-vinyl {
  width: 90px; height: 90px;
  border-radius: 50%;
  background: repeating-radial-gradient(
    circle,
    #1a1820 0px, #1a1820 4px,
    #222030 4px, #222030 8px
  );
  border: 3px solid #2e2c38;
  position: relative;
  opacity: .7;
}

.concierto-vinyl-inner {
  position: absolute;
  inset: 50%; transform: translate(-50%,-50%);
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #0f0e14;
  border: 2px solid var(--brown-700);
}

.concierto-initial {
  position: absolute;
  font-family: var(--font-d);
  font-size: 2.8rem;
  font-weight: 700;
  color: rgba(255,255,255,.12);
  letter-spacing: -.03em;
  pointer-events: none;
}

/* Date badge — overlaid bottom-left */
.concierto-fecha-badge {
  position: absolute;
  bottom: .75rem;
  left: .75rem;
  display: flex;
  align-items: baseline;
  gap: .3rem;
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: var(--r-sm);
  padding: .28rem .55rem;
  line-height: 1;
}

.concierto-dia {
  font-family: var(--font-d);
  font-size: 1.45rem;
  font-weight: 700;
  color: #fff;
  line-height: 1;
}

.concierto-mesanio {
  display: flex;
  flex-direction: column;
  gap: .06rem;
  font-family: var(--font-b);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--brown-300);
  text-transform: uppercase;
  line-height: 1;
}

/* Country flag — top-right */
.concierto-flag {
  position: absolute;
  top: .6rem;
  right: .6rem;
  font-size: 1.25rem;
  line-height: 1;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.5));
}

/* ── Body ── */
.concierto-body {
  padding: .9rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: .34rem;
  flex: 1;
}

.concierto-artista {
  font-family: var(--font-d);
  font-size: .95rem;
  font-weight: 700;
  color: var(--brown-900);
  line-height: 1.25;
  min-height: 2.5em;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.concierto-venue {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr);
  align-items: start;
  column-gap: .35rem;
  font-size: .72rem;
  color: rgba(44,26,16,.5);
  font-family: var(--font-b);
  line-height: 1.35;
  min-height: 1.95rem;
}

.concierto-venue svg {
  margin-top: .15rem;
  flex-shrink: 0;
}

.concierto-ciudad {
  font-size: .75rem;
  color: rgba(44,26,16,.42);
  font-family: var(--font-b);
  margin-top: .05rem;
  min-height: 1.2em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.concierto-genero-tag {
  display: inline-flex;
  align-items: center;
  margin-top: .25rem;
  padding: .18rem .55rem;
  border-radius: var(--r-pill);
  background: rgba(170,107,68,.15);
  border: 1px solid rgba(170,107,68,.25);
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--brown-300);
  font-family: var(--font-b);
  align-self: flex-start;
  min-height: 1.45rem;
  max-width: calc(100% - 2.6rem);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.concierto-cta {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-top: auto;
  padding-top: .65rem;
  font-family: var(--font-b);
  font-size: .75rem;
  font-weight: 600;
  color: var(--brown-400);
  text-decoration: none;
  letter-spacing: .02em;
  transition: color var(--t-f);
}

.concierto-cta:hover {
  color: var(--brown-200);
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .conciertos-head {
    flex-direction: column;
    align-items: flex-start;
  }
  .conciertos-search-box {
    width: 100%;
  }
  .conciertos-tabs {
    width: 100%;
  }
  .conciertos-grid {
    grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
    gap: 1rem;
  }
}

@media (max-width: 600px) {
  .conciertos-section {
    padding: 3.5rem 0 4rem;
  }
  .conciertos-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: .75rem;
  }
  .concierto-artista { font-size: .88rem; }
  .concierto-dia { font-size: 1.25rem; }
}

@media (max-width: 380px) {
  .conciertos-grid {
    grid-template-columns: 1fr 1fr;
    gap: .6rem;
  }
}

/* ============================================================
   HELP SYSTEM — Custom Tooltips · Welcome Hint · Help Modal
   ============================================================ */

/* ── Custom Tooltip ───────────────────────────────────────── */
.sl-tooltip {
  position: fixed;
  z-index: 9990;
  pointer-events: none;
  background: var(--brown-950);
  color: var(--brown-200);
  font-family: var(--font-b);
  font-size: .71rem;
  font-weight: 500;
  line-height: 1.4;
  padding: .3rem .65rem;
  border-radius: var(--r-sm);
  max-width: 190px;
  text-align: center;
  white-space: normal;
  box-shadow: 0 4px 16px rgba(20,10,4,.35);
  border: 1px solid rgba(255,255,255,.07);
  opacity: 0;
  transition: opacity 140ms ease;
}
.sl-tooltip.sl-tooltip--vis {
  opacity: 1;
}

/* ── Help FAB ─────────────────────────────────────────────── */
.help-fab {
  position: fixed;
  bottom: calc(5.2rem + 46px + .75rem);
  right: 2rem;
  z-index: 998;
  height: 38px;
  padding: 0 .9rem 0 .7rem;
  border-radius: var(--r-pill);
  background: var(--brown-50);
  color: var(--brown-800);
  border: 1.5px solid var(--brown-200);
  box-shadow: 0 2px 12px rgba(20,10,4,.18), 0 1px 3px rgba(20,10,4,.10);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: .35rem;
  transition: background var(--t-b), transform var(--t-b), box-shadow var(--t-b),
              color var(--t-b), border-color var(--t-b);
}
.help-fab:hover {
  background: var(--white);
  border-color: var(--brown-300);
  color: var(--brown-900);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(20,10,4,.22);
}
.help-fab-label {
  font-family: var(--font-b);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .02em;
}
@keyframes helpFabPulse {
  0%,100% { box-shadow: 0 2px 12px rgba(20,10,4,.18); }
  50%     { box-shadow: 0 2px 12px rgba(20,10,4,.18), 0 0 0 6px rgba(170,107,68,.15); }
}
.help-fab--pulse {
  animation: helpFabPulse 1.6s ease-in-out 3;
}

@media (max-width: 600px) {
  .help-fab {
    bottom: calc(5rem + 42px + .75rem);
    right: 1.2rem;
    height: 34px;
    padding: 0 .75rem 0 .6rem;
  }
  .help-fab-label { font-size: .72rem; }
}

/* ── Help Modal Overlay ───────────────────────────────────── */
.help-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(20,10,4,.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 260ms ease;
}
.help-modal-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

/* ── Help Modal ───────────────────────────────────────────── */
.help-modal {
  position: relative;
  background: var(--brown-50);
  border-radius: var(--r-xl);
  width: 100%;
  max-width: 820px;
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  padding: 2.25rem 2rem 2.25rem;
  box-shadow: var(--sh-xl);
  transform: translateY(20px) scale(.97);
  transition: transform 360ms var(--t-sp), opacity 260ms ease;
  opacity: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--brown-200) transparent;
}
.help-modal-overlay.open .help-modal {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.help-modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--brown-100);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brown-600);
  transition: background var(--t-f), color var(--t-f);
}
.help-modal-close:hover {
  background: var(--brown-200);
  color: var(--brown-900);
}

.help-modal-head {
  text-align: center;
  margin-bottom: 1.75rem;
  padding-right: 1.5rem; /* space for close button */
}
.help-modal-icon {
  font-size: 2rem;
  line-height: 1;
  margin-bottom: .55rem;
}
.help-modal-title {
  font-family: var(--font-d);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--brown-900);
  margin-bottom: .3rem;
}
.help-modal-sub {
  font-size: .81rem;
  color: var(--brown-400);
  letter-spacing: .01em;
}

/* ── Mobile nav subtitles ─────────────────────────────────── */
.nav-link--sub {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .1rem;
  line-height: 1.2;
}
.nav-link--sub small {
  font-size: .68rem;
  font-weight: 400;
  font-family: var(--font-b);
  color: rgba(219,168,130,.45);
  letter-spacing: .01em;
  line-height: 1;
}

/* ── Feature Grid ─────────────────────────────────────────── */
.help-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
@media (max-width: 600px) {
  .help-feature-grid      { grid-template-columns: 1fr 1fr; gap: 9px; }
}
@media (max-width: 400px) {
  .help-feature-grid      { grid-template-columns: 1fr; }
  .help-modal             { padding: 1.75rem 1.25rem 1.75rem; border-radius: var(--r-lg); }
  .help-modal-title       { font-size: 1.2rem; }
}
.help-feature-card {
  background: var(--white);
  border-radius: var(--r-md);
  padding: 1rem 1.1rem 1.1rem;
  border: 1px solid var(--brown-100);
  box-shadow: var(--sh-xs);
  transition: box-shadow var(--t-b), border-color var(--t-b);
}
.help-feature-card:hover {
  box-shadow: var(--sh-sm);
  border-color: var(--brown-200);
}
.help-feature-card--cta {
  border-color: rgba(196,49,58,.22);
  background: linear-gradient(145deg, #fff 0%, #fdf0f0 100%);
}
.help-feature-card--cta:hover {
  border-color: rgba(196,49,58,.42);
}
.help-feature-icon {
  font-size: 1.3rem;
  line-height: 1;
  margin-bottom: .45rem;
}
.help-feature-title {
  font-family: var(--font-d);
  font-size: .92rem;
  font-weight: 700;
  color: var(--brown-900);
  margin-bottom: .35rem;
}
.help-feature-text {
  font-size: .77rem;
  color: var(--brown-500);
  line-height: 1.56;
  margin: 0;
}
.help-feature-text strong {
  color: var(--brown-700);
  font-weight: 600;
}
.help-cta-btn {
  display: inline-block;
  margin-top: .8rem;
  background: var(--red-600);
  color: #fff;
  border: none;
  border-radius: var(--r-pill);
  padding: .42rem 1.1rem;
  font-family: var(--font-b);
  font-size: .77rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--t-f), transform var(--t-f);
}
.help-cta-btn:hover {
  background: var(--red-500);
  transform: translateY(-1px);
}

/* ============================================================
   EVENT FAVORITES — Festivals & Concerts heart buttons
   ============================================================ */

/* Heart button on festival/concert cards */
.event-fav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1.5px solid var(--brown-200);
  border-radius: 50%;
  background: rgba(255,255,255,.85);
  color: var(--brown-500);
  cursor: pointer;
  transition: background var(--t-f), border-color var(--t-f), transform var(--t-f);
  flex-shrink: 0;
}
.event-fav-btn:hover {
  background: #fff1f2;
  border-color: var(--red-500);
  color: var(--red-500);
  transform: scale(1.12);
}
.event-fav-btn.is-fav {
  background: #fff1f2;
  border-color: var(--red-500);
  color: var(--red-600);
}

/* Festival card body: button alongside title */
.news-card-body {
  position: relative;
}
.news-card-body .event-fav-btn {
  position: absolute;
  top: .6rem;
  right: .6rem;
}

/* Concert card body footer row */
.concierto-body-footer {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: auto;
  padding-top: .75rem;
  padding-right: 2.4rem;
  flex-wrap: wrap;
  position: relative;
  min-height: 2rem;
}
.concierto-body-footer .concierto-cta {
  margin-top: 0;
}
.concierto-body-footer .event-fav-btn {
  position: absolute;
  bottom: .7rem;
  right: .7rem;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(44,26,16,.15);
  color: var(--brown-400);
  backdrop-filter: blur(4px);
  box-shadow: 0 1px 4px rgba(44,26,16,.12);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--t-f), border-color var(--t-f), color var(--t-f), transform var(--t-f);
}
.concierto-body-footer .event-fav-btn:hover {
  background: rgba(196,49,58,.1);
  border-color: var(--red-500);
  color: var(--red-500);
  transform: scale(1.1);
}
.concierto-body-footer .event-fav-btn.is-fav {
  background: rgba(196,49,58,.15);
  border-color: var(--red-500);
  color: var(--red-500);
}

/* ============================================================
   PERFIL — Clickable stat cards + accordion panels
   ============================================================ */

/* Clickable stat card */
.perfil-stat-card--clickable {
  cursor: pointer;
  position: relative;
  transition: background var(--t-f), box-shadow var(--t-f), transform var(--t-f);
}
.perfil-stat-card--clickable:hover {
  background: var(--brown-50);
  box-shadow: 0 4px 16px rgba(74,42,24,.10);
  transform: translateY(-2px);
}
.perfil-stat-card--clickable.is-active {
  background: var(--brown-100);
  box-shadow: inset 0 2px 6px rgba(74,42,24,.10);
}
.perfil-stat-card--clickable.is-active .perfil-stat-chevron svg {
  transform: rotate(180deg);
}

/* Chevron indicator */
.perfil-stat-chevron {
  margin-top: .3rem;
  color: var(--brown-400);
  transition: transform var(--t-f);
}
.perfil-stat-chevron svg {
  transition: transform .2s ease;
  display: block;
}

/* Accordion panels — hidden by default */
.perfil-accordion-panel {
  display: none;
}
.perfil-accordion-panel.is-open {
  display: block;
  animation: panelSlide .2s ease;
}
@keyframes panelSlide {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Event list (festivals / concerts in profile) ─── */
/* ── Festival cards in profile (with image) ────────── */
.perfil-fest-grid {
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.perfil-fest-card {
  display: flex;
  align-items: center;
  gap: .9rem;
  background: var(--brown-50);
  border: 1px solid var(--brown-100);
  border-radius: var(--r-md);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: background var(--t-f), border-color var(--t-f);
}
a.perfil-fest-card:hover {
  background: var(--brown-100);
  border-color: var(--brown-200);
}
.perfil-fest-img {
  width: 90px;
  height: 64px;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
}
.perfil-fest-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.perfil-fest-img-fallback {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #2a1200, #7a3000);
  display: flex;
  align-items: center;
  justify-content: center;
}
.perfil-fest-img-fallback span {
  font-size: 1.2rem;
  font-weight: 800;
  color: rgba(255,255,255,.5);
  letter-spacing: -.02em;
}
.perfil-fest-info {
  flex: 1;
  min-width: 0;
}
.perfil-fest-title {
  font-weight: 600;
  font-size: .87rem;
  color: var(--brown-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.perfil-fest-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .2rem .6rem;
  margin-top: .2rem;
  font-size: .75rem;
  color: var(--gray-400);
}
.perfil-fest-actions {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding-right: .75rem;
  flex-shrink: 0;
}

/* ── Concert items in profile (date-block style) ───── */
.perfil-conc-list {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.perfil-conc-item {
  display: flex;
  align-items: center;
  gap: .9rem;
  background: var(--brown-50);
  border: 1px solid var(--brown-100);
  border-radius: var(--r-md);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: background var(--t-f), border-color var(--t-f);
}
a.perfil-conc-item:hover {
  background: var(--brown-100);
  border-color: var(--brown-200);
}
.perfil-conc-date {
  width: 52px;
  min-height: 58px;
  flex-shrink: 0;
  background: var(--brown-700);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: .3rem 0;
}
.perfil-conc-day {
  font-size: 1.35rem;
  font-weight: 800;
  color: #fff;
  line-height: 1;
}
.perfil-conc-mon {
  font-size: .65rem;
  font-weight: 600;
  text-transform: uppercase;
  color: rgba(255,255,255,.75);
  letter-spacing: .05em;
  margin-top: .1rem;
}
.perfil-conc-year {
  font-size: .6rem;
  color: rgba(255,255,255,.45);
  margin-top: .05rem;
}
.perfil-conc-info {
  flex: 1;
  min-width: 0;
}
.perfil-conc-title {
  font-weight: 600;
  font-size: .87rem;
  color: var(--brown-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.perfil-conc-venue {
  display: flex;
  flex-wrap: wrap;
  gap: .2rem .6rem;
  margin-top: .2rem;
  font-size: .75rem;
  color: var(--gray-400);
}
.perfil-conc-actions {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding-right: .75rem;
  flex-shrink: 0;
}

/* Legacy event list (keep for safety) */
.perfil-event-list {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

/* ── Peticiones list in profile ──────────────────────────── */
.perfil-req-list {
  display: flex;
  flex-direction: column;
  gap: .45rem;
}
.perfil-req-item {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .65rem .9rem;
  background: var(--brown-50);
  border: 1px solid var(--brown-100);
  border-radius: var(--r-md);
}
.perfil-req-disc {
  margin-top: .15rem;
  color: var(--brown-400);
  flex-shrink: 0;
}
.perfil-req-info {
  flex: 1;
  min-width: 0;
}
.perfil-req-title {
  font-weight: 600;
  font-size: .87rem;
  color: var(--brown-900);
}
.perfil-req-artist {
  font-size: .78rem;
  color: var(--gray-400);
  margin-top: .1rem;
}
.perfil-req-ded {
  font-size: .76rem;
  color: var(--brown-500);
  font-style: italic;
  margin-top: .2rem;
}
.perfil-req-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .25rem;
  flex-shrink: 0;
}
.perfil-req-time {
  font-size: .72rem;
  color: var(--gray-400);
  white-space: nowrap;
}
.perfil-req-badge-random {
  font-size: .68rem;
  font-weight: 600;
  background: var(--brown-100);
  color: var(--brown-700);
  border-radius: var(--r-pill);
  padding: .1rem .45rem;
}

/* ── Chat messages list in profile ──────────────────────── */
.perfil-msg-list {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  max-height: 500px;
  overflow-y: auto;
}
.perfil-msg-item {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
}
.perfil-msg-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .72rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  overflow: hidden;
}
.perfil-msg-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.perfil-msg-body {
  flex: 1;
  background: var(--brown-50);
  border: 1px solid var(--brown-100);
  border-radius: 0 var(--r-md) var(--r-md) var(--r-md);
  padding: .5rem .75rem;
}
.perfil-msg-text {
  font-size: .84rem;
  color: var(--brown-900);
  line-height: 1.45;
  display: block;
  word-break: break-word;
}
.perfil-msg-time {
  font-size: .7rem;
  color: var(--gray-400);
  margin-top: .2rem;
  display: block;
}

/* ── Perfil stats bar — 5 cards ──────────────────────────────── */
.perfil-stats-bar {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.1rem;
  padding: 0 clamp(1.5rem, 6vw, 4rem);
  max-width: 860px;
  margin: 2.5rem auto 0;
}
@media (max-width: 860px) {
  .perfil-stats-bar {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 540px) {
  .perfil-stats-bar {
    grid-template-columns: repeat(2, 1fr);
    gap: .5rem;
  }
}