body {
            background-color: #f0f2f5;
            color: #333;
            padding-top: 56px;
        }
        .channel-card {
            background-color: #fff;
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
            padding: 20px;
            margin-bottom: 20px; /* Reducido para mejor integración en la fila */
            text-align: center;
            transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            min-height: 180px;
            cursor: pointer;
        }
        .channel-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
        }
        .channel-card img {
            max-width: 100px;
            height: auto;
            margin-bottom: 15px;
            border-radius: 8px;
            object-fit: contain;
        }
        .channel-card h5 {
            font-size: 1.1rem;
            margin-bottom: 0;
            color: #0056b3;
            font-weight: 600;
        }
        .category-heading {
            background-color: #082644;
            color: #fff;
            padding: 15px 20px;
            border-radius: 10px;
            margin-bottom: 30px;
            text-align: center;
            font-size: 1.8rem;
            font-weight: 700;
            letter-spacing: 1px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
        }

        .container {
            margin-top: 30px;
            margin-bottom: 50px;
        }

        /* Estilos para el navbar fijo */
        .navbar-top {
            position: fixed;
            top: 0;
            width: 100%;
            z-index: 1030;
        }

        /* --- ESTILOS ESPECÍFICOS PARA EL MODAL DEL REPRODUCTOR DE VIDEO --- */
        #videoPlayerModal .modal-dialog-centered {
            display: flex;
            align-items: center;
            min-height: calc(100% - 1rem);
        }
        #videoPlayerModal .modal-content {
            border-radius: 15px;
            overflow: hidden;
        }
        #videoPlayerModal .modal-header {
            border-bottom: none;
            padding-bottom: 0;
            background-color: #082644;
            color: #fff;
        }
        #videoPlayerModal .modal-header .btn-close {
            filter: invert(1);
        }
        #videoPlayerModal .modal-body {
            padding: 0;
            background-color: #000;
        }
        .video-container {
            position: relative;
            width: 100%;
            padding-bottom: 56.25%;
            height: 0;
            overflow: hidden;
        }
        .video-container iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: 0;
        }
        /* --- FIN ESTILOS ESPECÍFICOS PARA EL MODAL DEL REPRODUCTOR DE VIDEO --- */

        /* --- ESTILOS ESPECÍFICOS PARA EL MODAL DE POLÍTICA DMCA --- */
        #dmcaPolicyModal .modal-content {
            border-radius: 10px;
        }
        #dmcaPolicyModal .modal-header {
            background-color: #f8f9fa;
            color: #333;
            border-bottom: 1px solid #dee2e6;
        }
        #dmcaPolicyModal .modal-header .btn-close {
            filter: none;
        }
        #dmcaPolicyModal .modal-body {
            color: #333;
            background-color: #fff;
            padding: 20px;
        }
        /* --- FIN ESTILOS ESPECÍFICOS PARA EL MODAL DE POLÍTICA DMCA --- */

        /* Estilos para el banner publicitario genérico (fuera de los carruseles) */
        .banner-ad {
            margin: 30px auto;
            text-align: center;
            background-color: #e9ecef;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            max-width: 90%;
            border: 2px dashed #ccc;
            min-height: 100px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        .banner-ad img {
            max-width: 100%;
            height: auto;
            border-radius: 8px;
            margin-bottom: 10px;
        }
        .banner-ad p {
            margin: 0;
            font-size: 1.1em;
            color: #555;
        }
        .banner-ad a {
            color: #007bff;
            text-decoration: none;
            font-weight: bold;
        }
        .banner-ad a:hover {
            text-decoration: underline;
        }

        /* Estilos para los Carruseles de Banner */
        .carousel-banner {
            width: 100%;
            height: 100%; /* Ocupa todo el alto disponible en su contenedor */
            overflow: hidden;
            border-radius: 10px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); 
        }
        .carousel-banner .carousel-inner {
            height: 100%;
        }
        .carousel-banner .carousel-item {
            height: 100%; 
        }
        .carousel-banner img {
            width: 100%;
            height: 100%;
            object-fit: cover; /* Ajusta la imagen para cubrir el contenedor, recortando si es necesario */
            border-radius: 10px;
        }
        
        /* Controles del carrusel */
        .carousel-control-prev,
        .carousel-control-next {
            background: none;
            border: none;
            opacity: 0.7;
        }
        .carousel-control-prev-icon,
        .carousel-control-next-icon {
            filter: drop-shadow(0px 0px 3px rgba(0, 0, 0, 0.8)); 
        }

        /* Contenedor de la categoría para flexbox */
        .category-section {
            display: flex;
            flex-direction: column; /* Por defecto apilado */
            margin-bottom: 40px; /* Espacio entre categorías */
        }

        /* Fila de canales para flexbox y alineación */
        .channels-and-ad-row {
            display: flex;
            flex-wrap: wrap; /* Permite que las columnas se envuelvan */
            align-items: stretch; /* Asegura que las columnas se estiren a la misma altura */
        }

        /* Columna para los canales (principal) */
        .channels-column {
            flex: 1; /* Ocupa el espacio restante */
            min-width: 0; /* Permite el encogimiento */
        }

        /* Columna para el carrusel de anuncio dentro de la fila de canales */
        .inline-carousel-column {
            flex-shrink: 0; /* No se encoge */
            width: 300px; /* Ancho fijo para el carrusel en desktop */
            margin-left: 20px; /* Espacio entre los canales y el carrusel */
        }
        .inline-carousel-column .carousel-banner {
            height: 100%; /* El carrusel ocupa toda la altura de la columna */
        }

        /* Responsive adjustments */
        @media (max-width: 991.98px) {
            .channels-and-ad-row {
                flex-direction: column; /* Apilar columnas en móviles */
            }
            .inline-carousel-column {
                width: 100%; /* Ocupa todo el ancho en móviles */
                order: -1; /* Mover el carrusel por encima de los canales en móviles */
                margin-left: 0; /* Eliminar margen en móviles */
                margin-bottom: 20px; /* Espacio entre el carrusel y los canales */
                max-width: 320px; /* Limitar el ancho del carrusel en móviles */
                margin-left: auto;
                margin-right: auto;
            }
        }