/* ===== CSS VARIABLES ===== */
:root {
  --bg: #100d19;
  --surface: #191428;
  --surface2: #241f3d;
  --surface3: #2f2a52;
  --red: #9b5cff;
  --red-dim: #7b49e1;
  --gold: #7ee5b1;
  --gold-dim: #3ea87a;
  --purple: #9b5cff;
  --purple-dim: #7b49e1;
  --green: #7ee5b1;
  --green-dim: #3ea87a;
  --text: #f3f0ff;
  --text-muted: #b9b0ff;
  --text-dim: #968eb2;
  --border: rgba(255,255,255,0.08);
  --ambient-purple: rgba(155,92,255,0.12);
  --ambient-green: rgba(126,229,177,0.08);
  --grid-line: rgba(255,255,255,0.025);
  --active-glow-purple: rgba(155,92,255,0.16);
  --active-glow-green: rgba(126,229,177,0.14);
  --app-grid: linear-gradient(var(--grid-line) 1px, transparent 1px),
              linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  --radius: 14px;
  --player-h: 96px;
}

/* ===== SPLASH SCREEN ===== */
#splash-screen {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at top left, rgba(155,92,255,0.20), transparent 28%),
              radial-gradient(circle at bottom right, rgba(126,229,177,0.14), transparent 26%),
              var(--bg);
}
.splash-card {
  text-align: center; padding: 42px 32px; border-radius: 28px;
  background: rgba(25,20,40,0.93); border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 30px 100px rgba(0,0,0,0.35);
  backdrop-filter: blur(10px); animation: splashIntro 0.9s ease-out forwards;
  max-width: 420px;
}
.splash-logo {
  display: inline-flex;
  justify-content: center;
  width: 100%;
  max-width: 260px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 50%;
}
.splash-logo img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 50%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.24);
}
.splash-tag {
  margin-top: 12px; font-size: 11px; text-transform: uppercase;
  letter-spacing: 4px; color: var(--text-muted);
}
.splash-sub {
  margin-top: 16px; font-size: 16px; line-height: 1.5;
  color: var(--text); max-width: 340px; margin-left: auto; margin-right: auto;
}
.splash-card.hide { opacity: 0; pointer-events: none; transition: opacity 0.45s ease; }
@keyframes splashIntro { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }

/* ===== RESET ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { min-height: 100%; background: var(--bg); color: var(--text); font-family: 'DM Sans', sans-serif; }
body {
  position: relative;
  isolation: isolate;
}
body::before,
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
body::before {
  inset: -12%;
  background: radial-gradient(ellipse at 18% 22%, var(--ambient-purple), transparent 42%),
              radial-gradient(ellipse at 82% 76%, var(--ambient-green), transparent 40%);
  opacity: 0.7;
  animation: ambientDrift 34s ease-in-out infinite alternate;
}
body::after {
  background-image: var(--app-grid);
  background-size: 44px 44px;
}
@keyframes ambientDrift {
  from { transform: translate3d(-1%, -0.5%, 0); }
  to { transform: translate3d(1%, 0.5%, 0); }
}
body { overflow: hidden; }

#app { opacity: 1; transition: opacity 0.35s ease; }

/* ===== LAYOUT ===== */
#app { display: flex; height: 100vh; overflow: hidden; }
#sidebar-toggle { display: none; }

/* ===== SIDEBAR ===== */
.logo-wrap { padding: 22px 20px 18px; border-bottom: 1px solid var(--border); }
.logo {
  font-family: 'Bebas Neue', sans-serif; font-size: 28px; letter-spacing: 3px;
  background: linear-gradient(90deg, var(--purple), var(--green));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.logo-sub { font-size: 9px; letter-spacing: 4px; color: var(--text-muted); text-transform: uppercase; margin-top: 2px; }

/* position: relative solo hace falta en la seccion que contiene el boton "+"
   (posicionado de forma absoluta). En la seccion "MENU" no tiene hijos
   posicionados, asi que no produce ningun efecto. */
.nav-section { padding: 16px 12px 8px; position: relative; }
.nav-label {
  font-size: 9px; letter-spacing: 3px; color: var(--text-dim);
  text-transform: uppercase; padding: 0 8px 8px;
  display: flex; align-items: center; gap: 8px; margin-bottom: 2px;
}
/* Jerarquia: una guia luminosa corta separa los bloques del menu. */
.nav-label::before {
  content: ''; flex: 0 0 2px; height: 10px; border-radius: 2px;
  background: linear-gradient(180deg, var(--purple), var(--green));
  opacity: 0.75;
}
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 8px; cursor: pointer;
  font-size: 13.5px; color: var(--text-muted); transition: all 0.15s; margin-bottom: 2px;
  position: relative;
}
.nav-item:hover { background: var(--surface2); color: var(--text); }
.nav-item.active {
  color: var(--text);
  background: linear-gradient(90deg, rgba(155,92,255,0.26), rgba(126,229,177,0.10) 70%, transparent);
  box-shadow: inset 0 0 0 1px rgba(155,92,255,0.22), 0 0 16px var(--active-glow-green);
}
/* Barra lateral luminosa del item activo (::before libre: .nav-item no lo usaba). */
.nav-item.active::before {
  content: ''; position: absolute; left: 0; top: 50%;
  width: 3px; height: 20px; margin-left: -6px;
  transform: translateY(-50%);
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--purple), var(--green));
  box-shadow: 0 0 10px var(--purple);
}
.nav-item .ni { font-size: 15px; width: 18px; text-align: center; }

/* Boton "+" de Mis Playlists: hoy es un <button> nativo sin estilo.
   Absoluto a la derecha de su .nav-section (position:relative) para quedar
   EN LA MISMA LINEA que "MIS PLAYLISTS". Al salir del flujo, la lista
   #playlists-list de abajo sube y nunca se acomoda a su lado. */
.create-playlist-btn {
  position: absolute;
  right: 12px;
  top: 8px;                         /* centra los 26px con la linea de 9px del label */
  width: 26px; height: 26px;
  border: 1px solid rgba(126,229,177,0.32); border-radius: 8px;
  background: rgba(126,229,177,0.10); color: var(--green);
  font-size: 16px; line-height: 1; font-family: inherit;
  cursor: pointer; transition: all 0.15s;
}
.create-playlist-btn:hover {
  background: rgba(126,229,177,0.20); border-color: var(--green-dim);
  box-shadow: 0 0 12px var(--active-glow-green);
}
.create-playlist-btn:active { transform: scale(0.94); }

.playlists-list { padding: 0 12px; flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.pl-item {
  padding: 7px 10px; font-size: 12px; color: var(--text-muted);
  cursor: pointer; border-radius: 6px; transition: all 0.15s;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pl-item:hover { color: var(--text); background: var(--surface2); }

/* ===== MAIN AREA ===== */
#main { flex: 1; display: flex; flex-direction: column; overflow: hidden; }

/* ===== TOP BAR ===== */
#topbar {
  height: 56px; min-height: 56px; background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 12px; padding: 0 20px; z-index: 5;
}
.search-wrap { flex: 1; max-width: 360px; position: relative; }
.search-wrap input {
  width: 100%; background: var(--surface2); border: 1px solid var(--border);
  border-radius: 20px; padding: 7px 14px 7px 36px;
  color: var(--text); font-size: 13px; font-family: 'DM Sans', sans-serif; outline: none; transition: border-color 0.15s;
}
.search-wrap input:focus { border-color: var(--purple-dim); }
.search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 14px; pointer-events: none; }
/* Controles de búsqueda móvil: ocultos en escritorio (comportamiento actual intacto) */
.search-toggle, .search-clear { display: none; }
.tb-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.tb-btn {
  background: var(--surface2); border: 1px solid var(--border); border-radius: 20px;
  padding: 6px 14px; font-size: 12px; color: var(--text-muted); cursor: pointer; transition: all 0.15s;
}
.tb-btn:hover { color: var(--text); border-color: var(--green-dim); }
.tb-btn.primary { background: var(--purple); border-color: var(--purple); color: #fff; }
.tb-btn.primary:hover { background: var(--purple-dim); }
.avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: linear-gradient(135deg, var(--purple), var(--green));
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600; cursor: pointer;
}

/* ===== CONTENT AREA ===== */
#content { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 24px 20px 100px; }
#content::-webkit-scrollbar { width: 4px; }
#content::-webkit-scrollbar-thumb { background: var(--surface3); border-radius: 2px; }

/* ===== SECTION HEADERS ===== */
.section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.section-title {
  display: flex; align-items: center; gap: 8px;
  font-family: 'Bebas Neue', sans-serif; font-size: 20px; letter-spacing: 1px; color: var(--text);
}
.section-title::before {
  content: ''; flex: 0 0 3px; height: 17px; border-radius: 2px;
  background: linear-gradient(180deg, var(--purple), var(--green));
}
.see-all {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 4px 9px; border: 1px solid rgba(126,229,177,0.28); border-radius: 999px;
  background: rgba(126,229,177,0.07); color: var(--green);
  font-size: 11px; cursor: pointer; letter-spacing: 1px; text-transform: uppercase;
  transition: transform 0.15s;
}
.see-all:hover { border-color: rgba(126,229,177,0.48); }
.see-all:active { transform: scale(0.97); }

.icon-btn {
  background: transparent; border: none; color: var(--text-muted); cursor: pointer;
  width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; transition: all 0.2s;
}
.icon-btn:hover { color: var(--text); background: rgba(255,255,255,0.08); }

/* ===== HORIZONTAL SCROLL ROW ===== */
.cards-row { display: flex; gap: 14px; overflow-x: auto; -webkit-overflow-scrolling: touch; margin-left: -6px; padding: 12px 6px 16px; }
.cards-row::-webkit-scrollbar { height: 3px; }
.cards-row::-webkit-scrollbar-thumb { background: var(--surface3); }

/* ===== SONG CARDS ===== */
.song-card {
  min-width: 148px; max-width: 148px;
  background: linear-gradient(145deg, rgba(36,31,61,0.86), rgba(25,20,40,0.94)) padding-box,
              linear-gradient(135deg, rgba(155,92,255,0.62), rgba(126,229,177,0.42)) border-box;
  border: 1px solid transparent;
  border-radius: 18px; padding: 10px; cursor: pointer;
  box-shadow: 0 8px 20px rgba(0,0,0,0.2), 0 0 14px rgba(155,92,255,0.06);
  transition: transform 0.14s ease-out;
}
.song-card:hover {
  background: linear-gradient(145deg, rgba(36,31,61,0.86), rgba(25,20,40,0.94)) padding-box,
              linear-gradient(135deg, var(--purple-dim), var(--green-dim)) border-box;
  transform: translateY(-2px);
}
.song-card.playing {
  background: linear-gradient(145deg, rgba(36,31,61,0.88), rgba(25,20,40,0.96)) padding-box,
              linear-gradient(135deg, var(--purple), var(--green)) border-box;
  box-shadow: 0 0 18px var(--active-glow-purple), 0 8px 20px rgba(0,0,0,0.2);
}
.song-card:active { transform: scale(0.98); }
.song-thumb {
  width: 100%; aspect-ratio: 1; border-radius: 10px;
  margin-bottom: 8px; position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center; font-size: 32px;
  isolation: isolate;
}
.song-thumb[style*="linear-gradient"]:not([style*="url("]) {
  text-shadow: 0 0 14px rgba(255,255,255,0.36);
}
.song-thumb[style*="linear-gradient"]:not([style*="url("])::before,
.song-thumb[style*="linear-gradient"]:not([style*="url("])::after {
  content: '';
  position: absolute;
  pointer-events: none;
  z-index: 1;
}
.song-thumb[style*="linear-gradient"]:not([style*="url("])::before {
  inset: 0;
  background: linear-gradient(125deg, transparent 26%, rgba(255,255,255,0.18) 44%, transparent 62%);
}
.song-thumb[style*="linear-gradient"]:not([style*="url("])::after {
  right: 12px;
  bottom: 12px;
  width: 24px;
  height: 16px;
  opacity: 0.82;
  background: linear-gradient(to top, var(--green) 0 6px, transparent 6px) 0 100% / 3px 16px no-repeat,
              linear-gradient(to top, var(--green) 0 13px, transparent 13px) 7px 100% / 3px 16px no-repeat,
              linear-gradient(to top, var(--green) 0 9px, transparent 9px) 14px 100% / 3px 16px no-repeat,
              linear-gradient(to top, var(--green) 0 16px, transparent 16px) 21px 100% / 3px 16px no-repeat;
}
.play-overlay {
  position: absolute; inset: 0; background: rgba(0,0,0,0.5);
  z-index: 2; display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.15s; font-size: 24px;
  text-shadow: none;
}
.song-card:hover .play-overlay { opacity: 1; }
.song-card .st { font-size: 12.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }
.song-card .sa { font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.song-card .sc { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
.song-card .sl { font-size: 10px; color: var(--text-dim); }

/* ===== ARTIST CARDS ===== */
.artist-card { min-width: 110px; max-width: 110px; text-align: center; cursor: pointer; transition: transform 0.15s; }
.artist-card:hover { transform: translateY(-3px); }
.artist-card:active { transform: scale(0.97); }
.artist-avatar {
  width: 80px; height: 80px; border-radius: 50%;
  margin: 0 auto 8px; display: flex; align-items: center; justify-content: center;
  font-size: 28px; position: relative;
}
.radar-ring {
  position: absolute; inset: -4px; border-radius: 50%; pointer-events: none;
  background: linear-gradient(135deg, var(--purple), var(--green));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  opacity: 0;
}
.artist-card.emerging .radar-ring { opacity: 1; }
.artist-card.emerging .artist-avatar {
  box-shadow: 0 0 12px rgba(155,92,255,0.20), 0 0 10px rgba(126,229,177,0.16);
}
/* Pulso expansivo del radar: aro separado del .radar-ring porque la mascara
   radial de este recorta a sus descendientes y lo ocultaria al expandirse. */
.artist-card.emerging .artist-avatar::after {
  content: ''; position: absolute; inset: -4px;
  border: 2px solid var(--purple); border-radius: 50%;
  pointer-events: none; opacity: 0;
  animation: radar-pulse 2s ease-out infinite;
}
.artist-card.emerging:nth-child(2) .artist-avatar::after { animation-delay: -0.34s; }
.artist-card.emerging:nth-child(3) .artist-avatar::after { animation-delay: -0.68s; }
.artist-card.emerging:nth-child(4) .artist-avatar::after { animation-delay: -1.02s; }
.artist-card.emerging:nth-child(5) .artist-avatar::after { animation-delay: -1.36s; }
.artist-card.emerging:nth-child(6) .artist-avatar::after { animation-delay: -1.70s; }
@keyframes radar-pulse {
  0%   { transform: scale(1);    opacity: 0.6; }
  100% { transform: scale(1.15); opacity: 0; }
}
.artist-card .an { font-size: 12px; font-weight: 500; }
.artist-card .ag { font-size: 10px; color: var(--text-muted); margin-top: 2px; }
.artist-card .af {
  display: inline-block; text-align: center;
  max-width: 100%; margin-top: 4px; padding: 2px 6px;
  border: 1px solid rgba(126,229,177,0.28); border-radius: 999px;
  background: rgba(126,229,177,0.09); color: var(--green);
  font-size: 9px; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (prefers-reduced-motion: reduce) {
  .artist-card { transition: none; }
  .artist-card:hover,
  .artist-card:active,
  .see-all:active { transform: none; }
  .see-all { transition: none; }
}

/* ===== TRENDING LIST ===== */
.trending-list { display: flex; flex-direction: column; gap: 2px; }
.trend-item {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  border-radius: var(--radius); cursor: pointer; transition: background 0.15s;
}
.trend-item:hover { background: var(--surface2); }
.trend-item.playing { background: var(--surface3); box-shadow: 0 0 16px var(--active-glow-purple); }
.trend-rank { font-family: 'Space Mono', monospace; font-size: 12px; color: var(--text-muted); width: 20px; text-align: right; }
.trend-rank.top { color: var(--green); }
.trend-thumb { width: 40px; height: 40px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
.trend-info { flex: 1; min-width: 0; }
.trend-info .ti { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trend-info .ta { font-size: 11px; color: var(--text-muted); }
.trend-meta { text-align: right; }
.trend-meta .tm { font-size: 11px; color: var(--text-muted); }
.trend-meta .tv { font-size: 10px; }

/* ===== GENRE GRID ===== */
.genres-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.genre-pill {
  padding: 12px 10px; border-radius: var(--radius); text-align: center;
  font-size: 12px; font-weight: 500; cursor: pointer; transition: all 0.15s; border: 1px solid var(--border);
}
.genre-pill:hover { transform: scale(1.03); }
.genre-pill.active {
  border: 2px solid var(--green);
  box-shadow: 0 0 12px rgba(126,229,177,0.35), 0 0 18px var(--active-glow-green);
  transform: scale(1.05);
  color: var(--green);
}
.gp-0 { background: linear-gradient(135deg,#170c26,#2c1b4d); color:#b99cff; border-color:#3d1c5f; }
.gp-1 { background: linear-gradient(135deg,#0b1123,#112048); color:#8ae; border-color:#103040; }
.gp-2 { background: linear-gradient(135deg,#10201a,#1a3442); color:#7ee5b1; border-color:#1a4c33; }
.gp-3 { background: linear-gradient(135deg,#1f1834,#2f2a52); color:#c8e; border-color:#3d2f6e; }
.gp-4 { background: linear-gradient(135deg,#1a1034,#261f53); color:#b3d6ff; border-color:#301f6c; }
.gp-5 { background: linear-gradient(135deg,#150f22,#2c1f4b); color:#d4aefe; border-color:#3d1f6e; }

/* ===== BADGES ===== */
.badge { display: inline-block; font-size: 9px; letter-spacing: 1px; text-transform: uppercase; padding: 2px 7px; border-radius: 10px; font-weight: 500; margin-left: 6px; }
.badge-gold { background: rgba(126,229,177,0.15); color: var(--green); border: 1px solid var(--green-dim); }
.badge-red  { background: rgba(155,92,255,0.15); color: var(--purple); border: 1px solid var(--purple-dim); }
.badge-new  { background: rgba(95,184,95,0.15);  color: #5fb85f;    border: 1px solid rgba(95,184,95,0.3); }
.stat-badge { display: inline-flex; align-items: center; gap: 4px; background: var(--surface3); border-radius: 20px; padding: 3px 9px; font-size: 10px; color: var(--text-muted); }
.stat-badge.hot { color: var(--green); }

/* ===== DIVIDER ===== */
.divider { height: 1px; background: var(--border); margin: 20px 0; }

/* ===== PAGE TITLES ===== */
.page-title { font-family: 'Bebas Neue', sans-serif; font-size: 26px; letter-spacing: 2px; margin-bottom: 6px; }
.page-sub { font-size: 13px; color: var(--text-muted); margin-bottom: 22px; }

/* ===== UPLOAD FORM ===== */
.upload-form { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; }
.form-row { margin-bottom: 14px; }
.form-row label { display: block; font-size: 11px; color: var(--text-muted); margin-bottom: 6px; letter-spacing: 1px; text-transform: uppercase; }
.form-row input, .form-row select, .form-row textarea {
  width: 100%; background: var(--surface2); border: 1px solid var(--border);
  border-radius: 8px; padding: 9px 12px; color: var(--text); font-size: 13px;
  font-family: 'DM Sans', sans-serif; outline: none; transition: border-color 0.15s;
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus { border-color: var(--purple-dim); }
.form-row select option { background: var(--surface2); }
.drop-zone {
  border: 2px dashed var(--border); border-radius: var(--radius);
  padding: 32px; text-align: center; cursor: pointer; transition: all 0.15s;
}
.drop-zone:hover { border-color: var(--purple-dim); background: rgba(155,92,255,0.08); }
.drop-zone .dz-icon { font-size: 32px; margin-bottom: 10px; }
.drop-zone .dz-text { font-size: 13px; color: var(--text-muted); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.upload-btn {
  background: linear-gradient(90deg, var(--purple), var(--purple-dim));
  border: none; border-radius: 8px; padding: 11px 24px;
  color: #fff; font-size: 14px; font-family: 'DM Sans', sans-serif;
  cursor: pointer; font-weight: 500; width: 100%; transition: opacity 0.15s;
}
.upload-btn:hover { opacity: 0.9; }

/* ===== SETTINGS ===== */
.settings-grid {
  display: grid; grid-template-columns: repeat(2, minmax(260px, 1fr)); gap: 16px;
}
.settings-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px; display: flex; flex-direction: column; gap: 14px;
}
.settings-card-title {
  font-size: 12px; color: var(--text-muted); letter-spacing: 1px; text-transform: uppercase; font-weight: 600;
}
.settings-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--text);
}
.settings-row.compact { align-items: center; }
.settings-row strong { color: var(--green); font-size: 12px; }
.settings-label { font-size: 13px; font-weight: 600; }
.settings-hint { font-size: 11px; color: var(--text-muted); }
.settings-toggle-row, .settings-check-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.settings-check-row label { font-size: 13px; color: var(--text); }
.settings-switch {
  position: relative; display: inline-block; width: 48px; height: 28px;
}
.settings-switch input { opacity: 0; width: 0; height: 0; }
.settings-slider {
  position: absolute; inset: 0; border-radius: 999px; background: rgba(255,255,255,0.12); border: 1px solid var(--border); transition: 0.2s ease;
}
.settings-slider::before {
  content: ""; position: absolute; width: 18px; height: 18px; left: 4px; top: 4px; border-radius: 50%; background: #fff; transition: 0.2s ease;
}
.settings-switch input:checked + .settings-slider {
  background: linear-gradient(90deg, var(--green), #39c68c);
  border-color: rgba(126,229,177,0.5);
}
.settings-switch input:checked + .settings-slider::before { transform: translateX(20px); }
.settings-select {
  width: 120px; background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; color: var(--text); padding: 8px 10px; font-size: 12px;
}
.settings-action-btn {
  width: 100%; margin-top: 4px; background: linear-gradient(90deg, var(--purple), var(--purple-dim));
  border: none; border-radius: 10px; color: #fff; padding: 10px 14px; font-weight: 600; cursor: pointer;
}
.settings-action-btn.secondary { background: rgba(255,255,255,0.06); color: var(--text); border: 1px solid var(--border); }
.settings-action-btn.danger { background: linear-gradient(90deg, #c0392b, #d35400); }
.settings-card.danger-card { border-color: rgba(192,57,43,0.5); }
.settings-delete-preview {
  max-height: 220px; overflow: auto; background: rgba(255,255,255,0.02); border: 1px solid var(--border); border-radius: 10px; padding: 12px; font-size: 12px; color: var(--text-muted);
}
.settings-delete-preview ul { margin: 0; padding-left: 18px; }
.settings-delete-preview li + li { margin-top: 6px; }

/* ===== PROFILE ===== */
.profile-header {
  background: linear-gradient(180deg, rgba(155,92,255,0.16) 0%, transparent 100%);
  border-radius: var(--radius); padding: 24px; margin-bottom: 20px;
  display: flex; align-items: center; gap: 20px;
}
.profile-avatar { width: 80px; height: 80px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 36px; flex-shrink: 0; }
.profile-info .pn { font-family: 'Bebas Neue', sans-serif; font-size: 26px; letter-spacing: 1px; }
.profile-info .pt { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.profile-stats { display: flex; gap: 20px; margin-top: 10px; }
.ps-item .pv { font-size: 16px; font-weight: 600; color: var(--green); }
.ps-item .pk { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; }
.follow-btn {
  margin-top: 10px; background: transparent; border: 1px solid var(--purple);
  color: var(--purple); border-radius: 20px; padding: 6px 20px; font-size: 12px; cursor: pointer; transition: all 0.15s;
}
.follow-btn:hover, .follow-btn.following { background: var(--purple); color: #fff; }

/* ===== SOCIAL CHIPS ===== */
.social-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 4px 10px;
  font-size: 12px;
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.social-chip:hover {
  background: var(--surface3);
  border-color: var(--purple-dim);
  transform: translateY(-1px);
}
.social-chip .social-icon {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.social-chip .social-icon svg {
  width: 13px;
  height: 13px;
  fill: currentColor;
  display: block;
}
.social-chip .social-user {
  color: var(--text);
  font-weight: 500;
}

/* ===== COMMENTS ===== */
.comment-item { display: flex; gap: 10px; margin-bottom: 14px; }
.c-avatar { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 500; }
.c-body .c-user { font-size: 12px; font-weight: 500; margin-bottom: 3px; }
.c-body .c-text { font-size: 13px; color: var(--text-muted); line-height: 1.4; }
.c-body .c-actions { display: flex; gap: 10px; margin-top: 5px; }
.c-action { font-size: 11px; color: var(--text-dim); cursor: pointer; }
.c-action:hover { color: var(--text-muted); }
.comment-input-row { display: flex; gap: 8px; margin-top: 10px; }
.comment-input-row input {
  flex: 1; background: var(--surface2); border: 1px solid var(--border); border-radius: 20px;
  padding: 8px 14px; color: var(--text); font-size: 13px; font-family: 'DM Sans', sans-serif; outline: none;
}
.send-btn { background: var(--purple); border: none; border-radius: 20px; padding: 8px 14px; color: #fff; cursor: pointer; font-size: 13px; }

/* ===== RANKING TABS ===== */
.rank-tabs { display: flex; gap: 0; margin-bottom: 16px; background: var(--surface); border-radius: 8px; padding: 3px; }
.rank-tab { flex: 1; padding: 7px; text-align: center; font-size: 12px; color: var(--text-muted); cursor: pointer; border-radius: 6px; transition: all 0.15s; }
.rank-tab.active { background: var(--surface3); color: var(--text); }

/* ===== BATTLES ===== */
.battle-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin-bottom: 12px; }
.battle-vs { display: flex; align-items: center; gap: 12px; }
.battle-artist { flex: 1; text-align: center; }
.battle-artist .ba-emoji { font-size: 40px; margin-bottom: 6px; }
.battle-artist .ba-cover {
  width: 100%; max-width: 140px; aspect-ratio: 1; object-fit: cover;
  border-radius: 12px; margin: 0 auto 8px; display: block;
  background: var(--surface2);
}
.battle-artist .ba-name { font-size: 13px; font-weight: 500; }
.battle-artist .ba-artist { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.battle-artist .ba-votes { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.battle-artist.voted-a .ba-cover { outline: 2px solid var(--green); outline-offset: 2px; }
.battle-artist.voted-b .ba-cover { outline: 2px solid var(--purple); outline-offset: 2px; }
.vs-badge { font-family: 'Bebas Neue', sans-serif; font-size: 22px; color: var(--green); padding: 0 8px; }
.vote-bar { height: 6px; border-radius: 3px; overflow: hidden; background: var(--surface3); margin-top: 10px; }
.vote-fill { height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--purple), var(--green)); }
.vote-btn {
  background: transparent; border: 1px solid var(--border); border-radius: 8px; padding: 7px;
  font-size: 11px; color: var(--text-muted); cursor: pointer; transition: all 0.15s; width: 100%; margin-top: 6px;
}
.vote-btn:hover { border-color: var(--purple); color: var(--purple); }
.vote-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.vote-btn:disabled:hover { border-color: var(--border); color: var(--text-muted); }

/* ===== MODAL: PLAN PRO ACTIVADO ===== */
.pro-active-hero { text-align: center; padding: 8px 0 4px; }
.pro-active-hero .pro-icon { font-size: 48px; margin-bottom: 8px; }
.pro-active-title {
  font-family: 'Bebas Neue', sans-serif; font-size: 26px; letter-spacing: 1px;
  color: var(--gold); margin-bottom: 8px;
}
.pro-active-benefits { text-align: left; display: inline-block; margin: 8px 0 4px; }
.pro-active-benefits li {
  color: var(--text-muted); font-size: 13px; line-height: 1.7; margin-bottom: 4px;
}
.pro-active-benefits li::marker { color: var(--green); }
.pro-active-expiry { font-size: 12px; color: var(--text-dim); margin-top: 10px; }

/* ===== STORIES ===== */
.stories-row { display: flex; gap: 12px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
.story-bubble { min-width: 64px; text-align: center; cursor: pointer; }
.story-ring { width: 60px; height: 60px; border-radius: 50%; background: linear-gradient(135deg, var(--purple), var(--green)); padding: 2px; margin: 0 auto 6px; }
.story-inner { width: 100%; height: 100%; border-radius: 50%; background: var(--bg); display: flex; align-items: center; justify-content: center; font-size: 26px; overflow: hidden; }
.story-inner img, .story-inner video { width: 100%; height: 100%; object-fit: cover; }
.story-add-btn { width: 100%; height: 100%; border-radius: 50%; background: var(--bg); display: flex; align-items: center; justify-content: center; font-size: 24px; color: var(--green); }
.story-name { font-size: 10px; color: var(--text-muted); }

/* ===== HISTORIA VIEWER ===== */
.historia-viewer { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 10000; display: flex; align-items: center; justify-content: center; }
.historia-backdrop { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.95); }
.historia-content { position: relative; width: 100%; max-width: 420px; height: 100vh; max-height: 100vh; display: flex; flex-direction: column; z-index: 1; }
.historia-topbar { display: flex; align-items: center; gap: 10px; padding: 16px; z-index: 2; }
.historia-progress { display: flex; gap: 4px; width: 100%; margin-bottom: 8px; flex-wrap: nowrap; }
.historia-progress-bar { flex: 1; height: 3px; background: rgba(255,255,255,0.2); border-radius: 2px; overflow: hidden; position: relative; }
.historia-progress-fill { height: 100%; background: #fff; width: 0%; transition: width 0.3s linear; }
.historia-user-info { display: flex; align-items: center; gap: 10px; flex: 1; }
.historia-avatar { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, #1a0510, #2d1020); display: flex; align-items: center; justify-content: center; font-size: 16px; overflow: hidden; }
.historia-avatar img { width: 100%; height: 100%; object-fit: cover; }
.historia-username { color: #fff; font-size: 13px; font-weight: 600; }
.historia-time { color: rgba(255,255,255,0.6); font-size: 11px; }
.historia-close-btn { background: transparent; border: none; color: #fff; font-size: 22px; cursor: pointer; padding: 8px; line-height: 1; }
.historia-media { flex: 1; display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; }
.historia-media img { max-width: 100%; max-height: 100%; object-fit: contain; }
.historia-media video { max-width: 100%; max-height: 100%; object-fit: contain; }
.historia-nav-left, .historia-nav-right { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.1); color: #fff; border: none; width: 40px; height: 40px; border-radius: 50%; font-size: 22px; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 2; }
.historia-nav-left { left: 8px; }
.historia-nav-right { right: 8px; }
.historia-nav-left:hover, .historia-nav-right:hover { background: rgba(255,255,255,0.25); }

/* ===== REWARDS ===== */
.reward-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.reward-icon { font-size: 28px; }
.reward-info { flex: 1; }
.reward-info .ri { font-size: 13px; font-weight: 500; }
.reward-info .rs { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.reward-pts { font-family: 'Space Mono', monospace; font-size: 14px; color: var(--green); }

/* ===== COLLABORATIVE PLAYLISTS ===== */
.collab-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; }
.collab-card .cc-title { font-size: 13px; font-weight: 500; margin-bottom: 4px; }
.collab-card .cc-sub { font-size: 11px; color: var(--text-muted); margin-bottom: 10px; }
.collab-avatars { display: flex; margin-bottom: 8px; }
.collab-av { width: 26px; height: 26px; border-radius: 50%; margin-right: -6px; display: flex; align-items: center; justify-content: center; font-size: 12px; border: 2px solid var(--surface); background: var(--surface3); }
.join-btn { background: transparent; border: 1px solid var(--green-dim); color: var(--green); border-radius: 6px; padding: 5px 12px; font-size: 11px; cursor: pointer; transition: all 0.15s; }
.join-btn:hover { background: rgba(126,229,177,0.12); }

/* ===== PLAYER ===== */
/* BLOQUE 7 - reproductor (solo apariencia).
   #notification (L1143) es el boton flotante "▶ cancion - artista"; NO se toca. */
#player {
  height: var(--player-h); min-height: var(--player-h);
  /* Vidrio ligero: rgba debajo + blur pequeno. Sin soporte de backdrop-filter
     el rgba solo queda: por eso es oscuro, no transparente. */
  background: rgba(22,18,34,0.72);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  backdrop-filter: blur(10px) saturate(120%);
  border-top: 1px solid transparent;
  background-clip: padding-box;
  display: grid; grid-template-columns: 30% 40% 30%; align-items: center;
  gap: 20px; padding: 0 24px; position: sticky; bottom: 0; z-index: 20;
}
/* Borde superior luminoso morado -> menta, sin border-image. */
#player::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--purple-dim), var(--green-dim), var(--purple-dim));
  opacity: 0.85;
  pointer-events: none;
}
/* Fallback: sin backdrop-filter el rgba(...,0.72) deja pasar demasiado fondo.
   Aqui se sube a un tono casi solido para que --text (#f3f0ff) y
   --text-muted (#b9b0ff) mantienen >= 4.5:1 sobre lo que pasa por debajo. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #player {
    background: rgba(19,16,29,0.97);
  }
}
.player-left {
  display: flex; align-items: center; gap: 14px; min-width: 0; cursor: pointer;
}
.now-thumb { width: 50px; height: 50px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; }
.now-info { overflow: hidden; }
.now-info .nt { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.now-info .na { font-size: 12px; color: var(--text-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player-center { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ctrl-btns { display: flex; align-items: center; gap: 10px; }
.ctrl-btn {
  background: transparent; border: none; color: var(--text-muted); cursor: pointer;
  font-size: 18px; width: 40px; height: 40px; display: inline-flex;
  align-items: center; justify-content: center; border-radius: 50%; transition: all 0.2s;
}
.ctrl-btn:hover { color: var(--text); background: rgba(255,255,255,0.06); }
.ctrl-btn.play-btn {
  background: var(--purple); color: #fff; width: 44px; height: 44px; font-size: 18px;
  box-shadow: 0 0 16px rgba(155,92,255,0.28);
  transition: background 0.2s ease, box-shadow 0.2s ease;
}
.ctrl-btn.play-btn:hover { background: var(--purple-dim); box-shadow: 0 0 22px rgba(155,92,255,0.42); }
.progress-row { width: 100%; display: flex; align-items: center; gap: 12px; }
.time { font-size: 11px; color: var(--text-muted); font-family: 'Space Mono', monospace; width: 36px; }
.time.right { text-align: right; }
.progress-bar { flex: 1; height: 6px; background: rgba(255,255,255,0.05); border-radius: 999px; cursor: pointer; position: relative; }
.progress-fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--purple), var(--green));
  box-shadow: 0 0 10px rgba(126,229,177,0.22);
  transition: width 0.3s ease; pointer-events: none;
}
.player-right { display: flex; align-items: center; justify-content: flex-end; gap: 10px; min-width: 0; }
.vol-group { display: flex; align-items: center; gap: 8px; }
.vol-group span { font-size: 14px; }
.vol-bar { width: 110px; height: 6px; background: rgba(255,255,255,0.05); border-radius: 999px; cursor: pointer; }
.vol-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--purple), var(--green)); width: 70%; }

#player-panel { position: fixed; top: 0; bottom: 0; right: 0; width: 400px; display: none; z-index: 50; }
#player-panel.open { display: block; }
.panel-backdrop { position: fixed; top: 0; bottom: 0; left: 0; right: 400px; background: rgba(0,0,0,0.58); }
.panel-card {
  position: absolute; top: 0; bottom: 0; right: 0; width: 400px;
  background: var(--surface); border-left: 1px solid rgba(255,255,255,0.08); padding: 24px;
  display: flex; flex-direction: column; gap: 18px;
}
.panel-close {
  position: absolute; top: 18px; right: 18px; background: none; border: none;
  color: var(--text); font-size: 18px; cursor: pointer;
}
.panel-top { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.panel-cover { width: 100%; min-height: 240px; border-radius: 24px; background: linear-gradient(135deg, rgba(155,92,255,0.18), rgba(126,229,177,0.12));
  display: flex; align-items: center; justify-content: center; font-size: 64px;
  position: relative; overflow: hidden; isolation: isolate; }
/* Portada SIN imagen real: mismo tratamiento que .song-thumb del bloque 2.
   Se distingue por el estilo inline que inyecta JavaScript.js L1575
   (linear-gradient) frente al de L1572 (url(...)); :not([style*="url(")]
   deja intactas las portadas con imagen real. El brillo va en ::before
   (pointer-events:none) para no capturar el clic de abrir/cerrar. */
.panel-cover[style*="linear-gradient"]:not([style*="url("]) {
  text-shadow: 0 0 16px rgba(255,255,255,0.38);
}
.panel-cover[style*="linear-gradient"]:not([style*="url("])::before {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(125deg, transparent 26%, rgba(255,255,255,0.16) 44%, transparent 62%);
  z-index: 0;
}
.panel-cover > * { position: relative; z-index: 1; }
.player-equalizer {
  display: block;
  width: 100%;
  height: 88px;
  flex: 0 0 88px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(155,92,255,0.08), rgba(155,92,255,0.02));
}
.player-equalizer[hidden] { display: none; }
.panel-meta { display: flex; flex-direction: column; gap: 14px; }
.panel-title { font-size: 24px; font-weight: 700; line-height: 1.1; }
.panel-artist { font-size: 13px; color: var(--text-muted); }
.panel-buttons { display: flex; align-items: center; gap: 10px; }
.panel-option-btn {
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); color: var(--text);
  width: 36px; height: 36px; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center; cursor: pointer;
}
.panel-progress-row { display: flex; align-items: center; gap: 12px; }
.panel-time { font-size: 12px; color: var(--text-muted); font-family: 'Space Mono', monospace; width: 40px; text-align: center; }
.panel-progress-bar { flex: 1; height: 8px; background: rgba(255,255,255,0.06); border-radius: 999px; cursor: pointer; position: relative; }
.panel-progress-fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--purple), var(--green));
  box-shadow: 0 0 10px rgba(126,229,177,0.22);
  width: 0%; transition: width 0.2s ease;
}
.panel-controls-full { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.panel-controls-full .ctrl-btn { width: 38px; height: 38px; }
.panel-controls-full .play-btn { width: 48px; height: 48px; }
#panel-lyrics {
  /* El HTML trae style="...padding:14px" inline (index.html L664): hace falta ID
     + !important para ganarle al inline. Unico elemento con inline anulado. */
  background: linear-gradient(145deg, rgba(36,31,61,0.72), rgba(25,20,40,0.86));
  border: 1px solid rgba(155,92,255,0.22);
  border-radius: 20px;
  padding: 20px !important;
  color: var(--text); min-height: 160px; overflow-y: auto; -webkit-overflow-scrolling: touch;
  font-size: 13px; line-height: 1.85;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.panel-queue { display: flex; flex-direction: column; gap: 12px; }
.panel-queue-title { font-size: 14px; color: var(--text); font-weight: 700; }
.queue-list { display: flex; flex-direction: column; gap: 10px; }
.queue-item {
  display: grid; grid-template-columns: 44px 1fr auto; gap: 10px; align-items: center;
  /* Mismo lenguaje que .song-card: relleno padding-box + borde degradado,
     sin border-image. */
  padding: 10px 12px;
  background: linear-gradient(145deg, rgba(36,31,61,0.78), rgba(25,20,40,0.88)) padding-box,
              linear-gradient(135deg, rgba(155,92,255,0.5), rgba(126,229,177,0.32)) border-box;
  border: 1px solid transparent;
  border-radius: 14px; cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.queue-item:hover { transform: translateY(-1px); }
.qi-thumb { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.qi-info { overflow: hidden; }
.qi-info div:first-child { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qi-info div:last-child { font-size: 11px; color: var(--text-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qi-time { font-size: 11px; color: var(--text-muted); font-family: 'Space Mono', monospace; }

@media (max-width: 1080px) {
  #player-panel { width: 100%; right: 0; }
  .panel-backdrop { right: 0; }
  .panel-card { width: 100%; }
}
@media (max-width: 900px) {
  #player { grid-template-columns: 1fr; padding: 16px; gap: 14px; }
  .player-right { justify-content: flex-start; flex-wrap: wrap; }
  .panel-top { grid-template-columns: 1fr; }
  .panel-cover { min-height: 220px; }
  .panel-controls-full { gap: 10px; flex-wrap: wrap; }
}

@media (max-width: 768px) {
  :root {
    --player-h: 96px;
  }

  /* DIAGNOSTICO sticky: la regla base `body { overflow: hidden }` (L102) se
     sobreescribia aqui con overflow-y:auto, y el bloque siguiente anadia
     overflow-x:hidden. Con html tambien en overflow-y:auto, el overflow de body
     YA NO se propaga al viewport (solo se propaga si el elemento raiz tiene
     overflow visible), asi que body se convertia en su PROPIA caja de scroll.
     Como body tiene height:auto, crece con el contenido y nunca scrollea:
     el scrollport de #topbar era un contenedor que nunca se mueve, por eso
     sticky no se pegaba. #app y #main si pasan a overflow:visible en movil, asi
     que no hay ningun otro ancestro scroller.
     Correccion: dejar UN SOLO elemento scroller (el viewport). */
  html {
    overflow: visible;
    overflow-x: clip;            /* clip, no hidden: nunca crea caja de scroll */
  }

  body {
    overflow: visible;
    overflow-x: clip;
  }

  .profile-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  .profile-info {
    width: 100%;
    min-width: 0;
  }

  .profile-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 12px;
  }

  .modal-card {
    max-height: 90vh;
    overflow-y: auto;
  }

  .settings-grid {
    grid-template-columns: 1fr;
  }

  #app {
    display: block;
    height: auto;
    min-height: 100vh;
    overflow: visible;
  }

  #sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 280px;
    height: 100vh;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    z-index: 1200;
    background: var(--bg);
    border-right: 1px solid var(--border);
  }

  #sidebar.open {
    transform: translateX(0);
  }

  #main {
    width: 100%;
    min-height: 100vh;
    overflow: visible;
  }

  /* #topbar pegado al viewport (unico scroller tras el fix de html/body).
     flex:0 0 auto evita que la barra se encoja en el flex column de #main:
     el flex-shrink por defecto (1) comprimiria los 56px si el contenido
     presionara, deformando la barra. Aqui si es necesario. */
  #topbar {
    position: sticky;
    top: 0;
    z-index: 4;
    background: var(--surface);
    flex: 0 0 auto;
  }

  #content {
    padding: 16px 14px calc(var(--player-h) + env(safe-area-inset-bottom, 0px) + 24px);
    overflow: visible;
  }

  #player {
    position: fixed;
    bottom: env(safe-area-inset-bottom, 0px);
    left: 0;
    right: 0;
    width: 100%;
    grid-template-columns: auto 1fr auto;
    padding: 8px 10px;
    gap: 8px;
  }

  #player .now-thumb {
    width: 40px;
    height: 40px;
    font-size: 18px;
  }

  #player .player-left {
    gap: 8px;
  }

  #player .now-info .nt {
    font-size: 12px;
  }

  #player .now-info .na {
    font-size: 10px;
  }

  #player .player-center {
    gap: 2px;
  }

  #player .ctrl-btns {
    gap: 2px;
  }

  #player .ctrl-btn {
    width: 40px;
    height: 40px;
    font-size: 16px;
  }

  #player .ctrl-btn.play-btn {
    width: 44px;
    height: 44px;
    font-size: 16px;
  }

  #player .progress-row {
    gap: 6px;
  }

  #player .time {
    width: 30px;
    font-size: 10px;
  }

  #player #shuffle-btn,
  #player #player-repeat-btn,
  #player .player-right > .icon-btn:not(.hide-player-btn),
  #player .player-right > .vol-group {
    display: none;
  }

  #player .player-right {
    gap: 0;
    flex-wrap: nowrap;
  }

  #player .hide-player-btn {
    width: 32px;
    height: 32px;
    padding: 4px;
    font-size: 16px !important;
  }

  #topbar {
    padding: 0 12px;
  }

  /* ===== BUSCADOR COLAPSABLE (solo móvil) =====
     Colapsado: solo el botón circular 🔍 (mismo tamaño que #sidebar-toggle).
     Expandido: el input ocupa todo el ancho y .tb-actions se oculta.

     DIAGNÓSTICO del apilado: .search-wrap es display:block (no hay ningún
     display:flex en él). Sus hijos en flujo son el <button class=search-toggle>
     (inline-flex) y el <input>; los otros dos —.search-icon y .search-clear—
     son position:absolute, o sea fuera de flujo. Al pasar el input a
     width:100%, el inline no cabe junto al botón y salta de línea, partiendo
     el contenido en dos dentro de los 56px del topbar. Convertir .search-wrap
     en flex container pone botón e input en fila por construcción.

     El input usa flex:0 1 auto (NO 0 0 auto) a propósito: colapsado tiene
     width:0 y debe ocupar 0; expandido,width:100% como base pero necesita
     flex-shrink:1 para encogerse junto al botón en vez de desbordar. */
  .search-wrap {
    display: flex;
    align-items: center;
    max-width: none;
    flex: 0 0 auto;
    margin-left: 44px;              /* deja sitio al ☰ fixed */
    transition: flex-grow 0.22s ease, flex-basis 0.22s ease;
  }
  .search-wrap.expanded { flex: 1 1 auto; }
  .search-wrap .search-icon { display: none; }  /* en móvil manda la lupa real */

  .search-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px; height: 38px;
    border-radius: 10px;
    background: var(--surface2);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 17px;
    cursor: pointer;
    flex: 0 0 auto;
  }

  .search-wrap input {
    flex: 0 1 auto;
    width: 0;
    min-width: 0;
    padding: 0;
    opacity: 0;
    border-color: transparent;
    pointer-events: none;
    transition: width 0.22s ease, padding 0.22s ease, opacity 0.15s ease;
  }
  .search-wrap.expanded input {
    /* padding izq 14px: los 34px originales eran para el .search-icon de
       escritorio, que en movil esta display:none; ademas el boton de la lupa
       (.search-toggle) queda ahora a la izquierda en la misma fila.
       padding der 34px: lo usa el boton ✕ (.search-clear, position:absolute). */
    width: 100%;
    padding: 7px 34px 7px 14px;
    opacity: 1;
    border-color: var(--border);
    pointer-events: auto;
  }
  .search-wrap.expanded input:focus { border-color: var(--purple-dim); }

  .search-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px; height: 22px;
    border: 0;
    border-radius: 50%;
    background: var(--surface3);
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
  }
  .search-clear[hidden] { display: none; }
  .search-wrap:not(.expanded) .search-clear { display: none; }

  #topbar.searching .tb-actions { display: none; }


  .user-chip {
    gap: 0;
    padding: 0;
    border: 0;
    background: transparent;
  }

  #topbar-username,
  #topbar-type-badge,
  #topbar-pro-badge,
  #user-chip .uc-dot {
    display: none !important;
  }

  #topbar-avatar {
    cursor: pointer;
  }

  /* Menú de usuario en móvil: objetivos táctiles grandes.
     Se usa #user-menu (no .user-menu) porque las reglas base están
     declaradas más abajo en el archivo (misma especificidad, orden
     posterior) y anularían estas; el ID gana por especificidad. */
  #user-menu { min-width: 200px; }
  #user-menu .um-item {
    padding: 12px; min-height: 44px; font-size: 13px;
  }
  #user-menu .um-item:active {
    background: var(--surface2); color: var(--text);
  }

  #sidebar-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--surface2);
    border: 1px solid var(--border);
    color: var(--text);
    cursor: pointer;
    font-size: 18px;
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 1300;
    /* Fondo solido + sombra: asi se lee como boton flotante por encima del
       contenido y no como un hueco que "tapa" un titulo. backdrop-filter
       difumina lo que pasa por debajo en lugar de ocultarlo. */
    background: rgba(36,31,61,0.92);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.04);
  }

  /* Menu abierto: el boton (left:12px + 38px de ancho -> ocupa hasta x=50px) se
     superpone al logo del sidebar. Se reserva el hueco en el propio logo para
     que NASAMARK empiece despues del boton. NO se mueve ni atenua el boton:
     es el control que cierra el menu y opacity+hover no existen en tactil. */
  #sidebar.open .logo-wrap { padding-left: 60px; }

  /* La regla sticky de #topbar vive mas arriba en este mismo media query,
     junto a #main y #content. Aqui solo queda documentado el apilado: el
     boton ☰ (z-index 1300) se dibuja por encima de la barra pegada
     (z-index 4), de modo que se apoya sobre su propia barra. */

  .sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 1100;
  }

  .sidebar-backdrop.show {
    opacity: 1;
    pointer-events: auto;
  }

  .kick-chat-floating-artist {
    width: calc(100vw - 24px);
    max-width: 360px;
    min-width: 0;
    height: 360px;
    max-height: 60vh;
    resize: none;
  }
}

/* ===== VIEW ROUTING ===== */
.view { display: none; }
.view.active { display: block; }

/* ===== NOTIFICATION TOAST ===== */
#notification {
  position: fixed; bottom: 100px; right: 16px; z-index: 9999;
  background: var(--surface3); border: 1px solid var(--border);
  border-radius: 8px; padding: 10px 14px; font-size: 12px;
  opacity: 0; transform: translateY(10px); transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none; max-width: 240px;
}
#notification.show { opacity: 1; transform: translateY(0); pointer-events: auto; }

/* ===== SCROLLBAR GLOBAL ===== */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--surface3); border-radius: 2px; }

/* ===== AUTH OVERLAY ===== */
#auth-overlay {
  position: fixed; inset: 0; z-index: 9000;
  background: var(--bg);
  display: none; align-items: center; justify-content: center;
  overflow: hidden;
}

.auth-bg {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden;
}
.auth-bg-circle {
  position: absolute; border-radius: 50%;
}
.auth-bg-circle:nth-child(1) { width: 600px; height: 600px; top: -200px; left: -150px; background: radial-gradient(circle, rgba(155,92,255,0.12), transparent 70%); }
.auth-bg-circle:nth-child(2) { width: 400px; height: 400px; bottom: -100px; right: -100px; background: radial-gradient(circle, rgba(126,229,177,0.1), transparent 70%); }
.auth-bg-grid {
  position: absolute; inset: 0;
  background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: 0.4;
}

.auth-box {
  position: relative; z-index: 1;
  width: 100%; max-width: 440px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 36px 36px 32px;
  box-shadow: 0 40px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04) inset;
  animation: authSlideIn 0.4s cubic-bezier(0.22,1,0.36,1);
}
@keyframes authSlideIn {
  from { opacity: 0; transform: translateY(24px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.auth-logo {
  text-align: center; margin-bottom: 28px;
}
.auth-logo .al-brand {
  font-family: 'Bebas Neue', sans-serif; font-size: 34px; letter-spacing: 4px;
  background: linear-gradient(90deg, var(--purple), var(--green));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.auth-logo .al-sub {
  font-size: 10px; letter-spacing: 4px; color: var(--text-dim); text-transform: uppercase; margin-top: 2px;
}

/* TYPE SELECTOR */
.auth-type-selector {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 24px;
}
.auth-type-card {
  background: var(--surface2); border: 2px solid var(--border);
  border-radius: 10px; padding: 14px 10px; text-align: center;
  cursor: pointer; transition: all 0.2s;
}
.auth-type-card:hover { border-color: var(--purple-dim); }
.auth-type-card.selected {
  border-color: var(--purple);
  background: rgba(155,92,255,0.12);
}
.auth-type-card .atc-icon { font-size: 26px; margin-bottom: 6px; }
.auth-type-card .atc-label {
  font-family: 'Bebas Neue', sans-serif; font-size: 14px; letter-spacing: 1px; color: var(--text);
}
.auth-type-card .atc-desc { font-size: 10px; color: var(--text-muted); margin-top: 2px; }

/* TABS */
.auth-tabs {
  display: flex; background: var(--surface2); border-radius: 8px;
  padding: 3px; margin-bottom: 24px; gap: 0;
}
.auth-tab {
  flex: 1; text-align: center; padding: 8px; font-size: 13px;
  color: var(--text-muted); cursor: pointer; border-radius: 6px; transition: all 0.15s;
}
.auth-tab.active { background: var(--surface3); color: var(--text); }

/* FORM FIELDS */
.auth-field { margin-bottom: 14px; }
.auth-field label { display: block; font-size: 11px; color: var(--text-muted); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 6px; }
.auth-field input, .auth-field select {
  width: 100%; background: var(--surface2); border: 1px solid var(--border);
  border-radius: 8px; padding: 10px 14px; color: var(--text);
  font-size: 13px; font-family: 'DM Sans', sans-serif; outline: none;
  transition: border-color 0.15s;
}
.auth-field input:focus, .auth-field select:focus { border-color: var(--purple-dim); }
.auth-field select { cursor: pointer; }
.auth-field select option { background: var(--surface2); }

.auth-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.auth-submit {
  width: 100%; margin-top: 20px;
  background: linear-gradient(90deg, var(--purple), var(--purple-dim));
  border: none; border-radius: 8px; padding: 12px;
  color: #fff; font-size: 14px; font-weight: 500;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer; transition: opacity 0.15s, transform 0.1s;
  letter-spacing: 0.5px;
}
.auth-submit:hover { opacity: 0.9; transform: translateY(-1px); }
.auth-submit:active { transform: translateY(0); }

.auth-divider {
  display: flex; align-items: center; gap: 10px; margin: 18px 0;
  font-size: 11px; color: var(--text-dim);
}
.auth-divider::before, .auth-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}

.auth-social { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.google-signin-btn-wrap {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 12px;
  overflow: visible;
  box-shadow: none;
}
.google-signin-btn-wrap > div {
  width: 100%;
  display: flex;
  justify-content: center;
}
.google-signin-btn-wrap iframe {
  border: none !important;
  box-shadow: none !important;
  border-radius: 999px !important;
}
.auth-social-btn {
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 8px; padding: 9px; font-size: 12px; color: var(--text-muted);
  cursor: pointer; transition: all 0.15s; text-align: center;
}
.auth-social-btn:hover { border-color: var(--green-dim); color: var(--text); }

.auth-footer {
  text-align: center; margin-top: 20px;
  font-size: 12px; color: var(--text-dim);
}
.auth-link { color: var(--green); cursor: pointer; }
.auth-link:hover { text-decoration: underline; }

/* ===== LEGAL PAGES ===== */
body.legal-page {
  min-height: 100vh;
  overflow: auto;
  background: radial-gradient(circle at top left, rgba(155,92,255,0.18), transparent 34%),
              radial-gradient(circle at bottom right, rgba(126,229,177,0.12), transparent 30%),
              var(--bg);
}
.legal-shell {
  width: min(860px, calc(100% - 32px));
  margin: 0 auto;
  padding: 34px 0 56px;
}
.legal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
}
.legal-brand {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 28px;
  letter-spacing: 3px;
  background: linear-gradient(90deg, var(--purple), var(--green));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.legal-back {
  color: var(--green);
  font-size: 12px;
  text-decoration: none;
}
.legal-back:hover { text-decoration: underline; }
.legal-document {
  background: rgba(25,20,40,0.94);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: clamp(24px, 5vw, 52px);
  box-shadow: 0 24px 80px rgba(0,0,0,0.28);
}
.legal-document h1 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(32px, 6vw, 48px);
  letter-spacing: 1px;
  line-height: 1;
  margin-bottom: 10px;
}
.legal-updated {
  color: var(--text-dim);
  font-size: 12px;
  margin-bottom: 30px;
}
.legal-document h2 {
  color: var(--green);
  font-size: 18px;
  line-height: 1.3;
  margin: 30px 0 10px;
}
.legal-document p,
.legal-document li {
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.75;
}
.legal-document p { margin-bottom: 12px; }
.legal-document ul { padding-left: 22px; margin: 8px 0 16px; }
.legal-document li { margin-bottom: 6px; }
.legal-document strong { color: var(--text); }
.legal-document em { color: var(--text-dim); }
@media (max-width: 520px) {
  .legal-shell { width: min(100% - 20px, 860px); padding-top: 20px; }
  .legal-nav { margin-bottom: 18px; }
  .legal-brand { font-size: 24px; }
  .legal-document { padding: 22px 18px; }
  .legal-document p, .legal-document li { font-size: 13px; }
}

.auth-artist-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(126,229,177,0.12); border: 1px solid var(--green-dim);
  border-radius: 20px; padding: 5px 12px; margin-bottom: 16px;
  font-size: 11px; color: var(--green); letter-spacing: 1px;
}

.auth-error {
  background: rgba(155,92,255,0.12); border: 1px solid var(--purple-dim);
  border-radius: 6px; padding: 8px 12px; font-size: 12px; color: var(--purple);
  margin-bottom: 14px; display: none;
}
.auth-error.show { display: block; }

.auth-success {
  display: none;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(126,229,177,0.12);
  border: 1px solid rgba(126,229,177,0.25);
  color: var(--green);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  margin-bottom: 12px;
}
.auth-success.show { display: block; }

/* Back button on type selector */
.auth-back {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--text-muted); cursor: pointer;
  margin-bottom: 20px; transition: color 0.15s;
}
.auth-back:hover { color: var(--text); }

/* Hidden class utility */
.auth-hidden { display: none !important; }

/* User chip in topbar */
.user-chip {
  display: flex; align-items: center; gap: 6px;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 20px; padding: 4px 10px 4px 4px;
  cursor: pointer; transition: all 0.15s; font-size: 12px;
}
.user-chip:hover { border-color: var(--green-dim); }
.user-chip .uc-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--green); margin-left: 2px;
}
.artist-indicator {
  font-size: 9px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--green); margin-left: 4px;
}
.pro-indicator {
  font-size: 9px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--gold); margin-left: 4px; font-weight: 700;
}

/* Logout menu */
.user-menu {
  position: absolute; top: 52px; right: 16px; z-index: 100;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: 6px; min-width: 180px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.5);
  display: none;
}
.user-menu.open { display: block; animation: authSlideIn 0.2s ease; }
.um-header {
  padding: 8px 10px 10px;
  border-bottom: 1px solid var(--border); margin-bottom: 4px;
}
.um-name { font-size: 13px; font-weight: 500; }
.um-type { font-size: 10px; color: var(--text-muted); margin-top: 2px; }
.um-item {
  padding: 8px 10px; font-size: 12px; color: var(--text-muted);
  cursor: pointer; border-radius: 6px; transition: all 0.15s;
  display: flex; align-items: center; gap: 8px;
}
.um-item:hover { background: var(--surface2); color: var(--text); }
.um-item.danger { color: var(--purple); }
.um-item.danger:hover { background: rgba(155,92,255,0.12); }
 
.modal-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(0, 0, 0, 0.65);
  display: none; align-items: center; justify-content: center;
}
.modal-overlay.open {
  display: flex;
  animation: fadeIn 0.25s ease;
}
.modal-card {
  width: min(460px, calc(100% - 32px));
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 26px;
  box-shadow: 0 28px 80px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.04) inset;
}
.modal-header {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  margin-bottom: 20px;
}
.modal-title {
  font-size: 20px; font-weight: 700; color: #fff;
}
.modal-sub {
  margin-top: 8px; color: var(--text-muted); font-size: 13px;
}
.modal-sub.verification-error { color: #ff7a7a; }
.modal-close-btn {
  width: 36px; height: 36px; border-radius: 12px; border: none;
  background: rgba(255,255,255,0.08); color: var(--text); font-size: 16px;
  cursor: pointer;
}
.modal-actions {
  display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px;
}
.modal-cancel-btn,
.modal-create-btn {
  min-width: 108px; border: none; border-radius: 12px; padding: 12px 18px;
  font-size: 13px; font-weight: 700; cursor: pointer;
}
.modal-cancel-btn {
  background: #2f2f3e; color: var(--text-muted);
}
.modal-create-btn {
  background: linear-gradient(90deg, var(--purple), var(--purple-dim)); color: #fff;
}
.modal-create-btn:hover { opacity: 0.95; }
.modal-cancel-btn:hover { background: #37394a; }
.modal-option-btn {
  border: 1px solid rgba(255,255,255,0.12);
  background: transparent;
  color: var(--text);
  padding: 10px 14px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.18s ease;
}
.modal-option-btn.active,
.modal-option-btn:hover {
  border-color: rgba(155,92,255,0.9);
  background: rgba(155,92,255,0.12);
}
.playlist-action-btn {
  border: none; border-radius: 12px; padding: 10px 16px;
  font-size: 13px; font-weight: 700; cursor: pointer;
  background: var(--surface2); color: var(--text);
  transition: opacity 0.18s ease;
}
.playlist-action-btn.primary {
  background: linear-gradient(90deg, var(--purple), var(--purple-dim)); color: #fff;
}
.playlist-action-btn.danger {
  background: #c0392b; color: #fff;
}
.playlist-action-btn:hover { opacity: 0.9; }
.plan-card {
  background: rgba(255,255,255,0.02);
  border-radius: 18px;
  padding: 20px;
}
.plan-card .modal-create-btn {
  margin-top: 12px;
}

/* Removed old playlist-action-menu styles (using #add-to-playlist-menu instead) */
.playlist-menu-item {
  padding: 10px 12px; cursor: pointer; font-size: 14px; color: var(--text);
  border-radius: 8px; margin: 6px 0; background: transparent;
}
.playlist-menu-item:hover { background: rgba(255,255,255,0.03); }

.playlist-add-songs-modal {
  width: min(560px, calc(100% - 32px));
}
.playlist-add-song-results {
  display: grid;
  gap: 8px;
  max-height: min(420px, 55vh);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-right: 4px;
}
.playlist-add-song-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  padding: 10px 12px;
}
.playlist-add-song-main {
  min-width: 0;
}
.playlist-add-song-btn {
  min-width: 92px;
  padding: 9px 12px;
}

@keyframes fadeIn {
  from { opacity: 0; } to { opacity: 1; }
}

.page-header-with-action {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.secondary-btn {
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.08);
  color: var(--text); border-radius: 12px; padding: 10px 16px; cursor: pointer;
}
.secondary-btn:hover { background: rgba(255,255,255,0.12); }

.danger-btn {
  background: rgba(255,90,90,0.12); border: 1px solid rgba(255,90,90,0.3);
  color: #ff8a8a; border-radius: 12px; padding: 10px 16px; cursor: pointer;
}
.danger-btn:hover {
  background: rgba(255,90,90,0.18);
}

.modal-delete-btn {
  min-width: 108px; border: none; border-radius: 12px; padding: 12px 18px;
  font-size: 13px; font-weight: 700; cursor: pointer;
  background: #ff4d4d; color: #fff;
}
.modal-delete-btn:hover {
  opacity: 0.95;
}

.tiny-btn {
  min-width: 32px; height: 32px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04); color: var(--text); cursor: pointer;
  font-size: 16px; display: inline-flex; align-items: center; justify-content: center;
}
.tiny-btn:hover { background: rgba(255,255,255,0.08); }

.playlist-header {
  display: flex; align-items: center; gap: 16px; margin-bottom: 20px;
  padding: 16px; background: var(--surface2); border-radius: 20px;
}
.playlist-cover {
  width: 120px; height: 120px; min-width: 120px; border-radius: 22px;
  background: linear-gradient(135deg,#1a0510,#1a1a1a); display: flex;
  align-items: center; justify-content: center; color: var(--text-muted); font-size: 36px;
  overflow: hidden;
}
.playlist-song-play {
  width: 44px; height: 44px; border-radius: 14px; border: none;
  background: var(--purple); color: #fff; cursor: pointer; font-size: 16px;
}
.playlist-song-play:hover { opacity: 0.95; }
.playlist-cover img {
  width: 100%; height: 100%; object-fit: cover;
}
.playlist-meta .pm-label {
  font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--text-dim);
  margin-bottom: 8px;
}
.playlist-meta .pm-title {
  font-size: 26px; font-weight: 700; color: #fff; margin-bottom: 8px;
}
.playlist-meta .pm-desc {
  color: var(--text-muted); font-size: 13px; max-width: 620px;
}

.playlist-songs-list { display: grid; gap: 12px; }
.playlist-song-card {
  display: grid; grid-template-columns: 80px 1fr auto; gap: 14px;
  padding: 14px 16px; background: var(--surface2);
  border: 1px solid rgba(255,255,255,0.06); border-radius: 18px;
  align-items: center;
}
.playlist-song-cover {
  width: 80px; height: 80px; border-radius: 18px;
  background: linear-gradient(135deg,#1a0510,#1a1a1a); display: flex;
  align-items: center; justify-content: center; color: var(--text-muted);
  overflow: hidden;
}
.playlist-song-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.playlist-song-delete {
  width: 44px; height: 44px; border-radius: 14px;
  border: none; background: rgba(255,255,255,0.08); color: #fff;
  cursor: pointer; font-size: 18px; transition: background 0.2s ease, transform 0.15s ease;
}
.playlist-song-delete:hover {
  background: rgba(255,255,255,0.18);
  transform: translateY(-1px);
}
.playlist-delete-modal .modal-card {
  max-width: 420px;
}
.modal-actions {
  display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px;
}
.modal-secondary-btn {
  background: transparent; border: 1px solid rgba(255,255,255,0.12); color: #fff;
  padding: 10px 16px; border-radius: 14px; cursor: pointer;
}
.modal-secondary-btn:hover {
  background: rgba(255,255,255,0.04);
}
.modal-create-btn {
  background: var(--purple); color: #fff; border: none; padding: 10px 16px;
  border-radius: 14px; cursor: pointer;
}

.playlist-song-cover img { width: 100%; height: 100%; object-fit: cover; }
.playlist-song-info .psc-title { font-size: 14px; font-weight: 700; color: #fff; margin-bottom: 4px; }
.playlist-song-info .psc-artist { font-size: 12px; color: var(--text-muted); }
.playlist-song-play {
  width: 44px; height: 44px; border-radius: 14px; border: none;
  background: var(--purple); color: #fff; cursor: pointer; font-size: 16px;
}
.playlist-song-play:hover { opacity: 0.95; }
.empty-message, .loading { color: var(--text-muted); font-size: 14px; padding: 18px 0; text-align: center; }
/* Estado vacío como tarjeta translúcida. Solo se inyecta cuando la lista está
   vacía, nunca junto a contenido real, así que no hay riesgo de contenedor. */
.empty-message {
  padding: 24px 20px;
  border: 1px dashed rgba(155,92,255,0.30);
  border-radius: var(--radius);
  background: rgba(36,31,61,0.42);
  color: var(--text-muted);
  font-size: 13.5px;
  line-height: 1.55;
  letter-spacing: 0.2px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}
.empty-message::before {
  content: '';
  display: block;
  width: 36px; height: 36px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background-color: rgba(155,92,255,0.14);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(201,184,255)' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18V5l11-2v13'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Ccircle cx='17' cy='16' r='3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;
  opacity: 0.9;
}
/* Dentro de un carrusel (.cards-row, flex row) el mensaje debe ocupar
   todo el ancho en vez de quedar como una tarjeta estrecha al inicio. */
.cards-row > .empty-message,
.stories-row > .empty-message { flex: 1 0 100%; }

/* ===== LOW-RISK NATIVE CONTROLS =====
   Checkboxes de Notificaciones y botones de input de archivo: son controles
   nativos sin estilo. Solo apariencia, no cambian valor ni comportamiento. */
/* La fila GÉNERO / PORTADA es un grid con `1fr 1fr` en estilo INLINE.
   Con `1fr` el min-width:auto del item del grid deja que el contenido
   empuje la columna: el input de portada (flex:0 0 auto) ensancha su mitad y
   el select de género se queda sin sitio. `minmax(0, 1fr)` permite encoger
   ambos items por debajo de su contenido. Sin tocar el HTML. */
#view-upload div[style*="grid-template-columns"] {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
/* Dentro de la columna de portada, el boton de archivo y el nombre pasan a
   dos lineas en vez de empujar el ancho. La fila del audio ya se ve bien y
   NO lleva #cover-file-input, asi que queda intacta. */
#view-upload .form-row:has(#cover-file-input) > div {
  flex-wrap: wrap;
}

/* El texto nativo "Sin archivos seleccionados" es redundante: el span
   .file-name de al lado ya muestra el archivo elegido (JavaScript.js actualiza
   ambos spans al hacer 'change'). Se oculta con font-size:0 para que no se
   corte, sin tocar el input: sigue siendo un file input nativo y clicable.
   Reset de apariencia: .form-row input aplica fondo/borde/padding genericos
   que en un file input dibujan una caja extra alrededor del boton. */
input[type="file"] {
  font-size: 0;
  width: auto; min-width: 0;
  flex: 0 0 auto;                 /* no se encoge: el boton mantiene su ancho */
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
}
/* El span del nombre toma el espacio restante, y los dos inputs NO se
   encogen. Ambos traen estilos INLINE en el HTML (flex:1 en el input y
   min-width:120px en el span), que ganan sobre cualquier regla de autor, asi
   que se anulan con !important SOLO para estos dos pares. No se edita el HTML. */
#audio-file-input, #cover-file-input {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0;
}
#audio-file-name, #cover-file-name {
  flex: 1 1 auto;
  min-width: 0 !important;
}
input[type="file"]::file-selector-button {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 12px;              /* el boton sigue legible con el input a 0 */
  padding: 5px 10px;
  margin-right: 6px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
input[type="file"]::file-selector-button:hover {
  color: var(--text);
  border-color: var(--green-dim);
  background: var(--surface3);
}

/* Checkboxes de Notificaciones. Solo esta clase: los interruptores de
   Privacidad y Autoplay usan .settings-switch y NO se tocan. */
.settings-check-row input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 18px; height: 18px;
  flex: 0 0 auto;
  margin: 0;
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 5px;
  background: var(--surface2);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.settings-check-row input[type="checkbox"]:hover { border-color: var(--green-dim); }
.settings-check-row input[type="checkbox"]:checked {
  background-color: var(--green);
  border-color: var(--green);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(16,13,25)' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 12px;
}

@media (prefers-reduced-motion: reduce) {
  .nav-item.active::before { transform: translateY(-50%); }
  .create-playlist-btn:active { transform: none; }
}

/* User chip */
.user-chip { display: flex; align-items: center; gap: 6px; background: var(--surface2); border: 1px solid var(--border); border-radius: 20px; padding: 4px 10px 4px 4px; cursor: pointer; transition: all 0.15s; }
.user-chip:hover { border-color: var(--green-dim); }
.uc-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); margin-left: 2px; }
.artist-indicator { font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: var(--green); }
/* User menu */
.user-menu { position: absolute; top: 52px; right: 16px; z-index: 100; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 6px; min-width: 180px; box-shadow: 0 20px 40px rgba(0,0,0,0.5); display: none; }
.user-menu.open { display: block; animation: authSlideIn 0.2s ease; }
.um-header { padding: 8px 10px 10px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.um-name { font-size: 13px; font-weight: 500; }
.um-type { font-size: 10px; color: var(--text-muted); margin-top: 2px; }
.um-item { padding: 8px 10px; font-size: 12px; color: var(--text-muted); cursor: pointer; border-radius: 6px; transition: all 0.15s; display: flex; align-items: center; gap: 8px; }
.um-item:hover { background: var(--surface2); color: var(--text); }
.um-item.danger { color: var(--purple); }
.um-item.danger:hover { background: rgba(155,92,255,0.1); }

/* ===== TRANSMISIONES EN VIVO ===== */
.transmisiones-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 20px;
}
.live-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  box-shadow: 0 6px 20px rgba(0,0,0,0.25), 0 0 0 1px rgba(255,255,255,0.04) inset;
}
.live-card:hover {
  transform: translateY(-4px);
  border-color: var(--purple);
  box-shadow: 0 12px 32px rgba(155,92,255,0.3), 0 0 0 1px rgba(155,92,255,0.15), 0 0 24px rgba(155,92,255,0.1);
}
.live-card-thumb {
  position: relative;
  height: 160px;
  background: linear-gradient(135deg, #1a0a2e, #2d1b4e, #1a0510);
  background-size: 200% 200%;
  animation: liveThumbGradient 6s ease infinite;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.live-card-thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 50%, rgba(155,92,255,0.15), transparent 60%);
  pointer-events: none;
  z-index: 0;
}
@keyframes liveThumbGradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.live-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: #e74c3c;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 4px 10px;
  border-radius: 6px;
  text-transform: uppercase;
  z-index: 2;
  box-shadow: 0 2px 8px rgba(231,76,60,0.4);
  animation: liveBadgePulse 2s ease infinite;
}
@keyframes liveBadgePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}
.live-card-info {
  padding: 14px;
}
.live-card-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}
.live-card-artist {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.live-card-viewers {
  font-size: 11px;
  color: var(--text-dim);
}

/* ====== VISTA EN VIVO KICK-STYLE ====== */
.kick-live-container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 16px;
  align-items: start;
}
.kick-live-container .kick-main-column {
  overflow: visible;
}
.kick-main-column {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.kick-video-area {
  position: relative;
  background: radial-gradient(ellipse at center, #1a0a2e 0%, #0a0a0a 70%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  aspect-ratio: 16 / 9;
  width: 100%;
}
.kick-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: var(--text-muted);
  font-size: 14px;
  background: radial-gradient(circle at center, #15101f 0%, #0a0a0a 100%);
}
.kick-placeholder > div:last-child {
  animation: livePulse 1.8s ease infinite;
}
/* Badge NASAMARK superpuesto */
.kick-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  display: flex;
  align-items: center;
  gap: 7px;
  background: rgba(231, 76, 60, 0.92);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  padding: 5px 12px;
  border-radius: 20px;
  text-transform: uppercase;
  z-index: 3;
  box-shadow: 0 2px 12px rgba(231, 76, 60, 0.45);
  backdrop-filter: blur(4px);
}
.kick-badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  animation: kickBadgePulse 1.2s ease infinite;
}
@keyframes kickBadgePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.8); }
}
/* Contador de espectadores superpuesto */
.kick-viewer-count {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(0, 0, 0, 0.7);
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 20px;
  z-index: 3;
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(4px);
}
/* Info del streamer debajo del video */
.kick-streamer-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.kick-streamer-left {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.kick-streamer-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--surface3);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-size: 24px;
  flex-shrink: 0;
  border: 2px solid var(--purple);
}
.kick-streamer-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.kick-streamer-details {
  min-width: 0;
}
.kick-streamer-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kick-streamer-desc {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kick-streamer-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
/* Botón Seguir (pill, morado) */
.kick-follow-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, var(--purple), var(--purple-dim));
  color: #fff;
  border: none;
  border-radius: 24px;
  padding: 9px 20px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s, box-shadow 0.2s;
}
.kick-follow-btn:hover {
  opacity: 0.92;
  box-shadow: 0 4px 16px rgba(155, 92, 255, 0.3);
  transform: translateY(-1px);
}
.kick-follow-btn:active {
  transform: translateY(0);
}
.kick-follow-btn.following {
  background: var(--surface2);
  border: 1px solid var(--border);
  box-shadow: none;
}
/* Botón Salir (pill rojo discreto) */
.kick-leave-btn {
  background: rgba(231, 76, 60, 0.12);
  color: #ff6b6b;
  border: 1px solid rgba(231, 76, 60, 0.3);
  border-radius: 24px;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.kick-leave-btn:hover {
  background: rgba(231, 76, 60, 0.2);
}
/* Stats del broadcaster */
.kick-broadcast-stats {
  display: flex;
  align-items: center;
  gap: 8px;
}
.kick-stat-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--surface2);
  border-radius: 20px;
  padding: 6px 12px;
  border: 1px solid var(--border);
}
/* Botón Finalizar transmisión (pill rojo discreto) */
.kick-end-btn {
  background: rgba(231, 76, 60, 0.15);
  color: #ff6b6b;
  border: 1px solid rgba(231, 76, 60, 0.35);
  border-radius: 24px;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.2s;
}
.kick-end-btn:hover {
  background: rgba(231, 76, 60, 0.25);
  box-shadow: 0 4px 14px rgba(231, 76, 60, 0.2);
}
/* Chat overlay flotante sobre el video */
.kick-chat-overlay {
  position: absolute;
  bottom: 12px;
  left: 12px;
  right: 12px;
  max-height: 42vh;
  background: rgba(10, 10, 15, 0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius);
  z-index: 10;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: overlayIn 0.35s ease;
}

.kick-chat-overlay .kick-chat-header {
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.5px;
  flex-shrink: 0;
}

.kick-chat-overlay .kick-chat-messages {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 0;
  scroll-behavior: smooth;
  background: transparent;
  mask-image: linear-gradient(to top, rgba(0,0,0,1) 45%, rgba(0,0,0,0) 100%);
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1) 45%, rgba(0,0,0,0) 100%);
}

.kick-chat-overlay .kick-chat-messages::-webkit-scrollbar { width: 3px; }
.kick-chat-overlay .kick-chat-messages::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 2px; }

.kick-chat-overlay .kick-chat-input-row {
  background: rgba(255, 255, 255, 0.04);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding: 8px 10px;
  flex-shrink: 0;
}

.kick-chat-overlay .kick-chat-input-row input {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 8px 12px;
  color: var(--text);
  font-size: 13px;
}

.kick-chat-overlay .live-chat-message {
  animation: fadeInUp 0.35s ease;
  background: transparent !important;
  border: none !important;
  max-width: 100%;
  border-radius: 0 !important;
}

.kick-chat-overlay .emoji-picker {
  background: rgba(10, 10, 15, 0.9);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.kick-chat-overlay.broadcast-readonly-chat .live-chat-message {
  background: transparent !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.kick-chat-overlay.broadcast-readonly-chat .live-chat-message:last-child {
  border-bottom: none;
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes overlayIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Panel de chat derecho (legacy / sin overlay) */
.kick-chat-panel {
  display: flex;
  flex-direction: column;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 0;
/* Chat flotante del artista (movible + redimensionable) */
.kick-chat-floating-artist {
  position: absolute;
  top: auto;
  bottom: 60px;
  right: 12px;
  left: auto;
  width: 320px;
  min-width: 240px;
  max-width: 480px;
  height: 360px;
  min-height: 220px;
  max-height: 60vh;
  resize: both;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  z-index: 20;
}
.kick-chat-floating-artist .kick-chat-header {
  cursor: grab;
  user-select: none;
}
.kick-chat-floating-artist .kick-chat-header:active {
  cursor: grabbing;
}

}
.kick-chat-header {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  letter-spacing: 0.5px;
  flex-shrink: 0;
  background: var(--surface);
}
.kick-chat-messages {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 0;
  scroll-behavior: smooth;
}
.kick-chat-messages::-webkit-scrollbar { width: 3px; }
.kick-chat-messages::-webkit-scrollbar-thumb { background: var(--surface3); border-radius: 2px; }
.kick-chat-messages .live-chat-message {
  font-size: 12.5px;
  line-height: 1.45;
  padding: 5px 8px;
  border-radius: 8px;
  background: transparent;
  border: none;
  max-width: 100%;
  animation: kickMsgIn 0.3s ease;
}
@keyframes kickMsgIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.kick-chat-messages .live-chat-message .live-chat-user {
  display: inline;
  color: var(--purple);
  font-weight: 700;
  font-size: 12px;
  margin-right: 6px;
}
.kick-chat-messages .live-chat-message .live-chat-text {
  color: var(--text);
  word-break: break-word;
}
.kick-chat-messages .live-chat-message.own .live-chat-user {
  color: var(--gold);
}
.kick-chat-messages .live-chat-message.own {
  background: transparent;
  margin-left: 0;
}
.kick-chat-messages .live-chat-message.artist .live-chat-user {
  color: var(--green);
}
.kick-chat-messages .live-chat-message.artist {
  background: transparent;
}
/* Input de chat integrado (una sola barra) */
.kick-chat-input-row {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 10px 12px;
  border-top: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
}
.kick-chat-input-row .emoji-btn {
  border-radius: 20px 0 0 20px;
  border-right: none;
  background: var(--surface2);
  padding: 10px 10px;
}
.kick-chat-input-row input {
  flex: 1;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-left: none;
  border-right: none;
  padding: 10px 8px;
  color: var(--text);
  font-size: 13px;
  outline: none;
  transition: border-color 0.2s;
  min-width: 0;
}
.kick-chat-input-row input:focus {
  border-color: var(--purple);
}
.kick-chat-input-row input::placeholder {
  color: var(--text-dim);
}
.kick-chat-input-row .kick-send-btn {
  background: linear-gradient(135deg, var(--purple), var(--purple-dim));
  color: #fff;
  border: none;
  border-radius: 0 20px 20px 0;
  padding: 10px 16px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  transition: opacity 0.15s;
}
.kick-chat-input-row .kick-send-btn:hover {
  opacity: 0.9;
}
.kick-chat-input-row .kick-send-btn:active {
  transform: translateY(0);
}
.kick-chat-input-row .kick-send-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
/* Video area glow when active */
.kick-video-area.active {
  box-shadow: 0 0 30px rgba(155,92,255,0.25), inset 0 0 30px rgba(155,92,255,0.08);
  border-color: rgba(155,92,255,0.3);
}
/* ===== FIN VISTA EN VIVO KICK-STYLE ===== */

/* Vista de espectador (legacy, mantiene compatibilidad con cards) */
.live-viewer-container {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 16px;
  height: calc(100vh - 200px);
  min-height: 400px;
}
.live-video-area {
  position: relative;
  background: radial-gradient(ellipse at center, #1a0a2e 0%, #0a0a0a 70%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.live-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: var(--text-muted);
  font-size: 14px;
  background: radial-gradient(circle at center, #15101f 0%, #0a0a0a 100%);
}
.live-placeholder > div:last-child {
  animation: livePulse 1.8s ease infinite;
}
@keyframes livePulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}
.live-spinner {
  width: 48px;
  height: 48px;
  border: 3px solid rgba(155,92,255,0.15);
  border-top-color: var(--purple);
  border-right-color: rgba(155,92,255,0.5);
  border-radius: 50%;
  animation: liveSpin 0.9s linear infinite;
  box-shadow: 0 0 20px rgba(155,92,255,0.2);
}
@keyframes liveSpin {
  to { transform: rotate(360deg); }
}
/* Skeleton loading para transmisiones */
.live-skeleton-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  animation: skeletonShimmer 1.5s ease infinite;
}
.live-skeleton-thumb {
  height: 160px;
  background: linear-gradient(90deg, var(--surface2) 0%, var(--surface3) 50%, var(--surface2) 100%);
  background-size: 200% 100%;
  animation: skeletonGlow 2s ease infinite;
}
.live-skeleton-info {
  padding: 14px;
}
.live-skeleton-line {
  height: 12px;
  border-radius: 6px;
  background: var(--surface2);
  margin-bottom: 8px;
}
.live-skeleton-line.short { width: 60%; }
/* Las barras no tenian shimmer: pulso suave solo con opacity (GPU, sin repintado). */
.live-skeleton-line { animation: skeletonLinePulse 1.6s ease-in-out infinite; }
.live-skeleton-line.short { animation-delay: 0.2s; }
@keyframes skeletonLinePulse {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}
@keyframes skeletonGlow {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@keyframes skeletonShimmer {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.85; }
}
.live-sidebar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  overflow: hidden;
}
.live-info {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.live-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin-top: 8px;
}
.live-artist {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 4px;
}
.live-viewers {
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 6px;
}
.live-chat {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.live-chat-header {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.live-chat-messages {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 10px 4px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  scroll-behavior: smooth;
}
.live-chat-messages::-webkit-scrollbar { width: 3px; }
.live-chat-messages::-webkit-scrollbar-thumb { background: var(--surface3); border-radius: 2px; }
.live-chat-message {
  font-size: 12px;
  line-height: 1.45;
  padding: 8px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.05);
  animation: chatMsgIn 0.3s ease;
}
@keyframes chatMsgIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.live-chat-message.own {
  background: rgba(155,92,255,0.12);
  border-color: rgba(155,92,255,0.2);
  margin-left: 20px;
}
.live-chat-message.artist {
  background: rgba(126,229,177,0.1);
  border-color: rgba(126,229,177,0.2);
}
.live-chat-user {
  color: var(--green);
  font-weight: 600;
  font-size: 11px;
  display: block;
  margin-bottom: 2px;
}
.live-chat-message.own .live-chat-user { color: var(--purple); }
.live-chat-message.artist .live-chat-user { color: var(--green); }
.live-chat-text {
  color: var(--text);
  word-break: break-word;
}
.live-chat-input-row {
  display: flex;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.live-chat-input-row input {
  flex: 1;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 14px;
  color: var(--text);
  font-size: 13px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.live-chat-input-row input:focus {
  border-color: var(--purple);
  box-shadow: 0 0 0 2px rgba(155,92,255,0.15);
}
.live-chat-input-row input::placeholder {
  color: var(--text-dim);
}
.live-chat-input-row .send-btn {
  background: linear-gradient(135deg, var(--purple), var(--purple-dim));
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 10px 18px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  transition: opacity 0.15s, transform 0.1s;
}
.live-chat-input-row .send-btn:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}
.live-chat-input-row .send-btn:active {
  transform: translateY(0);
}
.live-chat-input-row .send-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
/* Video area glow when active */
.live-video-area.active,
.live-broadcast-video.active {
  box-shadow: 0 0 30px rgba(155,92,255,0.25), inset 0 0 30px rgba(155,92,255,0.08);
  border-color: rgba(155,92,255,0.3);
}
/* Enhanced chat message bubbles with tail */
.live-chat-message {
  position: relative;
  max-width: 80%;
}
.live-chat-message::before {
  content: '';
  position: absolute;
  top: 14px;
  width: 0;
  height: 0;
  border: 6px solid transparent;
}
.live-chat-message:not(.own):not(.artist)::before {
  left: -10px;
  border-right-color: rgba(255,255,255,0.04);
  border-left: 0;
}
.live-chat-message.own::before {
  right: -10px;
  border-left-color: rgba(155,92,255,0.12);
  border-right: 0;
}
.live-chat-message.artist::before {
  right: -10px;
  border-left-color: rgba(126,229,177,0.1);
  border-right: 0;
}
/* Smooth scroll for chat */
.live-chat-messages {
  scroll-behavior: smooth;
}

/* Vista de transmisión (artista) */
.live-broadcast-container {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 16px;
  height: calc(100vh - 200px);
  min-height: 400px;
}
.live-broadcast-video {
  position: relative;
  background: radial-gradient(ellipse at center, #1a0a2e 0%, #0a0a0a 70%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.live-broadcast-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--text-muted);
  font-size: 14px;
  background: radial-gradient(ellipse at center, #1a0a2e 0%, #0a0a0a 70%);
}
.live-broadcast-controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  overflow: hidden;
}
.live-broadcast-info {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

/* Emoji picker */
.emoji-btn {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  cursor: pointer;
  font-size: 16px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.emoji-btn:hover {
  border-color: var(--purple);
  box-shadow: 0 0 0 2px rgba(155,92,255,0.15);
}
.emoji-picker {
  position: fixed;
  z-index: 9999;
  background: #1a1a2e;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.6);
  display: none;
}
.emoji-picker-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
}
.emoji-item {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.15s, transform 0.1s;
}
.emoji-item:hover {
  background: rgba(155,92,255,0.2);
  transform: scale(1.15);
}
/* Live card avatar */
.live-card-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
  z-index: 1;
}
/* Chat de solo lectura del artista (estilo streaming) */
.broadcast-readonly-chat .live-chat-messages {
  background: rgba(0,0,0,0.2);
  border-radius: 10px;
  padding: 12px 8px;
}
.broadcast-readonly-chat .live-chat-message {
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  border-radius: 0;
  padding: 6px 8px;
  max-width: 100%;
  animation: chatMsgSlideIn 0.25s ease;
}
.broadcast-readonly-chat .live-chat-message::before {
  display: none;
}
.broadcast-readonly-chat .live-chat-message:last-child {
  border-bottom: none;
}
.broadcast-readonly-chat .live-chat-user {
  display: inline;
  color: var(--green);
  font-weight: 700;
  font-size: 12px;
  margin-right: 6px;
}
.broadcast-readonly-chat .live-chat-text {
  color: var(--text);
  font-size: 12.5px;
}
.broadcast-readonly-chat .live-chat-message.own .live-chat-user {
  color: var(--purple);
}
.broadcast-readonly-chat .live-chat-message.artist .live-chat-user {
  color: var(--green);
}
@keyframes chatMsgSlideIn {
  from { opacity: 0; transform: translateX(-8px); }
  to { opacity: 1; transform: translateX(0); }
}
/* Player hidden state */
#player.hidden {
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.35s ease, opacity 0.35s ease;
}
#player {
  transition: transform 0.35s ease, opacity 0.35s ease;
}
.hide-player-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
  transition: all 0.2s;
}
.hide-player-btn:hover {
  background: var(--surface2);
  color: var(--text);
}
/* Profile avatar with image */
.profile-avatar.has-avatar {
  background: transparent !important;
}
.profile-avatar.has-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
/* Topbar avatar with image */
#topbar-avatar.has-avatar {
  font-size: 0;
  line-height: 0;
}
#topbar-avatar.has-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* Responsive */
@media (max-width: 900px) {
  .live-viewer-container,
  .live-broadcast-container {
    grid-template-columns: 1fr;
    height: auto;
  }
  .live-video-area,
  .live-broadcast-video {
    height: 300px;
  }
  .live-sidebar,
  .live-broadcast-controls {
    min-height: 300px;
  }
  /* Kick-style responsive */
  .kick-live-container {
    grid-template-columns: 1fr;
    height: auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .kick-main-column {
    min-height: 0;
  }
  .kick-video-area {
    aspect-ratio: 16 / 9;
    height: auto;
    min-height: 260px;
    flex: none;
  }
  .kick-chat-sidebar {
    position: static;
    height: 360px;
  }
  .kick-chat-panel {
    height: auto;
    min-height: auto;
  }
  .kick-category-cards {
    grid-template-columns: 1fr;
  }
  .kick-streamer-info {
    flex-direction: column;
    align-items: flex-start;
  }
  .kick-streamer-left {
    width: 100%;
    max-width: 100%;
  }
  .kick-streamer-details {
    flex: 1;
    min-width: 0;
  }
  .kick-streamer-name {
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .kick-streamer-desc {
    max-width: 100%;
    display: -webkit-box;
    white-space: normal;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .kick-streamer-details > div:first-child {
    min-width: 0;
    max-width: 100%;
  }
  .kick-streamer-details > div:first-child .kick-streamer-name {
    flex: 1 1 auto;
    min-width: 0;
  }
  .kick-live-badge {
    flex-shrink: 0;
  }
  .kick-streamer-actions {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}

/* ===== PANEL DE INFORMACIÓN DE TRANSMISIÓN (estilo Kick) ===== */
.kick-stream-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.kick-stream-panel-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.kick-stream-panel-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}
.kick-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(231, 76, 60, 0.92);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 3px 9px;
  border-radius: 12px;
  text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(231, 76, 60, 0.4);
  animation: liveBadgePulse 2s ease infinite;
}
.kick-share-btn {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--text);
  border-radius: 24px;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  gap: 6px;
}
.kick-share-btn:hover {
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.2);
}
.kick-support-btn {
  background: linear-gradient(135deg, var(--gold), var(--green-dim));
  color: #fff;
  border: none;
  border-radius: 24px;
  padding: 10px 22px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
  box-shadow: 0 4px 14px rgba(126, 229, 177, 0.25);
}
.kick-support-btn:hover {
  opacity: 0.92;
  box-shadow: 0 6px 20px rgba(126, 229, 177, 0.35);
  transform: translateY(-1px);
}
.kick-support-btn:active {
  transform: translateY(0);
}
.kick-social-link {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--surface2);
  border: 1px solid var(--border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s;
  text-decoration: none;
  color: var(--text);
}
.kick-social-link svg {
  width: 16px;
  height: 16px;
  display: block;
  fill: currentColor;
}
.kick-social-link:hover {
  filter: brightness(1.08);
  transform: translateY(-2px);
}

/* ===== NASA STREAM REDESIGN (estilo Kick) ===== */

/* Chat como sidebar fija al lado del video */
.kick-chat-sidebar {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 0;
  position: sticky;
  top: 12px;
  height: calc(100vh - 220px);
}
.kick-chat-sidebar .kick-chat-header {
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,0.02);
  flex-shrink: 0;
}
.kick-chat-sidebar .kick-chat-messages {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 10px 12px;
}
.kick-chat-sidebar .kick-chat-input-row {
  background: rgba(255, 255, 255, 0.04);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* Filas por categoría en el listado */
.kick-category-row {
  margin-bottom: 26px;
}
.kick-category-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 18px;
  letter-spacing: 2px;
  color: var(--text);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.kick-category-title::before {
  content: '●';
  color: #e74c3c;
  font-size: 11px;
  animation: liveBadgePulse 2s ease infinite;
}
.kick-category-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

/* Tags de categoría / idioma bajo el título del stream */
.kick-stream-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.kick-stream-tag,
.kick-stream-tag-lang {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
  line-height: 1.4;
}
.kick-stream-tag {
  background: rgba(155, 92, 255, 0.16);
  color: #c9a8ff;
  border: 1px solid rgba(155, 92, 255, 0.35);
}
.kick-stream-tag-lang {
  background: rgba(126, 229, 177, 0.12);
  color: var(--green);
  border: 1px solid rgba(126, 229, 177, 0.3);
}

/* Tag de categoría dentro de las cards del listado */
.live-card-category {
  display: inline-flex;
  align-self: flex-start;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 20px;
  background: rgba(155, 92, 255, 0.14);
  color: #c9a8ff;
  border: 1px solid rgba(155, 92, 255, 0.3);
  margin-top: 6px;
}

@media (prefers-reduced-motion: reduce) {
  .radar-ring,
  .artist-card.emerging .artist-avatar::after,
  .live-card-thumb,
  .live-skeleton-card,
  .live-skeleton-thumb,
  .live-skeleton-line,
  .live-badge,
  .kick-live-badge,
  .kick-category-title::before {
    animation: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  .song-card { transition: none; }
  .song-card:active { transform: none; }
}

@media (max-width: 767px) {
  body::before { animation: none; }
}
/* ===== BLOQUE 8: SELECTOR OYENTE/ARTISTA + LOGIN =====
   Solo apariencia. No se tocan campos, validaciones, logica de Google/Apple,
   ni los botones sociales. Selectores anidados bajo #auth-overlay para no
   afectar nada fuera del overlay de autenticacion. */

/* --- Selector de tipo de cuenta --- */
#auth-overlay .auth-type-card {
  /* Mismo lenguaje que .song-card: relleno padding-box + borde degradado,
     sin border-image. El padding sube 1px para compensar el borde 2px -> 1px
     y que la tarjeta conserve su altura y su area tactil. */
  padding: 15px 10px;
  background: linear-gradient(145deg, rgba(36,31,61,0.55), rgba(25,20,40,0.62)) padding-box,
              linear-gradient(135deg, rgba(155,92,255,0.55), rgba(126,229,177,0.38)) border-box;
  border: 1px solid transparent;
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.28);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.12s ease;
}
/* Estado .selected. OJO: la regla original (CSS L1286, `.auth-type-card.selected`
   = 0,2,0) es MENOS especifica que `#auth-overlay .auth-type-card` (1,1,0), asi
   que sin esto la seleccion se perderia. Ningun sitio de JavaScript.js anade o
   quita la clase `selected` (verificado), pero se conserva por seguridad y para
   que, si algun dia se usa, se vea igual de clara. Va ANTES de las reglas
   :active para que el brillo al presionar siga mandando sobre el estado. */
#auth-overlay .auth-type-card.selected {
  background: linear-gradient(145deg, rgba(155,92,255,0.18), rgba(155,92,255,0.05)) padding-box,
              linear-gradient(135deg, var(--purple), var(--green)) border-box;
  box-shadow: 0 0 18px rgba(155,92,255,0.28);
}
/* El hover original (CSS L1285) pintaba `border-color`, que se dibuja POR
   ENCIMA de la capa border-box y tapaba el degradado. Aqui se pone
   transparente para que el borde degradado siga viéndose. */
#auth-overlay .auth-type-card:hover { border-color: transparent; }
/* Brillo al presionar, distinto por tipo. El orden en el HTML es
   Oyente (L44) = primer hijo, Artista (L49) = ultimo hijo. */
#auth-overlay .auth-type-card:first-child:active {
  box-shadow: 0 0 0 1px var(--purple-dim), 0 0 20px rgba(155,92,255,0.45);
  transform: scale(0.985);
}
#auth-overlay .auth-type-card:last-child:active {
  box-shadow: 0 0 0 1px var(--green-dim), 0 0 20px rgba(126,229,177,0.35);
  transform: scale(0.985);
}
/* El estado .selected se resuelve justo arriba. */

/* --- Logo NASAMARK: shimmer de UNA sola pasada ---
   Solo en la pantalla de tipo de cuenta (#auth-step-type): las cajas de login
   se muestran/ocultan con display y una animacion ahi se repetiria cada vez
   que se cambia de tipo o de pestana.
   `background-position` NO es transform ni opacity: es la unica forma de
   desplazar un brillo sobre texto con background-clip:text. Se ejecuta una
   vez (1 iteracion) y el estado final es identico al de reposo. */
#auth-step-type .al-brand {
  background-image:
    linear-gradient(115deg, transparent 38%, rgba(255,255,255,0.85) 50%, transparent 62%),
    linear-gradient(90deg, var(--purple), var(--green));
  background-size: 240% 100%, 100% 100%;
  background-repeat: no-repeat, no-repeat;
  animation: authBrandShimmer 1.15s cubic-bezier(0.4, 0, 0.2, 1) 0.15s 1 both;
}
@keyframes authBrandShimmer {
  from { background-position: 130% 0, 0 0; }
  to   { background-position: -30% 0, 0 0; }
}

/* --- Caja de login/registro: borde degradado y sombra coherente --- */
#auth-overlay .auth-box {
  background: linear-gradient(145deg, rgba(36,31,61,0.72), rgba(25,20,40,0.86)) padding-box,
              linear-gradient(135deg, rgba(155,92,255,0.5), rgba(126,229,177,0.3)) border-box;
  border: 1px solid transparent;
  box-shadow: 0 30px 70px rgba(0,0,0,0.55), 0 0 26px rgba(155,92,255,0.08);
}

/* --- Pestanas: estado activo mas claro --- */
#auth-overlay .auth-tabs {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 10px;
}
#auth-overlay .auth-tab.active {
  background: linear-gradient(145deg, rgba(155,92,255,0.28), rgba(126,229,177,0.14));
  color: var(--text);
  box-shadow: inset 0 0 0 1px rgba(155,92,255,0.35), 0 2px 10px rgba(0,0,0,0.25);
}

/* --- Campos: resplandor morado al enfocar ---
   :focus-visible para no marcar el campo cuando se navega con teclado sin
   querer. Solo cambia box-shadow: ningun tamano, padding ni borde, asi que
   el layout no se mueve. */
#auth-overlay .auth-field input:focus-visible,
#auth-overlay .auth-field select:focus-visible {
  border-color: var(--purple-dim);
  box-shadow: 0 0 0 3px rgba(155,92,255,0.16), 0 0 16px rgba(155,92,255,0.22);
}

/* --- Boton principal: brillo suave y rebote al presionar --- */
#auth-overlay .auth-submit {
  box-shadow: 0 6px 20px rgba(155,92,255,0.24);
  transition: opacity 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
#auth-overlay .auth-submit:hover { box-shadow: 0 8px 26px rgba(155,92,255,0.34); }
#auth-overlay .auth-submit:active {
  transform: scale(0.98);
  box-shadow: 0 4px 14px rgba(155,92,255,0.22);
}

/* --- Badge de Artista y enlaces: estilo de las pastillas del resto --- */
#auth-overlay .auth-artist-badge {
  background: rgba(126,229,177,0.1);
  border: 1px solid rgba(126,229,177,0.4);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
  font-weight: 600;
}
/* Sin padding para no mover el textoinline de "Al continuar aceptas...":
   solo se redondea y se rellena en hover. */
#auth-overlay .auth-link { border-radius: 999px; }
#auth-overlay .auth-link:hover {
  background: rgba(126,229,177,0.12);
  text-decoration: none;
}

/* --- Respeta prefers-reduced-motion en todo lo anterior --- */
@media (prefers-reduced-motion: reduce) {
  /* Sin animacion, la franja del shimmer se quedaria en su posicion inicial
     (background-position 130% 0) y asomaria un reflejo en el borde derecho.
     Se fija el estado FINAL de la animacion: franja fuera de cuadro, logo
     igual que en reposo. La segunda capa (90deg morado->menta) no se mueve. */
  #auth-step-type .al-brand {
    animation: none;
    background-position: -30% 0, 0 0;
  }
  #auth-overlay .auth-type-card:active,
  #auth-overlay .auth-submit:active { transform: none; }
  #auth-overlay .auth-type-card,
  #auth-overlay .auth-submit,
  #auth-overlay .auth-tab.active { transition: none; }
}

/* ===== CORRECCION BLOQUE 7/8: panel del reproductor en escritorio =====
   1) Portada en tira. La regla base `.panel-top` (L756) es
      `grid-template-columns: 1fr 1fr`, o sea `minmax(auto, 1fr)`. Cada item
      tiene `min-width: auto`, que en un item de grid se resuelve a su
      min-content. La columna derecha contiene `.panel-controls-full` (L803,
      flex con 5 botones de 38-48px y gap 10) y `.panel-progress-row` (L794,
      dos `.panel-time` de 40px). Su min-content no baja de ~130px, con lo que
      la columna izquierda se queda con el resto y la portada se ve como una
      tira. Esto ya pasaba ANTES del bloque 7 (misma regla en e1c5198 L627), no
      lo introdujo el `overflow: hidden`.
      Se apila en una sola columna, igual que ya hace el media query de
      <=900px (L846). AL APILAR, la portada y la columna de controles se suman
      en vertical, asi que el panel crece ~150px. Como `.panel-card` (L747) es
      `position:absolute; top:0; bottom:0` SIN `overflow-y`, el contenido que
      no cabe se salia del panel y la cola quedaba inalcanzable (y el usuario
      no tenia forma de desplazarse). Por eso aqui se le da scroll.

   2) Scroll: `overflow-y: auto` va en `.panel-card`, NO en `#player-panel`
      (L744). Motivo: `.panel-card` lleva su propio fondo y su borde, asi que
      al hacer scroll el superficie se mantiene y no queda un hueco debajo; si
      scrolleara el contenedor, la caja de 400px se moveria y se veria el fondo
      del backdrop. Su altura ya esta anclada por `top:0; bottom:0`, asi que no
      hace falta ningun max-height.

   3) El boton de cierre (L752) es `position:absolute; top:18px; right:18px`
      dentro de `.panel-card`, asi que con el scroll se iria hacia arriba y
      desapareceria. Se replica EXACTAMENTE su caja (18px/18px, mismo
      font-size:18px, mismo `border:none`) cambiando solo el origen de las
      coordenadas a `fixed`, para que se vea igual que hoy y siga accesible.
      Verificado que ningun ancestro (#player-panel L744, .panel-card L747,
      body L75-78, html) declara transform, filter, backdrop-filter,
      perspective, contain ni will-change, asi que `fixed` se resuelve contra
      el viewport y NO se convierte en absolute. La apertura del panel
      (JavaScript.js L1531-1536) solo alterna la clase `.open` -> `display`
      (L745), sin animacion ni transform. Ademas el panel esta pegado al
      borde derecho (`right: 0` L744; `width: 100%` en <=1080px L839), asi que
      el `right: 18px` medido desde el viewport coincide con el `right: 18px`
      medido desde el panel.
      Fondo circular para que la ✕ se lea sobre el contenido que scrollea:
      `border-radius: 50%` con `padding: 6px` y compensate con `margin:
      -6px`, de forma que la CAJA y el CENTRO se quedan exactamente donde
      estaban (area tactil identica a la original, que era solo el glifo).

   4) Portada a 200px en vez de 240px: ahorra 40px de scroll y sigue siendo
      una imagen cuadrada y legible. Con `aspect-ratio: 1` y el
      `center/cover` que inyecta JavaScript.js (L1572), una portada real se ve
      COMPLETA y sin deformar. Las que no tienen imagen conservan el brillo
      diagonal: las reglas `.panel-cover[style*=...]:not([style*="url("])` y su
      `::before` (L765-775) no se tocan.

   Todo dentro de `min-width: 901px`: las reglas moviles (<=900px y <=768px) no
   cambian ni una propiedad. */
@media (min-width: 901px) {
  .panel-top {
    grid-template-columns: 1fr;
  }
  .panel-cover {
    width: 100%;
    max-width: 200px;
    aspect-ratio: 1;
    margin: 0 auto;
  }
  .panel-card {
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(155,92,255,0.35) transparent;
  }
  .panel-card::-webkit-scrollbar { width: 6px; }
  .panel-card::-webkit-scrollbar-thumb {
    background: rgba(155,92,255,0.35);
    border-radius: 3px;
  }
  .panel-card::-webkit-scrollbar-track { background: transparent; }
  .panel-close {
    position: fixed;
    top: 18px;
    right: 18px;
    background: rgba(25,20,40,0.85);
    border-radius: 50%;
    padding: 6px;
    margin: -6px;
  }
}