/* Layout */
.ytps-wrap{
  display:grid;
  grid-template-columns: 2.5fr 1fr;
  gap:16px;
  align-items:start;
}

@media (max-width:900px){
  .ytps-wrap{ grid-template-columns:1fr; }
}

.ytps-left{ min-width:0; }

/* Player: sin negro */
.ytps-player{
  position:relative;
  background:transparent;
  border-radius:0;
  overflow:hidden;
}

.ytps-player-inner{ width:100%; }

/* iframe full width */
.ytps-iframe{
  width:100%;
  border:0;
  display:block;
  background:transparent;
}

/* Loading */
.ytps-loading{
  padding:18px;
  color:#333;
  font-size:14px;
  background:transparent;
}

/* Flechas estilo medio círculo negro sólido */
.ytps-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:20;

  width:36px;
  height:60px;

  background:#000;
  border:0;
  padding:0;

  color:#fff;
  font-size:34px;          /* flecha más gorda */
  font-weight:700;
  line-height:50px;
  text-align:center;

  cursor:pointer;
}
button.ytps-arrow.ytps-prev {
    padding-right: 5px;
    padding-bottom: 5px;
}
button.ytps-arrow.ytps-next {
    padding-left: 5px;
    padding-bottom: 5px;
}
/* Medio círculo izquierdo */
.ytps-prev{
  left:0;
  border-radius:0 36px 36px 0; /* medio círculo */
}

/* Medio círculo derecho */
.ytps-next{
  right:0;
  border-radius:36px 0 0 36px; /* medio círculo */
}

/* Hover opcional (si no quieres, puedes borrar esto) */
.ytps-arrow:hover{
  background:#000;
}

/* Deshabilitado */
.ytps-arrow:disabled{
  opacity:0.35;
  cursor:not-allowed;
}


/* Derecha: scroll y altura la fija JS */
.ytps-right{
  border:none;
  border-radius:0;
  padding:0;
  background:transparent;
  overflow:auto;
}

/* Lista */
.ytps-list{
  display:flex;
  flex-direction:column;
  /*margin-top: -10px;*/
}

/* Items */
.ytps-item{
  display:grid;
  grid-template-columns: 90px 1fr;
  gap:10px;
  text-align:left;

  border:0;
  border-bottom:1px solid #eee;

  background:transparent;
  padding:10px 0;

  cursor:pointer;
}

.ytps-item:hover{ background:transparent; }
.ytps-item:last-child{ border-bottom:none; }

.ytps-thumb-wrap{
  width:90px;
  aspect-ratio:16/9;
  background:transparent;
  overflow:hidden;
}
.button-animation-slide button.ytps-item:hover {
    background: none !important;
}
button.ytps-arrow:hover {
    background: black !important;
}
/* 👇 Truco para “ocultar” barras negras: pequeño zoom/crop */
.ytps-thumb{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center center;
}

/* Texto 14px + colores */
.ytps-item-title{
  font-size:13px;
  line-height:1.25;
  font-weight:500;
  color:#0088cc;
  text-decoration:none;
}

.ytps-item:hover .ytps-item-title{
  color:#005580;
  text-decoration:underline;
}

.ytps-item.is-active{ outline:none; }

/* Error */
.ytps-error{
  padding:12px;
  border:1px solid rgba(255,0,0,.25);
  background:rgba(255,0,0,.06);
  color:#7a0000;
  font-size:14px;
}
/* Preview grande (imagen + botón play) */
.ytps-preview{
  position:relative;
  width:100%;
  overflow:hidden;
  background:transparent;
}

.ytps-preview-img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  display:block;
}

/* Botón play centrado */
.ytps-preview-play{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);

  width:80px;
  height:56px;

  border:0;
  background:#ff0000;
  color:#fff;

  font-size:28px;
  line-height:56px;
  text-align:center;

  cursor:pointer;
}

.ytps-preview-play:hover{
  filter:brightness(0.9);
}
.ytps-thumb-wrap{
  position: relative; /* necesario para posicionar la duración */
}

.ytps-duration{
  position:absolute;
  left:6px;
  bottom:6px;

  background:#000;
  color:#fff;

  font-size:12px;
  line-height:1;

  padding:3px 6px;
}