.ytvl-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ytvl-gap, 2rem);
}
.ytvl-main-player {
    flex: 2;
}
.ytvl-thumb {
    cursor: pointer;
    margin-bottom: 10px;
}
.ytvl-thumbnails .ytvl-thumb .ytvl-thumb-image img,
.ytvl-placeholder img {
    width: 100%;
    height: 100% !important;
    position: absolute;
    object-fit: cover;
}
span.ytvl-icon-wrap svg {
    font-size: 1em;
    width: 1em;
    height: auto;
    fill: currentColor;
    stroke: currentColor;
}

.ytvl-play-icon {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0;
    left: 0;
}

.ytvl-player-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: var(--ytvl-ratio, 56.25%);
    height: 0;
    overflow: hidden;
}
.ytvl-player-wrapper.playing {
    padding-bottom: var(--ytvl-ratio-player, 56.25%);
}
.ytvl-player-wrapper iframe,
.ytvl-player-wrapper .ytvl-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.ytvl-placeholder img {
    width: 100%;
    height: 100%;
}

.ytvl-main-player .ytvl-placeholder {
    cursor: pointer;
}

/* Reproductor principal */
.ytvl-main-player {
    width: calc(var(--ytvl-width-player, 70%) - var(--ytvl-gap, 2rem));
    box-sizing: border-box;
}

/* Miniaturas al costado o abajo */
.ytvl-thumbnails {
    width: calc(100% - var(--ytvl-width-player, 70%));
    box-sizing: border-box;
    --gap-between-miniatures: 0.8rem;
}
.ytvl-thumbnails.width--full {
    width: 100%;
}
.ytvl-thumbnails .ytvl-thumb {
    display: flex;
    gap: var(--gap-between-miniatures);
}
.container__info_play {
    margin-top: 2rem;
    text-align: center;
}
.thumb-column.miniature__container {
    width: var(--ytvl-width-miniature-placeholder, 35%);
}
.thumb-column.title__video {
    width: calc( 100% - calc(var(--ytvl-width-miniature-placeholder, 35%)) + var(--ytvl-gap-miniatures, 1rem) );
}
.ytvl-thumbnails .ytvl-thumb:not(:last-child) {
    padding-bottom: var(--ytvl-gap-miniatures, 1rem);
    margin-bottom: var(--ytvl-gap-miniatures, 1rem);
    border-bottom: 1px solid var(--ytvl-color-border);
}
.ytvl-thumbnails .play__icon{
    color: var(--ytvl-color-icon-left);
    font-size: var(--ytvl-size-icon-left);
    width: var(--ytvl-size-icon-left);
}
.ytvl-thumbnails .play__icon svg{
    fill: var(--ytvl-color-icon-left);
    width: 1em;
    height: auto;
}
.ytvl-thumb.flex-column-ytvl .thumb-column.title__video, 
.ytvl-thumb.flex-column-ytvl .thumb-column.miniature__container {
    width: 100%;
}
.thumb-column.title__video img{
    height: auto;
    vertical-align: middle;
    display: inline-block;
}
@media (max-width: 1024px){
    .ytvl-thumbnails .ytvl-thumb{
        flex-direction: var(--flex-direction-tablet, row) !important;
        align-items: var(--align-items-tablet, center) !important;
    }
}
/* En móviles o si el espacio se colapsa, forzar vertical */
@media (max-width: 767px) {

    .ytvl-thumbnails .ytvl-thumb{
        flex-direction: var(--flex-direction-mobile, row) !important;
        align-items: var(--align-items-mobile, center) !important;
    }
    .ytvl-thumbnails .flex-column-ytvl-responsive .thumb-column.miniature__container,
    .ytvl-thumbnails .flex-column-ytvl-responsive .thumb-column.title__video {
        width: 100%;
    }
    
}