:root {
    --bg: #0a0a0c;
    --bg-elev: #121215;
    --bg-elev-2: #1a1a1f;
    --surface: #1f1f25;
    --border: rgba(255,255,255,0.08);
    --border-strong: rgba(255,255,255,0.14);
    --text: #f5f5f7;
    --text-dim: #a1a1aa;
    --text-faint: #6b6b75;
    --accent: #ff3b5c;
    --accent-2: #ff7849;
    --hero-1: #2a1530;
    --hero-2: #5a1c3a;
    --scrim: rgba(0,0,0,0.4);
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }
  html, body { height: 100%; overflow: hidden; }
  body {
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--bg);
    color: var(--text);
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
    user-select: none;
  }
  button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
  input { font-family: inherit; }

  /* LAYOUT */
  .app {
    display: grid;
    grid-template-columns: 260px 1fr;
    grid-template-rows: 1fr 90px;
    height: 100vh;
    width: 100vw;
  }

  /* SIDEBAR */
  .sidebar {
    grid-row: 1 / 3;
    background: rgba(8,8,10,0.85);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px 22px 16px;
    -webkit-app-region: drag;
  }
  .brand-logo {
    width: 28px; height: 28px;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    border-radius: 8px;
    position: relative;
    display: grid;
    place-items: center;
  }
  .brand-logo::after {
    content: '';
    width: 12px; height: 12px;
    border: 2px solid white;
    border-radius: 50%;
    border-top-color: transparent;
    border-right-color: transparent;
  }
  .brand-name {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: 22px;
    letter-spacing: -0.02em;
  }
  .traffic-lights {
    display: flex;
    gap: 6px;
    padding: 8px 18px 0;
  }
  .tl { width: 12px; height: 12px; border-radius: 50%; }
  .tl-r { background: #ff5f57; }
  .tl-y { background: #febc2e; }
  .tl-g { background: #28c840; }

  .sidebar-nav {
    flex: 1;
    overflow-y: auto;
    padding: 8px 12px 20px;
  }
  .sidebar-nav::-webkit-scrollbar { width: 6px; }
  .sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 3px; }

  .nav-section { margin-bottom: 18px; }
  .nav-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-faint);
    padding: 6px 12px;
    font-weight: 600;
  }
  .nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    color: var(--text-dim);
    font-size: 14px;
    font-weight: 500;
    transition: all 0.15s ease;
    width: 100%;
    text-align: left;
  }
  [hidden] { display: none !important; }
  .nav-item:hover { background: rgba(255,255,255,0.05); color: var(--text); }
  .nav-item.active { background: rgba(255,255,255,0.08); color: var(--text); }
  .nav-item svg { width: 18px; height: 18px; flex-shrink: 0; }
  .pwa-ios-hint {
    margin: 8px 12px 0;
    padding: 11px 12px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 10px;
    color: var(--text-dim);
    background: rgba(255,255,255,.035);
    font-size: 11px;
    line-height: 1.45;
  }
  .nav-item .pl-color {
    width: 14px; height: 14px;
    border-radius: 3px;
    flex-shrink: 0;
  }

  /* MAIN */
  .main {
    grid-column: 2;
    grid-row: 1;
    overflow-y: auto;
    position: relative;
    background:
      radial-gradient(ellipse 80% 50% at 50% 0%, var(--hero-1) 0%, transparent 60%),
      radial-gradient(ellipse 100% 70% at 80% 20%, var(--hero-2) 0%, transparent 50%),
      var(--bg);
    transition: background 0.8s ease;
  }
  .main::-webkit-scrollbar { width: 10px; }
  .main::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 5px; }

  .topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 32px;
    background: linear-gradient(180deg, rgba(10,10,12,0.7) 0%, rgba(10,10,12,0) 100%);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  .nav-arrows { display: flex; gap: 4px; }
  .icon-btn {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: rgba(0,0,0,0.4);
    display: grid;
    place-items: center;
    transition: all 0.15s;
    color: var(--text-dim);
  }
  .icon-btn:hover { background: rgba(0,0,0,0.6); color: var(--text); transform: scale(1.05); }
  .icon-btn svg { width: 16px; height: 16px; }

  .topbar-search {
    flex: 1;
    max-width: 380px;
    position: relative;
  }
  .topbar-search input {
    width: 100%;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 8px 14px 8px 36px;
    border-radius: 20px;
    font-size: 13px;
    outline: none;
    transition: all 0.2s;
  }
  .topbar-search input:focus { background: rgba(255,255,255,0.1); border-color: var(--border-strong); }
  .topbar-search input::placeholder { color: var(--text-faint); }
  .topbar-search svg {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px; height: 14px;
    color: var(--text-faint);
  }
  .topbar-spacer { flex: 1; }
  .avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff3b5c, #ff7849);
    display: grid;
    place-items: center;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
  }

  /* VIEWS */
  .view { padding: 0 32px 40px; display: none; }
  .view.active { display: block; }

  .view-hero {
    padding: 8px 0 32px;
  }
  .view-title {
    font-family: 'Fraunces', serif;
    font-size: 48px;
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.05;
    margin-bottom: 4px;
  }
  .view-subtitle {
    font-size: 14px;
    color: var(--text-dim);
    font-weight: 500;
  }

  .section { margin-bottom: 44px; }
  .section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 16px;
  }
  .section-title {
    font-family: 'Fraunces', serif;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.02em;
  }
  .section-more {
    color: var(--accent);
    font-size: 13px;
    font-weight: 600;
  }
  .section-more:hover { text-decoration: underline; }

  /* CARDS GRID */
  .grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 22px;
  }
  .grid-lg { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

  .card {
    cursor: pointer;
    transition: transform 0.2s ease;
  }
  .card:hover { transform: translateY(-2px); }
  .card-art {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 10px;
    margin-bottom: 12px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 30px -10px rgba(0,0,0,0.6);
  }
  .card-art .play-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.5) 100%);
    opacity: 0;
    display: grid;
    place-items: end;
    padding: 14px;
    transition: opacity 0.2s;
  }
  .card:hover .play-overlay { opacity: 1; }
  .play-circle {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--accent);
    display: grid;
    place-items: center;
    color: white;
    margin-left: auto;
    box-shadow: 0 8px 20px rgba(255,59,92,0.5);
    transition: transform 0.15s;
  }
  .play-circle:hover { transform: scale(1.08); }
  .play-circle svg { width: 18px; height: 18px; margin-left: 2px; }

  .card-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .card-subtitle {
    font-size: 13px;
    color: var(--text-dim);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* FEATURED HERO BANNER */
  .featured-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    margin-bottom: 44px;
  }
  .featured-card {
    border-radius: 14px;
    padding: 28px;
    min-height: 240px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: transform 0.2s;
  }
  .featured-card:hover { transform: translateY(-2px); }
  .featured-tag {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    color: rgba(255,255,255,0.7);
  }
  .featured-title {
    font-family: 'Fraunces', serif;
    font-size: 32px;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin-top: 8px;
  }
  .featured-meta {
    font-size: 13px;
    color: rgba(255,255,255,0.75);
    margin-top: 8px;
  }
  .featured-bottom {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 20px;
  }
  .featured-art {
    width: 80px; height: 80px;
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.4);
  }
  .featured-info { flex: 1; }
  .featured-album {
    font-weight: 600;
    font-size: 15px;
  }
  .featured-artist {
    color: rgba(255,255,255,0.7);
    font-size: 13px;
  }

  /* SONG LIST */
  .song-list {
    border-radius: 10px;
    overflow: hidden;
  }
  .song-list-head {
    display: grid;
    grid-template-columns: 40px 1fr 1fr 100px 60px;
    gap: 16px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-faint);
    font-weight: 600;
  }
  .song-row {
    display: grid;
    grid-template-columns: 40px 1fr 1fr 100px 60px;
    gap: 16px;
    padding: 10px 16px;
    align-items: center;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.12s;
  }
  .song-row:hover { background: rgba(255,255,255,0.06); }
  .song-row.playing { color: var(--accent); }
  .song-row.playing .song-title { color: var(--accent); }
  .song-num {
    text-align: center;
    color: var(--text-faint);
    font-variant-numeric: tabular-nums;
    font-size: 13px;
  }
  .song-row:hover .song-num { color: transparent; position: relative; }
  .song-row:hover .song-num::before {
    content: '▶';
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--text);
    font-size: 10px;
  }
  .song-row.playing .song-num { color: var(--accent); }

  .song-info { display: flex; align-items: center; gap: 12px; min-width: 0; }
  .song-art {
    width: 40px; height: 40px;
    border-radius: 4px;
    flex-shrink: 0;
  }
  .song-text { min-width: 0; }
  .song-title {
    font-weight: 500;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .song-artist {
    font-size: 12px;
    color: var(--text-dim);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .song-album {
    font-size: 13px;
    color: var(--text-dim);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .song-time {
    font-size: 13px;
    color: var(--text-dim);
    font-variant-numeric: tabular-nums;
  }
  .song-actions {
    display: flex;
    gap: 4px;
    justify-content: flex-end;
    opacity: 0;
    transition: opacity 0.15s;
  }
  .song-row:hover .song-actions { opacity: 1; }
  .song-row.liked .song-actions { opacity: 1; }
  .heart-btn {
    width: 28px; height: 28px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--text-dim);
    transition: all 0.15s;
  }
  .heart-btn:hover { color: var(--text); background: rgba(255,255,255,0.06); }
  .heart-btn.active { color: var(--accent); opacity: 1; }
  .heart-btn svg { width: 16px; height: 16px; }

  /* ALBUM DETAIL VIEW */
  .album-hero {
    display: flex;
    align-items: flex-end;
    gap: 32px;
    padding: 20px 0 32px;
  }
  .album-hero-art {
    width: 240px; height: 240px;
    border-radius: 12px;
    box-shadow: 0 30px 60px -20px rgba(0,0,0,0.7);
  }
  .album-hero-info {
    flex: 1;
    padding-bottom: 16px;
  }
  .album-hero-tag {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-dim);
    font-weight: 600;
    margin-bottom: 8px;
  }
  .album-hero-title {
    font-family: 'Fraunces', serif;
    font-size: 56px;
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1;
    margin-bottom: 12px;
  }
  .album-hero-artist {
    font-size: 18px;
    color: var(--text);
    margin-bottom: 4px;
    font-weight: 500;
  }
  .album-hero-meta {
    font-size: 13px;
    color: var(--text-dim);
  }
  .album-hero-actions {
    display: flex;
    gap: 12px;
    margin-top: 20px;
  }
  .btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--accent);
    color: white;
    padding: 9px 22px;
    border-radius: 24px;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.15s;
  }
  .btn-primary:hover { background: #ff2a4f; transform: scale(1.03); }
  .btn-primary svg { width: 14px; height: 14px; }
  .btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.1);
    color: var(--text);
    padding: 9px 18px;
    border-radius: 24px;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.15s;
  }
  .btn-secondary:hover { background: rgba(255,255,255,0.16); }

  /* NOW PLAYING BAR */
  .now-bar {
    grid-column: 2;
    grid-row: 2;
    background: rgba(10,10,12,0.95);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    border-top: 1px solid var(--border);
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    align-items: center;
    padding: 0 24px;
    gap: 20px;
    cursor: pointer;
  }
  .nb-left {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
  }
  .nb-art {
    width: 56px; height: 56px;
    border-radius: 6px;
    flex-shrink: 0;
    background: linear-gradient(135deg, #333, #555);
    overflow: hidden;
    position: relative;
  }
  .nb-art img, .nb-art > div {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .nb-info { min-width: 0; }
  .nb-title {
    font-size: 14px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .nb-artist {
    font-size: 12px;
    color: var(--text-dim);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .nb-like {
    color: var(--text-dim);
    padding: 4px;
  }
  .nb-like.active { color: var(--accent); }
  .nb-like svg { width: 18px; height: 18px; }

  .nb-center { display: flex; flex-direction: column; gap: 6px; align-items: center; padding: 0 20px; }
  .nb-controls {
    display: flex;
    align-items: center;
    gap: 16px;
  }
  .ctrl-btn {
    color: var(--text-dim);
    transition: color 0.15s;
    padding: 4px;
  }
  .ctrl-btn:hover { color: var(--text); }
  .ctrl-btn.active { color: var(--accent); }
  .ctrl-btn svg { width: 18px; height: 18px; display: block; }
  .play-btn {
    width: 36px; height: 36px;
    background: white;
    color: black;
    border-radius: 50%;
    display: grid;
    place-items: center;
    transition: transform 0.1s;
  }
  .play-btn:hover { transform: scale(1.06); }
  .play-btn svg { width: 16px; height: 16px; }

  .nb-progress {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    max-width: 540px;
  }
  .time-stamp {
    font-size: 11px;
    color: var(--text-faint);
    font-variant-numeric: tabular-nums;
    width: 38px;
    text-align: center;
  }
  .progress-bar {
    flex: 1;
    height: 4px;
    background: rgba(255,255,255,0.15);
    border-radius: 2px;
    cursor: pointer;
    position: relative;
    overflow: visible;
  }
  .progress-fill {
    height: 100%;
    background: var(--text-dim);
    border-radius: 2px;
    width: 0%;
    position: relative;
    transition: background 0.15s;
  }
  .progress-bar:hover .progress-fill { background: var(--accent); }
  .progress-fill::after {
    content: '';
    position: absolute;
    right: -6px; top: 50%;
    transform: translateY(-50%);
    width: 12px; height: 12px;
    background: white;
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.15s;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  }
  .progress-bar:hover .progress-fill::after { opacity: 1; }

  .nb-right {
    display: flex;
    align-items: center;
    gap: 14px;
    justify-content: flex-end;
  }
  .vol-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 130px;
  }
  .vol-bar {
    flex: 1;
    height: 4px;
    background: rgba(255,255,255,0.15);
    border-radius: 2px;
    cursor: pointer;
    position: relative;
  }
  .vol-fill {
    height: 100%;
    background: var(--text-dim);
    border-radius: 2px;
    width: 70%;
  }

  /* FULL SCREEN PLAYER */
  .player {
    position: fixed;
    inset: 0;
    background: var(--bg);
    z-index: 100;
    transform: translateY(100%);
    transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .player.open { transform: translateY(0); }
  .player-bg {
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse at 30% 20%, var(--hero-1) 0%, transparent 60%),
      radial-gradient(ellipse at 70% 80%, var(--hero-2) 0%, transparent 60%),
      var(--bg);
    transition: background 0.8s ease;
    z-index: 0;
  }
  .player-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    backdrop-filter: blur(80px);
    -webkit-backdrop-filter: blur(80px);
    background: rgba(0,0,0,0.3);
  }
  .player-content {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 60px 60px 40px;
    overflow: hidden;
  }
  .player-close {
    position: absolute;
    top: 24px; left: 24px;
    z-index: 2;
  }
  .player-tabs {
    position: absolute;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 4px;
    background: rgba(0,0,0,0.3);
    border-radius: 100px;
    padding: 4px;
    z-index: 2;
  }
  .player-tab {
    padding: 6px 16px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-dim);
    transition: all 0.2s;
  }
  .player-tab.active { background: rgba(255,255,255,0.12); color: var(--text); }

  .player-body {
    flex: 1;
    display: grid;
    grid-template-columns: minmax(280px, 480px) 1fr;
    gap: 60px;
    align-items: center;
    max-width: 1300px;
    margin: 0 auto;
    width: 100%;
    padding-top: 40px;
  }
  .player-art-wrap {
    aspect-ratio: 1;
    width: 100%;
    max-width: 480px;
    border-radius: 14px;
    box-shadow: 0 50px 80px -30px rgba(0,0,0,0.8);
    position: relative;
    overflow: hidden;
  }
  .player-art-wrap.playing { animation: artPulse 4s ease-in-out infinite; }
  @keyframes artPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.015); }
  }

  .player-right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
  }
  .player-track-info { margin-bottom: 32px; }
  .player-track-title {
    font-family: 'Fraunces', serif;
    font-size: 44px;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin-bottom: 8px;
  }
  .player-track-artist {
    font-size: 22px;
    color: rgba(255,255,255,0.85);
    font-weight: 500;
  }
  .player-progress {
    margin-bottom: 28px;
  }
  .player-progress-bar {
    height: 5px;
    background: rgba(255,255,255,0.18);
    border-radius: 3px;
    cursor: pointer;
    position: relative;
    margin-bottom: 8px;
  }
  .player-progress-fill {
    height: 100%;
    background: white;
    border-radius: 3px;
    width: 0%;
    position: relative;
  }
  .player-time-row {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: rgba(255,255,255,0.6);
    font-variant-numeric: tabular-nums;
  }
  .player-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    margin-bottom: 32px;
  }
  .pc-btn {
    color: rgba(255,255,255,0.9);
    transition: all 0.15s;
  }
  .pc-btn:hover { transform: scale(1.1); color: white; }
  .pc-btn svg { width: 28px; height: 28px; display: block; }
  .pc-btn.small svg { width: 22px; height: 22px; }
  .pc-btn.active { color: var(--accent); }
  .pc-play {
    width: 64px; height: 64px;
    background: white;
    color: black;
    border-radius: 50%;
    display: grid;
    place-items: center;
  }
  .pc-play:hover { transform: scale(1.06); }
  .pc-play svg { width: 28px; height: 28px; }

  .player-bottom-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
  }
  .player-vol {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    max-width: 240px;
  }
  .player-vol svg { width: 16px; color: rgba(255,255,255,0.7); }

  /* LYRICS / QUEUE PANELS */
  .player-panel {
    display: none;
    height: 100%;
    overflow-y: auto;
    padding: 60px 80px;
    max-width: 900px;
    margin: 0 auto;
  }
  .player-panel::-webkit-scrollbar { width: 8px; }
  .player-panel::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 4px; }
  /* Paneles excluyentes — !important para que ganen sobre cualquier regla en media queries */
  .player.panel-lyrics .player-body { display: none !important; }
  .player.panel-lyrics .panel-lyrics-content { display: block !important; }
  .player.panel-queue .player-body { display: none !important; }
  .player.panel-queue .panel-queue-content { display: block !important; }

  .lyrics-empty {
    text-align: center;
    padding: 80px 20px;
  }
  .lyrics-empty-icon {
    width: 60px; height: 60px;
    border-radius: 50%;
    background: rgba(255,255,255,0.06);
    display: grid;
    place-items: center;
    margin: 0 auto 16px;
    color: var(--text-dim);
  }
  .lyrics-empty h3 {
    font-family: 'Fraunces', serif;
    font-size: 26px;
    font-weight: 600;
    margin-bottom: 8px;
  }
  .lyrics-empty p { color: var(--text-dim); max-width: 380px; margin: 0 auto; line-height: 1.5; }

  .queue-title {
    font-family: 'Fraunces', serif;
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 4px;
  }
  .queue-sub { color: var(--text-dim); font-size: 13px; margin-bottom: 24px; }
  .queue-section-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-faint);
    font-weight: 600;
    padding: 16px 0 8px;
    border-top: 1px solid var(--border);
    margin-top: 12px;
  }
  .queue-section-label:first-of-type { border-top: none; margin-top: 0; padding-top: 0; }

  /* SEARCH VIEW */
  .search-hero {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 32px;
  }
  .search-big {
    flex: 1;
    background: rgba(255,255,255,0.08);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 14px 20px 14px 50px;
    border-radius: 28px;
    font-size: 16px;
    outline: none;
    position: relative;
  }
  .search-wrap { position: relative; flex: 1; }
  .search-wrap svg {
    position: absolute;
    left: 20px; top: 50%;
    transform: translateY(-50%);
    width: 18px;
    color: var(--text-faint);
  }
  .search-categories {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
  }
  .category-card {
    padding: 18px;
    border-radius: 10px;
    aspect-ratio: 16/10;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.15s;
  }
  .category-card:hover { transform: scale(1.02); }
  .category-name {
    font-family: 'Fraunces', serif;
    font-size: 22px;
    font-weight: 600;
    color: white;
    letter-spacing: -0.01em;
    line-height: 1.05;
  }

  /* SCROLLBARS for player panels */
  .player-panel::-webkit-scrollbar { width: 8px; }

  /* MODAL */
  .modal-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.7);
    z-index: 200;
    display: none;
    place-items: center;
    backdrop-filter: blur(10px);
  }
  .modal-backdrop.open { display: grid; }
  .modal {
    width: 420px;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 28px;
  }
  .modal h3 {
    font-family: 'Fraunces', serif;
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 6px;
  }
  .modal p { color: var(--text-dim); font-size: 13px; margin-bottom: 20px; }
  .modal input,
  .modal select,
  .modal textarea {
    width: 100%;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 12px 14px;
    border-radius: 8px;
    outline: none;
    font-size: 14px;
    margin-bottom: 16px;
    box-sizing: border-box;
    font-family: inherit;
  }
  .modal textarea { resize: vertical; min-height: 120px; }
  .modal label { display:block; color:var(--text-dim); font-size:12px; margin:0 0 6px; }
  .modal input:focus, .modal select:focus, .modal textarea:focus { border-color: var(--accent); }
  .modal-status { min-height:20px; margin:0 0 12px; color:var(--text-dim); font-size:13px; }
  .modal-actions { display: flex; gap: 8px; justify-content: flex-end; }
  .btn-ghost {
    padding: 8px 18px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 13px;
    color: var(--text-dim);
  }
  .btn-ghost:hover { color: var(--text); }

  /* TOAST */
  .toast {
    position: fixed;
    bottom: 110px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: rgba(255,255,255,0.95);
    color: black;
    padding: 10px 20px;
    border-radius: 24px;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 10px 30px rgba(0,0,0,0.4);
    opacity: 0;
    transition: all 0.3s;
    z-index: 300;
    pointer-events: none;
  }
  .toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }

  /* Empty state */
  .empty-state {
    text-align: center;
    padding: 80px 20px;
    color: var(--text-dim);
  }
  .empty-state h3 { 
    font-family: 'Fraunces', serif;
    font-size: 22px; 
    font-weight: 600;
    color: var(--text);
    margin-bottom: 6px;
  }

/* ============================================================
   RESPONSIVE — móvil y tablet (mejorado v2)
   ============================================================ */
@media (max-width: 767px) {
  /* ============================================================
     FIX CRÍTICO: en móvil, romper el grid de 2 columnas.
     Sin esto, .main y .now-bar quedan en column 2 (260px a la derecha)
     y el contenido se sale de la pantalla.
     ============================================================ */
  .app {
    grid-template-columns: 1fr !important;
    grid-template-rows: 1fr 70px !important;
  }
  .main {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
  .now-bar {
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    max-width: 100vw !important;
  }

  .sidebar {
    position: fixed;
    left: -320px;
    top: 0;
    bottom: 0;
    width: 290px;
    max-width: 80vw;
    z-index: 999;
    transition: left 0.32s cubic-bezier(0.32, 0.72, 0, 1);
    box-shadow: 8px 0 40px rgba(0,0,0,0.6);
    padding-top: 64px;  /* espacio para botón cerrar */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* Fondo sólido para que destaque sobre el contenido */
    background: linear-gradient(180deg, #0d0d10 0%, #08080a 100%);
    border-right: 1px solid rgba(255,255,255,0.05);
    /* Quitar del grid */
    grid-row: unset !important;
    grid-column: unset !important;
  }
  .sidebar.open { left: 0; }
  .main { padding: 12px; }
  .topbar { padding-left: 60px !important; }

  /* Botón hamburguesa — más visible y elegante */
  .mobile-menu-btn {
    display: flex !important;
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 1001;
    width: 44px;
    height: 44px;
    background: rgba(20, 20, 25, 0.92);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 12px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  }
  .mobile-menu-btn:active { transform: scale(0.95); }

  /* Ocultar el hamburger cuando el reproductor está abierto
     (para que se vea el botón cerrar del player) */
  body:has(.player.player-open) .mobile-menu-btn,
  body.player-is-open .mobile-menu-btn {
    display: none !important;
  }

  /* Botón cerrar del reproductor: SIEMPRE visible y bien grande */
  .player .player-close {
    display: flex !important;
    position: fixed !important;
    top: 14px !important;
    left: 14px !important;
    z-index: 1005 !important;
    width: 44px !important;
    height: 44px !important;
    background: rgba(20, 20, 25, 0.92) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    border-radius: 12px !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4) !important;
    align-items: center !important;
    justify-content: center !important;
    color: white !important;
    cursor: pointer !important;
  }
  .player .player-close svg {
    width: 24px !important;
    height: 24px !important;
    display: block !important;
  }

  /* Botón cerrar DENTRO del sidebar */
  .sidebar-close-btn {
    position: absolute !important;
    top: 16px;
    right: 16px;
    width: 38px;
    height: 38px;
    background: linear-gradient(135deg, rgba(255,59,92,0.18), rgba(255,120,73,0.12)) !important;
    border: 1px solid rgba(255,59,92,0.3) !important;
    border-radius: 10px !important;
    color: #fff !important;
    cursor: pointer;
    display: flex !important;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: all 0.2s;
  }
  .sidebar-close-btn:active { transform: scale(0.92); }
  .sidebar-close-btn:hover {
    background: linear-gradient(135deg, rgba(255,59,92,0.28), rgba(255,120,73,0.2)) !important;
  }

  /* Overlay backdrop */
  .sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.65);
    z-index: 998;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }
  .sidebar-overlay.show { display: block; }

  /* Brand más grande y centrado */
  .sidebar .brand {
    padding: 0 20px 16px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
  }
  .sidebar .brand-logo {
    width: 36px !important;
    height: 36px !important;
    flex-shrink: 0;
  }
  .sidebar .brand-name {
    font-size: 20px !important;
    font-weight: 700 !important;
  }

  /* Nav items — más cómodos al tap */
  .sidebar .nav-item {
    padding: 12px 18px !important;
    font-size: 15px !important;
    border-radius: 8px;
    margin: 2px 8px;
    width: calc(100% - 16px);
    transition: background 0.15s;
  }
  .sidebar .nav-item:active { transform: scale(0.98); }
  .sidebar .nav-item.active {
    background: linear-gradient(90deg, rgba(255,255,255,0.10), rgba(255,255,255,0.04));
  }
  .sidebar .nav-item svg { width: 20px; height: 20px; }

  .sidebar .nav-section { margin-bottom: 16px; }
  .sidebar .nav-label {
    padding: 10px 18px 6px !important;
    font-size: 11px !important;
    letter-spacing: 0.08em;
    color: rgba(255,255,255,0.4);
  }

  /* Grid se ajusta */
  .grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px; }
  .grid-lg, .featured-row, .featured-grid { grid-template-columns: 1fr !important; }
  .featured-card { padding: 16px; min-height: 170px; }

  /* Now playing bar — minimalista */
  .now-bar {
    padding: 8px 12px !important;
    height: auto !important;
    min-height: 64px;
    gap: 10px;
  }
  .nb-art { width: 48px !important; height: 48px !important; flex-shrink: 0; border-radius: 6px; }
  .nb-info { min-width: 0; flex: 1; }
  .nb-title, .nb-artist {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
  .nb-title { font-size: 14px !important; }
  .nb-artist { font-size: 12px !important; }
  .nb-right { gap: 4px !important; }
  .nb-volume-wrap, .nb-shuffle, .nb-repeat, .nb-queue-btn, .nb-lyrics-btn { display: none !important; }
  .nb-controls { gap: 4px !important; }

  /* Topbar */
  .topbar {
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 14px 10px 64px !important;
    min-height: 60px;
  }
  .nav-arrows { display: none; }
  .topbar-search {
    order: 3;
    width: 100%;
    margin-top: 4px;
  }
  .topbar-spacer { display: none; }
  .topbar button { font-size: 12px !important; padding: 6px 10px !important; }

  /* Reproductor */
  /* ============================================================
     REPRODUCTOR FULL-SCREEN MÓVIL — Versión corregida v2
     ============================================================
     CORRECCIONES APROBADAS:
     - Cover QUIETO en pestaña Reproduciendo, solo glow late
     - Luces del fondo GIRAN a saltos rápidos al BPM detectado
     - Pestaña Letra: mini-cover arriba + letra grande abajo
     - Pestaña Cola: solo lista (sin cover)
     - Solo UN panel visible a la vez (sin superposiciones)
     - Botón cerrar visible arriba a la izquierda
     - Volumen barra horizontal tappable
  ============================================================ */

  .player-content {
    padding: 56px 12px 16px !important;
    overflow: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
  }

  /* ─── Tabs arriba (pill iOS) ─── */
  .player-tabs {
    top: 14px !important;
    padding: 3px !important;
    background: rgba(0,0,0,0.5) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    white-space: nowrap;
    max-width: calc(100vw - 90px);
    z-index: 5 !important;
  }
  .player-tabs::-webkit-scrollbar { display: none; }
  .player-tab {
    font-size: 11px !important;
    padding: 5px 10px !important;
    flex-shrink: 0;
    letter-spacing: 0.02em;
  }
  .player-tab.active { background: rgba(255,255,255,0.18) !important; }

  /* ─── Botón cerrar arriba izquierda ─── */
  .player-close {
    top: 14px !important;
    left: 14px !important;
    width: 36px !important;
    height: 32px !important;
    background: rgba(0,0,0,0.5) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 10px !important;
    z-index: 5 !important;
  }

  /* ============================================================
     PANELES: solo UN visible a la vez (sin superposiciones)
  ============================================================ */
  /* Por defecto: panel principal (Reproduciendo) visible, otros ocultos */
  .player .player-body { display: flex !important; }
  .player .panel-lyrics-content { display: none !important; }
  .player .panel-queue-content { display: none !important; }

  /* Cuando está en modo lyrics: ocultar body, mostrar lyrics */
  .player.panel-lyrics .player-body { display: none !important; }
  .player.panel-lyrics .panel-lyrics-content { display: flex !important; }

  /* Cuando está en modo queue: ocultar body, mostrar queue */
  .player.panel-queue .player-body { display: none !important; }
  .player.panel-queue .panel-queue-content { display: block !important; }

  /* ─── Panel REPRODUCIENDO ─── */
  .player-body {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 0 4px !important;
    gap: 14px !important;
    grid-template-columns: unset !important;
    max-width: 100% !important;
    min-height: 0 !important;
    flex: 1 1 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-top: 8px !important;
  }

  /* Cola: scroll interno */
  .panel-queue-content {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 4px 4px 0 !important;
  }

  /* Cover QUIETO — solo el glow pulsa al beat */
  .player-art-wrap {
    width: 76% !important;
    max-width: 280px !important;
    aspect-ratio: 1 !important;
    height: auto !important;
    margin: 0 auto !important;
    border-radius: 18px !important;
    /* Glow FIJO (sin latido) - intensidad constante con el color del cover */
    box-shadow:
      0 30px 60px rgba(0,0,0,0.7),
      0 0 60px var(--player-c1, rgba(255,180,140,0.5)) !important;
    transform: none !important;
    animation: none !important;
    transition: box-shadow 0.6s ease !important;
    flex-shrink: 0 !important;
  }
  /* Sobrescribir cualquier animación previa que hiciera pulsar el cover */
  .player.is-playing .player-art-wrap { animation: none !important; }
  .player-art-wrap.playing { animation: none !important; }

  /* Info de la canción */
  .player-right {
    width: 100% !important;
    align-items: center !important;
    text-align: center !important;
  }
  .player-track-info {
    text-align: center !important;
    margin-bottom: 12px !important;
    width: 100%;
    padding: 0 8px;
  }
  .player-track-title {
    font-size: 22px !important;
    line-height: 1.15 !important;
    margin-bottom: 4px !important;
    word-break: break-word;
    text-shadow: 0 2px 12px rgba(0,0,0,0.6);
  }
  .player-track-artist {
    font-size: 14px !important;
    color: rgba(255,255,255,0.75) !important;
  }

  /* Barra de progreso */
  .player-progress {
    width: 100% !important;
    margin-bottom: 14px !important;
    padding: 0 4px !important;
  }
  .player-progress-bar { height: 3px !important; background: rgba(255,255,255,0.2) !important; }
  .player-time-row {
    font-size: 11px !important;
    color: rgba(255,255,255,0.65) !important;
    margin-top: 5px;
  }

  /* Controles principales */
  .player-controls {
    justify-content: center !important;
    gap: 22px !important;
    margin-bottom: 16px !important;
    width: 100%;
  }
  .pc-btn { color: rgba(255,255,255,0.92) !important; }
  .pc-btn svg { width: 28px !important; height: 28px !important; }
  .pc-btn.small svg { width: 19px !important; height: 19px !important; opacity: 0.7; }
  /* Botón play glass-morphism (sin pulsar) */
  .pc-play {
    width: 56px !important;
    height: 56px !important;
    background: rgba(255,255,255,0.18) !important;
    color: white !important;
    border: 1px solid rgba(255,255,255,0.25) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    animation: none !important;
  }
  .player.is-playing .pc-play { animation: none !important; }
  .pc-play svg { width: 24px !important; height: 24px !important; }

  /* Fila de abajo: like + volumen + dots */
  .player-bottom-row {
    width: 100% !important;
    padding: 0 8px !important;
    gap: 14px !important;
    justify-content: center !important;
    align-items: center !important;
  }
  .player-vol {
    flex: 1 !important;
    max-width: 180px !important;
    gap: 8px !important;
  }
  .player-vol .vol-bar {
    height: 4px !important;
    flex: 1;
    background: rgba(255,255,255,0.2) !important;
    border-radius: 2px !important;
    cursor: pointer !important;
    position: relative;
    /* Aumentar área tappable invisible para que sea fácil de tocar en móvil */
    padding: 12px 0 !important;
    background-clip: content-box !important;
  }

  /* ─── Panel LETRA (Mini-cover arriba + letra abajo, activa centrada) ─── */
  .panel-lyrics-content {
    flex-direction: column !important;
    padding: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
  /* Mini-cover header en panel Letra (lo genera el JS) */
  .lyrics-mini-header {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 8px 10px !important;
    margin: 0 12px 8px !important;
    background: rgba(255,255,255,0.06) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 12px !important;
    flex-shrink: 0 !important;
  }
  .lyrics-mini-cover {
    width: 40px !important;
    height: 40px !important;
    border-radius: 6px !important;
    flex-shrink: 0;
    background-size: cover;
    background-position: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.4);
  }
  .lyrics-mini-info { flex: 1; min-width: 0; color: white; }
  .lyrics-mini-title {
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .lyrics-mini-artist {
    font-size: 11px;
    color: rgba(255,255,255,0.6);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* Contenedor de letra — flex column 100% para que karaoke-lines scrollee bien */
  .lyrics-container {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }
  /* En móvil, ocultar el header interno del karaoke (ya tenemos mini-cover arriba) */
  /* karaoke-header visible en todos los dispositivos (v1.4.13) */
  /* Karaoke stage absorbe todo el alto del container */
  .lyrics-container .karaoke-stage {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }
  /* Karaoke lines: scroll interno con padding generoso para centrar línea activa */
  .lyrics-container .karaoke-lines {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 38vh 12px !important;
  }
  /* Línea activa más grande para destacar */
  .karaoke-line.active {
    font-size: 24px !important;
  }
  .karaoke-line {
    font-size: 19px !important;
    padding: 10px 6px !important;
  }

  /* ─── Panel COLA ─── */
  /* (panel-queue-content estilos arriba con flex y overflow) */

  /* ============================================================
     LIGHTS DEL FONDO — Giran a saltos al BPM detectado
  ============================================================ */
  .player-lights {
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    z-index: 1 !important;
    overflow: hidden !important;
  }
  .player-light {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 0 !important;
    filter: none !important;
    -webkit-filter: none !important;
    opacity: 1 !important;
    transform-origin: 50% 50% !important;
  }
  /* Cada light tiene un círculo dentro que se posiciona excéntrico,
     y se rota el contenedor para que el círculo gire alrededor del centro */
  .player-light::before {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(50px);
    -webkit-filter: blur(50px);
    pointer-events: none;
  }
  .player-light.l1::before {
    top: -10%; left: -15%;
    width: 75%; height: 65%;
    background: radial-gradient(circle, var(--player-c1, rgba(255,180,140,0.55)), transparent 65%);
  }
  .player-light.l2::before {
    bottom: -10%; right: -15%;
    width: 75%; height: 65%;
    background: radial-gradient(circle, var(--player-c2, rgba(255,100,140,0.50)), transparent 65%);
  }
  .player-light.l3::before {
    top: 35%; left: 25%;
    width: 55%; height: 55%;
    background: radial-gradient(circle, var(--player-c3, rgba(140,80,200,0.35)), transparent 65%);
  }
  /* Rotación a saltos rápidos al BPM */
  .player.is-playing .player-light.l1 {
    animation: light-beat-rot-cw var(--player-rot-dur, 8s) steps(12) infinite;
  }
  .player.is-playing .player-light.l2 {
    animation: light-beat-rot-ccw var(--player-rot-dur-2, 11s) steps(12) infinite;
  }
  .player.is-playing .player-light.l3 {
    animation: light-beat-rot-cw var(--player-rot-dur-3, 9s) steps(12) infinite;
  }
  @keyframes light-beat-rot-cw {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
  }
  @keyframes light-beat-rot-ccw {
    from { transform: rotate(0deg); }
    to   { transform: rotate(-360deg); }
  }

  /* Vista hero */
  .view-title { font-size: 26px !important; line-height: 1.1; }
  .view-subtitle { font-size: 13px !important; }
  .section-title { font-size: 16px !important; }
  .view-hero { padding: 14px 0 6px !important; }

  /* ============================================================
     Vista de ÁLBUM móvil — Estilo Apple Music con backdrop
  ============================================================ */
  .album-hero {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 14px !important;
    padding: 14px 0 20px !important;
    position: relative;
  }
  /* Backdrop con colores del cover detrás del hero */
  .album-hero::before {
    content: '';
    position: absolute;
    top: -20px; left: -20px; right: -20px;
    height: 60%;
    background:
      radial-gradient(ellipse at 20% 20%, var(--player-c1, rgba(255,59,92,0.18)) 0%, transparent 60%),
      radial-gradient(ellipse at 80% 30%, var(--player-c2, rgba(120,73,255,0.15)) 0%, transparent 60%);
    filter: blur(40px);
    z-index: -1;
    pointer-events: none;
  }
  .album-hero-art {
    width: 200px !important;
    height: 200px !important;
    margin: 0 auto !important;
    border-radius: 14px !important;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5),
                0 0 40px var(--player-c1, rgba(255,59,92,0.3)) !important;
  }
  .album-hero-info {
    width: 100% !important;
    padding-bottom: 0 !important;
    text-align: center !important;
  }
  .album-hero-tag {
    font-size: 11px !important;
    color: rgba(255,255,255,0.55) !important;
    margin-bottom: 6px !important;
  }
  .album-hero-title {
    font-size: 26px !important;
    line-height: 1.15 !important;
    word-break: break-word;
    margin-bottom: 4px !important;
    text-shadow: 0 2px 12px rgba(0,0,0,0.5);
  }
  .album-hero-artist {
    font-size: 14px !important;
    color: rgba(255,255,255,0.75) !important;
  }
  .album-hero-meta {
    font-size: 11px !important;
    color: rgba(255,255,255,0.55) !important;
    margin-top: 2px !important;
  }
  .album-hero-actions {
    justify-content: center !important;
    flex-wrap: wrap;
    gap: 10px !important;
    margin-top: 16px !important;
  }
  /* Botón Reproducir — blanco estilo Apple Music */
  .btn-primary {
    background: white !important;
    color: black !important;
    padding: 10px 22px !important;
    font-size: 13px !important;
    border-radius: 999px !important;
  }
  .btn-primary svg { stroke: black; fill: black; }
  /* Botón Aleatorio — glass */
  .btn-secondary {
    background: rgba(255,255,255,0.15) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    color: white !important;
    padding: 10px 18px !important;
    font-size: 13px !important;
    border-radius: 999px !important;
  }

  /* ============================================================
     Lista de canciones móvil — Cards en vez de tabla
     Usa las clases REALES del HTML: song-num, song-info, song-art,
     song-text, song-title, song-artist, song-time, song-actions
  ============================================================ */
  .song-list-head { display: none !important; }   /* Ocultar header de columnas */

  .song-row {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    grid-template-columns: unset !important;
    padding: 10px 12px !important;
    background: rgba(255,255,255,0.05) !important;
    border-radius: 12px !important;
    margin-bottom: 6px !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    transition: background 0.15s ease;
  }
  .song-row:hover, .song-row.active, .song-row.playing {
    background: rgba(255,255,255,0.10) !important;
  }
  .song-row .song-num { display: none !important; }
  .song-row .song-info {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    min-width: 0 !important;
  }
  .song-row .song-art {
    width: 44px !important;
    height: 44px !important;
    border-radius: 6px !important;
    flex-shrink: 0 !important;
    overflow: hidden !important;
    position: relative !important;
  }
  .song-row .song-art img,
  .song-row .song-art > div {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }
  .song-row .song-text {
    flex: 1 !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }
  .song-row .song-title {
    font-size: 14px !important;
    color: white !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin-bottom: 2px !important;
  }
  .song-row .song-artist {
    font-size: 11px !important;
    color: rgba(255,255,255,0.55) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .song-row .song-time {
    font-size: 11px !important;
    color: rgba(255,255,255,0.5) !important;
    flex-shrink: 0 !important;
    text-align: right !important;
  }
  .song-row .song-album { display: none !important; }
  .song-row .song-actions {
    flex-shrink: 0 !important;
    opacity: 1 !important;
  }
  .song-row .song-actions .heart-btn {
    color: rgba(255,255,255,0.4);
    padding: 6px;
  }
  .song-row .song-actions .heart-btn.active {
    color: var(--accent, #ff3b5c);
  }

  /* ============================================================
     Cards destacadas en Listen Now — glass con backdrop
  ============================================================ */
  .featured-card {
    background: linear-gradient(
      135deg,
      rgba(255,59,92,0.18) 0%,
      rgba(120,73,255,0.15) 100%
    ) !important;
    background:
      linear-gradient(135deg, var(--player-c1, rgba(255,59,92,0.18)) 0%, var(--player-c2, rgba(120,73,255,0.15)) 100%) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    border-radius: 14px !important;
    padding: 14px !important;
    box-shadow: none !important;
  }
  .featured-tag {
    font-size: 10px !important;
    color: rgba(255,255,255,0.6) !important;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 500;
    margin-bottom: 6px;
  }
  .featured-title {
    font-size: 18px !important;
    margin-bottom: 4px !important;
  }
  .featured-meta {
    font-size: 12px !important;
    color: rgba(255,255,255,0.75) !important;
    margin-bottom: 12px;
  }

  /* Modales */
  .modal, .auth-box { width: 92% !important; max-width: 380px; padding: 22px; }

  .featured-card, .card, .panel { box-shadow: none; }
}

@media (max-width: 480px) {
  .grid { grid-template-columns: 1fr !important; }
  .featured-title { font-size: 17px !important; }
  .view-title { font-size: 20px !important; }
  .search-categories { grid-template-columns: 1fr 1fr; }
  .category-card { min-height: 80px; font-size: 13px; }
  .nb-title { font-size: 13px !important; }
  .nb-art { width: 42px !important; height: 42px !important; }
  .topbar { padding: 8px 12px 8px 60px !important; }
  .topbar-search input { font-size: 13px; }
  .sidebar .brand-name { font-size: 18px !important; }
}

/* ============================================================
   MÓVIL HORIZONTAL — altura corta (landscape phone)
   ============================================================
   Cuando el celular se gira a horizontal, la pantalla queda
   ~800×360. El cover de 280px vertical no cabe → scroll molesto.
   Solución: layout horizontal estilo "tablet horizontal":
   cover izquierda + info derecha, aprovecha el ancho.
============================================================ */
@media (max-width: 767px) and (max-height: 500px) and (orientation: landscape) {
  /* Reproductor: layout horizontal */
  .player-content {
    padding: 50px 24px 16px !important;
    overflow-y: auto !important;
  }
  .player-body {
    display: grid !important;
    grid-template-columns: minmax(180px, 240px) 1fr !important;
    gap: 24px !important;
    align-items: center !important;
    padding-top: 0 !important;
    flex-direction: row !important;
  }
  .player-art-wrap {
    width: 100% !important;
    max-width: 240px !important;
    aspect-ratio: 1 !important;
    margin: 0 !important;
    border-radius: 14px !important;
    box-shadow:
      0 20px 40px rgba(0,0,0,0.7),
      0 0 50px var(--player-c1, rgba(255,180,140,0.5)) !important;
    animation: none !important;
    transform: none !important;
  }
  .player-right {
    width: 100% !important;
    align-items: flex-start !important;
    text-align: left !important;
    padding: 0 !important;
  }
  .player-track-info {
    text-align: left !important;
    margin-bottom: 10px !important;
    padding: 0 !important;
  }
  .player-track-title { font-size: 22px !important; margin-bottom: 2px !important; }
  .player-track-artist { font-size: 13px !important; }
  .player-progress { margin-bottom: 10px !important; padding: 0 !important; }
  .player-controls {
    justify-content: flex-start !important;
    gap: 18px !important;
    margin-bottom: 10px !important;
  }
  .pc-play { width: 48px !important; height: 48px !important; }
  .pc-play svg { width: 20px !important; height: 20px !important; }
  .pc-btn svg { width: 24px !important; height: 24px !important; }
  .pc-btn.small svg { width: 16px !important; height: 16px !important; }
  .player-bottom-row { justify-content: flex-start !important; gap: 12px !important; }
  .player-vol { max-width: 120px !important; }

  /* Tabs y close más compactos */
  .player-tabs { top: 10px !important; }
  .player-close { top: 10px !important; left: 10px !important; }

  /* ============================================================
     PANELES EXCLUYENTES en móvil horizontal — bug fix
  ============================================================ */
  /* Por defecto: solo el panel principal (Reproduciendo) visible */
  .player .player-body { display: grid !important; }
  .player .panel-lyrics-content { display: none !important; }
  .player .panel-queue-content { display: none !important; }

  /* Modo Letra: ocultar body, mostrar lyrics en layout horizontal */
  .player.panel-lyrics .player-body { display: none !important; }
  .player.panel-lyrics .panel-lyrics-content {
    display: flex !important;
    flex-direction: row !important;
    gap: 16px !important;
    align-items: flex-start !important;
    padding: 8px 16px 0 !important;
  }
  /* Mini-cover queda a la izquierda en columna estrecha */
  .player.panel-lyrics .lyrics-mini-header {
    flex-direction: column !important;
    max-width: 140px !important;
    flex-shrink: 0 !important;
    align-items: center !important;
    text-align: center !important;
    margin-bottom: 0 !important;
  }
  .player.panel-lyrics .lyrics-mini-cover {
    width: 100px !important;
    height: 100px !important;
  }
  /* Karaoke ocupa el resto del ancho */
  .player.panel-lyrics .lyrics-container {
    flex: 1 !important;
    padding: 0 !important;
    overflow-y: auto !important;
    max-height: calc(100vh - 80px);
  }

  /* Modo Cola: ocultar body, mostrar cola */
  .player.panel-queue .player-body { display: none !important; }
  .player.panel-queue .panel-queue-content {
    display: block !important;
    padding: 8px 16px 0 !important;
    overflow-y: auto !important;
    max-height: calc(100vh - 80px);
  }

  /* Pestañas (tabs) más visibles y tappables en móvil horizontal */
  .player-tabs {
    max-width: calc(100vw - 70px) !important;
    z-index: 10 !important;
  }
  .player-tab {
    font-size: 11px !important;
    padding: 5px 11px !important;
  }
}

/* ============================================================
   TABLET — entre 901px y 1280px (iPad, Samsung Tab)
   ============================================================
   Funciona tanto en vertical como en horizontal:
   - Vertical (portrait): layout estilo móvil pero MÁS GRANDE
   - Horizontal (landscape): layout estilo desktop pero compacto
============================================================ */

/* ============================================================
   TABLET (768-1366px) — REPRODUCTOR completo estilo móvil
   ============================================================
   Replica TODO el rediseño móvil con tamaños ajustados:
   - Cover centrado arriba MÁS GRANDE (380px portrait, 280px landscape)
   - Luces giran al BPM
   - Paneles excluyentes (Reproduciendo / Letra / Cola)
   - Karaoke con línea activa centrada
   - Mini-cover en pestaña Letra
   - Botón cerrar arriba izquierda visible
============================================================ */

/* ── TABLET VERTICAL (portrait) ── */
@media (min-width: 768px) and (max-width: 1600px) and (orientation: portrait) {

  /* Layout: sidebar oculto, now-bar abajo siempre visible */
  .app {
    grid-template-columns: 1fr !important;
    grid-template-rows: 1fr 80px !important;
    height: 100vh !important;
    overflow: hidden !important;
  }
  .main {
    grid-column: 1 !important;
    grid-row: 1 !important;
    padding: 24px !important;
    overflow-y: auto !important;
  }
  .now-bar {
    grid-column: 1 !important;
    grid-row: 2 !important;
    display: grid !important;
    grid-template-columns: 1fr 2fr 1fr !important;
    align-items: center !important;
    padding: 0 20px !important;
    gap: 16px !important;
    height: 80px !important;
    background: rgba(10,10,12,0.95) !important;
    backdrop-filter: blur(40px) !important;
    border-top: 1px solid var(--border) !important;
    cursor: pointer !important;
  }
  .sidebar {
    position: fixed !important;
    left: -340px !important;
    top: 0; bottom: 0;
    width: 320px !important;
    z-index: 999 !important;
    transition: left 0.32s cubic-bezier(0.32, 0.72, 0, 1) !important;
    padding-top: 64px !important;
  }
  .sidebar.open { left: 0 !important; }
  .mobile-menu-btn, .sidebar-close-btn { display: flex !important; }

  /* ============================================================
     REPRODUCTOR FULL-SCREEN tablet vertical (igual móvil pero más grande)
  ============================================================ */
  .player-content {
    padding: 70px 32px 24px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
  }

  /* Tabs arriba (pill iOS) */
  .player-tabs {
    top: 18px !important;
    padding: 4px !important;
    background: rgba(0,0,0,0.5) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    z-index: 5 !important;
  }
  .player-tab {
    font-size: 13px !important;
    padding: 6px 14px !important;
    letter-spacing: 0.02em;
  }
  .player-tab.active { background: rgba(255,255,255,0.18) !important; }

  /* Botón cerrar arriba izquierda */
  .player .player-close {
    display: flex !important;
    position: fixed !important;
    top: 18px !important;
    left: 18px !important;
    z-index: 1005 !important;
    width: 48px !important;
    height: 44px !important;
    background: rgba(20, 20, 25, 0.92) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    border-radius: 12px !important;
    backdrop-filter: blur(20px) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4) !important;
    align-items: center !important;
    justify-content: center !important;
    color: white !important;
    cursor: pointer !important;
  }
  .player .player-close svg { width: 28px !important; height: 28px !important; }

  /* Paneles excluyentes */
  .player .player-body { display: flex !important; }
  .player .panel-lyrics-content { display: none !important; }
  .player .panel-queue-content { display: none !important; }
  .player.panel-lyrics .player-body { display: none !important; }
  .player.panel-lyrics .panel-lyrics-content { display: flex !important; }
  .player.panel-queue .player-body { display: none !important; }
  .player.panel-queue .panel-queue-content { display: block !important; }

  /* Panel REPRODUCIENDO: vertical centrado */
  .player-body {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 12px 0 0 !important;
    gap: 22px !important;
    grid-template-columns: unset !important;
    max-width: 100% !important;
    min-height: 0 !important;
    flex: 1 1 0 !important;
    overflow-y: auto !important;
  }

  /* Cover GRANDE centrado (380px) */
  .player-art-wrap {
    width: 60% !important;
    max-width: 380px !important;
    aspect-ratio: 1 !important;
    height: auto !important;
    margin: 0 auto !important;
    border-radius: 22px !important;
    box-shadow:
      0 40px 80px rgba(0,0,0,0.7),
      0 0 80px var(--player-c1, rgba(255,180,140,0.5)) !important;
    transform: none !important;
    animation: none !important;
    transition: box-shadow 0.6s ease !important;
    flex-shrink: 0 !important;
  }
  .player.is-playing .player-art-wrap { animation: none !important; }
  .player-art-wrap.playing { animation: none !important; }

  /* Info canción */
  .player-right { width: 100% !important; align-items: center !important; text-align: center !important; }
  .player-track-info { text-align: center !important; margin-bottom: 16px !important; width: 100%; padding: 0 8px; }
  .player-track-title {
    font-size: 32px !important;
    line-height: 1.15 !important;
    margin-bottom: 6px !important;
    word-break: break-word;
    text-shadow: 0 2px 12px rgba(0,0,0,0.6);
  }
  .player-track-artist { font-size: 17px !important; color: rgba(255,255,255,0.75) !important; }

  /* Barra de progreso */
  .player-progress { width: 100% !important; max-width: 600px; margin: 0 auto 18px !important; padding: 0 4px !important; }
  .player-progress-bar { height: 4px !important; background: rgba(255,255,255,0.2) !important; }
  .player-time-row { font-size: 13px !important; color: rgba(255,255,255,0.65) !important; margin-top: 6px; }

  /* Controles centrados */
  .player-controls { justify-content: center !important; gap: 32px !important; margin-bottom: 20px !important; width: 100%; }
  .pc-btn { color: rgba(255,255,255,0.92) !important; }
  .pc-btn svg { width: 32px !important; height: 32px !important; }
  .pc-btn.small svg { width: 22px !important; height: 22px !important; opacity: 0.7; }
  .pc-play {
    width: 72px !important;
    height: 72px !important;
    background: rgba(255,255,255,0.18) !important;
    color: white !important;
    border: 1px solid rgba(255,255,255,0.25) !important;
    backdrop-filter: blur(20px) !important;
    animation: none !important;
  }
  .pc-play svg { width: 30px !important; height: 30px !important; }

  /* Fila inferior (like, volumen, dots) */
  .player-bottom-row {
    width: 100% !important;
    max-width: 500px !important;
    margin: 0 auto !important;
    padding: 0 8px !important;
    gap: 18px !important;
    justify-content: center !important;
    align-items: center !important;
  }
  .player-vol { flex: 1 !important; max-width: 240px !important; gap: 10px !important; }
  .player-vol .vol-bar {
    height: 4px !important;
    flex: 1;
    background: rgba(255,255,255,0.2) !important;
    border-radius: 2px !important;
    cursor: pointer !important;
    padding: 12px 0 !important;
    background-clip: content-box !important;
  }

  /* ─── Panel LETRA (mini-cover arriba + karaoke abajo) ─── */
  .panel-lyrics-content {
    flex-direction: column !important;
    padding: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
  .lyrics-mini-header {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 14px !important;
    margin: 0 auto 16px !important;
    max-width: 500px !important;
    background: rgba(255,255,255,0.06) !important;
    backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 14px !important;
    flex-shrink: 0 !important;
  }
  .lyrics-mini-cover {
    width: 52px !important;
    height: 52px !important;
    border-radius: 8px !important;
    flex-shrink: 0;
    background-size: cover;
    background-position: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.4);
  }
  .lyrics-mini-info { flex: 1; min-width: 0; color: white; }
  .lyrics-mini-title { font-size: 15px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .lyrics-mini-artist { font-size: 13px; color: rgba(255,255,255,0.6); }

  /* Contenedor de letra con scroll interno */
  .lyrics-container {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }
  /* karaoke-header visible en todos los dispositivos (v1.4.13) */
  .lyrics-container .karaoke-stage {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .lyrics-container .karaoke-lines {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 38vh 24px !important;
  }
  .karaoke-line.active { font-size: 32px !important; }
  .karaoke-line { font-size: 22px !important; padding: 12px 8px !important; }

  /* ─── Panel COLA ─── */
  .panel-queue-content {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 4px 24px 0 !important;
  }

  /* ============================================================
     LIGHTS FONDO — Giran a saltos al BPM (igual que móvil)
  ============================================================ */
  .player-lights {
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    z-index: 1 !important;
    overflow: hidden !important;
  }
  .player-light {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 0 !important;
    filter: none !important;
    opacity: 1 !important;
    transform-origin: 50% 50% !important;
  }
  .player-light::before {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    pointer-events: none;
  }
  .player-light.l1::before {
    top: -10%; left: -15%;
    width: 75%; height: 65%;
    background: radial-gradient(circle, var(--player-c1, rgba(255,180,140,0.55)), transparent 65%);
  }
  .player-light.l2::before {
    bottom: -10%; right: -15%;
    width: 75%; height: 65%;
    background: radial-gradient(circle, var(--player-c2, rgba(255,100,140,0.50)), transparent 65%);
  }
  .player-light.l3::before {
    top: 35%; left: 25%;
    width: 55%; height: 55%;
    background: radial-gradient(circle, var(--player-c3, rgba(140,80,200,0.35)), transparent 65%);
  }
  .player.is-playing .player-light.l1 {
    animation: light-beat-rot-cw var(--player-rot-dur, 8s) steps(12) infinite;
  }
  .player.is-playing .player-light.l2 {
    animation: light-beat-rot-ccw var(--player-rot-dur-2, 11s) steps(12) infinite;
  }
  .player.is-playing .player-light.l3 {
    animation: light-beat-rot-cw var(--player-rot-dur-3, 9s) steps(12) infinite;
  }

  /* Vista de álbum */
  .album-hero { flex-direction: column !important; align-items: center !important; text-align: center !important; }
  .album-hero-art { width: 280px !important; height: 280px !important; }
  .album-hero-title { font-size: 36px !important; }
}

/* ── TABLET HORIZONTAL (landscape) ── */
@media (min-width: 768px) and (max-width: 1600px) and (orientation: landscape) {

  /* Sidebar compacto + now-bar abajo */
  .app {
    grid-template-columns: 220px 1fr !important;
    grid-template-rows: 1fr 80px !important;
    height: 100vh !important;
    overflow: hidden !important;
  }
  .main {
    grid-column: 2 !important;
    grid-row: 1 !important;
    padding: 18px !important;
    overflow-y: auto !important;
  }
  .now-bar {
    grid-column: 2 !important;
    grid-row: 2 !important;
    display: grid !important;
    grid-template-columns: 1fr 2fr 1fr !important;
    align-items: center !important;
    padding: 0 18px !important;
    gap: 14px !important;
    height: 80px !important;
    background: rgba(10,10,12,0.95) !important;
    backdrop-filter: blur(40px) !important;
    border-top: 1px solid var(--border) !important;
    cursor: pointer !important;
  }
  .sidebar {
    position: relative !important;
    left: 0 !important;
    grid-row: 1 / 3 !important;
    grid-column: 1 !important;
    padding-top: 16px !important;
    transition: none !important;
  }
  .mobile-menu-btn, .sidebar-close-btn { display: none !important; }

  /* ============================================================
     REPRODUCTOR FULL-SCREEN tablet horizontal
     Cover centrado pero un poco más pequeño (no cabe vertical 380px)
  ============================================================ */
  .player-content {
    padding: 60px 32px 20px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
  }

  .player-tabs {
    top: 14px !important;
    padding: 4px !important;
    background: rgba(0,0,0,0.5) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    z-index: 5 !important;
  }
  .player-tab { font-size: 13px !important; padding: 6px 14px !important; }
  .player-tab.active { background: rgba(255,255,255,0.18) !important; }

  .player .player-close {
    display: flex !important;
    position: fixed !important;
    top: 14px !important;
    left: 14px !important;
    z-index: 1005 !important;
    width: 44px !important;
    height: 40px !important;
    background: rgba(20, 20, 25, 0.92) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    border-radius: 12px !important;
    backdrop-filter: blur(20px) !important;
    align-items: center !important;
    justify-content: center !important;
    color: white !important;
  }
  .player .player-close svg { width: 24px !important; height: 24px !important; }

  /* Paneles excluyentes */
  .player .player-body { display: flex !important; }
  .player .panel-lyrics-content { display: none !important; }
  .player .panel-queue-content { display: none !important; }
  .player.panel-lyrics .player-body { display: none !important; }
  .player.panel-lyrics .panel-lyrics-content { display: flex !important; }
  .player.panel-queue .player-body { display: none !important; }
  .player.panel-queue .panel-queue-content { display: block !important; }

  /* Reproduciendo: cover centrado MEDIANO (280px porque pantalla es baja) */
  .player-body {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 8px 0 0 !important;
    gap: 14px !important;
    grid-template-columns: unset !important;
    max-width: 100% !important;
    min-height: 0 !important;
    flex: 1 1 0 !important;
    overflow-y: auto !important;
  }
  .player-art-wrap {
    width: auto !important;
    height: 38vh !important;
    max-height: 280px !important;
    aspect-ratio: 1 !important;
    margin: 0 auto !important;
    border-radius: 18px !important;
    box-shadow:
      0 30px 60px rgba(0,0,0,0.7),
      0 0 70px var(--player-c1, rgba(255,180,140,0.5)) !important;
    transform: none !important;
    animation: none !important;
    transition: box-shadow 0.6s ease !important;
    flex-shrink: 0 !important;
  }
  .player.is-playing .player-art-wrap { animation: none !important; }

  .player-right { width: 100% !important; align-items: center !important; text-align: center !important; }
  .player-track-info { text-align: center !important; margin-bottom: 12px !important; padding: 0 8px; }
  .player-track-title { font-size: 24px !important; line-height: 1.15 !important; margin-bottom: 4px !important; }
  .player-track-artist { font-size: 14px !important; color: rgba(255,255,255,0.75) !important; }

  .player-progress { width: 100% !important; max-width: 560px; margin: 0 auto 12px !important; padding: 0 4px !important; }
  .player-progress-bar { height: 3px !important; background: rgba(255,255,255,0.2) !important; }
  .player-time-row { font-size: 12px !important; color: rgba(255,255,255,0.65) !important; margin-top: 5px; }

  .player-controls { justify-content: center !important; gap: 26px !important; margin-bottom: 14px !important; }
  .pc-btn svg { width: 28px !important; height: 28px !important; }
  .pc-btn.small svg { width: 20px !important; height: 20px !important; opacity: 0.7; }
  .pc-play {
    width: 60px !important; height: 60px !important;
    background: rgba(255,255,255,0.18) !important;
    border: 1px solid rgba(255,255,255,0.25) !important;
    backdrop-filter: blur(20px) !important;
    animation: none !important;
  }
  .pc-play svg { width: 26px !important; height: 26px !important; }

  .player-bottom-row {
    width: 100% !important;
    max-width: 460px !important;
    margin: 0 auto !important;
    padding: 0 8px !important;
    gap: 16px !important;
    justify-content: center !important;
    align-items: center !important;
  }
  .player-vol { flex: 1 !important; max-width: 200px !important; gap: 8px !important; }
  .player-vol .vol-bar {
    height: 4px !important;
    flex: 1;
    background: rgba(255,255,255,0.2) !important;
    border-radius: 2px !important;
    cursor: pointer !important;
    padding: 12px 0 !important;
    background-clip: content-box !important;
  }

  /* Panel Letra */
  .panel-lyrics-content {
    flex-direction: column !important;
    padding: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
  }
  .lyrics-mini-header {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 8px 12px !important;
    margin: 0 auto 12px !important;
    max-width: 400px !important;
    background: rgba(255,255,255,0.06) !important;
    backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 12px !important;
    flex-shrink: 0 !important;
  }
  .lyrics-mini-cover { width: 44px !important; height: 44px !important; border-radius: 6px !important; }
  .lyrics-mini-title { font-size: 13px; font-weight: 500; }
  .lyrics-mini-artist { font-size: 11px; color: rgba(255,255,255,0.6); }
  .lyrics-container {
    flex: 1 1 0 !important; min-height: 0 !important; padding: 0 !important;
    display: flex !important; flex-direction: column !important; overflow: hidden !important;
  }
  /* karaoke-header visible en todos los dispositivos (v1.4.13) */
  .lyrics-container .karaoke-stage {
    flex: 1 1 0 !important; min-height: 0 !important;
    display: flex !important; flex-direction: column !important;
  }
  .lyrics-container .karaoke-lines {
    flex: 1 1 0 !important; min-height: 0 !important;
    overflow-y: auto !important; padding: 30vh 40px !important;
  }
  .karaoke-line.active { font-size: 26px !important; }
  .karaoke-line { font-size: 18px !important; padding: 10px 8px !important; }

  /* Panel Cola */
  .panel-queue-content {
    flex: 1 1 0 !important; min-height: 0 !important;
    overflow-y: auto !important; padding: 4px 32px 0 !important;
  }

  /* Lights */
  .player-lights {
    position: absolute !important; inset: 0 !important;
    pointer-events: none !important; z-index: 1 !important; overflow: hidden !important;
  }
  .player-light {
    position: absolute !important; inset: 0 !important;
    width: 100% !important; height: 100% !important;
    border-radius: 0 !important; filter: none !important;
    opacity: 1 !important; transform-origin: 50% 50% !important;
  }
  .player-light::before {
    content: ''; position: absolute; border-radius: 50%;
    filter: blur(55px); pointer-events: none;
  }
  .player-light.l1::before {
    top: -10%; left: -15%; width: 75%; height: 65%;
    background: radial-gradient(circle, var(--player-c1, rgba(255,180,140,0.55)), transparent 65%);
  }
  .player-light.l2::before {
    bottom: -10%; right: -15%; width: 75%; height: 65%;
    background: radial-gradient(circle, var(--player-c2, rgba(255,100,140,0.50)), transparent 65%);
  }
  .player-light.l3::before {
    top: 35%; left: 25%; width: 55%; height: 55%;
    background: radial-gradient(circle, var(--player-c3, rgba(140,80,200,0.35)), transparent 65%);
  }
  .player.is-playing .player-light.l1 {
    animation: light-beat-rot-cw var(--player-rot-dur, 8s) steps(12) infinite;
  }
  .player.is-playing .player-light.l2 {
    animation: light-beat-rot-ccw var(--player-rot-dur-2, 11s) steps(12) infinite;
  }
  .player.is-playing .player-light.l3 {
    animation: light-beat-rot-cw var(--player-rot-dur-3, 9s) steps(12) infinite;
  }

  /* Vista de álbum tablet horizontal: cover izq + info der */
  .album-hero { flex-direction: row !important; gap: 32px !important; }
  .album-hero-art { width: 240px !important; height: 240px !important; }
  .album-hero-title { font-size: 36px !important; }
}

/* ============================================================
   TABLETS GRANDES (>1366px pero táctiles) — Galaxy Tab S8/S9 Ultra,
   iPad Pro 13" 2024, etc. usan resolución desktop pero son TÁCTILES.
   ============================================================
   Detección: ancho 1367-1920px + pointer:coarse (sin mouse) + hover:none
   Aplica el mismo diseño tablet landscape
============================================================ */
@media (min-width: 1367px) and (max-width: 1920px) and (pointer: coarse) {

  /* Layout idéntico tablet landscape */
  .app {
    grid-template-columns: 240px 1fr !important;
    grid-template-rows: 1fr 84px !important;
    height: 100vh !important;
    overflow: hidden !important;
  }
  .main {
    grid-column: 2 !important;
    grid-row: 1 !important;
    padding: 24px !important;
    overflow-y: auto !important;
  }
  .now-bar {
    grid-column: 2 !important;
    grid-row: 2 !important;
    display: grid !important;
    grid-template-columns: 1fr 2fr 1fr !important;
    align-items: center !important;
    padding: 0 24px !important;
    gap: 20px !important;
    height: 84px !important;
    background: rgba(10,10,12,0.95) !important;
    backdrop-filter: blur(40px) !important;
    border-top: 1px solid var(--border) !important;
    cursor: pointer !important;
  }
  .sidebar {
    position: relative !important;
    left: 0 !important;
    grid-row: 1 / 3 !important;
    grid-column: 1 !important;
    padding-top: 16px !important;
    transition: none !important;
  }
  .mobile-menu-btn, .sidebar-close-btn { display: none !important; }

  /* REPRODUCTOR full-screen estilo móvil */
  .player-content {
    padding: 70px 40px 24px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
  }

  .player-tabs {
    top: 18px !important;
    padding: 4px !important;
    background: rgba(0,0,0,0.5) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    z-index: 5 !important;
  }
  .player-tab { font-size: 14px !important; padding: 7px 16px !important; }
  .player-tab.active { background: rgba(255,255,255,0.18) !important; }

  .player .player-close {
    display: flex !important;
    position: fixed !important;
    top: 18px !important;
    left: 18px !important;
    z-index: 1005 !important;
    width: 48px !important;
    height: 44px !important;
    background: rgba(20, 20, 25, 0.92) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    border-radius: 12px !important;
    backdrop-filter: blur(20px) !important;
    align-items: center !important;
    justify-content: center !important;
    color: white !important;
  }
  .player .player-close svg { width: 28px !important; height: 28px !important; }

  /* Paneles excluyentes */
  .player .player-body { display: flex !important; }
  .player .panel-lyrics-content { display: none !important; }
  .player .panel-queue-content { display: none !important; }
  .player.panel-lyrics .player-body { display: none !important; }
  .player.panel-lyrics .panel-lyrics-content { display: flex !important; }
  .player.panel-queue .player-body { display: none !important; }
  .player.panel-queue .panel-queue-content { display: block !important; }

  /* Reproduciendo: cover centrado MEDIANO-GRANDE */
  .player-body {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 8px 0 0 !important;
    gap: 16px !important;
    grid-template-columns: unset !important;
    max-width: 100% !important;
    min-height: 0 !important;
    flex: 1 1 0 !important;
    overflow-y: auto !important;
  }
  .player-art-wrap {
    width: auto !important;
    height: 38vh !important;
    max-height: 320px !important;
    aspect-ratio: 1 !important;
    margin: 0 auto !important;
    border-radius: 20px !important;
    box-shadow:
      0 35px 70px rgba(0,0,0,0.7),
      0 0 80px var(--player-c1, rgba(255,180,140,0.5)) !important;
    transform: none !important;
    animation: none !important;
    transition: box-shadow 0.6s ease !important;
    flex-shrink: 0 !important;
  }
  .player.is-playing .player-art-wrap { animation: none !important; }

  .player-right { width: 100% !important; align-items: center !important; text-align: center !important; }
  .player-track-info { text-align: center !important; margin-bottom: 16px !important; padding: 0 8px; }
  .player-track-title {
    font-size: 38px !important;
    font-weight: 600 !important;
    line-height: 1.15 !important;
    margin-bottom: 6px !important;
    text-shadow: 0 2px 12px rgba(0,0,0,0.6);
  }
  .player-track-artist { font-size: 18px !important; color: rgba(255,255,255,0.8) !important; }

  .player-progress { width: 100% !important; max-width: 700px; margin: 0 auto 14px !important; padding: 0 4px !important; }
  .player-progress-bar { height: 5px !important; background: rgba(255,255,255,0.2) !important; }
  .player-time-row { font-size: 14px !important; color: rgba(255,255,255,0.7) !important; margin-top: 6px; }

  .player-controls { justify-content: center !important; gap: 36px !important; margin-bottom: 18px !important; }
  .pc-btn svg { width: 34px !important; height: 34px !important; }
  .pc-btn.small svg { width: 24px !important; height: 24px !important; opacity: 0.8; }
  .pc-play {
    width: 76px !important; height: 76px !important;
    background: rgba(255,255,255,0.18) !important;
    border: 1px solid rgba(255,255,255,0.25) !important;
    backdrop-filter: blur(20px) !important;
    animation: none !important;
  }
  .pc-play svg { width: 32px !important; height: 32px !important; }

  /* Fila inferior: like + VOLUMEN VISIBLE + dots */
  .player-bottom-row {
    width: 100% !important;
    max-width: 600px !important;
    margin: 0 auto !important;
    padding: 0 16px !important;
    gap: 22px !important;
    justify-content: space-between !important;
    align-items: center !important;
    display: flex !important;
  }
  .player-vol {
    display: flex !important;
    flex: 1 !important;
    max-width: 280px !important;
    gap: 12px !important;
    align-items: center !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  .player-vol svg {
    width: 22px !important;
    height: 22px !important;
    color: white !important;
    opacity: 0.9 !important;
  }
  .player-vol .vol-bar {
    height: 5px !important;
    flex: 1 !important;
    background: rgba(255,255,255,0.25) !important;
    border-radius: 3px !important;
    cursor: pointer !important;
    padding: 14px 0 !important;
    background-clip: content-box !important;
    display: block !important;
    opacity: 1 !important;
  }
  .player-vol .vol-bar-fill {
    background: white !important;
    height: 5px !important;
    border-radius: 3px !important;
  }

  /* Panel Letra: karaoke con línea activa MÁS ARRIBA (centro vertical) */
  .panel-lyrics-content {
    flex-direction: column !important;
    padding: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
  }
  .lyrics-mini-header {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 14px !important;
    margin: 0 auto 16px !important;
    max-width: 450px !important;
    background: rgba(255,255,255,0.06) !important;
    backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 14px !important;
    flex-shrink: 0 !important;
  }
  .lyrics-mini-cover { width: 48px !important; height: 48px !important; border-radius: 8px !important; }
  .lyrics-mini-title { font-size: 14px; font-weight: 500; }
  .lyrics-mini-artist { font-size: 12px; color: rgba(255,255,255,0.6); }
  .lyrics-container {
    flex: 1 1 0 !important; min-height: 0 !important; padding: 0 !important;
    display: flex !important; flex-direction: column !important; overflow: hidden !important;
  }
  /* karaoke-header visible en todos los dispositivos (v1.4.13) */
  .lyrics-container .karaoke-stage {
    flex: 1 1 0 !important; min-height: 0 !important;
    display: flex !important; flex-direction: column !important;
  }
  .lyrics-container .karaoke-lines {
    flex: 1 1 0 !important; min-height: 0 !important;
    overflow-y: auto !important;
    padding: 30vh 60px 40vh !important;
  }
  .karaoke-line.active { font-size: 32px !important; }
  .karaoke-line { font-size: 22px !important; padding: 11px 8px !important; }

  /* Panel Cola */
  .panel-queue-content {
    flex: 1 1 0 !important; min-height: 0 !important;
    overflow-y: auto !important; padding: 4px 40px 0 !important;
  }

  /* Lights */
  .player-lights {
    position: absolute !important; inset: 0 !important;
    pointer-events: none !important; z-index: 1 !important; overflow: hidden !important;
  }
  .player-light {
    position: absolute !important; inset: 0 !important;
    width: 100% !important; height: 100% !important;
    border-radius: 0 !important; filter: none !important;
    opacity: 1 !important; transform-origin: 50% 50% !important;
  }
  .player-light::before {
    content: ''; position: absolute; border-radius: 50%;
    filter: blur(60px); pointer-events: none;
  }
  .player-light.l1::before {
    top: -10%; left: -15%; width: 75%; height: 65%;
    background: radial-gradient(circle, var(--player-c1, rgba(255,180,140,0.55)), transparent 65%);
  }
  .player-light.l2::before {
    bottom: -10%; right: -15%; width: 75%; height: 65%;
    background: radial-gradient(circle, var(--player-c2, rgba(255,100,140,0.50)), transparent 65%);
  }
  .player-light.l3::before {
    top: 35%; left: 25%; width: 55%; height: 55%;
    background: radial-gradient(circle, var(--player-c3, rgba(140,80,200,0.35)), transparent 65%);
  }
  .player.is-playing .player-light.l1 {
    animation: light-beat-rot-cw var(--player-rot-dur, 8s) steps(12) infinite;
  }
  .player.is-playing .player-light.l2 {
    animation: light-beat-rot-ccw var(--player-rot-dur-2, 11s) steps(12) infinite;
  }
  .player.is-playing .player-light.l3 {
    animation: light-beat-rot-cw var(--player-rot-dur-3, 9s) steps(12) infinite;
  }

  /* Listas cards */
  .song-list-head { display: none !important; }
  .song-row {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    grid-template-columns: unset !important;
    padding: 14px 18px !important;
    background: rgba(255,255,255,0.05) !important;
    border-radius: 14px !important;
    margin-bottom: 8px !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
  }
  .song-row:hover, .song-row.active, .song-row.playing {
    background: rgba(255,255,255,0.10) !important;
  }
  .song-row .song-num { display: none !important; }
  .song-row .song-info {
    flex: 1 !important; display: flex !important;
    align-items: center !important; gap: 14px !important; min-width: 0 !important;
  }
  .song-row .song-art {
    width: 64px !important; height: 64px !important;
    border-radius: 8px !important;
    flex-shrink: 0 !important; overflow: hidden !important;
  }
  .song-row .song-art img,
  .song-row .song-art > div {
    width: 100% !important; height: 100% !important;
    object-fit: cover !important; display: block !important;
  }
  .song-row .song-text { flex: 1 !important; min-width: 0 !important; }
  .song-row .song-title {
    font-size: 16px !important; color: white !important;
    white-space: nowrap !important; overflow: hidden !important;
    text-overflow: ellipsis !important; margin-bottom: 3px !important;
  }
  .song-row .song-artist {
    font-size: 13px !important; color: rgba(255,255,255,0.6) !important;
  }
  .song-row .song-time {
    font-size: 13px !important; color: rgba(255,255,255,0.55) !important;
    flex-shrink: 0 !important; text-align: right !important;
  }
  .song-row .song-album { display: none !important; }

  /* Vista de álbum */
  .album-hero { flex-direction: row !important; gap: 36px !important; }
  .album-hero-art { width: 280px !important; height: 280px !important; }
  .album-hero-title { font-size: 42px !important; }
}

/* ============================================================
   SMART TV / Pantallas muy grandes — ≥1921px
   ============================================================
   Cover gigante, controles grandes para navegar con mando.
============================================================ */
@media (min-width: 1921px) {
  /* Aumentar todo proporcionalmente */
  html { font-size: 18px; }
  .app { grid-template-columns: 340px 1fr; }
  .main { padding: 40px 60px !important; }
  .sidebar { padding: 24px 16px; }
  .sidebar .brand-name { font-size: 28px !important; }
  .nav-item { font-size: 18px; padding: 12px 16px !important; }

  /* ============================================================
     Reproductor estilo Apple TV: TODO CENTRADO verticalmente
     Cover gigante 50% del viewport, info y controles debajo
  ============================================================ */
  .player-content {
    padding: 80px 80px 60px !important;
    align-items: center !important;
  }
  /* Layout VERTICAL centrado (no grid horizontal como desktop) */
  .player-body {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    grid-template-columns: unset !important;
    gap: 40px !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding-top: 20px !important;
  }
  .player-art-wrap {
    width: 50vw !important;            /* 50% del ancho del viewport */
    max-width: 1100px !important;
    min-width: 700px !important;
    aspect-ratio: 1 !important;
    height: auto !important;
    border-radius: 32px !important;
    box-shadow:
      0 80px 160px rgba(0,0,0,0.8),
      0 0 200px var(--player-c1, rgba(255,180,140,0.5)) !important;
    animation: none !important;
    transform: none !important;
    margin: 0 auto !important;
  }
  .player-right {
    width: 100% !important;
    max-width: 900px !important;
    align-items: center !important;
    text-align: center !important;
    margin: 0 auto !important;
  }
  .player-track-info {
    text-align: center !important;
    margin-bottom: 32px !important;
  }
  .player-track-title { font-size: 56px !important; line-height: 1.1 !important; }
  .player-track-artist { font-size: 26px !important; margin-top: 8px; }
  .player-progress { margin-bottom: 32px !important; max-width: 800px; width: 100%; }
  .player-progress-bar { height: 5px !important; }
  .player-time-row { font-size: 16px !important; }

  /* Controles grandes y centrados para mando de TV */
  .player-controls {
    justify-content: center !important;
    gap: 48px !important;
    margin-bottom: 32px !important;
  }
  .pc-btn svg { width: 44px !important; height: 44px !important; }
  .pc-btn.small svg { width: 32px !important; height: 32px !important; }
  .pc-play {
    width: 96px !important;
    height: 96px !important;
    border-width: 2px !important;
  }
  .pc-play svg { width: 40px !important; height: 40px !important; }

  /* Bottom row (like, volumen) compacto centrado */
  .player-bottom-row {
    justify-content: center !important;
    gap: 24px !important;
    max-width: 600px;
    width: 100%;
  }

  /* Foco visible MUY claro para navegar con mando de TV */
  .pc-btn:focus-visible,
  .pc-play:focus-visible,
  button:focus-visible,
  a:focus-visible,
  .nav-item:focus-visible,
  .song-row:focus-visible,
  .featured-card:focus-visible {
    outline: 4px solid var(--accent, #ff3b5c) !important;
    outline-offset: 6px;
    border-radius: 12px;
  }

  /* Tabs (Reproduciendo / Letra / Cola) más grandes en TV */
  .player-tabs {
    padding: 6px !important;
    font-size: 16px !important;
  }
  .player-tab { padding: 10px 20px !important; font-size: 16px !important; }
  .player-close {
    top: 32px !important;
    left: 32px !important;
    width: 52px !important;
    height: 48px !important;
    border-radius: 14px !important;
  }
  .player-close svg { width: 28px; height: 28px; }

  /* Cards más grandes */
  .featured-card { padding: 24px !important; }
  .featured-title { font-size: 28px !important; }
  .album-hero-title { font-size: 72px !important; }
  .album-hero-art { width: 360px !important; height: 360px !important; }

  /* Now bar (mini reproductor) más alto */
  .now-bar { height: 110px !important; }
  .nb-title { font-size: 17px !important; }
  .nb-art { width: 64px !important; height: 64px !important; }
}

/* ============================================================
   TABLET (768-1280px) — Listas, álbum, listen now con backdrop
   ============================================================
   Aplica a iPad mini/regular/Air/Pro, Samsung Tab A/S, Surface
   Cards más grandes que móvil, con backdrop adaptativo.
============================================================ */
@media (min-width: 768px) and (max-width: 1600px) {
  /* ─── Vista de ÁLBUM con backdrop adaptativo ─── */
  .album-hero {
    position: relative;
    padding: 24px 0 28px !important;
  }
  .album-hero::before {
    content: '';
    position: absolute;
    top: -30px; left: -30px; right: -30px;
    height: 65%;
    background:
      radial-gradient(ellipse at 20% 20%, var(--player-c1, rgba(255,59,92,0.18)) 0%, transparent 60%),
      radial-gradient(ellipse at 80% 30%, var(--player-c2, rgba(120,73,255,0.15)) 0%, transparent 60%);
    filter: blur(45px);
    z-index: -1;
    pointer-events: none;
  }
  .album-hero-art {
    border-radius: 16px !important;
    box-shadow:
      0 30px 60px rgba(0,0,0,0.5),
      0 0 60px var(--player-c1, rgba(255,180,140,0.35)) !important;
  }
  .album-hero-tag {
    color: rgba(255,255,255,0.6) !important;
    font-size: 12px !important;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 6px !important;
  }
  .album-hero-artist {
    font-size: 17px !important;
    color: rgba(255,255,255,0.75) !important;
  }
  .album-hero-meta {
    font-size: 12px !important;
    color: rgba(255,255,255,0.55) !important;
  }
  .album-hero-actions {
    gap: 12px !important;
    margin-top: 18px !important;
  }
  /* Botón Reproducir blanco estilo Apple Music */
  .btn-primary {
    background: white !important;
    color: black !important;
    padding: 11px 26px !important;
    border-radius: 999px !important;
    font-weight: 500 !important;
  }
  .btn-primary svg { stroke: black; fill: black; }
  /* Botón Aleatorio glass */
  .btn-secondary {
    background: rgba(255,255,255,0.15) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    color: white !important;
    padding: 11px 22px !important;
    border-radius: 999px !important;
    font-weight: 500 !important;
  }

  /* ─── Lista de canciones como CARDS (cover 60px) ─── */
  .song-list-head { display: none !important; }

  .song-row {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    grid-template-columns: unset !important;
    padding: 12px 16px !important;
    background: rgba(255,255,255,0.05) !important;
    border-radius: 14px !important;
    margin-bottom: 8px !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    transition: background 0.15s ease;
  }
  .song-row:hover, .song-row.active, .song-row.playing {
    background: rgba(255,255,255,0.10) !important;
  }
  .song-row .song-num { display: none !important; }
  .song-row .song-info {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    min-width: 0 !important;
  }
  .song-row .song-art {
    width: 60px !important;
    height: 60px !important;
    border-radius: 8px !important;
    flex-shrink: 0 !important;
    overflow: hidden !important;
    position: relative !important;
  }
  .song-row .song-art img,
  .song-row .song-art > div {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }
  .song-row .song-text {
    flex: 1 !important;
    min-width: 0 !important;
  }
  .song-row .song-title {
    font-size: 15px !important;
    color: white !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin-bottom: 3px !important;
  }
  .song-row .song-artist {
    font-size: 12px !important;
    color: rgba(255,255,255,0.6) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .song-row .song-time {
    font-size: 12px !important;
    color: rgba(255,255,255,0.55) !important;
    flex-shrink: 0 !important;
    text-align: right !important;
  }
  .song-row .song-album { display: none !important; }
  .song-row .song-actions {
    flex-shrink: 0 !important;
    opacity: 1 !important;
  }

  /* ─── Listen Now: cards translúcidas con colores ─── */
  .featured-card {
    background:
      linear-gradient(135deg, var(--player-c1, rgba(255,59,92,0.18)) 0%, var(--player-c2, rgba(120,73,255,0.15)) 100%) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    border-radius: 16px !important;
    padding: 18px !important;
    box-shadow: none !important;
  }
  .featured-tag {
    font-size: 11px !important;
    color: rgba(255,255,255,0.65) !important;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 500;
    margin-bottom: 8px;
  }
  .featured-title {
    font-size: 22px !important;
    margin-bottom: 4px !important;
  }
  .featured-meta {
    font-size: 13px !important;
    color: rgba(255,255,255,0.78) !important;
    margin-bottom: 14px;
  }

  /* ─── Buscador con padding adecuado ─── */
  .search-categories {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 14px !important;
  }
  .category-card {
    min-height: 120px !important;
    font-size: 15px !important;
    border-radius: 14px !important;
  }

  /* Cards de Listen Now en grid 2 columnas */
  .grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
  }
}

/* ============================================================
   TV / 4K (≥1921px) — Listas, álbum, listen now GRANDES
   ============================================================
   Cards aún más grandes, todo espacioso para ver de lejos.
============================================================ */
@media (min-width: 1921px) {
  /* Vista de álbum gigante */
  .album-hero {
    position: relative;
    padding: 40px 0 48px !important;
    gap: 40px !important;
  }
  .album-hero::before {
    content: '';
    position: absolute;
    top: -60px; left: -60px; right: -60px;
    height: 70%;
    background:
      radial-gradient(ellipse at 20% 20%, var(--player-c1, rgba(255,59,92,0.20)) 0%, transparent 60%),
      radial-gradient(ellipse at 80% 30%, var(--player-c2, rgba(120,73,255,0.18)) 0%, transparent 60%);
    filter: blur(60px);
    z-index: -1;
    pointer-events: none;
  }
  .album-hero-art {
    border-radius: 24px !important;
    box-shadow:
      0 60px 120px rgba(0,0,0,0.6),
      0 0 100px var(--player-c1, rgba(255,180,140,0.4)) !important;
  }
  .album-hero-tag { font-size: 16px !important; }
  .album-hero-artist { font-size: 24px !important; }
  .album-hero-meta { font-size: 16px !important; }
  .album-hero-actions { gap: 16px !important; margin-top: 28px !important; }
  .btn-primary {
    background: white !important;
    color: black !important;
    padding: 16px 36px !important;
    font-size: 18px !important;
    border-radius: 999px !important;
    font-weight: 500 !important;
  }
  .btn-secondary {
    background: rgba(255,255,255,0.15) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    color: white !important;
    padding: 16px 32px !important;
    font-size: 18px !important;
    border-radius: 999px !important;
    font-weight: 500 !important;
  }

  /* Listas con cards GRANDES (cover 80px) */
  .song-list-head { display: none !important; }

  .song-row {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
    grid-template-columns: unset !important;
    padding: 18px 24px !important;
    background: rgba(255,255,255,0.05) !important;
    border-radius: 18px !important;
    margin-bottom: 10px !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
  }
  .song-row:hover, .song-row.active, .song-row:focus-visible {
    background: rgba(255,255,255,0.12) !important;
  }
  .song-row .song-num { display: none !important; }
  .song-row .song-info {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
    min-width: 0 !important;
  }
  .song-row .song-art {
    width: 80px !important;
    height: 80px !important;
    border-radius: 10px !important;
    flex-shrink: 0 !important;
    overflow: hidden !important;
    position: relative !important;
  }
  .song-row .song-art img,
  .song-row .song-art > div {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }
  .song-row .song-text {
    flex: 1 !important;
    min-width: 0 !important;
  }
  .song-row .song-title {
    font-size: 20px !important;
    color: white !important;
    margin-bottom: 4px !important;
  }
  .song-row .song-artist {
    font-size: 16px !important;
    color: rgba(255,255,255,0.6) !important;
  }
  .song-row .song-time {
    font-size: 16px !important;
    color: rgba(255,255,255,0.55) !important;
    flex-shrink: 0 !important;
    text-align: right !important;
  }
  .song-row .song-album { display: none !important; }
  .song-row .song-actions { flex-shrink: 0 !important; opacity: 1 !important; }

  /* Listen Now: cards gigantes */
  .featured-card {
    background:
      linear-gradient(135deg, var(--player-c1, rgba(255,59,92,0.20)) 0%, var(--player-c2, rgba(120,73,255,0.18)) 100%) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    border-radius: 24px !important;
    padding: 32px !important;
    box-shadow: none !important;
  }
  .featured-tag {
    font-size: 14px !important;
    color: rgba(255,255,255,0.65) !important;
    margin-bottom: 12px;
  }
  .featured-title { font-size: 36px !important; margin-bottom: 8px !important; }
  .featured-meta { font-size: 18px !important; margin-bottom: 24px; }

  /* Buscador con categorías grandes */
  .search-categories {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px !important;
  }
  .category-card {
    min-height: 180px !important;
    font-size: 22px !important;
    border-radius: 20px !important;
  }

  /* Cards Listen Now en grid 3 columnas */
  .grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
  }
}

/* ============================================================
   SAFEGUARDS móvil: prevenir cualquier overflow horizontal
   ============================================================ */
@media (max-width: 767px) {
  html, body { overflow-x: hidden !important; max-width: 100vw; }
  .app, .main, .topbar, .now-bar, .view {
    max-width: 100vw;
    box-sizing: border-box;
  }
  img, video, iframe { max-width: 100%; height: auto; }
  /* Tablas y cards no se desbordan */
  .featured-card, .card, .panel, .song-row, table {
    max-width: 100%;
    box-sizing: border-box;
  }
}

/* Desktop — ocultos */
.mobile-menu-btn { display: none; }
.sidebar-close-btn { display: none; }
@media (max-width: 767px) {
  .sidebar-close-btn { display: flex; }
}

/* ============================================================
   KARAOKE LYRICS — Apple Music style con efectos visuales
   ============================================================ */
.lyrics-container {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.karaoke-stage {
  position: relative;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 24px 20px 20px;
  overflow: hidden;
}
.karaoke-header {
  text-align: center;
  margin-bottom: 14px;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  padding: 16px 24px;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
.karaoke-song-title {
  font-family: 'Fraunces', serif;
  font-size: 32px;
  font-weight: 600;
  color: rgba(255,255,255,0.98);
  letter-spacing: -0.01em;
  line-height: 1.1;
  text-shadow: 0 2px 12px rgba(0,0,0,0.6);
}
.karaoke-song-artist {
  font-size: 18px;
  color: rgba(255,255,255,0.7);
  margin-top: 4px;
}

/* Controles play/prev/next/volumen/instrumental dentro del karaoke-header */
.karaoke-header-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.kh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.15);
  color: white;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
  padding: 0;
}
.kh-btn:hover { background: rgba(255,255,255,0.20); }
.kh-btn:active { transform: scale(0.95); }
.kh-btn.kh-play {
  width: 48px;
  height: 48px;
  background: rgba(255,255,255,0.95);
  color: black;
}
.kh-btn.kh-play:hover { background: white; }
.kh-btn.kh-toggle {
  width: auto;
  border-radius: 999px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 500;
}
.kh-btn.kh-toggle.active {
  background: var(--accent, #ff3b5c);
  border-color: var(--accent, #ff3b5c);
}
.kh-vol {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 8px;
  height: 40px;
  background: rgba(255,255,255,0.05);
  border-radius: 999px;
}
.kh-vol svg { color: rgba(255,255,255,0.8); flex-shrink: 0; }
.kh-vol-slider {
  width: 90px;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: rgba(255,255,255,0.25);
  border-radius: 2px;
  cursor: pointer;
  outline: none;
}
.kh-vol-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: white;
  cursor: pointer;
}
.kh-vol-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: white;
  cursor: pointer;
  border: none;
}

.karaoke-badge {
  display: inline-block;
  margin-top: 10px;
  padding: 3px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255,59,92,0.25), rgba(255,120,73,0.18));
  border: 1px solid rgba(255,59,92,0.35);
  color: #ff8a9b;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
}
.karaoke-badge.dim {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.5);
}

.karaoke-progress {
  width: min(640px, calc(100% - 24px));
  margin: 0 auto 10px;
  display: grid;
  grid-template-columns: 42px minmax(80px, 1fr) 42px;
  align-items: center;
  gap: 9px;
  position: relative;
  z-index: 3;
  color: rgba(255,255,255,.68);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.karaoke-progress span:last-child { text-align: right; }
.karaoke-progress-bar {
  height: 4px;
  padding: 9px 0;
  background-clip: content-box;
  background-color: rgba(255,255,255,.22);
  border-radius: 99px;
  cursor: pointer;
  touch-action: manipulation;
}
.karaoke-progress-fill {
  width: 0;
  height: 4px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--accent, #ff3b5c), #fff);
  box-shadow: 0 0 10px rgba(255,59,92,.38);
  pointer-events: none;
}

.karaoke-lines {
  flex: 1;
  overflow-y: auto;
  padding: 20vh 30px 50vh;  /* línea activa más arriba (25% en vez de 50%) */
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.1) transparent;
  position: relative;
  z-index: 2;
  mask-image: linear-gradient(to bottom,
    transparent 0%,
    black 25%,
    black 75%,
    transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom,
    transparent 0%,
    black 25%,
    black 75%,
    transparent 100%);
}
.karaoke-lines::-webkit-scrollbar { width: 4px; }
.karaoke-lines::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 4px; }

.karaoke-line {
  font-family: 'Fraunces', serif;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  padding: 14px 8px;
  color: rgba(255,255,255,0.25);
  letter-spacing: -0.01em;
  transition:
    color 0.4s ease,
    transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
    text-shadow 0.4s ease,
    opacity 0.4s ease,
    filter 0.4s ease;
  cursor: default;
  transform: scale(0.95);
  filter: blur(0.5px);
  will-change: transform, color, filter;
}
.karaoke-stage.is-synced .karaoke-line { cursor: pointer; }
.karaoke-stage.is-synced .karaoke-line:hover { color: rgba(255,255,255,0.6); }
.karaoke-stage.is-synced .karaoke-line:focus-visible {
  outline: 2px solid var(--accent, #ff3b5c);
  outline-offset: 3px;
  border-radius: 10px;
}
.karaoke-stage.is-synced .karaoke-line-inner,
.karaoke-stage.is-synced .karaoke-line .kw { pointer-events: none; }

.karaoke-line.past {
  color: rgba(255,255,255,0.18);
  transform: scale(0.92);
  filter: blur(0.5px);
}
.karaoke-line.upcoming {
  color: rgba(255,255,255,0.28);
  transform: scale(0.95);
}
.karaoke-line.upcoming.next {
  color: rgba(255,255,255,0.45);
  transform: scale(0.98);
  filter: blur(0);
}
.karaoke-line.upcoming.next-2 {
  color: rgba(255,255,255,0.35);
}
.karaoke-line.active {
  color: #fff;
  font-size: 34px;
  font-weight: 700;
  transform: scale(1.04);
  filter: blur(0);
  text-shadow:
    0 0 30px rgba(255,255,255,0.5),
    0 0 60px rgba(255,59,92,0.3),
    0 2px 12px rgba(0,0,0,0.4);
}
/* Pulse SÓLO en modo plain (no sync). En sync, la ola hace el trabajo visual. */
.karaoke-stage.is-plain .karaoke-line.active {
  animation: karaoke-pulse 2s ease-in-out infinite;
}

@keyframes karaoke-pulse {
  0%, 100% {
    text-shadow:
      0 0 30px rgba(255,255,255,0.5),
      0 0 60px rgba(255,59,92,0.3),
      0 2px 12px rgba(0,0,0,0.4);
  }
  50% {
    text-shadow:
      0 0 40px rgba(255,255,255,0.7),
      0 0 80px rgba(255,59,92,0.5),
      0 2px 16px rgba(0,0,0,0.5);
  }
}

/* Glow effect detrás de la letra */
.karaoke-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60%;
  height: 200px;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center,
    rgba(255,59,92,0.18) 0%,
    rgba(255,120,73,0.08) 30%,
    transparent 70%);
  filter: blur(40px);
  pointer-events: none;
  z-index: 1;
  animation: karaoke-glow-pulse 4s ease-in-out infinite;
}
@keyframes karaoke-glow-pulse {
  0%, 100% { opacity: 0.6; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 0.9; transform: translate(-50%, -50%) scale(1.1); }
}

/* En modo letra plana (no sync), líneas todas iguales */
.karaoke-stage.is-plain .karaoke-line {
  color: rgba(255,255,255,0.85);
  font-size: 22px;
  transform: scale(1);
  filter: blur(0);
  animation: none;
  text-shadow: none;
}
.karaoke-stage.is-plain .karaoke-lines {
  padding: 30px;
  mask-image: linear-gradient(to bottom,
    transparent 0%, black 10%, black 90%, transparent 100%);
}

/* En móvil */
@media (max-width: 768px) {
  .karaoke-line { font-size: 20px; padding: 10px 4px; }
  .karaoke-line.active { font-size: 26px; }
  .karaoke-stage { padding: 16px 12px; }
  .karaoke-lines { padding: 35vh 10px; }
}

/* Esconder el old empty state cuando se cargue contenido */
.lyrics-container .lyrics-empty {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px;
  text-align: center;
  color: rgba(255,255,255,0.4);
}
.lyrics-container .lyrics-empty h3 {
  font-family: 'Fraunces', serif;
  font-size: 22px;
  margin: 10px 0 6px;
  color: rgba(255,255,255,0.7);
}

/* ============================================================
   PLAYER FULL-SCREEN — Efectos visuales mejorados
   ============================================================ */
.player.player-open .player-body {
  position: relative;
  overflow: hidden;
}
/* Aurora effect SOLO cuando NO hay backdrop (canciones sin portada) */
.player.player-open:not(.has-backdrop)::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 40% at 30% 30%, var(--player-c1, rgba(255,59,92,0.35)) 0%, transparent 60%),
    radial-gradient(ellipse 50% 60% at 70% 70%, var(--player-c2, rgba(120,73,255,0.3)) 0%, transparent 60%),
    radial-gradient(ellipse 40% 40% at 50% 100%, var(--player-c3, rgba(73,255,180,0.18)) 0%, transparent 70%);
  filter: blur(60px);
  opacity: 0.7;
  pointer-events: none;
  z-index: 0;
  animation: aurora-drift 18s ease-in-out infinite;
}
@keyframes aurora-drift {
  0%, 100% { transform: scale(1) rotate(0deg); }
  33%      { transform: scale(1.1) rotate(2deg) translate(2%, -2%); }
  66%      { transform: scale(1.05) rotate(-2deg) translate(-2%, 2%); }
}

/* Vinyl breathe SOLO cuando no hay backdrop (sino interfiere con beat-pulse) */
.player.player-open.is-playing:not(.has-backdrop) .player-art-wrap,
.player.player-open.is-playing:not(.has-backdrop) .player-art {
  animation: art-breathe 4s ease-in-out infinite;
}
@keyframes art-breathe {
  0%, 100% { transform: scale(1); box-shadow: 0 30px 80px rgba(0,0,0,0.5), 0 0 0 0 rgba(255,255,255,0); }
  50%      { transform: scale(1.015); box-shadow: 0 30px 80px rgba(0,0,0,0.5), 0 0 60px 0 rgba(255,255,255,0.08); }
}

/* ============================================================
   KARAOKE — Ola de luz suave estilo Apple Music
   ============================================================ */
.karaoke-line .karaoke-line-inner {
  display: inline-block;
  position: relative;
}

/* Palabras individuales — se iluminan de forma continua según --w-light (0..1) */
.kw {
  display: inline-block;
  position: relative;
  /* color interpolado: de gris tenue a blanco brillante */
  color: rgba(255, 255, 255, calc(0.22 + var(--w-light, 0) * 0.78));
  /* transición suave para movimientos suaves cuando la ola pasa */
  transition:
    color 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    text-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.6s cubic-bezier(0.34, 1.3, 0.64, 1),
    filter 0.5s ease;
  /* el text-shadow se hace más intenso conforme se ilumina */
  text-shadow:
    0 0 calc(var(--w-light, 0) * 24px) rgba(255, 255, 255, calc(var(--w-light, 0) * 0.6)),
    0 0 calc(var(--w-light, 0) * 50px) rgba(255, 59, 92, calc(var(--w-light, 0) * 0.4));
  will-change: color, text-shadow, transform;
}

/* La palabra que se está cantando AHORA tiene un lift sutil (efecto 3D Apple) */
.karaoke-line.active .kw.singing {
  transform: translateY(-2px) scale(1.03);
  filter: drop-shadow(0 4px 12px rgba(255, 255, 255, 0.2));
}

/* Palabras ya cantadas (sung) en la línea activa: blancas brillantes */
.karaoke-line.active .kw.sung {
  color: #fff;
}

/* Líneas pasadas (no la activa): palabras tenues pero "encendidas" */
.karaoke-line.past .kw {
  color: rgba(255, 255, 255, 0.20);
  text-shadow: none;
  transform: none;
}

/* Líneas futuras (upcoming): palabras muy tenues */
.karaoke-line.upcoming .kw {
  color: rgba(255, 255, 255, 0.28);
  text-shadow: none;
  transform: none;
}
.karaoke-line.upcoming.next .kw { color: rgba(255, 255, 255, 0.38); }
.karaoke-line.upcoming.next-2 .kw { color: rgba(255, 255, 255, 0.32); }

/* La línea activa: el "fondo" de color es tenue para que las palabras destaquen */
.karaoke-line.active {
  color: rgba(255, 255, 255, 0.22);
}

/* En modo letra plana (sin sync): mostrar todo blanco normal sin efectos */
.karaoke-stage.is-plain .kw {
  color: rgba(255, 255, 255, 0.85) !important;
  text-shadow: none !important;
  transform: none !important;
  filter: none !important;
  transition: none !important;
}

/* La línea activa NO debería pulsar mientras tiene la ola palabra-por-palabra
   (porque sería doble animación). Sobrescribimos. */
.karaoke-stage.is-synced .karaoke-line.active {
  animation: none;
  text-shadow: none;
}
.karaoke-stage.is-synced .karaoke-line.active {
  font-size: 34px;
  font-weight: 700;
  transform: scale(1.04);
  filter: blur(0);
}

/* ============================================================
/* ============================================================
   PLAYER BACKDROP — Fondo cover desenfocado a PANTALLA COMPLETA
   + destellos animados al ritmo (visible en TODOS los tabs)
   ============================================================ */

/* El .player es el contenedor pantalla-completa.
   Cuando tiene backdrop, mostrar la portada como capa de fondo. */
.player.has-backdrop {
  /* Reset: el background original del .player lo cubrimos */
  background: #000;
}

/* Capa 1: portada gigante muy desenfocada, llena toda la pantalla */
.player.has-backdrop::before {
  content: '' !important;
  display: block !important;
  position: absolute;
  inset: -8%;  /* desbordar para que el blur no muestre bordes */
  background-image: var(--player-backdrop);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(80px) saturate(1.4) brightness(0.5);
  opacity: 1;
  z-index: 0;
  /* Respira con la intensidad del audio (escala 1.15 → 1.25) */
  transform: scale(calc(1.15 + var(--audio-intensity, 0) * 0.10));
  transition: filter 0.5s ease, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  animation: backdrop-drift 30s ease-in-out infinite;
}

/* La portada flota suavemente — siempre en movimiento */
@keyframes backdrop-drift {
  0%, 100% { background-position: 50% 50%; }
  25%      { background-position: 53% 47%; }
  50%      { background-position: 47% 53%; }
  75%      { background-position: 52% 52%; }
}

/* Capa 2: oscurecimiento para legibilidad del texto */
.player.has-backdrop::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at top, rgba(0,0,0,0.2), rgba(0,0,0,0.65) 90%),
    linear-gradient(180deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.65) 100%);
  z-index: 1;
  pointer-events: none;
}

/* Cuando hay backdrop, el .player-bg viejo (aurora) se oculta */
.player.has-backdrop .player-bg {
  display: none !important;
}

/* Los paneles de Letra/Queue deben ser transparentes para ver el backdrop */
.player.has-backdrop .player-panel {
  background: transparent !important;
}
.player.has-backdrop .panel-lyrics-content,
.player.has-backdrop .panel-queue-content {
  background: transparent !important;
}

/* El contenido encima del backdrop */
.player.has-backdrop .player-content,
.player.has-backdrop .player-panel,
.player.has-backdrop .player-tabs,
.player.has-backdrop .player-close {
  position: relative;
  z-index: 3;
}

/* Pulso global al detectar beat — brevísimo flash */
.player.beat-pulse.has-backdrop::before {
  animation: backdrop-drift 30s ease-in-out infinite, backdrop-beat 0.5s cubic-bezier(0.34, 1.5, 0.64, 1);
}
@keyframes backdrop-beat {
  0%   { filter: blur(80px) saturate(1.4) brightness(0.5); }
  35%  { filter: blur(65px) saturate(1.9) brightness(0.78); }
  100% { filter: blur(80px) saturate(1.4) brightness(0.5); }
}

/* ============================================================
   DESTELLOS (3 orbes de luz que flotan y pulsan al ritmo)
   Visibles en TODA la pantalla y en TODOS los tabs
   ============================================================ */
.player-lights {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
}
.player-light {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  mix-blend-mode: screen;
  opacity: 0.5;
  will-change: transform, opacity, filter;
}
.player-light.l1 {
  width: 45vw; height: 45vw;
  top: -12%; left: -10%;
  background: radial-gradient(circle, var(--player-c1, rgba(255,255,255,0.55)), transparent 65%);
  animation: light-drift-1 22s ease-in-out infinite;
}
.player-light.l2 {
  width: 55vw; height: 55vw;
  bottom: -18%; right: -12%;
  background: radial-gradient(circle, var(--player-c2, rgba(255,180,200,0.45)), transparent 65%);
  animation: light-drift-2 28s ease-in-out infinite;
}
.player-light.l3 {
  width: 40vw; height: 40vw;
  top: 25%; right: 15%;
  background: radial-gradient(circle, var(--player-c3, rgba(180,200,255,0.40)), transparent 65%);
  animation: light-drift-3 32s ease-in-out infinite;
}

@keyframes light-drift-1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(22%, 28%) scale(1.18); }
  66%      { transform: translate(-18%, 38%) scale(0.92); }
}
@keyframes light-drift-2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  40%      { transform: translate(-28%, -22%) scale(1.22); }
  70%      { transform: translate(18%, -12%) scale(0.88); }
}
@keyframes light-drift-3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-32%, 22%) scale(1.32); }
}

/* Intensidad de los destellos varía con los graves del audio (continuo) */
.player.has-backdrop .player-light {
  opacity: calc(0.4 + var(--audio-intensity, 0) * 0.45);
}

/* Pulso al detectar beat — un flash brillante stagger entre los 3 */
.player.beat-pulse .player-light.l1 {
  animation: light-drift-1 22s ease-in-out infinite, light-flash 0.45s ease-out;
}
.player.beat-pulse .player-light.l2 {
  animation: light-drift-2 28s ease-in-out infinite, light-flash 0.5s ease-out 0.07s;
}
.player.beat-pulse .player-light.l3 {
  animation: light-drift-3 32s ease-in-out infinite, light-flash 0.55s ease-out 0.14s;
}
@keyframes light-flash {
  0%   { opacity: 0.5; filter: blur(90px); }
  30%  { opacity: 1; filter: blur(60px); }
  100% { opacity: 0.5; filter: blur(90px); }
}

/* La portada NO debe respirar (causa temblor/tremor en móvil) */
.player.has-backdrop.is-playing .player-art-wrap {
  transform: none;
  transition: none;
}
.player.has-backdrop.beat-pulse .player-art {
  /* Sin animación de escala — el glow ya lo hace todo */
}

/* Texto sobre el backdrop: text-shadow para legibilidad */
.player.has-backdrop .player-title,
.player.has-backdrop .player-artist,
.player.has-backdrop .player-time {
  text-shadow: 0 2px 12px rgba(0,0,0,0.6);
}

/* Tabs y close button con backdrop blur para destacar */
.player.has-backdrop .player-tabs {
  background: rgba(0,0,0,0.45) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.player.has-backdrop .player-close {
  background: rgba(0,0,0,0.45) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* Cuando hay backdrop activo, esconder el gradient verde/morado viejo */
.player.has-backdrop .player-bg {
  display: none !important;
}

/* Los lights solo deben ser visibles cuando hay backdrop */
.player:not(.has-backdrop) .player-lights {
  display: none;
}

/* Hacer sutil oscurecimiento del player-body para legibilidad */
.player.has-backdrop .player-content {
  position: relative;
  z-index: 2;  /* sobre el backdrop y lights */
}

/* Mini-cover header solo se ve en móvil (lo muestra @media max-width:900px) */
.lyrics-mini-header { display: none !important; } /* v1.4.13: ahora info está en karaoke-header */

/* ============================================================
   PANELES EXCLUYENTES — Regla GLOBAL (sobrescribe TODO)
   Cuando hay panel-lyrics o panel-queue activo, solo ese se ve
============================================================ */
.player.panel-lyrics .player-body,
.player.panel-queue .player-body {
  display: none !important;
}
.player.panel-lyrics .panel-lyrics-content {
  display: flex !important;
  flex-direction: column !important;
}
.player.panel-queue .panel-queue-content {
  display: block !important;
}
/* Por defecto los paneles están ocultos */
.player .panel-lyrics-content,
.player .panel-queue-content {
  display: none;
}

/* ============================================================
   KARAOKE HEADER — Responsivo (v1.4.13)
   En móvil más pequeño, en tablet/PC tamaño completo
============================================================ */
@media (max-width: 767px) {
  .karaoke-header {
    padding: 10px 12px !important;
    margin: 0 8px 10px !important;
    max-width: 100% !important;
    border-radius: 14px !important;
  }
  .karaoke-song-title { font-size: 20px !important; line-height: 1.15; }
  .karaoke-song-artist { font-size: 13px !important; margin-top: 2px; }
  .karaoke-header-controls {
    gap: 8px !important;
    margin-top: 10px !important;
  }
  .kh-btn { width: 36px !important; height: 36px !important; }
  .kh-btn.kh-play { width: 44px !important; height: 44px !important; }
  .kh-btn svg { width: 18px !important; height: 18px !important; }
  .kh-btn.kh-play svg { width: 20px !important; height: 20px !important; }
  .kh-btn.kh-toggle {
    padding: 0 10px !important;
    font-size: 11px !important;
  }
  .kh-btn.kh-toggle span { font-size: 11px; }
  .kh-vol { padding: 0 6px !important; height: 36px !important; gap: 6px !important; }
  .kh-vol svg { width: 16px !important; height: 16px !important; }
  .kh-vol-slider { width: 60px !important; }
  .karaoke-badge { font-size: 9px !important; padding: 2px 8px !important; }
}

@media (min-width: 768px) and (max-width: 1366px) {
  .karaoke-header {
    padding: 14px 20px !important;
    margin: 0 auto 12px !important;
    max-width: 560px !important;
  }
  .karaoke-song-title { font-size: 26px !important; }
  .karaoke-song-artist { font-size: 16px !important; }
  .karaoke-header-controls { gap: 12px !important; }
}

/* v1.4.20: controles de modo visibles también dentro del karaoke. */
.kh-btn.active {
  color: #fff;
  background: var(--accent, #ff3b5c);
  border-color: var(--accent, #ff3b5c);
  box-shadow: 0 0 0 3px rgba(255,59,92,.16);
}
#repeat-btn,
#player-repeat,
#kh-repeat { position: relative; }
#repeat-btn[data-repeat="one"]::after,
#player-repeat[data-repeat="one"]::after,
#kh-repeat[data-repeat="one"]::after {
  content: '1';
  position: absolute;
  right: -3px;
  bottom: -2px;
  display: grid;
  place-items: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  color: #fff;
  background: var(--accent, #ff3b5c);
  font: 700 9px/1 sans-serif;
  box-shadow: 0 1px 5px rgba(0,0,0,.45);
}

/* Zona segura para Android con pantalla edge-to-edge y PWA de iPhone. */
@media (max-width: 900px) {
  .player-content {
    padding-top: calc(56px + env(safe-area-inset-top, 0px)) !important;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .player-tabs,
  .player-close {
    top: calc(14px + env(safe-area-inset-top, 0px)) !important;
  }
  .topbar {
    padding-top: calc(10px + env(safe-area-inset-top, 0px)) !important;
  }
  .now-bar {
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
  }
}