/* ================================================================
   JAZZCHILL.ES — The Ultimate Jazz Radio Experience
   Light & Vibrant Design · Jazz Imagery · Warm Glass Panels
   ================================================================ */

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

/* ── RESET & VARIABLES ──────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --gold:         #c9a84c;
  --gold-rich:    #e0b84e;
  --gold-light:   #f0d88a;
  --gold-dark:    #8b6914;
  --gold-glow:    rgba(201, 168, 76, 0.35);

  /* Paneles traslúcidos — deja ver la foto de fondo */
  --panel:        rgba(255, 251, 243, 0.14);
  --panel-hover:  rgba(255, 254, 248, 0.24);
  --panel-border: rgba(201, 168, 76, 0.32);

  /* Text on light panels */
  --text:         #1c1208;
  --text-mid:     #4a3c28;
  --text-muted:   #8a7a62;
  --text-light:   #ffffff;

  --radius:       18px;
  --radius-sm:    11px;
  --shadow:       0 8px 40px rgba(10, 5, 0, 0.22), 0 2px 8px rgba(10,5,0,0.12);
}

html { height: 100%; scroll-behavior: smooth; }

body {
  min-height: 100%;
  background: #1a1208;
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  line-height: 1.5;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-font-smoothing: antialiased;
}

/* ── BACKGROUND — SHOW THOSE BEAUTIFUL JAZZ IMAGES ─────────── */
#bg-image,
#bg-image-next {
  position: fixed;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: brightness(0.88) saturate(1.08);
  transform: scale(1.02);
  will-change: opacity;
}

#bg-image-next {
  z-index: 0;
  opacity: 0;
  transition: opacity 2.5s ease;
}

#bg-image {
  z-index: 1;
  transition: opacity 2.5s ease;
}

/* Overlay — darkens edges + subtle center vignette for text legibility */
#bg-overlay {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 55% at 50% 42%, rgba(4,2,0,0.38) 0%, transparent 100%),
    linear-gradient(180deg,
      rgba(6,3,0,0.55) 0%,
      rgba(6,3,0,0.12) 18%,
      transparent 40%,
      transparent 62%,
      rgba(6,3,0,0.14) 84%,
      rgba(6,3,0,0.52) 100%
    );
  z-index: 2;
}

/* Decorative bg vinyl — very subtle */
#bg-vinyl {
  position: fixed;
  right: -22vw;
  top: 50%;
  transform: translateY(-50%);
  width: 85vmin;
  height: 85vmin;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.04);
  opacity: 0.06;
  z-index: 1;
  animation: bgVinylSpin 120s linear infinite;
  pointer-events: none;
}

@keyframes bgVinylSpin {
  from { transform: translateY(-50%) rotate(0deg); }
  to   { transform: translateY(-50%) rotate(360deg); }
}

/* ── APP WRAPPER ────────────────────────────────────────────── */
#app {
  position: relative;
  z-index: 11;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 20px;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}

#app.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── PLAYER SECTION — centers player between header and nav ─── */
#player-section {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 20px 0;
}

/* ── HEADER ─────────────────────────────────────────────────── */
#site-header {
  width: 100%;
  max-width: 860px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4vh 0 0;
  flex-shrink: 0;
}

#logo-area {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Logo IMAGE (the real JazzChill logo PNG) */
#logo-img {
  height: 44px;
  width: auto;
  max-width: 240px;
  object-fit: contain;
  filter: drop-shadow(0 2px 12px rgba(0,0,0,0.6));
  display: block;
}

/* Fallback text logo (if image fails) */
#logo-title {
  font-family: 'Playfair Display', serif;
  font-weight: 900;
  font-size: 2rem;
  color: #ffffff;
  letter-spacing: 0.02em;
  line-height: 1;
  text-shadow: 0 2px 20px rgba(0,0,0,0.6), 0 0 60px rgba(201,168,76,0.4);
  display: none; /* shown via JS if image fails */
}

#logo-sub {
  font-size: 0.63rem;
  color: rgba(255,255,255,0.75);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  text-shadow: 0 1px 6px rgba(0,0,0,0.7);
  padding-left: 2px;
}

/* ── HEADER RIGHT: LIVE + LISTENERS ─────────────────────────── */
#header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

#live-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: #ffffff;
  text-transform: uppercase;
  text-shadow: 0 1px 6px rgba(0,0,0,0.6);
}

.live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #5de88a;
  box-shadow: 0 0 10px rgba(93,232,138,0.7);
  animation: livePulse 1.8s ease infinite;
  flex-shrink: 0;
}

@keyframes livePulse {
  0%, 100% { transform: scale(1);    opacity: 1;   box-shadow: 0 0 8px rgba(93,232,138,0.6); }
  50%       { transform: scale(1.35); opacity: 0.6; box-shadow: 0 0 18px rgba(93,232,138,0); }
}

#botonVerCuantos {
  display: none;
  align-items: center;
  gap: 7px;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 50px;
  padding: 7px 15px;
  color: #ffffff;
  font-size: 0.78rem;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.25s ease;
  white-space: nowrap;
  backdrop-filter: blur(8px);
  text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}

#botonVerCuantos:hover {
  background: rgba(255,255,255,0.28);
  border-color: rgba(201,168,76,0.6);
}

#botonVerCuantos .pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold-light);
  animation: livePulse 2s ease infinite;
  flex-shrink: 0;
}

#numOyentesJazzChill {
  font-weight: 700;
  color: var(--gold-light);
}

/* ── PLAYER CARD — TRANSPARENT OVERLAY ──────────────────────── */
#player-card {
  width: 100%;
  max-width: 680px;
  background: none;
  border: none;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* ── PLAYER INFO ─────────────────────────────────────────────── */
#player-info {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
}

/* ── NOW PLAYING HEADER with decorative lines ────────────────── */
#np-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
}

#np-header::before,
#np-header::after {
  content: '';
  flex: 1;
  max-width: 70px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,168,76,0.55));
}
#np-header::after {
  background: linear-gradient(90deg, rgba(201,168,76,0.55), transparent);
}

.np-label {
  font-size: 0.55rem;
  letter-spacing: 0.42em;
  color: rgba(255,220,120,0.85);
  text-transform: uppercase;
  font-weight: 400;
  text-shadow: 0 1px 10px rgba(0,0,0,0.9);
  white-space: nowrap;
}

/* ── EQUALIZER ───────────────────────────────────────────────── */
#equalizer {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 2.5px;
  height: 12px;
  opacity: 0;
  transition: opacity 0.4s ease;
}
#equalizer.playing { opacity: 1; }

.eq-bar {
  width: 3px;
  border-radius: 3px;
  background: var(--gold);
  animation: eqBounce 1.4s ease-in-out infinite;
  animation-play-state: paused;
  transform-origin: bottom;
  opacity: 0.5;
}

.eq-bar:nth-child(1) { height: 5px;  animation-delay: 0.0s;  animation-duration: 1.1s; }
.eq-bar:nth-child(2) { height: 11px; animation-delay: 0.2s;  animation-duration: 1.3s; }
.eq-bar:nth-child(3) { height: 7px;  animation-delay: 0.1s;  animation-duration: 0.9s; }
.eq-bar:nth-child(4) { height: 13px; animation-delay: 0.3s;  animation-duration: 1.5s; }
.eq-bar:nth-child(5) { height: 8px;  animation-delay: 0.15s; animation-duration: 1.2s; }
.eq-bar:nth-child(6) { height: 10px; animation-delay: 0.25s; animation-duration: 1.0s; }
.eq-bar:nth-child(7) { height: 6px;  animation-delay: 0.05s; animation-duration: 1.4s; }

#equalizer.playing .eq-bar {
  animation-play-state: running;
  opacity: 1;
}

@keyframes eqBounce {
  0%, 100% { transform: scaleY(1);    opacity: 1; }
  50%       { transform: scaleY(0.2); opacity: 0.4; }
}

/* ── SONG INFO (PHP-injected via AJAX) ───────────────────────── */
#song-display { width: 100%; }

/* Override PHP-injected CSS classes — white text floating on image */
.letra2, .letra3,
#esteEsElArtistaDato {
  font-family: 'Playfair Display', serif !important;
  font-style: italic !important;
  font-size: 2.4rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  text-shadow: 0 3px 30px rgba(0,0,0,0.9), 0 1px 6px rgba(0,0,0,0.8) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block !important;
  line-height: 1.15;
  text-align: center !important;
  letter-spacing: -0.01em;
}

.letra4, .letra5,
#esteEsElTituloDato {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.88rem !important;
  font-weight: 300 !important;
  color: rgba(255,255,255,0.7) !important;
  text-shadow: 0 1px 14px rgba(0,0,0,0.85) !important;
  letter-spacing: 0.2em !important;
  text-transform: none !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block !important;
  margin-top: 8px;
  text-align: center !important;
}

/* Request badge */
.w3-text-green { color: var(--gold-light) !important; }
.w3-text-white { color: #ffffff !important; }

/* ── PLAY BUTTON — minimal circle ────────────────────────────── */
#divBotonPlay { margin-top: 28px; }

#botonTrianguloPlay {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  border: 1.5px solid rgba(255,255,255,0.55);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: all 0.35s ease;
  box-shadow: 0 0 0 0 rgba(255,255,255,0.15);
  animation: playPulse 3s ease-in-out infinite;
}

#botonTrianguloPlay svg {
  width: 24px;
  height: 24px;
  margin-left: 3px; /* visual center for play triangle */
}

#botonTrianguloPlay:hover {
  background: rgba(255,255,255,0.2);
  border-color: rgba(201,168,76,0.8);
  box-shadow: 0 0 30px rgba(201,168,76,0.35);
  transform: scale(1.06);
}

#botonTrianguloPlay:active { transform: scale(0.97); }

@keyframes playPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0.1); }
  50%       { box-shadow: 0 0 0 10px rgba(255,255,255,0); }
}

/* ── CUSTOM AUDIO CONTROLS ───────────────────────────────────── */
#reproductorHTML { display: none; margin-top: 10px; }

#custom-controls {
  display: flex;
  align-items: center;
  gap: 14px;
}

#reproductor { display: none; }

#btnTogglePlay {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(201,168,76,0.15);
  border: 1.5px solid rgba(201,168,76,0.4);
  color: var(--gold-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

#btnTogglePlay svg { width: 15px; height: 15px; }

#btnTogglePlay:hover {
  background: rgba(201,168,76,0.25);
  border-color: var(--gold);
  box-shadow: 0 0 14px var(--gold-glow);
}

#vol-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

#btnToggleMute {
  background: none;
  border: none;
  color: rgba(255,255,255,0.6);
  cursor: pointer;
  padding: 2px;
  display: flex;
  align-items: center;
  transition: color 0.2s ease;
}

#btnToggleMute:hover { color: var(--gold-light); }
#btnToggleMute svg { width: 18px; height: 18px; }

#volumeSlider {
  -webkit-appearance: none;
  appearance: none;
  width: 88px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(to right, var(--gold) 80%, rgba(0,0,0,0.15) 80%);
  outline: none;
  cursor: pointer;
}

#volumeSlider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--gold);
  cursor: pointer;
  box-shadow: 0 0 8px rgba(201,168,76,0.5);
  transition: transform 0.15s ease;
}

#volumeSlider::-webkit-slider-thumb:hover { transform: scale(1.2); }

#volumeSlider::-moz-range-thumb {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--gold);
  cursor: pointer;
  border: none;
}

/* ── NAVIGATION TABS ─────────────────────────────────────────── */
#main-nav {
  width: 100%;
  max-width: 860px;
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  padding-bottom: 4vh;
}

.nav-tab {
  flex: 1;
  padding: 10px 8px;
  background: rgba(255,250,240,0.5);
  border: 1px solid rgba(201,168,76,0.2);
  border-radius: var(--radius-sm);
  color: rgba(255,255,255,0.75);
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.25s ease;
  backdrop-filter: blur(10px);
  text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}

.nav-tab:hover {
  background: rgba(255,252,245,0.7);
  border-color: rgba(201,168,76,0.4);
  color: #fff;
}

.nav-tab.active {
  background: var(--panel);
  border-color: rgba(201,168,76,0.4);
  color: var(--gold-dark);
  text-shadow: none;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

/* ── CONTENT PANELS ──────────────────────────────────────────── */
#panels { width: 100%; max-width: 860px; }

#divHanSonado { display: none; }
#divPeticiones { display: none; }

/* ── HISTORY TABLE — Override PHP output ────────────────────── */
#hanSonado > div,
#hanSonado .w3-white {
  background: var(--panel) !important;
  border: 1px solid var(--panel-border) !important;
  border-radius: var(--radius) !important;
  overflow: hidden;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: var(--shadow);
}

#hanSonado table {
  width: 100% !important;
  border-collapse: collapse !important;
  table-layout: fixed !important;
}

/* Header row */
#hanSonado tr:first-child td {
  background: rgba(201,168,76,0.1) !important;
  color: var(--gold-dark) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.62rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  padding: 12px 18px !important;
  border: none !important;
}

/* Data rows */
#hanSonado td {
  color: var(--text) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.8rem !important;
  padding: 9px 18px !important;
  border: none !important;
  border-bottom: 1px solid rgba(201,168,76,0.08) !important;
  vertical-align: middle !important;
  background: transparent !important;
}

#hanSonado td:first-child {
  font-weight: 600 !important;
  color: var(--text) !important;
  width: 38% !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}

#hanSonado td:last-child {
  color: var(--text-muted) !important;
  width: 62% !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}

#hanSonado tr:hover td { background: rgba(201,168,76,0.05) !important; }
#hanSonado tr:last-child td { border-bottom: none !important; }

/* ── REQUEST PANEL ───────────────────────────────────────────── */
.req-panel {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  padding: 24px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: var(--shadow);
}

.form-row { margin-bottom: 16px; }

.form-row label {
  display: block;
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 8px;
}

.jc-select {
  width: 100%;
  background: rgba(255,250,240,0.9);
  border: 1.5px solid rgba(201,168,76,0.25);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 11px 38px 11px 14px;
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  outline: none;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238b6914' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

.jc-select:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201,168,76,0.15);
}

.jc-select option {
  background: #fffcf0;
  color: var(--text);
}

.jc-select:disabled { opacity: 0.4; cursor: not-allowed; }

#soloUnaCancion,
.jc-one-song {
  background: rgba(201,168,76,0.08);
  border: 1.5px solid rgba(201,168,76,0.25);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 0.85rem;
  color: var(--gold-dark);
  margin: 8px 0;
  font-style: italic;
  font-weight: 500;
}

.form-msg {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin: 6px 0;
  font-style: italic;
}

.form-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

#PlayIt {
  flex: 1;
  padding: 12px 20px;
  background: linear-gradient(135deg, var(--gold-rich), var(--gold-dark));
  border: none;
  border-radius: var(--radius-sm);
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 0.83rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 3px 14px rgba(201,168,76,0.3);
}

#PlayIt:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(201,168,76,0.45);
}

#PlayIt:disabled { opacity: 0.35; cursor: not-allowed; transform: none; }

#restart {
  padding: 12px 18px;
  background: rgba(255,250,240,0.7);
  border: 1.5px solid rgba(201,168,76,0.2);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  cursor: pointer;
  transition: all 0.22s ease;
}

#restart:hover:not(:disabled) {
  border-color: var(--gold);
  color: var(--gold-dark);
  background: rgba(201,168,76,0.08);
}

#restart:disabled { opacity: 0.3; cursor: not-allowed; }

/* ── THANK YOU ───────────────────────────────────────────────── */
.thank-you {
  text-align: center;
  padding: 30px 20px;
}

.ty-note {
  font-size: 2.8rem;
  color: var(--gold);
  margin-bottom: 14px;
  display: block;
  animation: noteFloat 2.5s ease-in-out infinite;
}

@keyframes noteFloat {
  0%, 100% { transform: translateY(0) rotate(-8deg); }
  50%       { transform: translateY(-6px) rotate(8deg); }
}

.thank-you p {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 1.05rem;
  color: var(--gold-dark);
  margin-bottom: 6px;
}

.thank-you span {
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* ── LISTENERS MODAL ─────────────────────────────────────────── */
#modarVerCuantos {
  position: fixed;
  inset: 0;
  background: rgba(20,12,4,0.7);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

#meterVerCuantos {
  background: rgba(14, 9, 3, 0.92);
  border: 1px solid rgba(201,168,76,0.2);
  border-radius: 20px;
  padding: 28px 26px 22px;
  text-align: center;
  width: 100%;
  max-width: 300px;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 32px 80px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.04);
  scrollbar-width: thin;
  scrollbar-color: rgba(201,168,76,0.3) transparent;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

#meterVerCuantos::-webkit-scrollbar { width: 3px; }
#meterVerCuantos::-webkit-scrollbar-thumb { background: rgba(201,168,76,0.3); border-radius: 3px; }

/* ── SCROLLBAR ───────────────────────────────────────────────── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(201,168,76,0.4); border-radius: 4px; }

/* ── RESPONSIVE: MOBILE ──────────────────────────────────────── */
@media (max-width: 640px) {
  #divHanSonado { display: none; }

  #app { padding: 0 14px; }

  /* Header compacto */
  #site-header {
    flex-direction: row;
    align-items: center;
    gap: 0;
    padding: 16px 0 0;
  }

  #logo-area { flex: 1; min-width: 0; }

  #logo-img { height: 30px; max-width: 160px; }

  #logo-sub {
    font-size: 0.5rem;
    letter-spacing: 0.1em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 3px;
  }

  #header-right { flex-shrink: 0; gap: 8px; }

  #botonVerCuantos { font-size: 0.68rem; padding: 5px 10px; }

  /* Player centrado */
  #player-section { padding: 0; }

  #esteEsElArtistaDato,
  .letra2, .letra3 { font-size: 1.9rem !important; }

  #esteEsElTituloDato,
  .letra4, .letra5 { font-size: 0.8rem !important; letter-spacing: 0.18em !important; }

  #botonTrianguloPlay { width: 56px; height: 56px; }
  #divBotonPlay       { margin-top: 20px; }
  #custom-controls    { justify-content: center; }

  /* Nav */
  #main-nav { padding-bottom: 20px; }
  .nav-tab  { font-size: 0.6rem; padding: 9px 4px; letter-spacing: 0.08em; }
}

@media (max-width: 380px) {
  #logo-img  { height: 26px; }
  #logo-sub  { font-size: 0.48rem; }
  #esteEsElArtistaDato,
  .letra2, .letra3 { font-size: 1.8rem !important; }
  .nav-tab   { font-size: 0.55rem; padding: 8px 2px; }
}