/**
 * Player 1 — skin moderna Raddios
 * Azul oscuro de marca: #1a3548 / #24485f
 */
@import url("https://fonts.googleapis.com/css2?family=Titillium+Web:wght@400;600;700&display=swap");

:root {
  --rd-navy: #1a3548;
  --rd-navy-soft: #24485f;
  --rd-navy-deep: #152a3a;
  --rd-surface: #f4f7fa;
  --rd-surface-2: #e9eef3;
  --rd-text: #1a3548;
  --rd-muted: #5f7384;
  --rd-border: rgba(26, 53, 72, 0.16);
  --rd-shadow: none;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  overflow: hidden;
  font-family: "Titillium Web", "Trebuchet MS", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------- Contenedor (un solo borde) ---------- */
/* Gate y barra: misma caja (100% del iframe) para que no salte el alto al hacer play. */
.sm2-bar-ui.flat.compact {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 100%;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: none;
  border: none;
  background: transparent;
  box-sizing: border-box;
}

.sm2-bar-ui.flat.compact > .bd.sm2-main-controls {
  table-layout: fixed;
  width: 100%;
  height: 100% !important;
  min-height: 100% !important;
  max-height: 100% !important;
  box-sizing: border-box;
  background: linear-gradient(180deg, #f8fafc 0%, #eef3f7 100%) !important;
  border: 1px solid var(--rd-border);
  border-radius: 16px;
  box-shadow: none;
  outline: none !important;
}

.sm2-bar-ui .sm2-inline-gradient,
.sm2-bar-ui.flat .sm2-inline-gradient {
  display: none !important;
}

.sm2-bar-ui.flat.compact .sm2-inline-element,
.sm2-bar-ui.flat.compact .sm2-inline-element:first-of-type,
.sm2-bar-ui.flat.compact .sm2-inline-element:last-of-type {
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* ---------- Play ---------- */
.sm2-bar-ui.flat.compact .sm2-button-element:first-of-type {
  width: 60px !important;
  min-width: 60px !important;
  max-width: 60px !important;
  overflow: visible !important;
  padding-left: 8px;
  box-sizing: border-box;
  vertical-align: middle;
}

.sm2-bar-ui .sm2-inline-element .btn-action {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  margin: 9px 6px 9px 0 !important;
  border-radius: 50% !important;
  background: linear-gradient(145deg, var(--rd-navy-soft) 0%, var(--rd-navy) 55%, var(--rd-navy-deep) 100%) !important;
  box-shadow: 0 3px 10px rgba(26, 53, 72, 0.32);
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.sm2-bar-ui .sm2-inline-element .btn-action:hover {
  transform: scale(1.05);
  box-shadow: 0 5px 14px rgba(26, 53, 72, 0.38);
  filter: brightness(1.06);
}

.sm2-bar-ui .sm2-inline-element .btn-action:active {
  transform: scale(0.96);
}

.sm2-bar-ui .sm2-button-bd .play-pause {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.sm2-bar-ui.playing .sm2-inline-element .btn-action {
  box-shadow: 0 0 0 3px rgba(26, 53, 72, 0.12), 0 3px 10px rgba(26, 53, 72, 0.3);
}

/* ---------- Texto / estado ---------- */
.sm2-bar-ui.flat.compact .sm2-inline-status {
  min-width: 0 !important;
  width: auto !important;
  max-width: 100% !important;
  overflow: hidden;
  vertical-align: middle;
  padding-left: 0.35em !important;
  padding-right: 0.4em !important;
}

.sm2-bar-ui .sm2-playlist-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em;
  color: var(--rd-navy) !important;
  line-height: 1.25 !important;
  min-height: 1.15em !important;
}

.sm2-bar-ui .sm2-playlist-song {
  font-size: 13px !important;
  font-style: normal !important;
  font-weight: 400 !important;
  color: var(--rd-muted) !important;
  line-height: 1.35 !important;
  max-width: 100%;
  overflow: hidden !important;
  min-width: 0;
}

.sm2-playlist-song {
  position: relative;
  overflow: hidden !important;
  max-width: 100%;
  min-width: 0;
}

#radio-name,
#radio-song {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
}

#radio-song a {
  color: inherit;
  text-decoration: none;
}

/* Marquee */
.rd-marquee {
  display: inline-flex;
  align-items: baseline;
  white-space: nowrap;
  will-change: transform;
  max-width: none;
}

.rd-marquee__item {
  flex: 0 0 auto;
  white-space: nowrap;
}

.rd-marquee__gap {
  flex: 0 0 auto;
  padding: 0 0.35em;
}

.rd-marquee.is-short {
  animation: none !important;
  transform: none !important;
  display: block;
  text-align: left;
}

.rd-marquee.is-short .rd-marquee__gap,
.rd-marquee.is-short .rd-marquee__item[aria-hidden="true"] {
  display: none;
}

.rd-marquee.is-scrolling {
  animation: rd-marquee-scroll 12s linear infinite;
}

@keyframes rd-marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .rd-marquee {
    animation: none !important;
    transform: none !important;
  }
  .sm2-bar-ui .sm2-inline-element .btn-action {
    transition: none;
  }
}

/* ---------- Volumen ---------- */
.sm2-bar-ui.flat.compact .sm2-volume {
  width: 52px !important;
  min-width: 52px !important;
  max-width: 52px !important;
  vertical-align: middle;
  position: relative;
}

.sm2-bar-ui .sm2-volume .sm2-button-bd {
  position: relative !important;
  min-width: 52px !important;
}

/* Parlante pegado a la barra */
.sm2-bar-ui .volume-icon {
  width: 20px !important;
  height: 100% !important;
  left: auto !important;
  right: 20px !important;
  background-image: url(https://www.raddios.com/player/1/image/vol.png?v=4) !important;
  background-size: 18px 18px !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  opacity: 0.92;
  transition: opacity 0.15s ease;
}

.sm2-bar-ui .volume-icon:hover {
  opacity: 1;
}

.sm2-bar-ui.muted .volume-icon,
.muted .volume-icon {
  background-image: url(https://www.raddios.com/player/1/image/volumemute.png?v=4) !important;
  opacity: 0.7;
}

/* Track vertical: centrada, junto al parlante */
.sm2-bar-ui .show-volume {
  display: block !important;
  width: 10px !important;
  height: 32px !important;
  border-radius: 999px;
  background: transparent !important;
  position: absolute !important;
  right: 7px !important;
  top: 50% !important;
  bottom: auto !important;
  margin-top: -16px !important;
  left: auto !important;
}

.sm2-bar-ui .sm2-inline-button-volume {
  left: 1px !important;
  top: 0 !important;
  bottom: auto !important;
  width: 8px !important;
  height: 32px !important;
  border-radius: 999px !important;
}

.sm2-bar-ui .sm2-volume-control,
.sm2-bar-ui .sm2-volume-shade {
  background-position: center !important;
  background-size: 100% 100% !important;
  border-radius: 999px !important;
}

/* Fondo (track vacío) */
.sm2-bar-ui .volume-shade {
  background-color: #c5d0da !important;
  background-image: none !important;
  opacity: 1 !important;
  box-shadow: inset 0 0 0 1px rgba(26, 53, 72, 0.08);
}

/* Relleno activo */
.sm2-bar-ui a.sm2-volume-control {
  background-color: #1a3548 !important;
  background-image: linear-gradient(180deg, #24485f 0%, #1a3548 100%) !important;
  box-shadow: 0 0 0 1px rgba(26, 53, 72, 0.1);
}

/* Play: triángulo ópticamente centrado; pause geométrico */
.sm2-bar-ui .play-pause {
  background-size: 50% !important;
  background-position: 54% 50% !important;
  background-repeat: no-repeat !important;
}

.sm2-bar-ui.playing .play-pause {
  background-size: 42% !important;
  background-position: 50% 50% !important;
}

/* ---------- Boot gate (autoplay=0) — misma caja que .sm2-main-controls ---------- */
#rd-play-gate {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100% !important;
  min-height: 100% !important;
  max-height: 100% !important;
  box-sizing: border-box;
  padding: 0 16px 0 10px;
  background: linear-gradient(180deg, #f8fafc 0%, #eef3f7 100%);
  border: 1px solid var(--rd-border);
  border-radius: 16px;
  box-shadow: none;
  margin: 0;
}

#rd-boot-play {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--rd-muted);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  min-height: 44px;
}

#rd-boot-play-bd {
  position: relative;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  margin: 0;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--rd-navy-soft) 0%, var(--rd-navy) 55%, var(--rd-navy-deep) 100%);
  box-shadow: 0 3px 10px rgba(26, 53, 72, 0.32);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

#rd-boot-play:hover #rd-boot-play-bd {
  transform: scale(1.05);
  box-shadow: 0 5px 14px rgba(26, 53, 72, 0.38);
}

#rd-boot-play-icon {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(https://www.raddios.com/player/1/image/icomoon/entypo-25px-ffffff/PNG/play.png);
  background-image: none, url(https://www.raddios.com/player/1/image/icomoon/entypo-25px-ffffff/SVG/play.svg);
  background-repeat: no-repeat;
  background-size: 50%;
  background-position: 54% 50%;
}

#rd-boot-label {
  font: 700 16px/1 "Titillium Web", "Trebuchet MS", sans-serif;
  color: var(--rd-navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
  letter-spacing: 0.01em;
}

#rd-boot-loading {
  display: none;
  font: 400 13px/1 "Titillium Web", "Trebuchet MS", sans-serif;
  color: var(--rd-muted);
  margin-left: 10px;
}

/* ---------- Compact (widgets / embeds chicos) ---------- */
html.rd-player-compact,
body.rd-player-compact {
  overflow: hidden !important;
  height: 100%;
  max-height: 100%;
}

body.rd-player-compact .sm2-bar-ui.flat.compact {
  border-radius: 10px;
  height: 100%;
  max-height: 100%;
}

body.rd-player-compact .sm2-bar-ui.flat.compact > .bd.sm2-main-controls,
body.rd-player-compact #rd-play-gate {
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  border-radius: 10px;
  padding-left: 2px;
  padding-right: 6px;
}

body.rd-player-compact .sm2-bar-ui.flat.compact .sm2-inline-element:last-of-type,
body.rd-player-compact .sm2-bar-ui.flat.compact .sm2-volume {
  overflow: hidden !important;
}

body.rd-player-compact .sm2-bar-ui.flat.compact .sm2-button-element:first-of-type {
  width: 38px !important;
  min-width: 38px !important;
  max-width: 38px !important;
  padding-left: 2px;
  overflow: hidden !important;
}

body.rd-player-compact .sm2-bar-ui .sm2-inline-element .btn-action,
body.rd-player-compact #rd-boot-play-bd {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
  flex-basis: 30px;
  margin: 0 2px 0 0 !important;
  box-shadow: 0 2px 6px rgba(26, 53, 72, 0.28) !important;
}

body.rd-player-compact .sm2-bar-ui .sm2-playlist-title,
body.rd-player-compact #rd-boot-label {
  font-size: 12px !important;
}

body.rd-player-compact .sm2-bar-ui .sm2-playlist-song {
  font-size: 11px !important;
}

body.rd-player-compact .sm2-bar-ui.flat.compact .sm2-volume {
  width: 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

body.rd-player-compact .sm2-bar-ui .sm2-volume .sm2-button-bd {
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

body.rd-player-compact #rd-boot-label {
  max-width: 120px;
}

body.rd-player-compact .sm2-bar-ui .volume-icon {
  width: 18px !important;
  left: 2px !important;
  right: auto !important;
  background-size: 16px 16px !important;
}

body.rd-player-compact .sm2-bar-ui .show-volume {
  width: 8px !important;
  height: 22px !important;
  margin-top: -11px !important;
  right: 4px !important;
  left: auto !important;
}

body.rd-player-compact .sm2-bar-ui .sm2-inline-button-volume {
  height: 22px !important;
  width: 6px !important;
  left: 1px !important;
}

body.rd-player-compact .sm2-bar-ui .play-pause {
  background-size: 48% !important;
  background-position: 54% 50% !important;
}

body.rd-player-compact.playing .sm2-bar-ui .play-pause,
body.rd-player-compact .sm2-bar-ui.playing .play-pause {
  background-size: 40% !important;
  background-position: 50% 50% !important;
}

body.rd-player-compact #rd-boot-play {
  gap: 8px;
  min-height: 32px;
}

body.rd-player-compact #rd-boot-play-icon {
  background-size: 48%;
  background-position: 54% 50%;
}