/* Estilos del reproductor XOOXLY */

*{
  margin: 0;
  padding: 0;
}

@font-face {
  font-family: "Open Sans";
  src: url(../fonts/static/OpenSans-Bold.ttf);
}

body {
  border: none;
  overflow-x: hidden;
  overflow-y: hidden;
  width: 100%;
  height: 100%;
  background: black;
}

#noselect {
  -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none; 
}

#video-contenedor {
  border: none;
  width: 100%;
  height: 100%;
  position: absolute;
  font-family: "Open Sans";
}

i {
  cursor: pointer;
}

video {
  width: 100%;
  height: 100%;
}

/* Controles */

.icon-menu, .icon-search {
  vertical-align: middle;
}


.menu {
  font-size: 2.3vw;
  top: 0.6vw;
  left: 3vw;
  position: fixed;
  place-content: center;
  transform: translateX(-50%);
  height: 4vw;
  width: 4vw;
  background-color: rgba(0,0,0,0.3);
  color: rgba(255,255,255,0.7);
  border-radius: 10vw;
  -webkit-transition: all 500ms ease;
  -o-transition: all 500ms ease;
  transition: all 500ms ease;
}

.buscador {
  font-size: 2.2vw;
  top: 0.6vw;
  left: 7.6vw;
  position: fixed;
  place-content: center;
  transform: translateX(-50%);
  height: 4vw;
  width: 4vw;
  background-color: rgba(0,0,0,0.3);
  color: rgba(255,255,255,0.7);
  border-radius: 10vw;
  -webkit-transition: all 500ms ease;
  -o-transition: all 500ms ease;
  transition: all 500ms ease;
}

/*Volume*/

.volume {
  font-size: 2.3vw;
  top: 0.6vw;
  right: 3.6vw;
  position: fixed;
  place-content: center;
  transform: translateX(-50%);
  height: 4vw;
  width: 4vw;
  background-color: rgba(0,0,0,0.3);
  color: rgba(255,255,255,0.7);
  border-radius: 10vw;
  -webkit-transition: all 500ms ease;
  -o-transition: all 500ms ease;
  transition: all 500ms ease;
}

.volume-container {
  display: none;
  position: absolute;
  height: 100px;
  bottom: 0px;
  width: 10px;
  border-radius: 10vw;
  background-color: rgba(0,0,0,0.3);
  color: rgba(255,255,255,0.7);
  border-radius: 10vw;
  cursor: pointer;
  -webkit-transition: all 500ms ease;
  -o-transition: all 500ms ease;
  transition: all 500ms ease;
}

.volume-actual {
  position: absolute;
  height: 100px;
  bottom: 0px;
  width: 10px;
  background: #fff;
  border-radius: 10vw;
  cursor: pointer;
  -webkit-transition: all 500ms ease;
  -o-transition: all 500ms ease;
  transition: all 500ms ease;
}

.volume-body {
  position: absolute;
  bottom: 0px;
  height: 100px;
  width: 10px;
  border-radius: 10vw;
  cursor: pointer;
  -webkit-transition: all 500ms ease;
  -o-transition: all 500ms ease;
  transition: all 500ms ease;
}

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

.full-screen {
  font-size: 2.3vw;
  top: 0.6vw;
  right: -1vw;
  position: fixed;
  place-content: center;
  transform: translateX(-50%);
  height: 4vw;
  width: 4vw;
  background-color: rgba(0,0,0,0.3);
  color: rgba(255,255,255,0.7);
  border-radius: 10vw;
  -webkit-transition: all 500ms ease;
  -o-transition: all 500ms ease;
  transition: all 500ms ease;
}

.playpause {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  position: fixed;
  font-size: 16vw;
  color: rgba(255,255,255,0.3);
  -webkit-transition: all 500ms ease;
  -o-transition: all 500ms ease;
  transition: all 500ms ease;
}

.time {
  font-size: 1.5vw;
  top: 0px;
  left: 0px;
  margin-top: 0.3vw;
  position: fixed;
  width: 100%;
  color: rgba(255,255,255,0.7);
  -webkit-transition: all 500ms ease;
  -o-transition: all 500ms ease;
  transition: all 500ms ease;
}

.titulo {
  font-size: 1.2vw;
  bottom: 3vw;
  left: 6vw;
  position: fixed;
  place-content: center;
  text-align: center;
  transform: translateX(-50%);
  height: 2.8vw;
  width: 14vw;
  background-color: rgba(0,0,0,0.5);
  color: rgba(255,255,255,0.8);
  border-radius: 10vw;
  -webkit-transition: all 500ms ease;
  -o-transition: all 500ms ease;
  transition: all 500ms ease;
}

.favorito {
  font-size: 2.3vw;
  bottom: 2.3vw;
  right: 3.2vw;
  position: fixed;
  place-content: center;
  transform: translateX(-50%);
  color: rgba(255,255,255,0.7);
  border-radius: 10vw;
  -webkit-transition: all 500ms ease;
  -o-transition: all 500ms ease;
  transition: all 500ms ease;
}

.share {
  font-size: 2.3vw;
  bottom: 2.3vw;
  right: -0.1vw;
  position: fixed;
  place-content: center;
  transform: translateX(-50%);
  color: rgba(255,255,255,0.7);
  border-radius: 10vw;
  -webkit-transition: all 500ms ease;
  -o-transition: all 500ms ease;
  transition: all 500ms ease;
}

.menu:hover {
  background-color: rgba(0,0,0,0.5);
  color: #bb0101;
}

.buscador:hover {
  background-color: rgba(0,0,0,0.5);
  color: #bb0101;
}

.volume:hover {
  background-color: rgba(0,0,0,0.5);
  color: #bb0101;
}

.playpause:hover {
  color: rgba(255,255,255,0.6);
}

.full-screen:hover {
  background-color: rgba(0,0,0,0.5);
  color: #bb0101;
}

.favorito:hover {
  color: #bb0101;
}

.share:hover {
  color: #bb0101;
}


/* Modo pantalla completa */

.video-container .video {
  position: absolute;
  background: black;
  text-align: center;
  width: 100%;
  height: 100%;
  font-size: 1.5vw;
  border-radius: 10vw;

}

.video-container .video .video-controlls {
  position: absolute;
  left: 0px;
  bottom: 0px;
  background-color: rgba(255,255,255,0.3);
  width: 100%;
  border-radius: 10vw;
}


/* Caja De Tiempo De Reproduccion */

.video-container .video .video-controlls .reproduction-container .reproduction-body {
  width: 98%;
  height: 1vw;
  background: white;
  background-color: rgba(255,255,255,0.3);
  margin: 0 auto;
  text-align: center;
  cursor: pointer;
  border-radius: 10vw;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  margin-top: -1.3vw;
}

.video-container .video .video-controlls .reproduction-container .reproduction-body .reproduction-played {
  width: 98%;
  height: 1vw;
  opacity: 0.7;
  background-color: #bb0101;
  margin: 0 auto;
  text-align: center;
  cursor: pointer;
  top: 0px;
  left: 0px;
  border-radius: 50vw;
  position: absolute;
}

.video-container .video .video-controlls .reproduction-container .reproduction-body .circle-indicator {
  position: absolute;
  top: -0.3vw;
  left: 0px;
  margin: 0 auto;
  transform: translateX(-50%);
  background: #bb0101;
  height: 1.6vw;
  width: 1.6vw;
  cursor: pointer;
  border-radius: 50vw;
}

.video-container .video .video-controlls .reproduction-container .reproduction-body .time-globe {
  position: absolute;
  top: -3vw;
  left: 0px;
  transform: translateX(-50%);
  font-size: 0.9vw;
  background-color: rgba(255,255,255,0.5);
  color: rgba(0,0,0,0.8);
  padding: 0.5vw;
  display: none;
  border: none;
  border-radius: 1vw;
}

.video-container .video .video-controlls .reproduction-container .reproduction-body:hover {
  background-color: rgba(255,255,255,0.5);
}

.video-container .video .video-controlls .reproduction-container .reproduction-body .circle-indicator:hover {
  background: #e10000;
}

/* Responsive */

@media screen and (max-width: 1000px) {
.menu {
  left: 4vw;
  font-size: 4vw;
  height: 6vw;
  width: 6vw;
}

.buscador {
  left: 10.6vw;
  font-size: 4vw;
  height: 6vw;
  width: 6vw;
}

.volume {
  right: 4.8vw;
  font-size: 4vw;
  height: 6vw;
  width: 6vw;
}

.full-screen {
  right: -2vw;
  font-size: 4vw;
  height: 6vw;
  width: 6vw;
}

.time {
  font-size: 2.3vw;
}

.titulo {
  left: 8vw;
  font-size: 2vw;
  height: 3.6vw;
  width: 18vw;

}

.favorito {
  right: 3.2vw;
  font-size: 3.5vw;
  bottom: 2.3vw;
  right: 3.2vw;
}

.share {
  font-size: 3.5vw;
  bottom: 2.3vw;
  right: -1.5vw;
}
}


/* XOOXLY: reproductor mixto sin cambiar controles existentes. */
html, body { width: 100%; height: 100%; }
#contenedor, #video-contenedor, #video-contenedor > .video { width: 100%; height: 100%; height: 100dvh; }
#video-contenedor > .video { position: relative; overflow: hidden; background: #000; }
#video-contenedor video { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center center; background: #000; }
#video-contenedor video.xooxly-vertical { object-fit: contain; }
#video-contenedor video.xooxly-horizontal,
#video-contenedor video.xooxly-square { object-fit: contain; }

/* XOOXLY — transición de reels y estado de carga usando recursos existentes. */
#video-contenedor > .video { isolation: isolate; touch-action: pan-x; }
#video-contenedor #vid { position:absolute; inset:0; z-index:1; will-change:transform; }
#video-contenedor .xooxly-entrante {position:absolute;inset:0;z-index:2; width:100%;height:100%;background:#000;object-position:center;object-fit:contain;pointer-events:none;will-change:transform;}
#video-contenedor .video-controlls {z-index:5;}
#video-contenedor .xooxly-cargando {position:absolute;inset:0;display:flex;justify-content:center;align-items:center;z-index:4;pointer-events:none;opacity:0;transition:opacity .2s;background:rgba(0,0,0,.18);}
#video-contenedor .xooxly-cargando.visible {opacity:1;}
#video-contenedor .xooxly-cargando img {width:clamp(58px,12vw,100px);height:auto;object-fit:contain;filter:drop-shadow(0 4px 18px rgba(0,0,0,.5));animation:xooxly-pulso 1.15s ease-in-out infinite;}
@keyframes xooxly-pulso {0%,100%{transform:scale(.94);opacity:.7}50%{transform:scale(1.06);opacity:1}}
@media(prefers-reduced-motion:reduce){#video-contenedor .xooxly-cargando img{animation:none}}
.xooxly-marca-acceso {display:block;width:min(230px,56vw);height:auto;margin:0 auto 16px;object-fit:contain;filter:drop-shadow(0 5px 14px rgba(0,0,0,.35));}

/* Prueba 11: el encuadre nunca recorta videos, incluido el video entrante. */
#video-contenedor .video, #video-contenedor .video.video-fullScreen { border-radius:0; }
#video-contenedor #vid, #video-contenedor video.xooxly-entrante,
#video-contenedor video.xooxly-vertical, #video-contenedor video.xooxly-horizontal,
#video-contenedor video.xooxly-square,
#video-contenedor:fullscreen video, #video-contenedor:-webkit-full-screen video {
  width:100% !important; height:100% !important; max-width:100%; max-height:100%;
  object-fit:contain !important; object-position:center center !important;
  background-color:#000; border-radius:0;
}
#video-contenedor:fullscreen, #video-contenedor:-webkit-full-screen {width:100vw;height:100vh;background:#000;}
/* Reutiliza exclusivamente los dos botones existentes arriba a la derecha. */
#xooxly-volume-control{z-index:12;}
#xooxly-volume-control .volume-container{
  display:none; position:absolute; top:calc(100% + 10px); bottom:auto;
  right:0; width:70px; height:188px; padding:12px 8px;
  box-sizing:border-box; border-radius:18px; background:rgba(18,18,20,.76);
  border:1px solid rgba(255,255,255,.18); backdrop-filter:blur(15px);
  -webkit-backdrop-filter:blur(15px); color:#fff;
  flex-direction:column; align-items:center; justify-content:space-between;
  transform:none; transition:none; cursor:default;
}
#xooxly-volume-control .volume-container.xooxly-visible{display:flex !important;}
#xooxly-volume-percent{font:600 13px/1.3 Arial,sans-serif;color:#fff;white-space:nowrap;}
#xooxly-volume-range{width:118px;height:22px; margin:54px 0 46px;
 transform:rotate(-90deg); accent-color:#fff; cursor:pointer; flex:none; touch-action:none;}
.full-screen{z-index:12;}
.full-screen i, #xooxly-volume-control > i{display:inline-block;visibility:visible;opacity:1;}

/* XOOXLY v12: porcentaje abajo, separado del icono; rango arriba. */
#xooxly-volume-control .volume-container{
  top:calc(100% + 24px) !important;
  height:210px !important;
  width:78px !important;
  display:none;
  flex-direction:column-reverse !important;
  justify-content:space-around !important;
  gap:14px !important;
  padding:14px 8px 12px !important;
}
#xooxly-volume-control .volume-container.xooxly-visible{display:flex !important;}
#xooxly-volume-percent{order:0;display:block;text-align:center;flex:0 0 auto;min-height:19px;}
#xooxly-volume-range{order:1;flex:0 0 auto;margin:52px 0 47px !important;}
/* Área táctil de 28px sin cambiar la apariencia de la barra. */
.reproduction-container .reproduction-body{touch-action:none !important;min-height:22px !important;background:transparent !important;z-index:30;}
.reproduction-container .reproduction-body::before{content:"";position:absolute;left:0;right:0;height:5px;top:50%;transform:translateY(-50%);border-radius:50px;background:rgba(255,255,255,.35);pointer-events:none;}
.reproduction-container .reproduction-body .reproduction-played{height:5px !important;top:50% !important;transform:translateY(-50%);z-index:1;pointer-events:none;}
.reproduction-container .reproduction-body .circle-indicator{top:50% !important;transform:translate(-50%,-50%) !important;width:14px !important;height:14px !important;pointer-events:none;z-index:2;}
.reproduction-container .reproduction-body .time-globe{pointer-events:none;z-index:3;}
/* Fullscreen abarca la página para que menú y búsqueda permanezcan operativos. */
html:fullscreen,html:-webkit-full-screen{background:#000;width:100%;height:100%;}