﻿body {
    background-color: #0a1227;
}

/*Generales*/
.btn-rounded {
    border: solid 1px black;
    border-radius: 20px;
    padding: 8px 24px 8px 24px;
}

.btn-squared {
    border: solid 1px #479FCC;
    padding: 9px 32px 9px 32px;
    background-color: transparent;
    color: white;
    font-weight: 600;
}

.dash-white {
    width: 27px;
    height: 6px;
    background-color: white;
    border-radius: 10px;
    margin-right: 15px;
}

.owl-carousel .owl-item img {
    width: unset;
}
/*Termina Generales*/
#biblioteca-home .nav-home a {
    text-decoration: unset;
    color: white;
}

#biblioteca-home .nav-home {
    color: white;
    align-items: center;
}

    #biblioteca-home .nav-home .titulo {
        height: 25px;
        border-left: 2px solid #1F5F80;
    }

#biblioteca-home .video-banner {
    position: relative;
    height: 65vh;
}

    #biblioteca-home .video-banner .owl-carousel-banner img {
        height: 85vh;
    }

    #biblioteca-home .video-banner video {
        position: relative;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.gradient-overlay {
    position: absolute;
    top: -1px;
    left: 0;
    width: 100%;
    height: 85.5vh;
    background: linear-gradient(to bottom, #0a1227, rgba(10, 18, 39, 0), rgba(10, 18, 39, 0), #0a1227);
    z-index: 1;
    pointer-events: none;
}

    .gradient-overlay::before,
    .gradient-overlay::after {
        content: "";
        position: absolute;
        left: 0;
        width: 100%;
        height: 50px;
    }

    .gradient-overlay::before {
        top: 0;
        background: linear-gradient(to bottom, #0a1227, rgba(10, 18, 39, 0));
    }

    .gradient-overlay::after {
        bottom: 0;
        background: linear-gradient(to top, #0a1227, rgba(10, 18, 39, 0));
    }

#biblioteca-home .mensaje-biblioteca {
    color: white;
    border-bottom: solid 1px #1F5F80;
}

    #biblioteca-home .mensaje-biblioteca .titulo {
        max-width: 65%;
        font-style: italic;
    }

    /*    #biblioteca-home .mensaje-biblioteca .contenido {
        align-items: center;
    }*/

    #biblioteca-home .mensaje-biblioteca .objetivos button:hover {
        /*background-color: black;*/
        background-color:#1F3048;
        color: white;
    }

/*    #biblioteca-home .mensaje-biblioteca .contenido .titulo-contenido {
        text-decoration-line: underline;
        text-underline-offset: 30px;
        text-decoration-color: #89B9C4;
        text-decoration-thickness: 3px;
    }*/

/*#biblioteca-home .mensaje-biblioteca .video {
    height: 35vh;
}*/

#biblioteca-home .tematica button:hover {
    background-color: #1F3048;
    border-color: #325E7D;
}

#biblioteca-home .contenido-biblioteca .tematica {
    color: white;
    align-items: center;
}

#biblioteca-home .contenido-biblioteca .CarruselDesktop {
    margin: 4% 5%;
    color: white;
}

    #biblioteca-home .contenido-biblioteca .CarruselDesktop .tematica-contenido {
        color: #479FCC;
    }

    #biblioteca-home .contenido-biblioteca .CarruselDesktop img {
        border-radius: 5px;
    }

#biblioteca-home .contenido-biblioteca .owl-carousel .owl-next {
    position: absolute;
    right: -6px;
    color: white;
    font-size: 45px;
    margin: 0;
    display: none;
}

#biblioteca-home .contenido-biblioteca .owl-carousel .owl-prev {
    position: absolute;
    left: -6px;
    color: white;
    font-size: 45px;
    margin: 0;
    display: none;
}

.owl-theme .owl-nav [class*=owl-]:hover {
    background-color: unset;
}

#modal-black .modal-header, #modal-black-video .modal-header {
    border-bottom: unset;
}

#modal-black .modal-body, #modal-black-video .modal-body {
    /*color: white;*/
    padding: 0rem 2rem 1rem 2rem;
}

#modal-black-video .modal-body {
    margin-bottom: 1rem;
}

#modal-black-video .modal-content {
    background-color: #000000;
    border-radius: 10px;
    box-shadow: 0px 0px 10px 1px rgba(255,255,255,0.75);
}

#modal-black .modal-content {
    border-radius: 10px;
}

.modal-backdrop {
    background-color: #000;
    opacity: 0.9;
}

#modal-black-video .btn-close-custom {
    margin-left: auto;
    height: 20px;
    width: 20px;
    cursor: pointer;
}

#modal-tag-2 .modal-header {
    border-bottom: unset;
}

#modal-tag-2 .modal-body {
    padding: 0rem 6rem 1rem 3rem;
}

#modal-tag-2 .modal-content {
    background-color: #FFF9F1;
    border-radius: 10px;
    color: #555555;
    font-family: 'Open Sans' !important;
}

/*#modal-tag-2 .btn-close {
    filter: invert(34%) sepia(7%) saturate(0%) hue-rotate(188deg) brightness(92%) contrast(87%);
    opacity: 1;
    margin-right: 5px;
    font-size: 20px;
    font-weight: 900;
    margin-top: 5px;
}*/

#modal-tag-2 .btn-close-custom, #modal-black .btn-close-custom {
    position: absolute;
    right: 25px;
    padding-top: 5px;
    cursor: pointer;
}

#menu-categorias .modal-dialog-centered, #modal-catalogo-episodios .modal-dialog-centered {
    justify-content: center;
}

#menu-categorias .modal-content, #modal-catalogo-episodios .modal-content {
    background-color: rgb(0, 0, 0,0.8);
    border-radius: 0.75rem;
}

.tema-block txt6 {
    color: white;
}

.titulo-categoria {
    cursor: pointer;
}

.tema-block {
    text-align: center;
    background-color: rgb(10, 18, 39, 0.6);
    border-radius: 0.75rem;
    width: 345px;
    max-width: 87vw;
}

    .tema-block:hover {
        background-color: rgb(0, 138, 230, 0.7);
        cursor: pointer;
    }

.contenedor-categorias {
    margin: 0px auto;
    padding: 0px;
}

.owl-carousel-banner .owl-nav {
    color: white;
}

    .owl-carousel-banner .owl-nav .owl-prev span, .owl-carousel-banner .owl-nav .owl-next span {
        font-size: 90px;
        margin-left: 10px;
        margin-right: 10px;
        text-shadow: -1px -1px 15px rgb(0 0 0);
    }

    .owl-carousel-banner .owl-nav .owl-prev {
        left: 0;
        position: absolute;
        top: 0;
        height: 100%;
        margin: 0;
    }

    .owl-carousel-banner .owl-nav .owl-next {
        right: 0;
        position: absolute;
        top: 0;
        height: 100%;
        margin: 0;
    }

@media only screen and (min-width: 577px) {
    #menu-categorias .modal-dialog-centered, #modal-catalogo-episodios .modal-dialog-centered {
        min-width: 100vw;
    }
}

@media only screen and (min-width: 768px) {
    #menu-categorias .modal-dialog-centered, #modal-catalogo-episodios .modal-dialog-centered {
        min-width: 77vw;
    }
}

#menu-categorias .modal-dialog-centered, #modal-catalogo-episodios .modal-dialog-centered {
    justify-content: center;
}

.modal-dialog {
    pointer-events: auto !important;
}

.contenido-biblioteca .container-img-libro {
    border: 1px solid black;
    overflow: hidden;
    position: relative;
    background-color: black;
    border-radius: 10px;
    cursor: pointer;
}

    .contenido-biblioteca .container-img-libro img {
        width: auto;
        height: 100%;
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
    }

/*.mensaje-biblioteca .contenido .video {
    position: relative;
}*/

.layer-video {
    position: absolute;
    width: 100%;
    background-color: transparent;
    top: 0;
    bottom: 0;
}

.mensaje-biblioteca .contenido .video .play-icon {
    width: 90px;
    height: 60PX;
    background-color: white;
    opacity: 70%;
    position: absolute;
    top: 50%;
    left: 50%;
    display: table;
    text-align: center;
    border-radius: 15px;
    cursor: pointer;
    transform: translate(-50%, -50%);
}

    .mensaje-biblioteca .contenido .video .play-icon i {
        color: rgb(0, 0, 0);
        font-size: 35px;
        display: table-cell;
        vertical-align: middle;
    }

#modal-black-video .modal-body iframe {
    width: 100%;
    height: 70vh;
}

/* social section */
.social-section {
    background-color: black;
    padding: 2rem;
    border: 1px solid #479FCC;
}

.text-white {
    color: #ffffff;
}

.social-icons .icon-link {
    color: #ffffff;
    font-size: 1.8rem;
    transition: color 0.3s;
}

    .social-icons .icon-link:hover {
        color: #1d9bf0; /* Cambia este color para el efecto hover */
    }

.twitter-section {
    max-height: 720px; /* Ajusta la altura según tu diseño */
    overflow-y: auto;
    padding-left: 1rem;
}

.twitter-feed {
    width: 100%;
}
/* end social section */

/* Estilos para pantallas muy pequeñas (menos de 576px) */
@media only screen and (max-width: 575px) and (orientation: portrait) {
    #biblioteca-home .mensaje-biblioteca .titulo {
        max-width: 100%;
    }

    .btn-rounded {
        padding: 1px 15px 5px 14px;
    }

    #biblioteca-home .video-banner, #biblioteca-home .video-banner .owl-carousel-banner img {
        height: 40vh;
    }

    .gradient-overlay {
        height: 40.5vh;
    }

    #modal-black-video .modal-body iframe {
        height: 40vh;
    }

    #modal-tag-2 .modal-body {
        padding: 0rem 2rem 1rem 2rem;
    }

    .social-icons a i {
        font-size: 30px !important;
    }

    .swiper-slide img {
        width: 100% !important;
    }
}

@media only screen and (max-width: 575px) and (orientation: landscape) {
    #biblioteca-home .mensaje-biblioteca .titulo {
        max-width: 100%;
    }

    .btn-rounded {
        padding: 1px 15px 5px 14px;
    }

    #biblioteca-home .video-banner, #biblioteca-home .video-banner .owl-carousel-banner img {
        height: 75vh;
    }

    .gradient-overlay {
        height: 75.5vh;
    }

    #modal-black-video .modal-body iframe {
        height: 40vh;
    }

    #modal-tag-2 .modal-body {
        padding: 0rem 2rem 1rem 2rem;
    }

    .social-icons a i {
        font-size: 30px !important;
    }

    .swiper-slide img {
        width: 100% !important;
    }
}

/* Estilos para pantallas pequeñas (de 576px a 767px) */
@media only screen and (min-width: 576px) and (max-width: 767px) and (orientation: portrait) {
    #biblioteca-home .mensaje-biblioteca .titulo {
        max-width: 100%;
    }

    .btn-rounded {
        padding: 5px 15px 5px 15px;
    }

    #biblioteca-home .video-banner, #biblioteca-home .video-banner .owl-carousel-banner img {
        height: 45vh;
    }

    .gradient-overlay {
        height: 45.5vh;
    }

    #modal-black-video .modal-body iframe {
        height: 45vh;
    }

    .social-icons a i {
        font-size: 30px !important;
    }

    .swiper-slide img {
        width: 100% !important;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) and (orientation: landscape) {
    #biblioteca-home .video-banner, #biblioteca-home .video-banner .owl-carousel-banner img {
        height: 75vh;
    }

    .gradient-overlay {
        height: 75.5vh;
    }

    .social-icons a i {
        font-size: 30px !important;
    }

    .swiper-slide img {
        width: 100% !important;
    }
}

/* Estilos para pantallas medianas (de 768px a 991px) */
@media only screen and (min-width: 768px) and (max-width: 991px) and (orientation: portrait) {
    #biblioteca-home .video-banner, #biblioteca-home .video-banner .owl-carousel-banner img {
        height: 50vh;
    }

    .gradient-overlay {
        height: 50.5vh;
    }

    #modal-black-video .modal-body iframe {
        height: 55vh;
    }

    .social-icons a i {
        font-size: 30px !important;
    }

    .swiper-slide img {
        width: 100% !important;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) and (orientation: landscape) {
    #biblioteca-home .video-banner, #biblioteca-home .video-banner .owl-carousel-banner img {
        height: 80vh;
    }

    .gradient-overlay {
        height: 80.5vh;
    }

    #modal-black-video .modal-body iframe {
        height: 55vh;
    }

    .swiper-slide img {
        width: 100% !important;
    }
}

/* Estilos para pantallas grandes (de 992px a 1199px) */
@media only screen and (min-width: 992px) and (max-width: 1199px) and (orientation: portrait) {
    #biblioteca-home .video-banner, #biblioteca-home .video-banner .owl-carousel-banner img {
        height: 60vh;
    }

    .gradient-overlay {
        height: 60.5vh;
    }

    #modal-black-video .modal-body iframe {
        height: 60vh;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) and (orientation: landscape) {
    #biblioteca-home .video-banner, #biblioteca-home .video-banner .owl-carousel-banner img {
        height: 70vh;
    }

    .gradient-overlay {
        height: 70.5vh;
    }

    #modal-black-video .modal-body iframe {
        height: 60vh;
    }
}

/* Estilos para pantallas extra grandes (1200px a 1399.98px) */
/*@media only screen and (min-width: 1200px) and (max-width: 1399.98px) {
    .gradient-overlay {
        height: 85.5vh;
    }
}*/

/* Estilos para pantallas de 1400px o más */
/*@media only screen and (min-width: 1400px) {
    .gradient-overlay {
        height: 85.5vh;
    }
}*/

/* Estilos para pantallas de 1400px o más */
@media only screen and (min-width: 1600px) {
    .modal-xl {
        max-width: 1350px;
    }

    .modal-lg {
        max-width: 950px;
    }

    #modal-black-video .modal-body iframe {
        height: 80vh;
    }
}
