/* ══════════════════════════════════════
   PLAYER EMBEBIDO — Estilos originales del reproductor
   adaptados para funcionar dentro de la landing page.
   Todos los selectores están scoped bajo #playerApp
   ══════════════════════════════════════ */

/* Orbitron local para el player */
@font-face {
  font-family: 'Orbitron';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("orbitron.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Orbitron';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("orbitron.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

#playerApp {
  width: 100%;
  background: #06080d;
  display: flex;
  flex-direction: column;
  font-family: Arial, Helvetica, sans-serif;
  color: #e0e0e0;
  overflow: hidden;
}

/* ── Hero animado ── */
#playerApp .rfm-spectrum { display: flex; align-items: flex-end; justify-content: center; gap: 2px; height: 50px; padding: 6px 8px 4px; background: #030610; border-bottom: 1px solid rgba(59,130,246,0.08); overflow: hidden; }
#playerApp .rfm-spectrum span { flex: 1; max-width: 22px; min-width: 8px; border-radius: 1px 1px 0 0; height: 2px; background: #3b82f6; opacity: 0.1; }
#playerApp .rfm-spectrum.active span { opacity: 0.6; animation: rfm-bar var(--d, 1s) ease-in-out infinite alternate; animation-delay: var(--dl, 0s); }
@keyframes rfm-bar { 0% { height: 2px; opacity: 0.2; } 33% { height: var(--h1, 30px); opacity: 0.7; } 66% { height: var(--h2, 8px); opacity: 0.4; } 100% { height: var(--h3, 38px); opacity: 0.65; } }

#playerApp #hero { position: relative; width: 100%; overflow: hidden; background: #03060f; max-height: 40vh; }
#playerApp #stage { position: absolute; top: 0; left: 0; width: 1080px; transform-origin: top left; will-change: transform; }

/* ── Player (compacto) ── */
#playerApp .rfm-player {
  background: linear-gradient(165deg, #0a1628 0%, #06080d 40%, #0d0f1a 100%); padding: 1.05rem 1.05rem 1.3rem; width: 100%;
  display: flex; flex-direction: column; gap: 0.85rem; color: #e0e0e0;
  position: relative; border-top: 1px solid rgba(59,130,246,0.18);
}
#playerApp .rfm-player * { box-sizing: border-box; }
#playerApp .rfm-live {
  align-self: center; padding: 4px 14px; border-radius: 50px; font-size: 0.6rem;
  font-weight: 700; text-transform: uppercase; letter-spacing: 3px; background: #111827;
  color: #4b5563; border: 1px solid rgba(255,255,255,0.04); transition: all .5s; z-index: 2; position: relative;
}
#playerApp .rfm-live.on { background: rgba(239,40,40,0.2); color: #ff4444; border-color: rgba(255,50,50,0.4); box-shadow: 0 0 28px rgba(255,40,40,0.3), 0 0 8px rgba(255,40,40,0.2); animation: rfm-lp 2s ease-in-out infinite; text-shadow: 0 0 8px rgba(255,60,60,0.5); }
@keyframes rfm-lp { 0%,100% { box-shadow: 0 0 18px rgba(255,40,40,0.25); } 50% { box-shadow: 0 0 36px rgba(255,40,40,0.5); } }

#playerApp .rfm-display { text-align: center; padding: 1.05rem; background: rgba(8,14,28,0.7); border-radius: 12px; border: 1px solid rgba(59,130,246,0.12); position: relative; overflow: hidden; }
#playerApp .rfm-display::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, #3b82f6, transparent); animation: rfm-sc 3s ease-in-out infinite; }
@keyframes rfm-sc { 0%,100% { opacity: .15; transform: scaleX(.3); } 50% { opacity: .6; transform: scaleX(1); } }
#playerApp .rfm-display h1 { color: #93c5fd; font-weight: 700; font-size: 1.15rem; text-shadow: 0 0 16px rgba(59,130,246,0.3); margin: 0 0 0.3rem 0; letter-spacing: 2px; font-family: 'Orbitron', Arial, sans-serif; }
#playerApp .rfm-clock { font-family: Arial, Helvetica, sans-serif; font-size: 1rem; padding: 5px 12px; }
#playerApp .rfm-title-row { display: flex; align-items: center; justify-content: center; gap: 0.6rem; flex-wrap: wrap; margin: 0 0 0.3rem 0; }
#playerApp .rfm-title-row h1 { margin: 0; }
@media (max-width: 819px) {
  #playerApp .rfm-title-row { flex-direction: column; gap: 0.4rem; }
  #playerApp .rfm-clock { font-size: 1.3rem !important; padding: 6px 16px !important; display: block; text-align: center; }
}
#playerApp .rfm-clock { font-size: 0.7rem; font-weight: 700; letter-spacing: 1.5px; color: #60a5fa; background: rgba(59,130,246,0.08); border: 1px solid rgba(59,130,246,0.18); border-radius: 6px; padding: 3px 8px; font-variant-numeric: tabular-nums; white-space: nowrap; text-shadow: 0 0 10px rgba(59,130,246,0.3); }
#playerApp .rfm-display a { color: #3b82f6; text-transform: uppercase; font-size: 0.55rem; letter-spacing: 2px; text-decoration: none; transition: color .3s; display: block; text-align: center; }
#playerApp .rfm-display a:hover { color: #93c5fd; }

#playerApp .rfm-meta { display: flex; justify-content: center; flex-wrap: wrap; gap: 5px; margin-top: 0.7rem; }
#playerApp .rfm-badge { font-size: 0.48rem; font-weight: 700; letter-spacing: 1.5px; padding: 3px 7px; border-radius: 5px; background: rgba(59,130,246,0.06); border: 1px solid rgba(59,130,246,0.12); color: rgba(147,197,253,0.55); text-transform: uppercase; display: inline-flex; align-items: center; gap: 4px; }
#playerApp .rfm-badge.live-sig .dotsig { background: #10b981; box-shadow: 0 0 6px rgba(16,185,129,0.7); animation: rfm-sigp 1.6s ease-in-out infinite; }
@keyframes rfm-sigp { 0%,100% { opacity: 1; } 50% { opacity: .4; } }

#playerApp .rfm-now { display: flex; align-items: center; gap: 0.9rem; margin-top: 0.75rem; padding: 0.75rem; background: linear-gradient(135deg, rgba(59,130,246,0.04) 0%, rgba(16,185,129,0.03) 100%); border: 1px solid rgba(59,130,246,0.15); border-radius: 14px; box-shadow: 0 4px 20px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.03); text-align: left; }
#playerApp .rfm-art { position: relative; width: 80px; height: 80px; border-radius: 14px; flex-shrink: 0; overflow: hidden; background: #0a0f1a; box-shadow: 0 2px 10px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(255,255,255,0.05); }
#playerApp .rfm-art img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .5s; }
#playerApp .rfm-art-disc { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 50%, #1a2540 0%, #0a0f1a 70%); }
#playerApp .rfm-art-disc svg { width: 26px; height: 26px; opacity: .5; }
#playerApp .rfm-art.spin .rfm-art-disc svg { animation: rfm-spin 3s linear infinite; }
@keyframes rfm-spin { to { transform: rotate(360deg); } }
#playerApp .rfm-now-info { flex: 1; min-width: 0; }
#playerApp .rfm-now-label { font-size: 0.5rem; letter-spacing: 2.5px; color: rgba(96,165,250,0.6); text-transform: uppercase; margin-bottom: 3px; display: flex; align-items: center; gap: 5px; }
#playerApp .rfm-now-label .eqmini { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
#playerApp .rfm-now-label .eqmini i { width: 3px; background: linear-gradient(to top, #10b981, #3b82f6); border-radius: 2px; animation: rfm-eqm .8s ease-in-out infinite alternate; }
#playerApp .rfm-now-label .eqmini i:nth-child(2) { animation-delay: .2s; }
#playerApp .rfm-now-label .eqmini i:nth-child(3) { animation-delay: .4s; }
#playerApp .rfm-now-label .eqmini i:nth-child(4) { animation-delay: .15s; }
#playerApp .rfm-now-label .eqmini i:nth-child(5) { animation-delay: .35s; }
@keyframes rfm-eqm { 0% { height: 3px; } 100% { height: 14px; } }
#playerApp .rfm-now-title { font-size: 0.82rem; font-weight: 700; color: #e2e8f0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

#playerApp .rfm-controls { display: flex; align-items: center; justify-content: center; gap: 1rem; padding: 0.1rem 0; }
#playerApp .rfm-play { position: relative; width: 76px; height: 76px; border-radius: 50%; border: 0 !important; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform .25s cubic-bezier(.4,0,.2,1), filter .25s ease; outline: 0 !important; background-color: transparent !important; background-image: url("../img/radio-premium-button.png") !important; background-position: center !important; background-size: contain !important; background-repeat: no-repeat !important; padding: 0; box-shadow: none !important; filter: drop-shadow(0 16px 28px rgba(14,165,233,.25)) drop-shadow(0 10px 22px rgba(251,191,36,.18)); }
#playerApp .rfm-play::before,
#playerApp .rfm-play::after { display: none !important; content: none !important; }
#playerApp .rfm-play:hover { transform: scale(1.06); filter: drop-shadow(0 18px 34px rgba(14,165,233,.34)) drop-shadow(0 12px 26px rgba(251,191,36,.24)); }
#playerApp .rfm-play:active { transform: scale(.96); }
#playerApp .rfm-play:focus,
#playerApp .rfm-play:focus-visible { outline: 0 !important; border: 0 !important; box-shadow: none !important; background-color: transparent !important; background-image: url("../img/radio-premium-button.png") !important; }
#playerApp .rfm-play.on { filter: drop-shadow(0 16px 32px rgba(34,197,94,.28)) drop-shadow(0 10px 22px rgba(14,165,233,.2)); }
#playerApp .rfm-play svg { position: relative; z-index: 2; width: 28px; height: 28px; fill: #07111f; filter: drop-shadow(0 1px 1px rgba(255,255,255,.45)) drop-shadow(0 -1px 1px rgba(0,0,0,.18)); }
#playerApp .rfm-play .ic-play { margin-left: 4px; }
#playerApp .rfm-play .ic-pause { display: none; }
#playerApp .rfm-play.on .ic-play { display: none; }
#playerApp .rfm-play.on .ic-pause { display: block; }
#playerApp .rfm-play-aura { position: absolute; inset: -6px; border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity .4s; z-index: -1; }
#playerApp .rfm-play.on .rfm-play-aura { opacity: 1; box-shadow: 0 0 24px 4px rgba(16,185,129,0.35); animation: rfm-aura 2s ease-in-out infinite; }
@keyframes rfm-aura { 0%,100% { box-shadow: 0 0 18px 2px rgba(16,185,129,0.3); } 50% { box-shadow: 0 0 30px 8px rgba(16,185,129,0.5); } }
#playerApp .rfm-play.loading .ic-play, #playerApp .rfm-play.loading .ic-pause { display: none; }
#playerApp .rfm-spinner { display: none; position: relative; z-index: 2; width: 24px; height: 24px; border: 2.5px solid rgba(255,255,255,0.2); border-top-color: #fff; border-radius: 50%; animation: rfm-spin .7s linear infinite; }
#playerApp .rfm-play.loading .rfm-spinner { display: block; }

#playerApp .rfm-vol { display: flex; align-items: center; gap: 0.55rem; flex: 1; max-width: 170px; }
#playerApp .rfm-vol svg { width: 15px; height: 15px; color: rgba(96,165,250,0.35); flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#playerApp .rfm-vol input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 3px; background: rgba(59,130,246,0.1); border-radius: 2px; outline: none; }
#playerApp .rfm-vol input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 13px; height: 13px; background: #e2e8f0; border-radius: 50%; cursor: pointer; border: 2px solid #3b82f6; box-shadow: 0 0 6px rgba(59,130,246,0.3); }

#playerApp .rfm-social { display: flex; justify-content: center; gap: 0.55rem; padding-top: 0.4rem; border-top: 1px solid rgba(255,255,255,0.03); }
#playerApp .rfm-social a { width: 34px; height: 34px; border-radius: 8px; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.04); display: flex; align-items: center; justify-content: center; color: rgba(96,165,250,0.4); text-decoration: none; transition: all .3s; }
#playerApp .rfm-social a:hover { color: #fff; background: rgba(59,130,246,0.1); border-color: rgba(59,130,246,0.2); transform: translateY(-2px); }
#playerApp .rfm-social a svg { width: 15px; height: 15px; fill: currentColor; }

#playerApp .rfm-footer { text-align: center; padding: 0.8rem 1rem; border-top: 1px solid rgba(59,130,246,0.08); }
#playerApp .rfm-footer span { font-size: 0.42rem; letter-spacing: 1.5px; color: rgba(147,197,253,0.3); text-transform: uppercase; }
#playerApp .rfm-footer a { color: rgba(96,165,250,0.4); text-decoration: none; transition: color .3s; }
#playerApp .rfm-footer a:hover { color: #93c5fd; }

/* ── Desktop: hero izquierda + player derecha ── */
@media (min-width: 820px) {
  #playerApp {
    flex-direction: row;
    align-items: stretch;
    min-height: 560px;
    height: auto;
    overflow: hidden;
  }
  #playerApp #hero {
    flex: 1;
    align-self: stretch;
    min-height: 560px;
    max-height: none;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(120% 95% at 50% 40%, #122a5e 0%, #0a173a 42%, #050a1c 78%, #03060f 100%) !important;
  }
  #playerApp .rfm-spectrum { display: none; }
  #playerApp .rfm-player {
    width: 520px;
    flex-shrink: 0;
    justify-content: center;
    border-top: none;
    border-left: 1px solid rgba(59,130,246,0.18);
    min-height: 560px;
    overflow-y: auto;
    padding: 2rem 2rem 2.5rem;
    gap: 1.2rem;
  }
  #playerApp .rfm-display { padding: 1.5rem; border-radius: 16px; }
  #playerApp .rfm-display h1 { font-size: 1.5rem; letter-spacing: 3px; }
  #playerApp .rfm-clock { font-size: 0.85rem; padding: 4px 10px; }
  #playerApp .rfm-display a { font-size: 0.65rem; letter-spacing: 3px; }
  #playerApp .rfm-now { padding: 0.8rem; border-radius: 14px; margin-top: 1rem; }
  #playerApp .rfm-art { width: 56px; height: 56px; }
  #playerApp .rfm-now-label { font-size: 0.52rem; }
  #playerApp .rfm-now-title { font-size: 0.88rem; }
  #playerApp .rfm-badge { font-size: 0.52rem; padding: 4px 9px; }
  #playerApp .rfm-play { width: 80px; height: 80px; }
  #playerApp .rfm-play svg { width: 30px; height: 30px; }
  #playerApp .rfm-spinner { width: 30px; height: 30px; }
  #playerApp .rfm-vol { max-width: 200px; }
  #playerApp .rfm-vol svg { width: 18px; height: 18px; }
  #playerApp .rfm-social a { width: 40px; height: 40px; border-radius: 10px; }
  #playerApp .rfm-social a svg { width: 18px; height: 18px; }
  #playerApp .rfm-footer span { font-size: 0.48rem; letter-spacing: 2px; }
  #playerApp .rfm-live { font-size: 0.7rem; padding: 5px 18px; letter-spacing: 4px; }
}

/* ── Mobile spectrum hidden on desktop ── */
@media (min-width: 820px) {
  #playerApp .rfm-spectrum { display: none; }
}

/* ── Mobile optimizations ── */
@media (max-width: 480px) {
  #playerApp #hero {
    max-height: 35vh;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #playerApp .rfm-player {
    padding: 1rem 1rem 1.2rem;
    gap: 0.9rem;
  }
  #playerApp .rfm-display {
    padding: 1rem 0.8rem;
  }
  #playerApp .rfm-display h1 {
    font-size: 1.1rem;
    letter-spacing: 1.5px;
  }
  #playerApp .rfm-title-row {
    gap: 0.4rem;
  }
  #playerApp .rfm-clock {
    font-size: 1.15rem !important;
    padding: 6px 14px !important;
  }
  #playerApp .rfm-display a {
    font-size: 0.65rem;
    letter-spacing: 2px;
    margin-top: 4px;
  }
  #playerApp .rfm-live {
    font-size: 0.7rem;
    padding: 5px 16px;
    letter-spacing: 3.5px;
  }
  #playerApp .rfm-now {
    gap: 0.7rem;
    padding: 0.7rem;
  }
  #playerApp .rfm-art {
    width: 64px;
    height: 64px;
    border-radius: 12px;
  }
  #playerApp .rfm-now-label {
    font-size: 0.6rem;
    letter-spacing: 2px;
  }
  #playerApp .rfm-now-title {
    font-size: 0.9rem;
  }
  #playerApp .rfm-badge {
    font-size: 0.55rem;
    padding: 3px 7px;
  }
  #playerApp .rfm-play {
    width: 62px;
    height: 62px;
  }
  #playerApp .rfm-play svg {
    width: 22px;
    height: 22px;
  }
  #playerApp .rfm-spinner {
    width: 22px;
    height: 22px;
  }
  #playerApp .rfm-controls {
    gap: 0.8rem;
  }
  #playerApp .rfm-vol {
    max-width: 140px;
  }
  #playerApp .rfm-vol svg {
    width: 16px;
    height: 16px;
  }
  #playerApp .rfm-social a {
    width: 36px;
    height: 36px;
    border-radius: 8px;
  }
  #playerApp .rfm-social a svg {
    width: 16px;
    height: 16px;
  }
  #playerApp .rfm-footer span {
    font-size: 0.45rem;
    letter-spacing: 1px;
  }
}