.youtube-home-widget {
    max-width: 1100px;
    margin: 0 auto;
    background: #f7f7f7;
    padding: 20px;
    border-radius: 12px;
}

.youtube-home-widget h2 {
    text-align: center;
    font-size: 24px;
    margin-bottom: 20px;
    font-weight: bold;
    border-bottom: 2px solid #ccc;
    display: inline-block;
    padding-bottom: 5px;
}

.youtube-multi-container {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.text-center {
    text-align: center;
}

.mb-1 {
    margin-bottom: 1rem;
}

.section-title {
    display: flex;
    justify-content: center;
}

.color-title {
    color: #171717;
}

.section-name {
    font-family: BebasNeueRegular, arial, Georgia, serif;
}
.youtube-video-list {
    width: 300px;
    max-height: 500px;
    overflow-y: auto;
    border-right: 2px solid #ccc;
    padding-right: 10px;
}

.youtube-video-item {
    display: flex;
    gap: 10px;
    padding: 10px;
    margin-bottom: 10px;
    cursor: pointer;
    border-radius: 8px;
    background-color: #fff;
    align-items: center;
    transition: background 0.2s ease;
}

.youtube-video-item:hover {
    background-color: #eee;
}

.video-rank {
    width: 30px;
    height: 30px;
    background-color: #ff7b00;
    color: white;
    text-align: center;
    font-weight: bold;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.youtube-video-item img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 4px;
}

.video-info {
    font-size: 14px;
    line-height: 1.2;
}

.youtube-video-preview {
    flex: 1;
    min-width: 300px;
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
}

.youtube-video-preview iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 10px;
}
.scrollable-list {
    max-height: 500px;
    overflow-y: auto;
    padding-right: 10px;
    margin-bottom: 20px;
}

.youtube-video-item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    cursor: pointer;
}

.youtube-video-item img {
    width: 120px;
    height: auto;
    margin-right: 10px;
}

.video-rank {
    font-weight: bold;
    margin-right: 10px;
}
.youtube-multi-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.youtube-video-list {
    display: flex;
    overflow-x: auto;
    gap: 15px;
    padding-bottom: 10px;
}
.ytlistmini-info h3 {
    font-size: 1rem;
    font-weight: 800!important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #212121;
    margin: 0;
    font-family: Montserrat,sans-serif;
}
.ytlistmini-item h3 img {
    height: 22px!important;
    width: 22px!important;
}
[type=button], [type=reset], [type=submit], button {
    -webkit-appearance: button;
    background-color: transparent;
    display: inline-block;
    vertical-align: middle;
}
.ytlistmini-item:hover {
    border-color: #0073aa;
}
.ytlistmini-item img {
    width: 100%;
}
.video-rank {
    font-weight: bold;
    font-size: 18px;
    margin-bottom: 5px;
}
.video-info {
    margin-top: 5px;
}
.youtube-video-preview iframe {
    width: 100%;
    height: 400px;
    border-radius: 10px;
}
#ver-lista-btn, #ocultar-lista-btn {
    background-color: #0073aa;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s;
}

#ver-lista-btn:hover, #ocultar-lista-btn:hover {
    background-color: #005177;
}
/* ========== Reajustes para el modo multi-video ========== */

/* Contenedor principal: lista a la izquierda + reproductor a la derecha */
.youtube-multi-container {
    display: flex;         /* Layout horizontal */
    align-items: flex-start;
    gap: 20px;             /* Espacio entre la lista y el iframe */
    flex-wrap: nowrap;     /* Que no salte a segunda línea */
    width: 100%;
    margin: 0 auto;
    max-width: 1100px;     /* Ajusta a gusto */
}

/* La lista de videos (vertical) */
.youtube-video-list {
    width: 300px;          /* Ancho fijo para la columna izquierda */
    max-height: 500px;     /* Alto máximo */
    overflow-y: auto;      /* Scroll vertical si excede 500px */
    border-right: 2px solid #ccc;
    padding-right: 10px;
    background-color: #fff; /* Fondo blanco */
}

/* Cada ítem de la lista (thumbnail + título) */
.youtube-video-item {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    background-color: #f9f9f9;
    padding: 6px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s;
    border: 2px solid transparent;
}
.youtube-video-item:hover {
    background-color: #eee;
    border-color: #0073aa;
}

/* El número (rank) */
.video-rank {
    background-color: #0073aa;
    color: #fff;
    font-weight: bold;
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    border-radius: 50%;
    margin-right: 5px;
}

/* La info del video (título, autor) */
.video-info {
    line-height: 1.2;
}

/* El thumbnail */
.youtube-video-item img {
    width: 80px;
    height: auto;
    border-radius: 4px;
}

/* Contenedor del reproductor (a la derecha) */
.youtube-video-preview {
    flex: 1;                 /* Ocupa todo el espacio disponible */
    position: relative;
    padding-bottom: 56.25%;  /* Relación 16:9 */
    height: 0;
}
.youtube-video-preview iframe {
    position: absolute;
    top: 0; 
    left: 0;
    width: 100%; 
    height: 100%;
    border-radius: 10px;
}


#container {
    width: 100%;
    margin: 0 auto;
}
.ytlistmini {
    filter: drop-shadow(0px 2px 3px rgba(0, 0, 0, .2));
    font-family: var(--ytlist-font-family, "Montserrat", sans-serif)
}

.ytlistmini-element {
    display: flex;
    align-items: center;
    position: relative;
    HEIGHT: 80PX;
}

.ytlistmini-element img {
    height: 80px!important;
    width: 80px!important;
    object-fit: cover
}

.ytlistmini-load-iframe {
    position: absolute;
    inset: 0
}

.ytlistmini-info {
    padding: 0 1rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

.ytlistmini-item {
    background-color: var(--ytlist-bg-item,#f6f6f6);
    counter-increment: ytlist-item;
    display: flex;
    transition: background-color .3s
}

.ytlistmini-item.is-active {
    --ytlist-bg-item: white
}

.ytlistmini-item.is-active::before {
    background-color: var(--player-accent,#000)
}

.ytlistmini-item::before {
    content: counter(ytlist-item);
    width: 2rem;
    text-align: center;
    background-color: #444;
    transition: background-color .3s;
    color: #fff;
    line-height: 80px;
    font-weight: 800;
    flex: none
}

.ytlistmini-item+.ytlistmini-item {
    margin-top: 0.5rem;
    /* PADDING: 0 !IMPORTANT; */!IMP;!IM;!IM;!I;!;
    HEIGHT: 80PX;
}

.ytlistmini-item:not(.is-active) .ytlistmini-iframe {
    display: none
}

.ytlistmini-content {
    overflow: hidden
}

@media (max-width: 900px) {
    .ytlistmini-content {
        flex:1
    }

    .ytlistmini-video {
        display: none
    }
}

.ytlistmini-list {
    overflow: hidden;
    width: 100%
}

.ytlistmini-video {
    padding: 1rem;
    background-color: var(--ytlist-bg-video,#fff);
    position: relative;
    aspect-ratio: 16/9;
    flex: 1 0 auto
}

.ytlistmini-video iframe {
    width: 100%;
    height: 100%
}

.ytlistmini-info h3 {
    font-size: 1rem;
    font-weight: 800!important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #212121;
    margin: 0;
    font-family: Montserrat,sans-serif
}

.ytlistmini-info p {
    font-size: .875rem;
    opacity: .5;
    color: #000;
    font-weight: 500;
    margin: .5rem 0 0;
    line-height: 1;
    font-family: Montserrat,sans-serif
}

.ytlistmini-iframe {
    padding: 1rem;
    background-color: var(--ytlist-bg-iframe,#f6f6f6);
    aspect-ratio: 16/9
}

@media (min-width: 901px) {
    .ytlistmini-item:not(.is-active) {
        margin-right:.5rem
    }

    .ytlistmini-list {
        width: 40%
    }

    .ytlistmini-iframe {
        position: absolute;
        inset: 0 0 0 auto;
        background-color: #fff;
        width: 60%
    }
}

.ytlistmini-iframe iframe {
    width: 100%;
    height: 100%;
    max-height: 400px;
}