/* Configuración base */
* {
    font-family: Inter, Noto Sans, sans-serif;
    /* font-size: 1rem; */
}

*,
*::before,
*::after {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -ms-transition: none !important;
    -o-transition: none !important;
    transition: none !important;
}

/* Transiciones suaves para elementos interactivos */
a,
#theme-home,
#theme-player,
#back-to-catalog,
.row.g-2.mb-2 .nav-link,
.row.gx-2.mb-2 .nav-link {
    transition: 0.1s ease-in-out;
}

/* Efectos hover globales */
a:hover {
    color: var(--bs-link-color) !important;
}

#theme-home:hover,
#theme-player:hover {
    opacity: 0.7;
}

/* Estilos de Paginación (Vista A) */
.pagination .page-link {
    color: var(--bs-body-color);
    border-color: var(--bs-light-border-subtle);
    background-color: var(--bs-tertiary-bg);
}

.pagination .page-link:hover {
    color: var(--bs-body-color);
}

.pagination .page-link:focus {
    box-shadow: none;
    outline: 0;
}

/* Estilos de Navegación del Reproductor (Vista B) */
#back-to-catalog:hover,
.row.g-2.mb-2 .nav-link:hover,
.row.gx-2.mb-2 .nav-link:hover {
    color: var(--bs-link-color);
}

/* --- Sidebar del Reproductor: Scroll Adaptativo (#mnx) --- */

/* El tab-content activa scroll vertical cuando excede la altura disponible.
   max-height se calcula para coincidir con la altura del video 16:9,
   restando ~56px del row de botones de tabs principales (iconos fijos). */
#tab-content-container {
    overflow-y: auto;
    overflow-x: hidden;
}

/* Mobile (< md): El sidebar va debajo del video, limitar altura */
@media (max-width: 767.98px) {
    #tab-content-container {
        max-height: 40vh;
    }
}

/* Desktop (md+): col-md-9 ≈ 75vw para el video. Altura video = 75vw × 9/16 */
@media (min-width: 768px) {
    #tab-content-container {
        max-height: calc(75vw * 9 / 16 - 66px);
    }
}

/* xl+: col-xl-8 dentro de col-xl-10 ≈ 66.66vw para el video */
@media (min-width: 1200px) {
    #tab-content-container {
        max-height: calc(66.66vw * 9 / 16 - 66px);
    }
}

/* Episodio activo en la barra lateral (marca la pista en reproducción) */
.ep-btn.active {
    color: var(--bs-link-color) !important;
    border-color: var(--bs-link-color) !important;
    background-color: var(--bs-tertiary-bg) !important;
    pointer-events: none;
}

/* Clases de utilidad para el Deck Layout (Conmutación) */
.view-active {
    display: block !important;
}

.view-inactive {
    display: none !important;
}