/* Reproductor base */
.reproductor-base {
  position: fixed;
  width: 1010px;
  height: 715px;
  z-index: 9999;
}

#popup-reproductor {
  position: fixed;
  z-index: 10000 !important;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
}

.reproductor-fondo {
  width: 100%;
  height: 100%;
  display: block;
}

.reproductor-pantalla {
  position: absolute;
  top: 138px;
  left: 248px;
  width: 505px;
  height: 285px;
  background: #000000;
  border-radius: 6px;
  overflow: hidden;
  z-index: 2;
}

.reproductor-pantalla iframe,
#twitch-embed,
#youtube-embed,
#youtube-player-actual {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

.reproductor-botones {
  position: absolute;
  width: 30%;
  height: 30%;
  left: 0;
  top: 0;
  z-index: 3;
}

/*BOTON DE ANTERIOR*/
#btn-prev {
  position: absolute;
  left: 473px;
  bottom: -336px;
}

#btn-prev img {
  width: 65px;
  height: 35px;
}

#btn-prev:hover img {
  content: url(155ppi/prev_on.webp);
}

/*BOTON DE PLAY/PAUSE*/
#btn-playpause {
  position: absolute;
  left: 200px;
  bottom: -415px;
}

#btn-playpause img {
  width: 150px;
  height: 150px;
}

#btn-playpause:hover img {
  content: url(155ppi/play_seleccionado.webp);
}

/*BOTON DE SIGUIENTE*/
#btn-next {
  position: absolute;
  left: 554px;
  bottom: -336px;
}

#btn-next img {
  width: 65px;
  height: 35px;
}

#btn-next:hover img {
  content: url(155ppi/next_on.webp);
}

.reproductor-btn-icon {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: transform 0.1s;
}


/*BOTON DE MINIMIZAR*/
.reproductor-minimize-btn {
  background: none;
  border: none;
  padding: 0;
  position: absolute;
  top: 454px;
  right: 162px;
  cursor: pointer;
}

.reproductor-minimize-btn img {
  width: 45px;
  height: 45px;
  transition: filter 0.2s;
}

.reproductor-minimize-btn:hover img {
  content: url(155ppi/mini_on.webp);
}

/*BOTON DE CERRAR*/
.reproductor-close-btn {
  background: none;
  border: none;
  padding: 0;
  position: absolute;
  top: 321px;
  right: 131px;
  cursor: pointer;
}

.reproductor-close-btn img {
  width: 55px;
  height: 55px;
  transition: filter 0.2s;
}

.reproductor-close-btn:hover img {
  content: url(155ppi/close_on.webp);
}

/* Integración de botones Aero en el Reproductor */
.reproductor-window-controls .win-btn {
  border-radius: 0;
  box-shadow: none;
  background: rgba(255, 255, 255, 0.1);
  color: white;
}

.reproductor-window-controls .win-btn:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* Información del video */
.video-info {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 515px;
  color: #143a15;
  font-size: 1em;
  z-index: 10;
  pointer-events: none;
  display: block;
  padding: 0;
  font-family: 'Cascadia Code', monospace;
}

.video-time {
  position: absolute;
  left: 290px;
  top: 0;
  height: 100%;
  display: flex;
  align-items: center;
  min-width: 80px;
  font-variant-numeric: tabular-nums;
  font-family: 'Cascadia Code', monospace;
}

.video-title {
  position: absolute;
  left: 55%;
  top: 0;
  transform: translateX(-50%);
  height: 100%;
  display: flex;
  align-items: center;
  overflow: hidden;
  max-width: 25%;
  font-family: 'Cascadia Code', monospace;
  white-space: nowrap;
}

.scroll-text {
  display: inline-block;
  padding-left: 100%;
  animation: marquee 10s linear infinite;
  white-space: nowrap;
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-100%);
  }
}

/*---------------------------------------------------------------------------------------------*/

/* Barra de volumen */
#volume-bar {
  position: absolute;
  left: 640px;
  bottom: 177px;
  width: 120px;
  height: 10px;
  accent-color: #969696;
  background: transparent;
  border: none;
  outline: none;
  border-radius: 10px;
  box-shadow: 0 2px 8px #8888, 0 1px 0 #fff inset;
  z-index: 20;
}

/* Chrome, Edge, Opera, Safari */
#volume-bar::-webkit-slider-runnable-track {
  height: 10px;
  background: #888c91;
  border-radius: 10px;
  box-shadow: 0 2px 8px #8888, 0 1px 0 #fff inset;
}

#volume-bar::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  background: radial-gradient(circle at 30% 30%, #ffffff 0%, #d0d0d0 50%, #888 100%);
  border: 2px solid #555;
  border-radius: 50%;
  margin-top: -5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  cursor: pointer;
  transition: transform 0.1s, background 0.2s;
}

#volume-bar:hover::-webkit-slider-thumb {
  transform: scale(1.1);
  background: radial-gradient(circle at 30% 30%, #ffffff 0%, #e0e0e0 50%, #aaa 100%);
}

/* Firefox */
#volume-bar::-moz-range-track {
  height: 10px;
  background: #888c91;
  border-radius: 10px;
  box-shadow: 0 2px 8px #8888, 0 1px 0 #fff inset;
}

#volume-bar::-moz-range-thumb {
  width: 22px;
  height: 22px;
  background: radial-gradient(circle at 30% 30%, #e0e0e0 0%, #b0b0b0 60%, #888 100%);
  border: none;
  border-radius: 50%;
  box-shadow: 0 2px 8px #8888, 0 0 8px #fff8 inset;
  cursor: pointer;
  transition: background 0.2s;
}

/* IE */
#volume-bar::-ms-fill-lower,
#volume-bar::-ms-fill-upper {
  background: #888c91;
  border-radius: 10px;
}

#volume-bar::-ms-thumb {
  width: 22px;
  height: 22px;
  background: radial-gradient(circle at 30% 30%, #e0e0e0 0%, #b0b0b0 60%, #888 100%);
  border: none;
  border-radius: 50%;
  box-shadow: 0 2px 8px #8888, 0 0 8px #fff8 inset;
  cursor: pointer;
  transition: background 0.2s;
}

/* Quita el fondo gris en Firefox */
#volume-bar {
  background: transparent;
}

/*--------------------------------------------------------------------------------------------*/

/* Barra de progreso */
#progress-bar {
  position: absolute;
  left: 430px;
  bottom: 215px;
  width: 330px;
  height: 10px;
  background: transparent;
  border: none;
  outline: none;
  border-radius: 10px;
  box-shadow: 0 4px 3px #3b3b3b88, 0 1px 0 #fff inset;
  z-index: 20;
  accent-color: #143a15;
}

/* Chrome, Edge, Opera, Safari */
#progress-bar::-webkit-slider-runnable-track {
  height: 10px;
  border-radius: 10px;
  background: linear-gradient(to right,
      #334C3B 0%,
      #334C3B var(--progress, 0%),
      #C8DCD0 var(--progress, 0%),
      #C8DCD0 100%);
  box-shadow: 0 4px 8px #8888, 0 1px 0 #fff inset;
}

#progress-bar::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 20px !important;
  height: 20px !important;
  background: radial-gradient(circle at 30% 30%, #ffffff 0%, #d0d0d0 50%, #888 100%) !important;
  border: 2px solid #334C3B !important;
  border-radius: 50% !important;
  margin-top: -2px !important;
  /* (10/2 - 20/2 = -5) */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
  cursor: pointer !important;
  transition: transform 0.1s !important;
}

#progress-bar:hover::-webkit-slider-thumb {
  transform: scale(1.1) !important;
}

#progress-bar:hover::-webkit-slider-thumb,
#progress-bar:focus::-webkit-slider-thumb {
  background: #fff;
}

/* Firefox */
#progress-bar::-moz-range-track,
#progress-bar::-moz-range-progress {
  height: 10px;
  border-radius: 10px;
  background: #C8DCD0;
  box-shadow: 0 4px 8px #8888, 0 1px 0 #fff inset;
}


/* IE */
#progress-bar::-ms-fill-lower {
  background: #334C3B;
  border-radius: 10px;
}

#progress-bar::-ms-fill-upper {
  background: #C8DCD0;
  border-radius: 10px;
}

#progress-bar::-ms-thumb {
  width: 22px;
  height: 22px;
  background: radial-gradient(circle at 30% 30%, #e0e0e0 0%, #b0b0b0 60%, #888 100%);
  border: none;
  border-radius: 50%;
  box-shadow: 0 2px 8px #8888, 0 0 8px #fff8 inset;
  cursor: pointer;
  transition: background 0.2s;
}

/* Quita el fondo gris en Firefox */
#progress-bar {
  background: transparent;
}