.gradient-index {
    background: rgb(31,51,176);
    background: linear-gradient(143deg, rgba(31,51,176,1) 17%, rgba(101,101,217,1) 94%);
}




div.ex3 {
    width: 500px;
    height: 300px;
    overflow: auto;
}


.scrollable {
    height: 100%;
    overflow: hidden;
    overflow-y: auto;
}


#elemento {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}







.message-container {
    flex: 1;
    overflow-y: auto; /* Agrega un scroll vertical si es necesario */
}

/* Estilo personalizado para la parte inferior (input y botón) */
.input-container {
    background-color: #fff;
    padding: 10px;
    border-top: 1px solid #ccc;
}



.loader {
    width: 100px;
    height: 75px;
    margin: 0 auto;
    background: #fff;
    position: relative;
    border-radius: 100%;
}

    .loader:before {
        content: '';
        position: absolute;
        box-sizing: border-box;
        border: 15px solid transparent;
        border-top: 25px solid #fff;
        transform: rotate(45deg);
        top: 50px;
        left: -15px;
    }

    .loader:after {
        content: '';
        width: 12px;
        height: 12px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        border-radius: 50%;
        background-color: #FF3D00;
        box-shadow: 20px 0 #FF3D00, -20px 0 #FF3D00;
        animation: flash 0.5s ease-out infinite alternate;
    }

@keyframes flash {
    0% {
        background-color: rgba(255, 60, 0, 0.25);
        box-shadow: 20px 0 rgba(255, 60, 0, 0.25), -20px 0 #FF3D00;
    }

    50% {
        background-color: #FF3D00;
        box-shadow: 20px 0 rgba(255, 60, 0, 0.25), -20px 0 rgba(255, 60, 0, 0.25);
    }

    100% {
        background-color: rgba(255, 60, 0, 0.25);
        box-shadow: 20px 0 #FF3D00, -20px 0 rgba(255, 60, 0, 0.25);
    }
}


.lds-ripple {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
}

    .lds-ripple div {
        position: absolute;
        border: 4px solid #fff;
        opacity: 1;
        border-radius: 50%;
        animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .lds-ripple div:nth-child(2) {
            animation-delay: -0.5s;
        }

@keyframes lds-ripple {
    0% {
        top: 36px;
        left: 36px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 36px;
        left: 36px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 36px;
        left: 36px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 72px;
        height: 72px;
        opacity: 0;
    }
}




/*  Chat UI -0*/


.gradient-0 {
    background: #f1f3f4;
 
}

.dialog-user-0 {
    background-color: #4356e0;
    border-radius: 2em;
    border: 2px solid rgba(255, 255, 255, 0.05);
}

.dialog-bot-0 {
    background: #ffffff;
    border-radius: 2em;
    border: 2px solid rgba(255, 255, 255, 0.05);
}

.text-color-user-0 {
    color: white;
}

.text-color-bot-0 {
    color: black;
}





  
/*  Chat UI - 1*/


.gradient-1 {
    background: rgb(255,255,255);
    background: linear-gradient(99deg, rgba(255,255,255,1) 0%, rgba(168,213,223,1) 36%);
}

.dialog-user-1 {   
    background-color: #ffffff;
    border-radius: 2em;
    border: 2px solid rgba(255, 255, 255, 0.05);   
}

.dialog-bot-1 {
    background: #45aac0;
    border-radius: 2em;
    border: 2px solid rgba(255, 255, 255, 0.05);
}

.text-color-user-1 {
    color: black;
}

.text-color-bot-1 {
    color: white;
}


/*  Chat UI -2*/


.gradient-2 {
    background: rgb(175,62,88);
    background: linear-gradient(301deg, rgba(175,62,88,1) 0%, rgba(255,255,255,1) 100%);
}

.dialog-user-2 {
    background-color: #939cb8;
    border-radius: 2em;
    border: 2px solid rgba(255, 255, 255, 0.05);
}

.dialog-bot-2 {
    background: #af3e58;
    border-radius: 2em;
    border: 2px solid rgba(255, 255, 255, 0.05);
}

.text-color-user-2 {
    color: white;
}

.text-color-bot-2 {
    color: white;
}


/*  Chat UI -3*/


.gradient-3 {
    background: rgb(141,29,117);
    background: linear-gradient(312deg, rgba(141,29,117,1) 0%, rgba(255,255,255,1) 100%);
}

.dialog-user-3 {
    background-color: #bf819e;
    border-radius: 2em;
    border: 2px solid rgba(255, 255, 255, 0.05);
}

.dialog-bot-3 {
    background: #8d1d75;
    border-radius: 2em;
    border: 2px solid rgba(255, 255, 255, 0.05);
}

.text-color-user-3 {
    color: white;
}

.text-color-bot-3 {
    color: white;
}


/*  Chat UI -4*/


.gradient-4 {
    background: rgb(198,165,91);
    background: linear-gradient(312deg, rgba(198,165,91,1) 14%, rgba(255,255,255,1) 100%);
}

.dialog-user-4 {
    background-color: #ffffff;
    border-radius: 2em;
    border: 2px solid rgba(255, 255, 255, 0.05);
}

.dialog-bot-4 {
    background: #c19736;
    border-radius: 2em;
    border: 2px solid rgba(255, 255, 255, 0.05);
}

.text-color-user-4 {
    color: black;
}

.text-color-bot-4 {
    color: white;
}


/*  Chat UI -5*/


.gradient-5 {
    background: rgb(158,181,198);
    background: linear-gradient(312deg, rgba(158,181,198,1) 0%, rgba(255,255,255,1) 71%);
}

.dialog-user-5 {
    background-color: #ffffff;
    border-radius: 2em;
    border: 2px solid rgba(255, 255, 255, 0.05);
}

.dialog-bot-5 {
    background: #9eb5c6;
    border-radius: 2em;
    border: 2px solid rgba(255, 255, 255, 0.05);
}

.text-color-user-5 {
    color: black;
}

.text-color-bot-5 {
    color: white;
}


/*  Chat UI -6*/


.gradient-6 {
    background: rgb(255,255,255);
    background: linear-gradient(312deg, rgba(255,255,255,1) 0%, rgba(143,150,239,1) 100%);
}

.dialog-user-6 {
    background-color: #ffffff;
    border-radius: 2em;
    border: 2px solid rgba(255, 255, 255, 0.05);
}

.dialog-bot-6 {
    background: #8f96ef;
    border-radius: 2em;
    border: 2px solid rgba(255, 255, 255, 0.05);
}

.text-color-user-6 {
    color: black;
}

.text-color-bot-6 {
    color: white;
}


/*  Chat UI -7*/


.gradient-7 {
    background: #fccb90;
    background: linear-gradient(to bottom right, rgba(252, 203, 144, 1), rgba(213, 126, 235, 1))
}

.dialog-user-7 {
    background-color: #aeaeae;
    border-radius: 2em;
    border: 2px solid rgba(255, 255, 255, 0.05);
}

.dialog-bot-7 {
    background: #b1609b;
    border-radius: 2em;
    border: 2px solid rgba(255, 255, 255, 0.05);
}

.text-color-user-7 {
    color: white;
}

.text-color-bot-7 {
    color: white;
}


/*  Chat UI -8*/

.gradient-8 {
    background: #ffffff;
}

.dialog-user-8 {
    background-color: #0bbcdf;
    border-radius: 2em;
    border: 2px solid rgba(255, 255, 255, 0.05);
}

.dialog-bot-8 {
    background: #e5f9fc;
    border-radius: 2em;
    border: 2px solid rgba(255, 255, 255, 0.05);
}

.text-color-user-8 {
    color: white;
}

.text-color-bot-8 {
    color: black;
}


/*  Chat UI -9*/

.gradient-9 {
    background: #ffffff;
}

.dialog-user-9 {
    background-color: #06328b;
    border-radius: 2em;
    border: 2px solid rgba(255, 255, 255, 0.05);
}

.dialog-bot-9 {
    background: #e6e6e6;
    border-radius: 2em;
    border: 2px solid rgba(255, 255, 255, 0.05);
}

.text-color-user-9 {
    color: white;
}

.text-color-bot-9 {
    color: black;
}


/*  Chat UI -9*/

.gradient-9 {
    background: #ffffff;
}

.dialog-user-9 {
    background-color: #06328b;
    border-radius: 2em;
    border: 2px solid rgba(255, 255, 255, 0.05);
}

.dialog-bot-9 {
    background: #e6e6e6;
    border-radius: 2em;
    border: 2px solid rgba(255, 255, 255, 0.05);
}

.text-color-user-9 {
    color: white;
}

.text-color-bot-9 {
    color: black;
}


/*  Chat UI -10*/

.gradient-10 {
    background: #ede6de;
}

.dialog-user-10 {
    background-color: #e1ffc6;
    border-radius: 2em;
    border: 2px solid rgba(255, 255, 255, 0.05);
}

.dialog-bot-10 {
    background: #ffffff;
    border-radius: 2em;
    border: 2px solid rgba(255, 255, 255, 0.05);
}

.text-color-user-10 {
    color: black;
}

.text-color-bot-10 {
    color: black;
}

.gradient-0 {
    background: -moz-linear-gradient(317deg, rgba(255,255,255,1) 0%, rgba(238,238,238,1) 54%, rgba(213,211,211,1) 100%);
    background: -webkit-linear-gradient(317deg, rgba(255,255,255,1) 0%, rgba(238,238,238,1) 54%, rgba(213,211,211,1) 100%);
    background: linear-gradient(317deg, rgba(255,255,255,1) 0%, rgba(238,238,238,1) 54%, rgba(213,211,211,1) 100%);   
}

.carousel-control-prev-icon, .carousel-control-next-icon {
    filter: invert(108%);
}

.text-invert {
   /* filter: invert(108%);*/
}


.carousel-caption.bottom-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.5); /* Fondo semitransparente para mejor legibilidad */
    padding: 10px;
    text-align: left; /* Alinea el texto a la izquierda */
}

    .carousel-caption.bottom-caption h5, .carousel-caption.bottom-caption p {
        margin: 0; /* Elimina márgenes para un mejor ajuste */
    }


.carousel-item {
    height: 300px; /* Establece la altura del contenedor del carrusel */
}

    .carousel-item img {
        width: 300px; /* Establece el ancho de la imagen */
        height: 300px; /* Establece la altura de la imagen */
        object-fit: cover; /* Asegura que la imagen cubra completamente el contenedor sin distorsión */
        margin: auto; /* Centra la imagen horizontalmente */
    }




/*.container {
    display: flex;
    width: 100%;

    height: 100vh;
    padding: 1rem;
    gap: 1rem;
}*/

/* Sección de Video */
/*.video-container {
    flex: 1;*/ /* Ocupa más espacio en el ancho */
    /*display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    z-index: 1;
}

    .video-container video {
        width: 100%;
        max-width: 58%;
        height: auto;
        aspect-ratio: 1050 / 1900;
        object-fit: contain;
        border-radius: 8px;
        z-index: 1;
    }*/


.video-container {
    display: flex;
    justify-content: center; /* Centra el video horizontalmente */
    align-items: flex-start; /* Alinea el video al tope del contenedor */
    width: 100%; /* Ocupa todo el ancho */
    height: 100vh; /* Ocupa el 80% de la altura de la pantalla */
    overflow: hidden; /* Oculta el contenido excedente */
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Asegura dimensiones precisas */
}

    .video-container video {
        width: auto; /* Ajusta el ancho automáticamente */
        height: 100vh; /* Mantiene la altura proporcional ocupando la pantalla completa */
        object-fit: cover; /* Recorta partes del video para ajustarlo */
        aspect-ratio: 9 / 16; /* Relación de aspecto para videos verticales */
        border-radius: 0;
    }





/*.chat-container {
    flex: 1; 
    display: flex;
    justify-content: center;
    align-items: center;

    border-radius: 8px;
}

.chat-box {
    width: 100%;
    height: 100%;
    border: 1px solid #ccc;
    padding: 1rem;
    overflow-y: auto;
    background-color: #ffffff;
    border-radius: 8px;
}*/



.chroma-video {
    width: 100%; 
    /* Configuración optimizada para #00FF00 */
    filter: hue-rotate(0deg) saturate(100%) brightness(1);
}




/* Video de fondo */
video.background-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -555; /* Detrás del contenido */
}


    video.transparent-video {
      position: absolute;
      top: 50%; /* Centrar verticalmente */
      left: 50%; /* Centrar horizontalmente */
      transform: translate(-50%, -50%);
      width: 50%; /* Ajustar el tamaño */
      z-index: 1; /* Encima del fondo */
    }

/* Fondo de imagen */
.background-image {
    background-image: var(--background-image);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: -2;
}




:root {
    --background-image: none;
}






.news-area {
    width: 50%;
    height: 100vh;
    position: relative;
}

.breaking-news {
    position: absolute;
    bottom: 84px;
    left: 0;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.breaking-text {
    color: black;
    font-family: Arial, sans-serif;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    white-space: nowrap;
}

.news-header {
    position: absolute;
    bottom: 36px;
    left: 0;
    width: 46vw;
    height: 48px;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    padding: 0 20px;
    box-sizing: border-box;
}

.news-title {
    color: white;
    font-family: Arial, sans-serif;
    font-size: 20px;
    font-weight: bold;
}

.ticker-container {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 46vw;
    height: 36px;
    display: flex;
    overflow: hidden;
}

.news-label {
    background-color: red;
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    font-weight: bold;
    font-family: Arial, sans-serif;
    font-size: 16px;
    border-radius: 4px;
    flex-shrink: 0;
    white-space: nowrap;
}

.ticker {
    background-color: black;
    color: white;
    flex-grow: 1;
    position: relative;
    overflow: hidden;
    height: 36px;
}

.ticker-content {
    position: absolute;
    white-space: nowrap;
    font-family: Arial, sans-serif;
    font-size: 16px;
    line-height: 36px;
    /* Correción principal: iniciar desde fuera del contenedor y añadir padding */
    left: 100%;
    padding-left: 20px;
    animation: scroll 25s linear infinite;
}

/* Animación corregida */
@keyframes scroll {
    0% {
        left: 100%;
    }

    100% {
        left: -100%;
    }
}

.channel {
    position: absolute;
    top: 25px;
    left: 40px;
    padding: 15px;
}

/* Media Queries para dispositivos móviles o pantallas pequeñas */
@media (max-width: 768px) {
    .channel {
        display: none;
    }

    .breaking-news,
    .news-header,
    .ticker-container {
        display: none;
    }

    .news-title {
        font-size: 4vw;
    }
}

/* Para pantallas aún más pequeñas */
@media (max-width: 480px) {
    .channel {
        display: none;
    }

    .breaking-news,
    .news-header,
    .ticker-container {
        display: none;
    }

    .news-title {
        font-size: 5vw;
    }
}