/*INICIO BOTON FLOTANTE y MODAL*/


.qwenjy_floating-button {
    position: fixed;
    bottom: 20px; /* Ajusta la distancia desde el borde inferior de la ventana */
    right: 20px; /* Ajusta la distancia desde el borde derecho de la ventana */
    cursor: pointer;
    z-index: 1100; /* Z-index mayor para estar siempre delante del texto flotante */
    transition: opacity 0.3s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box; /* Asegura que el padding y el border se incluyan en el ancho total */
    background-color: transparent; /* Hace que el fondo sea transparente */
    border: none; /* Elimina cualquier borde que pudiera estar aplicándose */
}


.qwenjy_floating-button img {
    width: 65px; /* Ajusta el tamaño de la imagen según lo necesites */
    height: auto; /* Mantén la proporción de la imagen */
    transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out;
    filter: contrast(140%) saturate(140%)  drop-shadow(1px 1px 3px rgba(0, 0, 0, 0.301)); /* Aumenta el contraste y la saturación */
    
}

.qwenjy_floating-button:hover img {
    transform: scale(1.06); /* Agranda la imagen al pasar el ratón */
    cursor: pointer;
    filter: contrast(140%) saturate(140%); /* Aumenta aún más el contraste y la saturación al hacer hover */
}

/* TEXTO FLOTANTE */

/* Estilo inicial para el texto flotante */
.qwenjy_floating-text {
    position: fixed;
    bottom: 47px;
    right: 82px;
    background-color: transparent;
    color: #ffffff; /* Comienza con color blanco */
    z-index: 1000;
    font-size: 12px !important;
    font-family: "montserrat-light", sans-serif;
    cursor: default;
    padding: 10px 15px;
    border-radius: 0;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0;
    overflow: hidden;
    text-shadow: 1px 1px 1px rgba(252, 75, 5, 0);
    box-shadow: -1px -1px 1px rgb(252, 75, 5);
    transition: transform 1.5s ease, opacity 1s ease, z-index 0s 1.5s;
    border-top-left-radius: 2rem;
    animation: alternateColor 4s infinite ease-in-out; /* Animación de color */
    text-transform: uppercase !important; /* Fuerza las mayúsculas */
}

/* Animación para alternar el color entre blanco y negro */
@keyframes alternateColor {
    0% {
        color: #ffffff; /* Comienza en blanco */
    }
    50% {
        color: #000000; /* Cambia a negro */
    }
    100% {
        color: #ffffff; /* Vuelve a blanco */
    }
}

/* Estilo cuando el texto flotante está oculto */
.qwenjy_floating-text.qwenjy_hide {
    transform: translateX(100%);
    opacity: 0;
    z-index: 500;
    pointer-events: none;
}

/* Estilo cuando el texto flotante está visible */
.qwenjy_floating-text.qwenjy_show {
    transform: translateX(0);
    opacity: 1;
    z-index: 1000;
    pointer-events: auto;
}


























/* Estilo general del modal */
.qwenjy_bot-modal {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 0 15px;
    border-radius: 15px;
    z-index: 2000;
    height: 560px; /* Altura fija del modal */
    width: 400px;
    max-width: 90%;
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
    opacity: 0;
    transform: scale(0.8);
    pointer-events: none;
    display: flex;
    flex-direction: column;
    background-color: transparent; /* Este es el color general del modal */
}

.qwenjy_bot-modal::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 240px; /* Reduce ligeramente para minimizar el espacio en la base */
    background: linear-gradient(
        to top,
        rgb(80, 80, 80) 0%, 
        rgb(70, 70, 70) 8%, 
        rgb(134, 134, 134) 45%, 
        rgba(255, 255, 255, 0) 80%
    );
    pointer-events: none;
    border-radius: 15px;
}

/* Contenido del modal dividido en header y cuerpo */
.qwenjy_bot-modal-content {
    display: flex !important;
    flex-direction: column !important;
    height: calc(100% - 5px) !important; /* Ajusta la altura para eliminar espacio extra */
    position: relative !important;
    overflow: hidden !important;
    background-color: transparent !important; /* Asegura que no haya fondo blanco */
    border: none !important; /* Asegura que no haya bordes */
}

.qwenjy_modal-footer {
    margin-top: 0; /* Asegura que no haya margen superior */
    margin-bottom: 0; /* Elimina cualquier margen inferior extra */
    padding: 5px 10px !important; /* Reduce el padding vertical */
    gap: 4px; /* Reduce el espacio entre los elementos */
    font-family: "Montserrat-light", sans-serif !important;
    font-weight: normal !important;
    font-size: 9px !important;
    color: #ffffff !important;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10;
    text-align: center;
    border: none !important;
}

.qwenjy_modal-footer .qwenjy_boton-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    border: none;
    cursor: pointer;
}

.qwenjy_modal-footer .qwenjy_boton-footer img {
    width: 18px; /* Ajusta el tamaño del icono */
    height: 18px;
}

.qwenjy_modal-footer a {
    color: #69fafc !important;
    text-decoration: none !important;
    font-weight: normal !important;
    border: none !important;
}
.qwenjy_modal-footer a:hover {
    color: #ffffff !important;
    text-decoration: underline !important;
}
.qwenjy_logo-mini-modal {
    width: 20%;
    margin-left: 5px;
    vertical-align: middle;
}

.qwenjy_bot-modal.qwenjy_show ~ .qwenjy_floating-button {
    pointer-events: none; /* Desactiva los clics en el botón flotante cuando el modal está abierto */
    z-index: 0; /* Asegura que el botón flotante quede detrás del modal */
}

/* Media query para pantallas pequeñas (móviles) */
@media (max-width: 600px) {
    .qwenjy_bot-modal {
        position: fixed;
        top: 0;
        bottom: 60px; /* Mantiene 50px de distancia de la parte inferior */
        margin: 0 auto; /* Centra el modal horizontalmente */
        width: calc(100% - 2px); /* Ocupa casi todo el ancho dejando 15px a cada lado */
        max-width: auto; /* Evita que se expanda más de lo necesario */
        height: calc(100vh - 60px); /* Altura completa menos el margen inferior */
        border-radius: 10px;
        padding: 0 15px;
        box-sizing: border-box;
        overflow-y: auto;
        box-shadow: none;
    }

    .qwenjy_bot-modal::before {
        height: 100%; /* Extiende el degradado a la totalidad del modal */
        background: linear-gradient(
            to top,
            rgb(80, 80, 80) 0%, 
            rgb(70, 70, 70) 20%, 
            rgb(134, 134, 134) 60%, 
            rgba(255, 255, 255, 0) 100%
        );
    }


    
    .qwenjy_bot-modal * {
    margin: 0;
    padding: 0;
}


    .qwenjy_bot-modal-content {
        height: 100%;
        padding: 0;
        overflow-y: auto;
    }

    .qwenjy_modal-footer {
        padding: 10px;
        font-size: 10px !important;
        margin-bottom: 10px;
    }

    .qwenjy_logo-mini-modal {
        width: 100px;
        margin-left: 8px;
    }
}

.qwenjy_textarea-counter-container {
    display: flex;
    flex-direction: column;
    width: 100%;
}



.qwenjy_character-counter {
    font-size: 12px;
    
    color: #ffffff;
    margin-top: 2px;
    text-align: right;
    padding-right: 5px;
}

/* Media query para pantallas pequeñas (móviles) */
@media (max-width: 600px) {
    .qwenjy_modal-footer {
        font-size: 8px !important; /* Ajustar el tamaño del texto en móviles */
        padding: 5px 8px !important; /* Reducir el padding */
    }

    .qwenjy_logo-mini-modal {
        width: 50px; /* Reducir el tamaño del logo en móviles */
        margin-left: 8px; /* Asegurar que hay espacio entre el texto y la imagen */
    }

    .qwenjy_modal-footer a {
        font-size: 8px !important; /* Ajustar el tamaño del enlace en móviles */
    }
}


/* Asegura que el pie del modal esté en la parte inferior sin solapar el contenido */
.qwenjy_bot-modal.qwenjy_show {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

/* Estilo para la imagen del banner en la parte superior del modal */
.qwenjy_modal-banner {
    width: 80%; /* Asegura que la imagen cubra todo el ancho del modal */
    height: 10%; /* Asegura que la imagen ocupe el 7% de la altura del modal */
    position: relative;
    overflow: hidden; /* Asegura que el contenido de la imagen no se salga del div */
    margin-bottom: 10px; /* Espacio fino entre la imagen y la caja de respuestas */
    margin-top: -5px;
}

.qwenjy_banner-image {
    max-width: 60%; /* Limita el ancho máximo de la imagen */
    max-height: 100px; /* Limita la altura máxima de la imagen */
    object-fit: contain;
    margin-top: 0px; /* Ajusta el margen superior */
    margin-left: 5px; /* Ajusta este valor para desplazar la imagen desde la izquierda */
}

/* Ajuste para pantallas pequeñas */
@media (max-width: 600px) {
    .qwenjy_banner-image {
        margin-top: 12px; /* Agrega un margen superior en pantallas móviles */
    }
}

.qwenjy_bot-modal-header {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 10;
    width: 100%;
    height: 30px; /* Aumenta la altura aquí para reservar espacio para el header */
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 5px;
    box-sizing: border-box;
}


/* CAJA DE RESPUESTA DEL BOT */

.qwenjy_bot-response {
    margin-top: 30px; /* Ajusta el margen para que quede justo debajo del header */
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    height: calc(100% - 40px); /* Ajusta la altura total de la caja de respuesta */
    overflow-y: auto;
    overflow-x: hidden;
    background-size: cover;
    background-position: center;
    border-radius: 10px;
    padding: 8px;
    flex-grow: 1;
    margin-bottom: 10px;

    /* Para ocultar visualmente la barra de desplazamiento */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE y Edge */
    
    
    overflow-y: auto;
    scroll-snap-type: y mandatory;
}

.qwenjy_bot-response::-webkit-scrollbar {
    display: none; /* Chrome, Safari y Opera */
}

.qwenjy_bot-response-background {
    /*background-image: url('../qwenjy_img/fondo_response.jpg'); /* Imagen de fondo por defecto */
}

/* Burbujas del Bot */
.qwenjy_bot-modal .qwenjy_bot-response .qwenjy_bot-message {
    padding: 5px 10px;
    border-radius: 15px;
    margin: 4px 0;
    max-width: 90%;
    font-size: 14px !important;
    align-self: flex-start;
    position: relative;
    box-shadow: 0 2px 3px rgba(180, 180, 180, 0.301);
    background-color: #333; /*ITEM 2*/
    color: #ffffff; /*ITEM 3*/
    border: 0.04px solid rgba(255, 255, 255, 0.3);
}

/* Estilo específico para los enlaces dentro de las burbujas del bot */
.qwenjy_bot-modal .qwenjy_bot-response .qwenjy_bot-message a {
    color: white;
    text-decoration: underline; /* Puedes ajustar esto si prefieres sin subrayado */
}


/* Muestra la hora almacenada en el atributo data-time */
.qwenjy_bot-modal .qwenjy_bot-response .qwenjy_bot-message::after {
    content: attr(data-time);
    display: block;
    font-size: 9px !important; /* Ajusta el tamaño si es necesario */
    margin-top: 2px; /* Espacio entre la burbuja y la hora */
    text-align: left; /* Alineado a la izquierda */
     color: #ffffff;
}

/* Burbujas de saludo */
.qwenjy_bot-modal .qwenjy_bot-response .qwenjy_bot-message-saludo {
    margin-top: auto; /* Empuja la burbuja hacia la base del contenedor */
    padding: 5px 10px;
    border-radius: 15px;
    box-shadow: 0 2px 3px rgba(180, 180, 180, 0.301);
    font-size: 14px !important;
    
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    line-height: 1.6 !important;
   
}

/* Burbuja de saludo con tamaño de hora específico */
.qwenjy_bot-modal .qwenjy_bot-response .qwenjy_bot-message-saludo::after {
    content: attr(data-time);
    display: block;
    font-size: 9px !important; /* Tamaño más pequeño para la hora */
    color: #666; /* Color más suave para diferenciar */
    margin-top: 2px;
    text-align: left;
}


/* Burbujas del Usuario */  
.qwenjy_bot-modal .qwenjy_bot-response .qwenjy_user-message {
    padding: 5px 10px;
    margin: 4px 0;
    max-width: 90%;
    font-size: 14px !important; /* Tamaño de la fuente aumentado */
    align-self: flex-end;
    position: relative; /* Necesario para el triángulo */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.301); /* Sombra suave */
    border-radius: 15px;
        background-color: #ffffff; 
    color: #171f20; /*ITEM 7*/
    border: 0.04px solid #222222; 
    
  
}

/* Muestra la hora almacenada en el atributo data-time */
.qwenjy_bot-modal .qwenjy_bot-response .qwenjy_user-message::after {
    content: attr(data-time);
    display: block;
    font-size: 9px !important;
    color: #000 !important; /* Asegura que la hora sea negra */
    margin-top: 2px;
    text-align: left;
    color: #ffffff;
}

/* Asegura que todas las fuentes en el modal usen Montserrat */
.qwenjy_bot-modal, 
.qwenjy_bot-modal * {
    font-family: "Montserrat", sans-serif !important;
}

/* Específico para las burbujas de mensajes */
.qwenjy_bot-modal .qwenjy_bot-response .qwenjy_bot-message,
.qwenjy_bot-modal .qwenjy_bot-response .qwenjy_user-message {
    font-family: "Montserrat-light", sans-serif !important;
    font-size: 14px !important; /* Asegura que el tamaño de la fuente se aplique */
    text-transform: none !important;
    animation: bubbleAppear 0.6s ease-out;
    line-height: 1.6 !important;
}

/* Animación de entrada suave con deslizamiento desde abajo y dos rebotes */
@keyframes bubbleAppear {
    0% {
        transform: translateY(30px) scale(0.3); /* Inicia desde abajo y con tamaño pequeño */
        opacity: 0.2;
    }
    60% {
        transform: translateY(0) scale(1.05); /* Posición final con primer rebote reducido */
        opacity: 1;
    }
    80% {
        transform: translateY(0) scale(0.98); /* Rebote hacia abajo ligeramente reducido */
    }
    100% {
        transform: translateY(0) scale(1); /* Tamaño final */
    }
}
/* Aplicación de la animación con duración extendida */
.qwenjy_bot-modal .qwenjy_bot-response .qwenjy_bot-message,
.qwenjy_bot-modal .qwenjy_bot-response .qwenjy_user-message {
    animation: bubbleAppear 1s ease-out; /* Aumentar a 1s o más para un deslizamiento más lento */
    scroll-snap-align: start;
}
.qwinside_scroll_response_container::-webkit-scrollbar {
    width: 8px; /* Ancho de la barra de scroll */
}

.qwinside_scroll_response_container::-webkit-scrollbar-track {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0)); /* Transparente hacia arriba */
    border-radius: 5px;
}

.qwinside_scroll_response_container::-webkit-scrollbar-thumb {
    background-color: rgba(80, 80, 80, 0.7); /* Color gris más claro */
    border-radius: 8px; /* Más redondeado */
    border: 2px solid transparent; /* Espacio alrededor */
}

.qwinside_scroll_response_container {
    scrollbar-width: thin; /* Para navegadores que soportan esta propiedad */
    scrollbar-color: rgba(80, 80, 80, 0.7) transparent; /* Thumb y track */
}







/* INPUT DE TEXTO DEL USUARIO */
.qwenjy_input-container {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important; /* Asegúrate de que no haya bordes */
    background-color: transparent !important; /* Elimina cualquier fondo */
}


.qwenjy_bot-input {
    flex: 1 !important; /* Ocupa todo el espacio disponible restante */
    width: 100% !important; /* Asegura que ocupe todo el ancho disponible */
    padding: 5px !important; /* Mantiene el padding para la apariencia */
    margin-bottom: 5px !important; /* Reduce el margen inferior para eliminar el sobrante */
    border-radius: 10px !important;
    border: transparent !important;
    font-size: 13px !important;
    box-shadow: none !important;
    resize: none !important; /* Evita el cambio de tamaño por parte del usuario */
    height: auto !important; /* Permite que la altura se ajuste según el contenido */
    min-height: 50px !important; /* Reduce la altura mínima ligeramente */
    outline: none !important; /* Elimina cualquier borde de enfoque */
    font-family: "Montserrat-light", sans-serif !important; /* Asegura la fuente Montserrat-light */
    box-sizing: border-box !important; /* Asegura que el padding y el border se incluyan en la altura total */
    overflow-y: auto !important; /* Habilita el desplazamiento vertical */
    scrollbar-width: none !important; /* Oculta la barra de desplazamiento en Firefox */
    background-color: transparent !important;
    color: #ffffff !important; /* Color del texto visible - ITEM 10 */
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.315),
    inset 0px 0px 4px rgb(255, 0, 0),
    inset 0px 0px 3px rgb(2, 255, 2),
    inset 0px 0px 8px rgba(49, 49, 49, 0.3),
        0px 4px 8px rgba(0, 0, 0, 0.4);
}

/* Para ocultar la barra de desplazamiento en navegadores basados en Webkit como Chrome y Safari */
.qwenjy_bot-input::-webkit-scrollbar {
    display: none !important; /* Oculta la barra de desplazamiento en Webkit */
}

.qwenjy_bot-input, .qwenjy_bot-input:focus {
    box-shadow: none !important; /* Elimina cualquier sombra */
    outline: none !important; /* Elimina cualquier borde de enfoque */
    border: 1px solid transparent !important; /* Asegura que no haya borde visible */
    font-family: "Montserrat-light", sans-serif !important; /* Asegura la fuente Montserrat-light en focus */
}

.qwenjy_bot-input:invalid {
    border: 1px solid transparent !important; /* Elimina el borde rojo de validación */
    box-shadow: none !important; /* Elimina cualquier sombra asociada con la validación */
}

/* Para asegurar que el campo siempre tenga un borde transparente cuando está enfocado */
.qwenjy_bot-input:focus, .qwenjy_bot-input:not(:placeholder-shown) {
    border: 1px solid transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

.qwenjy_modal .qwenjy_bot-input {
    line-height: 0.5 !important; /* Ajusta este valor según tus necesidades */
}

.qwenjy_input-container .qwenjy_bot-input {
    line-height: 1.3 !important; /* Ajusta este valor según tus necesidades */
    padding: 5px !important; /* Ajusta el padding según tus necesidades */
    box-sizing: border-box !important; /* Asegura que el padding y el border se incluyan en la altura total */
}

.qwenjy_bot-input::placeholder {
    color: white !important; /* Cambia el color del texto del placeholder a blanco */
    opacity: 0.8 !important; /* Asegura que el color blanco se vea claramente */
}

.qwenjy_bot-input {
    caret-color: white !important; /* Cambia el color del cursor de texto a blanco */
}

.qwenjy_bot-input {
    cursor: text !important;
    caret-color: white !important; /* Mantén el caret blanco para la barra que acompaña el texto */
}


/* BOTón DE ENVIAR MENSAJE */
.qwenjy_bot-send-button, 
.qwenjy_bot-send-button:focus, 
.qwenjy_bot-send-button:active {
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin-left: 10px !important;
    width: 35px !important;
    height: 60px !important;
    box-shadow: none !important; /* Asegura eliminar cualquier sombra */
    outline: none !important; /* Evita bordes de foco */
    -webkit-box-shadow: none !important; /* Soporte adicional para navegadores */
}

.qwenjy_send-button-image {
    width: 65% !important;
    height: 80% !important;
    object-fit: contain !important;
    display: block !important;
    filter: invert(1) brightness(2) !important;
}

.qwenjy_bot-send-button:hover {
    background-color: transparent !important;
    box-shadow: none !important; /* Asegura que no se agregue sombra */
}

.qwenjy_bot-mic-button, 
.qwenjy_bot-mic-button:focus, 
.qwenjy_bot-mic-button:active {
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin-right: 10px !important;
    width: 35px !important;
    height: 60px !important;
    box-shadow: none !important;
    outline: none !important;
    -webkit-box-shadow: none !important;
}

.qwenjy_mic-button-image {
    padding-top: -5px !important;
    width: 70% !important;
    height: 70% !important;
    object-fit: contain !important;
    display: block !important;
    filter: invert(1) brightness(2) !important;
}

.qwenjy_bot-mic-button:hover {
    background-color: transparent !important;
    box-shadow: none !important;
}

@keyframes heartbeat {
    0%, 100% {
        transform: scale(1);
        background-color: transparent;
    }
    50% {
        transform: scale(1.1);
        background-color: transparent;
    }
}

.qwenjy_pulsing {
    animation: heartbeat 1s infinite;
    background-color: transparent !important;
    box-shadow: none !important;
}



/* Fin de botón de enviar mensaje */


.qwenjy_action-buttons-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0; /* Elimina espacio entre elementos para máxima compacidad */
}


.qwenjy_action-buttons-column span {
    padding: 4px 0; /* Asegura un área de clic adecuada verticalmente */
    margin: 0; /* Elimina cualquier margen vertical extra */
}


/*INICIO CUATRO BOTONES*/


/* Estilos para el botón de Modo Oscuro */
.qwenjy_dark-mode-modal {
    display: none;
}


.qwenjy_dark-mode-button-image {
    display: none;
}

.qwenjy_dark-mode-button-imageB {
    display: none;
}

/* Estilos para el botón de descarga */
.qwenjy_download-modal {
    display: inline-block;
    background-color: transparent;
    border: none;
    border-radius: 5px;
    padding: 3px 5px; /* Reducido el espaciado interno */
    cursor: pointer;
    margin-right: 0px;
    position: relative;
    opacity: 1;
}

.qwenjy_download-modal:hover {
    background-color: transparent;
}

.qwenjy_download-button-image {
     width: 16px;
    height: 16px;
    filter: invert(1) brightness(2); /* Cambia el color a blanco */
}

.qwenjy_download-button-imageB {
    width: 0px;
    height: 0px;
}


/* Estilos para el botón de reinicio */
.qwenjy_reset-modal {
    display: inline-block;
    background-color: transparent;
    border: none;
    border-radius: 5px;
    padding: 3px 5px; /* Reducido el espaciado interno */
    cursor: pointer;
    margin-right: 0px;
    position: relative;
    opacity: 1;
}

.qwenjy_reset-modal:hover {
    background-color: transparent;
}

.qwenjy_reset-button-image {
    width: 16px;
    height: 16px;
    filter: invert(1) brightness(2); /* Cambia el color a blanco */
}

.qwenjy_reset-button-imageB {
    width: 0px;
    height: 0px;
}

/* Estilo para el botón de minimizar */
.qwenjy_close-modal {
    display: inline-block;
    background-color: transparent;
    border: none;
    border-radius: 5px;
    padding: 3px 5px; /* Reducido el espaciado interno */
    cursor: pointer;
    margin-left: 0px;
    position: relative;
    opacity: 1;
}

.qwenjy_close-modal:hover {
    background-color: transparent;
}

.qwenjy_close-button-image {
     width: 16px;
    height: 16px;
    filter: invert(1) brightness(2) !important; /* Cambia el color a blanco */
}

.qwenjy_close-button-imageB {
    width: 0px; /* Tamaño del icono */
    height: px; /* Tamaño del icono */
    display: block;
}


/* Estilos para el tooltip */
.qwenjy_bot-modal-header span[data-tooltip] {
    position: relative;
    cursor: pointer;
}

.qwenjy_bot-modal-header span[data-tooltip]::before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%; /* Posiciona el tooltip encima del botón */
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(104, 100, 100, 0.75); /* Color de fondo del tooltip */
    color: #fff; /* Color del texto del tooltip */
    padding: 5px 8px; /* Espaciado interno del tooltip */
    border-radius: 4px; /* Bordes redondeados del tooltip */
    white-space: nowrap; /* Evita que el texto se corte */
    opacity: 0; /* Tooltip oculto por defecto */
    pointer-events: none; /* Elimina la capacidad de hacer clic en el tooltip */
    transition: opacity 0.3s ease; /* Transición suave para mostrar/ocultar */
    font-size: 12px; /* Tamaño de fuente del tooltip */
    z-index: 10; /* Asegura que el tooltip esté por encima de otros elementos */
}

.qwenjy_bot-modal-header span[data-tooltip]::after {
    content: '';
    position: absolute;
    bottom: 100%; /* Posiciona la flecha del tooltip encima del botón */
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0.75) transparent transparent transparent;
    opacity: 0; /* Flecha del tooltip oculta por defecto */
    transition: opacity 0.3s ease;
}

.qwenjy_bot-modal-header span[data-tooltip]:hover::before,
.qwenjy_bot-modal-header span[data-tooltip]:hover::after {
    opacity: 1; /* Muestra el tooltip al pasar el cursor */
}

/* Estilos para los tres puntos */
.qwenjy_menu-toggle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    gap: 3px;
    margin-bottom: 8px;
}

.qwenjy_dot {
    width: 3px;
    height: 3px;
    background-color: #fff;
    border-radius: 50%;
}

/* Contenedor de los tres puntos y el menú de opciones */
.qwenjy_menu-toggle-container {
    position: relative;
}

/* Modal pequeño de opciones */
.qwenjy_small-options-modal {
    position: absolute;
    bottom: 20px; /* Alineado justo encima de los tres puntos */
    right: 20px;
    width: 160px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    z-index: 4000;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    border: 1px solid white;
    background-color: rgba(90, 90, 90, 0.95);

}

/* Estilo de las opciones dentro del modal pequeño */
.qwenjy_option-item {
    color: white;
    font-size: 11px;
    cursor: pointer;
    padding: 5px 0;
    text-align: left;
}

.qwenjy_option-item:hover {
    background-color: rgba(100, 100, 100, 0.3);
    border-radius: 5px;
}

/* Estilo básico del tooltip */
[data-tooltip] {
    position: relative;
    cursor: pointer;
}

/* Tooltip */
[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    top: -30px; /* Mover el tooltip más arriba del elemento */
    right: 0; /* Alinear a la derecha del elemento */
    padding: 3px 6px; /* Reducir el tamaño del tooltip */
    font-size: 10px; /* Tamaño de letra más pequeño */
    background-color: rgba(51, 51, 51, 0.8); /* Color más claro para el fondo */
    color: #ffffff;
    border-radius: 3px;
    white-space: nowrap;
    z-index: 100;
    opacity: 1;
    transition: opacity 0.2s ease-in-out;
}

/* Inicialmente oculto */
[data-tooltip]::after {
    opacity: 0;
    pointer-events: none;
}
/*FIN CUATRO BOTONES*/


/* Asegura que todas las fuentes en el modal usen Montserrat */
.qwenjy_bot-modal, 
.qwenjy_bot-modal * {
    font-family: "Montserrat", sans-serif !important;
}

/* Específico para las burbujas de mensajes */
.qwenjy_bot-modal .qwenjy_bot-response .qwenjy_bot-message,
.qwenjy_bot-modal .qwenjy_bot-response .qwenjy_user-message {
    font-family: "Montserrat", sans-serif !important;
    font-size: 12px !important; /* Asegura que el tamaño de la fuente se aplique */
    text-transform: none !important;
    font-weight: normal !important; /* Asegura que no haya negritas a menos que se necesiten */
}


/* INICIO MODAL DE CONFIRMACION DE REINICIO */
.qwenjy_reset-confirmation-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    border-radius: 15px;
    padding: 20px;
    z-index: 2000;
    max-width: 65%;
    width: 250px;
    text-align: center;
    
    font-family: "Montserrat-light", sans-serif !important;
    opacity: 0; /* Inicialmente invisible */
    visibility: hidden; /* Inicialmente no visible */
    transition: opacity 0.5s ease, visibility 0.5s ease; /* Transición de opacidad */ 
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2);  
    border: 1px solid white;
    background-color: rgba(90, 90, 90, 0.95);
}


.qwenjy_reset-confirmation-content p {
    margin-bottom: 20px;
    font-family: "Montserrat-light", sans-serif !important;
    font-size: 12px;
    color: #ffffff;
}

.qwenjy_reset-buttons-container {
    display: flex;
    justify-content: center; /* Alinea los botones horizontalmente en el centro */
    gap: 10px; /* Espacio entre los botones */
}

.qwenjy_reset-confirmation-button,
.qwenjy_reset-cancel-button {
    padding: 5px 10px; /* Ajusta el padding para reducir la altura */
    border-radius: 10px;
    border: none;
    cursor: pointer;
    font-family: "Montserrat-light", sans-serif !important;
    font-size: 12px;
    line-height: 15px; /* Alinea el texto verticalmente */
    width: 60px; /* Ancho específico para ambos botones */
    height: 28px; /* Altura específica para ambos botones */
    text-transform: none; /* Asegura que el texto no se transforme en mayúsculas */
    letter-spacing: 0px; /* Ajusta el espaciado entre letras a 0 */
}

.qwenjy_reset-confirmation-button {
    
    color: #ffffff;
    
    border-radius: 15px;
    border: 1px solid white;
    background-color: rgba(90, 90, 90, 0.95);
}

.qwenjy_reset-cancel-button {
    
    color: #ffffff;
    
    border-radius: 15px;
    border: 1px solid white;
    background-color: rgba(90, 90, 90, 0.95);
}

.qwenjy_reset-confirmation-button:hover,
.qwenjy_reset-cancel-button:hover {
    
    background-color: #e0dddd; /* Color para el botón de confirmación */
    color: rgb(0, 0, 0);
    border: 1px solid rgb(12, 12, 12);
    border-radius: 15px;
}
/*FIN MODAL DE CONFIRMACION DE REINICIO*/


/* MODO OSCURO */
/* Estilo general para el modal en modo oscuro */

.qwenjy_bot-modal.qwenjy_dark-mode {
    background-color: #333333 !important; /* Color de fondo oscuro para el modal */
    border: 1.5px solid rgb(252, 250, 250) !important; /* Borde gris oscuro */
}

.qwenjy_bot-modal.qwenjy_dark-mode .qwenjy_modal-footer {
    color: #ffffff !important; /* Color del texto en el footer (blanco) */
}

.qwenjy_bot-modal.qwenjy_dark-mode .qwenjy_modal-footer a {
    color: #05b6f1 !important; /* Color del enlace en el footer (celeste claro) */
}

.qwenjy_bot-modal.qwenjy_dark-mode .qwenjy_bot-response {
    background-color: #2c2c2c; /* Fondo de la caja de respuesta en modo oscuro */
    border: 1px solid rgba(80, 80, 80, 0.5); /* Borde gris oscuro */
    box-shadow: 
        inset 4px 4px 10px rgba(17, 17, 17, 0.514),
        inset 0px 0px 10px rgba(49, 49, 49, 0.2),
        0px -1px 5px rgba(17, 17, 17, 0.411),
        -1px 0px 5px rgba(17, 17, 17, 0.411);
    border: 0.5px solid rgba(244, 244, 247, 0.822);
}

.qwenjy_bot-modal.qwenjy_dark-mode .qwenjy_bot-response .qwenjy_bot-message {
    background-color: #3a3939; /* Fondo de las burbujas del bot */
    color: #ffffff; /* Color del texto en las burbujas del bot */
    border: 1px solid rgba(245, 242, 242, 0.5); /* Borde de las burbujas del bot */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.438); /* Sombra suave */
}

.qwenjy_bot-modal.qwenjy_dark-mode .qwenjy_bot-response .qwenjy_bot-message::after {
    content: attr(data-time);
    display: block;
    font-size: 10px !important; /* Ajusta el tamaño si es necesario */
    color: #05fdfd;
    margin-top: 2px; /* Espacio entre la burbuja y la hora */
    text-align: left; /* Alineado a la izquierda */
}


.qwenjy_bot-modal.qwenjy_dark-mode .qwenjy_bot-response .qwenjy_user-message {
    background-color: #242424; /* Fondo de las burbujas del usuario */
    color: #ffffff; /* Color del texto en las burbujas del usuario */
    border: 1px solid rgba(245, 242, 242, 0.5); /* Borde de las burbujas del usuario */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.438); /* Sombra suave */
}

.qwenjy_bot-modal.qwenjy_dark-mode .qwenjy_bot-response .qwenjy_user-message::after {
    content: attr(data-time);
    display: block;
    font-size: 10px !important; /* Ajusta el tamaño si es necesario */
    color: #05fdfd;
    margin-top: 2px; /* Espacio entre la burbuja y la hora */
    text-align: left; /* Alineado a la izquierda */
}

.qwenjy_bot-modal.qwenjy_dark-mode .qwenjy_bot-input {
    background-color: #333333 !important; /* Fondo del input de texto */
    color: #ffffff !important; /* Color del texto en el input */
    border: 1px solid #666666; /* Borde del input de texto */
}

.qwenjy_bot-modal.qwenjy_dark-mode .qwenjy_bot-send-button {
    background-color: #333333; /* Fondo del botón de enviar */
}

/* Imágenes para el modo oscuro dentro del modal */
.qwenjy_bot-modal.qwenjy_dark-mode .qwenjy_download-button-image {
    content: url('../qwenjy_img/O_descarga.png');
    filter: contrast(130%) saturate(130%);
}



.qwenjy_bot-modal.dark-mode .qwenjy_banner-image {
    content: url('../qwenjy_img/Qwenjy_logo_PNG_HORIZONTAL_3L.png');
}

.qwenjy_bot-modal.dark-mode .qwenjy_bot-response {
    background-image: url('../qwenjy_img/O_fondo_responseC.jpg')!important;
}

.qwenjy_bot-modal.dark-mode .qwenjy_reset-button-image {
    content: url('../qwenjy_img/O_nueva.png');
}

.qwenjy_bot-modal.dark-mode .qwenjy_close-button-image {
    content: url('../qwenjy_img/O_minimizar.png');
}

.qwenjy_bot-modal.dark-mode .qwenjy_dark-mode-button-image {
    content: url('../qwenjy_img/O_modo_claro.png');
}
/*FIN MODO OSCURO*/


































/* MODAL DE CONFIGURACIÓN */
.qwenjy_config-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    border-radius: 15px;
    padding: 20px;
    z-index: 9999;
    max-width: 80%;
    height: 620px;
    width: 460px;
    text-align: center;
    border: 1px solid rgba(65, 66, 75, 0.616);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.qwenjy_config-modal-content {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.qwenjy_config-content > p {
    margin: 0; /* Elimina cualquier margen que pueda hacer que el texto se mueva */
    padding-bottom: 10px; /* Añade espacio debajo del texto para separarlo del contenedor de temas */
    background-color: #f9f9f9; /* Fondo claro para el texto si es necesario */
    position: sticky; /* Hace que el texto se mantenga en la parte superior al hacer scroll */
    top: 0; /* Alinea el texto a la parte superior del contenedor */
    z-index: 10; /* Asegura que el texto se mantenga por encima de otros elementos */
}

.qwenjy_config-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
}

.qwenjy_config-option {
    display: inline-block;
    background-color: transparent;
    border: none;
    padding: 5px;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.3s ease;
    position: relative;
}

.qwenjy_config-option:hover {
    opacity: 1;
}

.qwenjy_config-option-image {
    width: 22px;
    height: 22px;
    margin-top: -30px;
}

.qwenjy_config-option[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%; /* Posiciona el tooltip encima del botón */
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(104, 100, 100, 0.75); /* Color de fondo del tooltip */
    color: #fff; /* Color del texto del tooltip */
    padding: 5px 8px; /* Espaciado interno del tooltip */
    border-radius: 4px; /* Bordes redondeados del tooltip */
    white-space: nowrap; /* Evita que el texto se corte */
    opacity: 0; /* Tooltip oculto por defecto */
    pointer-events: none; /* Elimina la capacidad de hacer clic en el tooltip */
    transition: opacity 0.3s ease; /* Transición suave para mostrar/ocultar */
    font-size: 12px; /* Tamaño de fuente del tooltip */
    z-index: 10; /* Asegura que el tooltip esté por encima de otros elementos */
}

.qwenjy_config-option:hover::after {
    opacity: 1; /* Hace visible el tooltip al pasar el cursor */
    visibility: visible;
}

/* Contenido que puede crecer dinámicamente */
.qwenjy_config-content {
    flex-grow: 1; /* Hace que el contenido crezca y empuje los botones hacia abajo */
    overflow-y: auto; /* Agrega scroll si el contenido se hace muy largo */
    margin-bottom: 10px; /* Espacio antes de los botones para que no se superpongan */
}




/*TEMAS*/
/* Estilo general para los temas */
.qwenjy_theme-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px;
    border-bottom: 1px solid #ddd;
    cursor: pointer;
    min-height: 62px;
}

/* Estilo para el nombre del tema */
.qwenjy_theme-name {
    font-size: 14px;
    font-family: "Montserrat-light", sans-serif !important;
}

/* Estilo para la imagen de ejemplo */
.qwenjy_theme-preview, .qwenjy_configPersonalizado-button {
    width: 45px;
    height: 62px;
    border-radius: 4px;
    object-fit: cover;
}

/* Ajuste específico para la imagen de Personalización */
.qwenjy_configPersonalizado-button {
    transform: translateX(-15px); /* Desplaza la imagen hacia la izquierda */
}





/*TEMAS-------------------------------------------*/
/*Boton de configuracion de personalizacion*/
.qwenjy_configPersonalizado-button {
    width: 18px;
    height: 18px;
}



/* MODO CLARO */

.qwenjy_claro-mode {
    background-color: white; /* Color de fondo blanco para el modal */  
   }

/* Estilo para el footer del modal en modo Claro */
.qwenjy_claro-mode .qwenjy_modal-footer {
    color: #313030 !important; /* Color del texto en el footer (gris oscuro) */
}

.qwenjy_claro-mode .qwenjy_modal-footer a {
    color: #0424d6 !important; /* Color del enlace en el footer (azul oscuro) */
    border: none !important;
}

.qwenjy_claro-mode .qwenjy_modal-footer a:hover {
    color: #212121; /* Color del enlace al pasar el cursor (gris oscuro) */
}

/* Estilo para la caja de respuesta en modo Claro */
.qwenjy_claro-mode .qwenjy_bot-response {
    background-color: #424242; /* Fondo de la caja de respuesta en modo Claro */
    border: 1px solid rgba(0, 188, 212, 0.5); /* Borde en turquesa claro */
    box-shadow: 
    inset 4px 4px 7px rgba(17, 17, 17, 0.450), /* Sombra interior fuerte en la parte superior y derecha */
    inset 0px 0px 10px rgba(49, 49, 49, 0.2), /* Sombra interior suave en todo el contorno */
    0px -1px 3px rgba(17, 17, 17, 0.250), /* Línea superior */
    -1px 0px 3px rgba(17, 17, 17, 0.250); /* Línea izquierda */
    border: 0.5px solid rgba(244, 244, 247, 0.822); /* Borde principal */
}

/* Estilo para los mensajes del bot en modo Claro */
.qwenjy_claro-mode .qwenjy_bot-response .qwenjy_bot-message {
    background-color: #ffffff; /* Fondo blanco para las burbujas del bot */
    color: #333; /* Color del texto en las burbujas del bot */
    border: 0.7px solid rgba(58, 59, 70, 0.651); /* Borde gris oscuro */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.301); /* Sombra suave */
}
.qwenjy_claro-mode .qwenjy_bot-response .qwenjy_bot-message::after {
    content: attr(data-time);
    display: block;
    font-size: 10px !important; /* Ajusta el tamaño si es necesario */
    color: #888;
    margin-top: 2px; /* Espacio entre la burbuja y la hora */
    text-align: left; /* Alineado a la izquierda */
}

/* Estilo para los mensajes del usuario en modo Claro */
.qwenjy_claro-mode .qwenjy_bot-response .qwenjy_user-message {
    background-color: #ffffff; /* Fondo blanco para las burbujas del usuario */
    color: #000000; /* Color del texto en las burbujas del usuario */
    border: 0.7px solid rgba(58, 59, 70, 0.651); /* Borde gris oscuro */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.301); /* Sombra suave */
}

.qwenjy_claro-mode .qwenjy_bot-response .qwenjy_user-message::after {
    content: attr(data-time);
    display: block;
    font-size: 10px !important; /* Ajusta el tamaño si es necesario */
    color: #888;
    margin-top: 2px; /* Espacio entre la burbuja y la hora */
    text-align: left; /* Alineado a la izquierda */
}

/* Estilo para el input de texto en modo Claro */
.qwenjy_claro-mode .qwenjy_bot-input {
    background-color: #ffffff; /* Fondo del input de texto en blanco */
    color: #333333; /* Color del texto en el input */
    border: 1px solid rgba(38, 38, 39, 0.5); /* Borde gris oscuro */
}

/* Estilo para el botón de enviar en modo Claro */
.qwenjy_claro-mode .qwenjy_bot-send-button {
    background-color: #ffffff; /* Fondo del botón de enviar en turquesa claro */
}

.qwenjy_claro-mode .qwenjy_bot-send-button:hover {
    background-color: #ffffff; /* Fondo del botón al pasar el ratón (turquesa más oscuro) */
}

.qwenjy_claro-mode .qwenjy_bot-send-button:active {
    background-color: #ffffff; /* Fondo del botón al hacer clic (turquesa aún más oscuro) */
}

/* FIN MODO CLARO */






/* MODO OSCURO */
/* Estilo general para el modal en modo oscuro */

.qwenjy_bot-modal.qwenjy_dark-mode {
    background-color: #333333 !important; /* Color de fondo oscuro para el modal */
    border: 1.5px solid rgb(252, 250, 250) !important; /* Borde gris oscuro */
}

.qwenjy_bot-modal.qwenjy_dark-mode .qwenjy_modal-footer {
    color: #ffffff !important; /* Color del texto en el footer (blanco) */
}

.qwenjy_bot-modal.qwenjy_dark-mode .qwenjy_modal-footer a {
    color: #05b6f1 !important; /* Color del enlace en el footer (celeste claro) */
}

.qwenjy_bot-modal.qwenjy_dark-mode .qwenjy_bot-response {
    background-color: #2c2c2c; /* Fondo de la caja de respuesta en modo oscuro */
    border: 1px solid rgba(80, 80, 80, 0.5); /* Borde gris oscuro */
    box-shadow: 
        inset 4px 4px 10px rgba(17, 17, 17, 0.514),
        inset 0px 0px 10px rgba(49, 49, 49, 0.2),
        0px -1px 5px rgba(17, 17, 17, 0.411),
        -1px 0px 5px rgba(17, 17, 17, 0.411);
    border: 0.5px solid rgba(244, 244, 247, 0.822);
}

.qwenjy_bot-modal.qwenjy_dark-mode .qwenjy_bot-response .qwenjy_bot-message {
    background-color: #3a3939; /* Fondo de las burbujas del bot */
    color: #ffffff; /* Color del texto en las burbujas del bot */
    border: 1px solid rgba(245, 242, 242, 0.5); /* Borde de las burbujas del bot */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.438); /* Sombra suave */
}

.qwenjy_bot-modal.qwenjy_dark-mode .qwenjy_bot-response .qwenjy_bot-message::after {
    content: attr(data-time);
    display: block;
    font-size: 10px !important; /* Ajusta el tamaño si es necesario */
    color: #05fdfd;
    margin-top: 2px; /* Espacio entre la burbuja y la hora */
    text-align: left; /* Alineado a la izquierda */
}


.qwenjy_bot-modal.qwenjy_dark-mode .qwenjy_bot-response .qwenjy_user-message {
    background-color: #242424; /* Fondo de las burbujas del usuario */
    color: #ffffff; /* Color del texto en las burbujas del usuario */
    border: 1px solid rgba(245, 242, 242, 0.5); /* Borde de las burbujas del usuario */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.438); /* Sombra suave */
}

.qwenjy_bot-modal.qwenjy_dark-mode .qwenjy_bot-response .qwenjy_user-message::after {
    content: attr(data-time);
    display: block;
    font-size: 10px !important; /* Ajusta el tamaño si es necesario */
    color: #05fdfd;
    margin-top: 2px; /* Espacio entre la burbuja y la hora */
    text-align: left; /* Alineado a la izquierda */
}

.qwenjy_bot-modal.qwenjy_dark-mode .qwenjy_bot-input {
    background-color: #333333 !important; /* Fondo del input de texto */
    color: #ffffff !important; /* Color del texto en el input */
    border: 1px solid #666666; /* Borde del input de texto */
}

.qwenjy_bot-modal.qwenjy_dark-mode .qwenjy_bot-send-button {
    background-color: #333333; /* Fondo del botón de enviar */
}

/* Imágenes para el modo oscuro dentro del modal */
.qwenjy_bot-modal.qwenjy_dark-mode .qwenjy_download-button-image {
    content: url('../qwenjy_img/O_descarga.png');
    filter: contrast(130%) saturate(130%);
}



.qwenjy_bot-modal.qwenjy_dark-mode .qwenjy_banner-image {
    content: url('../qwenjy_img/Qwenjy_logo_PNG_HORIZONTAL_3L.png');
}

.qwenjy_bot-modal.qwenjy_dark-mode .qwenjy_bot-response {
    background-image: url('../qwenjy_img/O_fondo_responseC.jpg')!important;
}

.qwenjy_bot-modal.qwenjy_dark-mode .qwenjy_reset-button-image {
    content: url('../qwenjy_img/O_nueva.png');
}

.qwenjy_bot-modal.qwenjy_dark-mode .qwenjy_close-button-image {
    content: url('../qwenjy_img/O_minimizar.png');
}

.qwenjy_bot-modal.qwenjy_dark-mode .qwenjy_dark-mode-button-image {
    content: url('../qwenjy_img/O_modo_claro.png');
}
/*FIN MODO OSCURO*/




/* CORAL */
/* Estilo general para el modal en modo Coral */
.qwenjy_coral-mode .qwenjy_bot-modal {  
    background-color:  #5be6f8;
    border: 1.5px solid rgb(252, 250, 250); /* Borde gris oscuro */
      
}

.qwenjy_coral-mode {
    background-color: #5be6f8; /* Color de fondo oscuro para el modal */
}

/* Estilo para el footer del modal en modo Coral */
.qwenjy_coral-mode .qwenjy_modal-footer {
    color: rgb(8, 8, 8) !important; /* Color del texto en el footer (blanco) */
}

.qwenjy_coral-mode .qwenjy_modal-footer a {
    color: rgb(255, 63, 4) !important; /* Color del enlace en el footer (turquesa claro) */
}

.qwenjy_coral-mode .qwenjy_modal-footer a:hover {
    color:  #5be6f8; /* Color del enlace al pasar el cursor (turquesa más oscuro) */
}

/* Estilo para la caja de respuesta en modo Coral */
.qwenjy_coral-mode .qwenjy_bot-response {
    background-color:  #1fddf7; /* Fondo de la caja de respuesta en modo Coral */
    border: 1px solid rgba(0, 188, 212, 0.5); /* Borde en turquesa claro */
    box-shadow: 
    inset 4px 4px 10px rgba(17, 17, 17, 0.514), /* Sombra interior fuerte en la parte superior y derecha */
    inset 0px 0px 10px rgba(49, 49, 49, 0.2), /* Sombra interior suave en todo el contorno */
    0px -1px 5px rgba(17, 17, 17, 0.411), /* Línea superior */
    -1px 0px 5px rgba(17, 17, 17, 0.411); /* Línea izquierda */
    border: 0.5px solid rgba(244, 244, 247, 0.822); /* Borde principal */
}

/* Estilo para los mensajes del bot en modo Coral */
.qwenjy_coral-mode .qwenjy_bot-response .qwenjy_bot-message {
    background-color:  #05b6ce; /* Fondo de las burbujas del bot */
    color: #ffffff; /* Color del texto en las burbujas del bot */
    border: 1px solid rgba(2, 138, 59, 0.815); /* Borde de las burbujas del usuario en turquesa claro */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); /* Sombra suave */
}

.qwenjy_coral-mode .qwenjy_bot-response .qwenjy_bot-message::after {
    content: attr(data-time);
    display: block;
    font-size: 10px !important; /* Ajusta el tamaño si es necesario */
    color: #ffffff;
    margin-top: 2px; /* Espacio entre la burbuja y la hora */
    text-align: left; /* Alineado a la izquierda */
}

/* Estilo para los mensajes del usuario en modo Coral */
.qwenjy_coral-mode .qwenjy_bot-response .qwenjy_user-message {
    background-color:  #0ef89f; /* Fondo de las burbujas del usuario */
    color: rgba(1, 71, 30, 0.815); /* Color del texto en las burbujas del usuario */
    border: 1px solid rgba(2, 138, 59, 0.815); /* Borde de las burbujas del usuario en turquesa claro */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); /* Sombra suave */
}
.qwenjy_coral-mode .qwenjy_bot-response .qwenjy_user-message::after {
    content: attr(data-time);
    display: block;
    font-size: 10px !important; /* Ajusta el tamaño si es necesario */
    color: #ffffff;
    margin-top: 2px; /* Espacio entre la burbuja y la hora */
    text-align: left; /* Alineado a la izquierda */
}

/* Estilo para el input de texto en modo Coral */
.qwenjy_coral-mode .qwenjy_bot-input {
    background-color: #5be6f8 !important; /* Fondo del input de texto */
    color: #013036 !important; /* Color del texto en el input */
    border: 1px solid rgb(10, 198, 245); /* Borde del input de texto en turquesa claro */
}

/* Estilo para el botón de enviar en modo Coral */
.qwenjy_coral-mode .qwenjy_bot-send-button {
    background-color:  #5be6f8; /* Fondo del botón de enviar */
}

.qwenjy_coral-mode .qwenjy_bot-send-button:hover {
    background-color:  #5be6f8; /* Fondo del botón al pasar el ratón (turquesa más oscuro) */
}

.qwenjy_coral-mode .qwenjy_bot-send-button:active {
    background-color: #5be6f8; /* Fondo del botón al hacer clic (turquesa aún más oscuro) */
}

/* Imágenes para el modo Coral */
.qwenjy_coral-mode .qwenjy_download-button-image {
    content: url('../qwenjy_img/descarga.png');
    filter: contrast(130%) saturate(130%);
}


.qwenjy_coral-mode .qwenjy_banner-image {
    content: url('../qwenjy_img/Qwenjy_logo_PNG_HORIZONTAL_3L.png');
}

.qwenjy_coral-mode .qwenjy_bot-response {
    background-image: url('../qwenjy_img/FR_coral.jpg') !important;
}

.qwenjy_coral-mode .qwenjy_reset-button-image {
    content: url('../qwenjy_img/nueva.png');
}

.qwenjy_coral-mode .qwenjy_close-button-image {
    content: url('../qwenjy_img/O_minimizar.png');
}

.qwenjy_coral-mode .qwenjy_dark-mode-button-image {
    content: url('../qwenjy_img/modo_oscuro.png');
}
/* FIN MODO CORAL */
 

/* LADY */
/* Estilo general para el modal en modo Lady */
.qwenjy_lady-mode .qwenjy_bot-modal {  
    background-color: #ff9fe2; /* Rosa viejo suave */
    border: 1.5px solid rgb(252, 250, 250); /* Borde gris claro */
}

.qwenjy_lady-mode {
    background-color: #f7c6d1; /* Fondo del modo Lady */
}

/* Estilo para el footer del modal en modo Lady */
.qwenjy_lady-mode .qwenjy_modal-footer {
    color: rgb(8, 8, 8) !important; /* Color del texto en el footer */
}

.qwenjy_lady-mode .qwenjy_modal-footer a {
    color: rgb(255, 63, 4) !important; /* Color del enlace en el footer */
}

.qwenjy_lady-mode .qwenjy_modal-footer a:hover {
    color: #f7c6d1; /* Color del enlace al pasar el cursor */
}

/* Estilo para la caja de respuesta en modo Lady */
.qwenjy_lady-mode .qwenjy_bot-response {
    background-color: #f7c6d1; /* Fondo de la caja de respuesta */
    border: 1px solid rgba(0, 188, 212, 0.5); /* Borde claro */
    box-shadow: 
    inset 4px 4px 10px rgba(17, 17, 17, 0.514), 
    inset 0px 0px 10px rgba(49, 49, 49, 0.2),
    0px -1px 5px rgba(17, 17, 17, 0.411),
    -1px 0px 5px rgba(17, 17, 17, 0.411);
    border: 0.5px solid rgba(244, 244, 247, 0.822); 
}

/* Estilo para los mensajes del bot en modo Lady */
.qwenjy_lady-mode .qwenjy_bot-response .qwenjy_bot-message {
    background-color: #f51f71;
    color: #ffffff; 
    border: 1px solid rgba(138, 2, 70, 0.815); 
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.qwenjy_lady-mode .qwenjy_bot-response .qwenjy_bot-message::after {
    content: attr(data-time);
    display: block;
    font-size: 10px !important;
    color: #ffffff;
    margin-top: 2px; 
    text-align: left;
}

/* Estilo para los mensajes del usuario en modo Lady */
.qwenjy_lady-mode .qwenjy_bot-response .qwenjy_user-message {
    background-color: #ac0142; 
    color: rgba(255, 255, 255, 0.815); 
    border: 1px solid rgba(78, 1, 33, 0.815); 
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); 
}

.qwenjy_lady-mode .qwenjy_bot-response .qwenjy_user-message::after {
    content: attr(data-time);
    display: block;
    font-size: 10px !important; 
    color: #ffffff;
    margin-top: 2px; 
    text-align: left;
}

/* Estilo para el input de texto en modo Lady */
.qwenjy_lady-mode .qwenjy_bot-input {
    background-color: #ff9fe2 !important; 
    color: #490013 !important;
    border: 1px solid rgb(10, 198, 245);
}

/* Estilo para el botón de enviar en modo Lady */
.qwenjy_lady-mode .qwenjy_bot-send-button {
    background-color: #ff9fe2;
}

.qwenjy_lady-mode .qwenjy_bot-send-button:hover {
    background-color: #ff9fe2;
}

.qwenjy_lady-mode .qwenjy_bot-send-button:active {
    background-color: #ff9fe2;
}

/* Imágenes para el modo Lady */
.qwenjy_lady-mode .qwenjy_download-button-image {
    content: url('../qwenjy_img/descarga.png');
    filter: contrast(130%) saturate(130%);
}



.qwenjy_lady-mode .qwenjy_banner-image {
    content: url('../qwenjy_img/Qwenjy_logo_PNG_HORIZONTAL_3L.png');
}

.qwenjy_lady-mode .qwenjy_bot-response {
    background-image: url('../qwenjy_img/FR_lady.jpg') !important;
}

.qwenjy_lady-mode .qwenjy_reset-button-image {
    content: url('../qwenjy_img/nueva.png');
}

.qwenjy_lady-mode .qwenjy_close-button-image {
    content: url('../qwenjy_img/O_minimizar.png');
}

.qwenjy_lady-mode .qwenjy_dark-mode-button-image {
    content: url('../qwenjy_img/modo_oscuro.png');
}
/* FIN MODO LADY */



/* BLACK FRIDAY */
/* Estilo general para el modal en modo Black Friday */
.qwenjy_blackfriday-mode .qwenjy_bot-modal {  
    background-color: #000000; /* Fondo negro */
    border: 1.5px solid rgb(252, 250, 250) !important; /* Borde gris oscuro */
}

.qwenjy_blackfriday-mode {
    background-color: #000000; /* Fondo del modo Black Friday */
}

/* Estilo para el footer del modal en modo Black Friday */
.qwenjy_blackfriday-mode .qwenjy_modal-footer {
    color: #ffffff !important; /* Color del texto en el footer (blanco) */
}

.qwenjy_blackfriday-mode .qwenjy_modal-footer a {
    color: #fd3a3a !important; /* Color del enlace en el footer (rojo) */
}

.qwenjy_blackfriday-mode .qwenjy_modal-footer a:hover {
    color: #000000; /* Color del enlace al pasar el cursor (negro) */
}

/* Estilo para la caja de respuesta en modo Black Friday */
.qwenjy_blackfriday-mode .qwenjy_bot-response {
    background-color: #000000; /* Fondo de la caja de respuesta (negro) */
    border: 2px solid rgb(255, 39, 39); /* Borde claro (rojo semitransparente) */
   
}

/* Estilo para los mensajes del bot en modo Black Friday */
.qwenjy_blackfriday-mode .qwenjy_bot-response .qwenjy_bot-message {
    background-color: #a71717; /* Fondo rojo para los mensajes del bot */
    color: #ffffff; /* Texto blanco */
    border: 1px solid rgba(255, 254, 254, 0.815); /* Borde rojo oscuro */
    box-shadow: 0 2px 5px rgba(255, 255, 255, 0.3); /* Sombra blanca */
}

.qwenjy_blackfriday-mode .qwenjy_bot-response .qwenjy_bot-message::after {
    content: attr(data-time);
    display: block;
    font-size: 10px !important;
    color: #ffffff; /* Texto blanco para la hora */
    margin-top: 2px; 
    text-align: left;
}

/* Estilo para los mensajes del usuario en modo Black Friday */
.qwenjy_blackfriday-mode .qwenjy_bot-response .qwenjy_user-message {
    background-color: #252525; /* Fondo rojo oscuro */
    color: rgba(255, 255, 255, 0.815); /* Texto blanco semitransparente */
    border: 1px solid rgba(255, 254, 254, 0.815); /* Borde rojo oscuro */
    box-shadow: 0 2px 5px rgba(255, 255, 255, 0.3); /* Sombra blanca */
}

.qwenjy_blackfriday-mode .qwenjy_bot-response .qwenjy_user-message::after {
    content: attr(data-time);
    display: block;
    font-size: 10px !important; 
    color: #ffffff; /* Texto blanco para la hora */
    margin-top: 2px; 
    text-align: left;
}

/* Estilo para el input de texto en modo Black Friday */
.qwenjy_blackfriday-mode .qwenjy_bot-input {
    background-color: #000000 !important; /* Fondo negro */
    color: #ffffff !important; /* Texto rojo */
    border: 1px solid rgb(255, 0, 0); /* Borde rojo */
}

/* Estilo para el botón de enviar en modo Black Friday */
.qwenjy_blackfriday-mode .qwenjy_bot-send-button {
    background-color: #000000; /* Fondo negro */
}

.qwenjy_blackfriday-mode .qwenjy_bot-send-button:hover {
    background-color: #000000; /* Fondo negro */
}

.qwenjy_blackfriday-mode .qwenjy_bot-send-button:active {
    background-color: #000000; /* Fondo negro */
}

/* Imágenes para el modo Black Friday */
.qwenjy_blackfriday-mode .qwenjy_download-button-image {
    content: url('../qwenjy_img/O_descarga.png');
    filter: contrast(130%) saturate(130%);
}


.qwenjy_blackfriday-mode .qwenjy_banner-image {
    content: url('../qwenjy_img/Qwenjy_logo_PNG_HORIZONTAL_3L.png');
}

.qwenjy_blackfriday-mode .qwenjy_bot-response {
    background-image: url('../qwenjy_img/FR_bf.jpg') !important;
}

.qwenjy_blackfriday-mode .qwenjy_reset-button-image {
    content: url('../qwenjy_img/O_nueva.png');
}

.qwenjy_blackfriday-mode .qwenjy_close-button-image {
    content: url('../qwenjy_img/O_minimizar.png');
}

.qwenjy_blackfriday-mode .qwenjy_dark-mode-button-image {
    content: url('../qwenjy_img/O_modo_claro.png');
}
/* FIN MODO BLACK FRIDAY */



/* INICIO MODO FAMILIAQWENJY */
/* Estilo general para el modal en modo Familiaqwenjy */
.qwenjy_familiaqwenjy-mode .qwenjy_bot-modal {  
    background-color: #f7d13d; /* Fondo amarillo brillante */
    border: 2px solid #ffffff !important; /* Borde azul claro */
}

.qwenjy_familiaqwenjy-mode {
    background-color: #ff66cc; /* Fondo del modo Familiaqwenjy, rosa fuerte */
}

/* Estilo para el footer del modal en modo Familiaqwenjy */
.qwenjy_familiaqwenjy-mode .qwenjy_modal-footer {
    color: #000000 !important; /* Texto en el footer negro */
}

.qwenjy_familiaqwenjy-mode .qwenjy_modal-footer a {
    color: #00ccff !important; /* Enlaces azul claro */
}

.qwenjy_familiaqwenjy-mode .qwenjy_modal-footer a:hover {
    color: #ffcc00; /* Enlaces amarillos al pasar el cursor */
}

/* Estilo para la caja de respuesta en modo Familiaqwenjy */
.qwenjy_familiaqwenjy-mode .qwenjy_bot-response {
    background-color: #ff6699; /* Fondo rosa intenso */
    border: 2px solid #ff33cc; /* Borde magenta */
}

/* Estilo para los mensajes del bot en modo Familiaqwenjy */
.qwenjy_familiaqwenjy-mode .qwenjy_bot-response .qwenjy_bot-message {
    background-color: #33cc33; /* Fondo verde claro para los mensajes del bot */
    color: #ffffff; /* Texto blanco */
    border: 1px solid #00ffcc; /* Borde turquesa */
    box-shadow: 0 2px 5px rgba(0, 255, 255, 0.5); /* Sombra turquesa */
}

.qwenjy_familiaqwenjy-mode .qwenjy_bot-response .qwenjy_bot-message::after {
    content: attr(data-time);
    display: block;
    font-size: 10px !important;
    color: #ffffff; /* Texto blanco para la hora */
    margin-top: 2px;
    text-align: left;
}

/* Estilo para los mensajes del usuario en modo Familiaqwenjy */
.qwenjy_familiaqwenjy-mode .qwenjy_bot-response .qwenjy_user-message {
    background-color: #ff9933; /* Fondo naranja */
    color: rgba(0, 0, 0, 0.85); /* Texto negro */
    border: 1px solid rgba(255, 255, 255, 0.8); /* Borde blanco */
    box-shadow: 0 2px 5px rgba(255, 255, 255, 0.3); /* Sombra blanca */
}

.qwenjy_familiaqwenjy-mode .qwenjy_bot-response .qwenjy_user-message::after {
    content: attr(data-time);
    display: block;
    font-size: 10px !important;
    color: #000000; /* Texto negro para la hora */
    margin-top: 2px;
    text-align: left;
}

/* Estilo para el input de texto en modo Familiaqwenjy */
.qwenjy_familiaqwenjy-mode .qwenjy_bot-input {
    background-color: #f7d13d !important; /* Fondo rosa claro */
    color: #333333 !important; /* Texto gris oscuro */
    border: 1px solid #ff33cc; /* Borde magenta */
}

/* Estilo para el botón de enviar en modo Familiaqwenjy */
.qwenjy_familiaqwenjy-mode .qwenjy_bot-send-button {
    background-color: #f7d13d; /* Fondo azul claro */
}

.qwenjy_familiaqwenjy-mode .qwenjy_bot-send-button:hover {
    background-color: #f7d13d; /* Fondo azul intermedio */
}

.qwenjy_familiaqwenjy-mode .qwenjy_bot-send-button:active {
    background-color:#f7d13d; /* Fondo azul oscuro */
}

/* Imágenes para el modo Familiaqwenjy */
.qwenjy_familiaqwenjy-mode .qwenjy_download-button-image {
    content: url('../qwenjy_img/descarga.png');
    filter: contrast(130%) saturate(130%);
}


.qwenjy_familiaqwenjy-mode .qwenjy_banner-image {
    content: url('../qwenjy_img/Qwenjy_logo_PNG_HORIZONTAL_3L.png');
}

.qwenjy_familiaqwenjy-mode .qwenjy_bot-response {
    background-image: url('../qwenjy_img/FR_familia.jpg') !important;
}

.qwenjy_familiaqwenjy-mode .qwenjy_reset-button-image {
    content: url('../qwenjy_img/nueva.png');
}

.qwenjy_familiaqwenjy-mode .qwenjy_close-button-image {
    content: url('../qwenjy_img/O_minimizar.png');
}

.qwenjy_familiaqwenjy-mode .qwenjy_dark-mode-button-image {
    content: url('../qwenjy_img/modo_oscuro.png');
}
/* FIN MODO FAMILIAQWENJY */




/* INICIO MODO NAVIDEÑO */
/* Estilo general para el modal en modo Navideño */
.qwenjy_navidadqwenjy-mode .qwenjy_bot-modal {  
    background-color: #ff0000; /* Fondo blanco */
    border: 2px solid #ffffff !important; /* Borde rojo */
}

.qwenjy_navidadqwenjy-mode {
    background-color: #008000; /* Fondo verde */
}

/* Estilo para el footer del modal en modo Navideño */
.qwenjy_navidadqwenjy-mode .qwenjy_modal-footer {
    color: #ffffff !important; /* Texto en el footer rojo */
}

.qwenjy_navidadqwenjy-mode .qwenjy_modal-footer a {
    color: #00ffd5 !important; /* Enlaces verdes */
}

.qwenjy_navidadqwenjy-mode .qwenjy_modal-footer a:hover {
    color: #ffffff; /* Enlaces blancos al pasar el cursor */
}

/* Estilo para la caja de respuesta en modo Navideño */
.qwenjy_navidadqwenjy-mode .qwenjy_bot-response {
    background-color: #ff0000; /* Fondo rojo intenso */
    border: 2px solid #ffffff; /* Borde blanco */
}

/* Estilo para los mensajes del bot en modo Navideño */
.qwenjy_navidadqwenjy-mode .qwenjy_bot-response .qwenjy_bot-message {
    background-color: #008000; /* Fondo verde para los mensajes del bot */
    color: #ffffff; /* Texto blanco */
    border: 1px solid #ff0000; /* Borde rojo */
    box-shadow: 0 2px 5px rgba(255, 255, 255, 0.5); /* Sombra blanca */
}

.qwenjy_navidadqwenjy-mode .qwenjy_bot-response .qwenjy_bot-message::after {
    content: attr(data-time);
    display: block;
    font-size: 10px !important;
    color: #ffffff; /* Texto blanco para la hora */
    margin-top: 2px;
    text-align: left;
}

/* Estilo para los mensajes del usuario en modo Navideño */
.qwenjy_navidadqwenjy-mode .qwenjy_bot-response .qwenjy_user-message {
    background-color: #ff0000; /* Fondo rojo */
    color: rgba(255, 255, 255, 0.85); /* Texto blanco */
    border: 1px solid rgba(255, 255, 255, 0.8); /* Borde blanco */
    box-shadow: 0 2px 5px rgba(255, 255, 255, 0.3); /* Sombra blanca */
}

.qwenjy_navidadqwenjy-mode .qwenjy_bot-response .qwenjy_user-message::after {
    content: attr(data-time);
    display: block;
    font-size: 10px !important;
    color: #ffffff; /* Texto blanco para la hora */
    margin-top: 2px;
    text-align: left;
}

/* Estilo para el input de texto en modo Navideño */
.qwenjy_navidadqwenjy-mode .qwenjy_bot-input {
    background-color: #ff0000 !important; /* Fondo blanco */
    color: #ffffff !important; /* Texto verde */
    border: 1px solid #ff0000; /* Borde rojo */
}

/* Estilo para el botón de enviar en modo Navideño */
.qwenjy_navidadqwenjy-mode .qwenjy_bot-send-button {
    background-color: #ff0000; /* Fondo verde */
}

.qwenjy_navidadqwenjy-mode .qwenjy_bot-send-button:hover {
    background-color: #ff0000; /* Fondo rojo */
}

.qwenjy_navidadqwenjy-mode .qwenjy_bot-send-button:active {
    background-color: #ff0000; /* Fondo verde */
}

/* Imágenes para el modo Navideño */
.qwenjy_navidadqwenjy-mode .qwenjy_download-button-image {
    content: url('../qwenjy_img/descarga.png');
    filter: contrast(130%) saturate(130%);
}



.qwenjy_navidadqwenjy-mode .qwenjy_banner-image {
    content: url('../qwenjy_img/Qwenjy_logo_PNG_HORIZONTAL_3L.png');
}

.qwenjy_navidadqwenjy-mode .qwenjy_bot-response {
    background-image: url('../qwenjy_img/FR_navidadqwenjy.jpg') !important;
}

.qwenjy_navidadqwenjy-mode .qwenjy_reset-button-image {
    content: url('../qwenjy_img/nueva.png');
}

.qwenjy_navidadqwenjy-mode .qwenjy_close-button-image {
    content: url('../qwenjy_img/O_minimizar.png');
}

.qwenjy_navidadqwenjy-mode .qwenjy_dark-mode-button-image {
    content: url('../qwenjy_img/modo_oscuro.png');
}
/* FIN MODO NAVIDEÑO */






/* INICIO MODAL DE PERSONALIZACION */

/* Estilo general para el modal en modo Personalizado */
.qwenjy_personalizadoqwenjy-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    border-radius: 15px;
    padding: 20px;
    z-index: 9999;
    max-width: 80%;
    height: 620px;
    width: 460px;
    text-align: center;
    border: 1px solid rgba(65, 66, 75, 0.616);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-family: 'Montserrat-light', sans-serif; /* Aplicar la fuente Montserrat */
}


/* Alinear el texto y el selector de color en una fila */
.qwenjy_personalization-item {
    display: flex;
    align-items: center; /* Centrar verticalmente los elementos */
    justify-content: space-between;
    margin-bottom: 5px; /* Espacio pequeño entre filas */
}

/* Ajuste del span para alinear correctamente */
.qwenjy_personalization-item label {
    font-weight: 300;
    margin-right: 10px;
    flex: 1;
    text-align: left;
    font-family: 'Montserrat-light', sans-serif;
    display: flex;
    align-items: center; /* Centrar el texto verticalmente */
}

/* Ajustar el tamaño y la posición del selector de color */
.qwenjy_personalization-item input[type="color"] {
    width: 30px;
    height: 20px;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    vertical-align: middle;
    align-self: center; /* Centrar el selector verticalmente */

/*SLIDER DE LOS BOTONES*/
}
input[type="range"] {
    width: 40%; /* O el tamaño que prefieras */
    margin: 10px 0;
}

input[type="range"]::-webkit-slider-thumb {
    background: #333; /* Color del control */
    border-radius: 50%;
    height: 15px;
    width: 15px;
}

input[type="range"]::-moz-range-thumb {
    background: #333;
    border-radius: 50%;
    height: 15px;
    width: 15px;
}





/*CSS DEFAULT PARA EL MODAL PERSONALIZADO*/
.qwenjy_personalizadoqwenjy-mode .qwenjy_bot-modal {  
    background-color: var(--modal-bg-color, #ffffff); /* Fondo del modal */ /*YA ES EDITABLE  UNIFICADO JUNTO CON EL INPUT Y EL BOTON DE ENVIAR*/
    border: 2px solid var(--modal-border-color, #ffffff) !important; /* Borde del modal */ 
}

/* Estilo para el footer del modal en modo Personalizado */
.qwenjy_personalizadoqwenjy-mode .qwenjy_modal-footer {
    color: var(--footer-text-color, #ffffff) !important; /* Texto en el footer */ 
}

.qwenjy_personalizadoqwenjy-mode .qwenjy_modal-footer a {
    color: var(--footer-link-color, #00ffd5) !important; /* Enlaces en el footer */
}

.qwenjy_personalizadoqwenjy-mode .qwenjy_modal-footer a:hover {
    color: var(--footer-link-hover-color, #ffffff); /* Enlaces en el footer al pasar el cursor */
}

/* Estilo para la caja de respuesta en modo Personalizado */
.qwenjy_personalizadoqwenjy-mode .qwenjy_bot-response {
    position: relative; /* Asegura que la capa interna esté posicionada correctamente */
    background-color: var(--bot-response-bg-color, #585757)!important; /* Color de fondo editable */
    border: 2px solid var(--response-border-color, #ffffff)!important; /* Borde editable */
    opacity: var(--bot-response-opacity, 1)!important; /* Opacidad editable */
    overflow-y: auto; /* Asegura que el scroll funcione */
    overflow-x: hidden; /* Evita el scroll horizontal */
    height: 230px; /* Ajusta la altura para que sea scrollable */
    background-size: cover;
    background-position: center;
    border-radius: 10px;
    padding: 8px;
    box-shadow: 
        inset 4px 4px 8px rgba(49, 49, 49, 0.3), 
        inset 0px 0px 10px rgba(49, 49, 49, 0.3),
        0px -1px 0px rgba(48, 45, 45, 0.150),
        -1px 0px 0px rgba(48, 45, 45, 0.70);
    border: 0.5px solid rgba(41, 38, 38, 0.822);
    margin-bottom: 10px;
}



/* Estilo para los mensajes del bot en modo Personalizado */
.qwenjy_personalizadoqwenjy-mode .qwenjy_bot-response .qwenjy_bot-message {
    background-color: var(--bot-msg-bg-color, #006680); /* Fondo de los mensajes del bot */
    color: var(--bot-msg-text-color, #ffffff); /* Texto de los mensajes del bot */
    border: 1px solid var(--bot-msg-border-color, #6b6969); /* Borde de los mensajes del bot */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.301); /* Sombra de los mensajes del bot */
}

.qwenjy_personalizadoqwenjy-mode .qwenjy_bot-response .qwenjy_bot-message::after {
    content: attr(data-time);
    display: block;
    font-size: 10px !important;
    color: var(--bot-msg-time-color, #ffffff); /* Texto blanco para la hora */
    margin-top: 2px;
    text-align: left;
}

/* Estilo para los mensajes del usuario en modo Personalizado */
.qwenjy_personalizadoqwenjy-mode .qwenjy_bot-response .qwenjy_user-message {
    background-color: var(--user-msg-bg-color, #ffffff); /* Fondo de los mensajes del usuario */
    color: var(--user-msg-text-color, rgba(255, 255, 255, 0.85)); /* Texto de los mensajes del usuario */
    border: 1px solid var(--user-msg-border-color, rgba(90, 89, 89, 0.8)); /* Borde de los mensajes del usuario */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.301); /* Sombra de los mensajes del usuario */
}

.qwenjy_personalizadoqwenjy-mode .qwenjy_bot-response .qwenjy_user-message::after {
    content: attr(data-time);
    display: block;
    font-size: 10px !important;
    color: var(--user-msg-time-color, #ffffff); /* Texto blanco para la hora */
    margin-top: 2px;
    text-align: left;
}

/* Estilo para el input de texto en modo Personalizado */
.qwenjy_personalizadoqwenjy-mode .qwenjy_bot-input {
    background-color: var(--modal-bg-color, #ffffff) !important; /* Fondo del input */
    color: var(--input-text-color, #ffffff) !important; /* Texto del input */
    border: 1px solid var(--input-border-color, #ffffff); /* Borde del input */
}

/* Estilo para el botón de enviar en modo Personalizado */
.qwenjy_personalizadoqwenjy-mode .qwenjy_bot-send-button {
    background-color: var(--modal-bg-color, #ffffff); /* Fondo del botón de enviar */
}

.qwenjy_personalizadoqwenjy-mode .qwenjy_bot-send-button:hover {
    background-color: var(--modal-bg-color, #ffffff); /* Fondo del botón de enviar al pasar el cursor */
}

.qwenjy_personalizadoqwenjy-mode .qwenjy_bot-send-button:active {
    background-color: var(--modal-bg-color, #ffffff); /* Fondo del botón de enviar al hacer clic */
}

/* Imágenes para el modo Personalizado */
.qwenjy_personalizadoqwenjy-mode .qwenjy_download-button-image {
    content: url('../qwenjy_img/O_descarga.png');
    filter: brightness(var(--button-image-brightness, 1)) !important;
}


.qwenjy_personalizadoqwenjy-mode .qwenjy_banner-image {
    content: url('../qwenjy_img/Qwenjy_logo_PNG_HORIZONTAL_3L.png');
}

.qwenjy_personalizadoqwenjy-mode .qwenjy_reset-button-image {
    content: url('../qwenjy_img/O_nueva.png');
    filter: brightness(var(--button-image-brightness, 1)) !important;
}

.qwenjy_personalizadoqwenjy-mode .qwenjy_close-button-image {
    content: url('../qwenjy_img/O_minimizar.png');
   
}

.qwenjy_personalizadoqwenjy-mode .qwenjy_dark-mode-button-image {
    content: url('../qwenjy_img/O_modo_claro.png');
    filter: brightness(var(--button-image-brightness, 1)) !important;
}
.qwenjy_personalizadoqwenjy-mode .qwenjy_bot-response {
    background-image: none !important;
}
























/* Estilos para descripcionModal (modal de los dos inputs) */
.qwenjy_descripcionModal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 1000;
    justify-content: center;
    align-items: center;
    z-index: 1500; /* Debe tener un z-index mayor que el contenido del modal principal */
}

.qwenjy_descripcionModal-content {
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    width: 300px;
    max-width: 80%;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Estilos para developingModal (modal de "ChatBot en desarrollo") dentro del modal principal */
.qwenjy_developingModal {
    display: none;
    position: absolute;
    top: 50%; /* Para dispositivos móviles */
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 300px; /* Ajusta esta altura a tu preferencia */
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    z-index: 1100;
    border: 1px solid #333;
}

/* Estilos para pantallas más pequeñas */
@media (max-width: 600px) {
    .qwenjy_developingModal {
        width: 90%; /* Ajusta el ancho al 90% del ancho de la pantalla */
        height: 60%; /* Deja que la altura se ajuste automáticamente */
        padding: 15px; /* Reduce el padding en pantallas pequeñas */
    }
}

/* Estilos para pantallas más grandes (PC) */
@media (min-width: 601px) {
    .qwenjy_developingModal {
        top: 47%; /* Ajusta este valor para moverlo más arriba solo en pantallas grandes */
    }
}



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

.qwenjy_botonValidar {
    margin-top: 10px;
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    background-color: #007bff;
    color: white;
    cursor: pointer;
}

.qwenjy_botonValidar:hover {
    background-color: #0056b3;
}

input.codigoInput {
    width: 100%;
    padding: 8px;
    margin: 10px 0;
    border-radius: 5px;
    border: 1px solid #ccc;
}

.qwenjy_modal-titulo {
    margin-bottom: 10px;
    font-size: 18px;
    font-weight: bold;
}

.qwenjy_modal-etiqueta {
    font-size: 14px;
    margin-top: 10px;
}

.qwenjy_modal-mensaje {
    font-size: 14px;
    color: #333;
}
















 
 
 
 
 
 
 



/* MODAL CAPTURA DE DATOS CONTACTO */
.qwinside_data-contact-modal {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    border-radius: 15px !important;
    padding: 20px !important;
    z-index: 2000 !important;
    max-width: 70% !important;
    width: 300px !important;
    text-align: center !important;
    font-family: "Montserrat-light", sans-serif !important;
    opacity: 0 !important; /* Inicialmente oculto */
    visibility: hidden !important; /* Inicialmente oculto */
    transition: opacity 0.5s ease, visibility 0.5s ease !important;
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2) !important;
    border: 1px solid white !important;
    background-color: rgba(60, 60, 60, 0.95) !important;
}

.qwinside_data-contact-modal.visible {
    opacity: 1 !important;
    visibility: visible !important;
}


.qwinside_data-contact-content p {
    margin-bottom: 15px !important;
    font-family: "Montserrat-light", sans-serif !important;
    font-size: 12px !important;
    color: #ffffff !important;
    margin-bottom: 5px !important; /* Reduce el margen inferior para acercarlo a los inputs */
}
.qwinside_data-contact-content p:first-of-type {
    font-size: 14px !important;
}


.qwinside_input_data_contact {
    width: 100% !important;
    padding: 10px !important; /* Ajustado para reducir altura */
    margin-bottom: 10px !important;
    border-radius: 8px !important;
    border: 1px solid #ccc !important;
    background-color: #ffffff !important;
    font-family: "Montserrat-light", sans-serif !important;
    font-size: 12px !important;
    color: #000000 !important; /* Cambiado a negro para que el texto sea visible */
    height: 30px !important; /* Nueva altura */
}

.qwinside_input_data_contact option {
    color: #000000 !important; /* Texto negro para opciones desplegables */
    background-color: #ffffff !important; /* Fondo blanco para opciones desplegables */
}


.qwinside_data_contact_buttons-container {
    display: flex !important;
    justify-content: center !important;
    gap: 10px !important;
}

.qwinside_confirm-button_data_contact,
.qwinside_cancel-button_data_contact {
    padding: 5px 10px !important;
    border-radius: 10px !important;
    border: none !important;
    cursor: pointer !important;
    font-family: "Montserrat-light", sans-serif !important;
    font-size: 8px !important;
    line-height: 15px !important;
    width: 90px !important;
    height: 28px !important;
     display: flex !important;
    align-items: center !important;
    justify-content: center !important; /* Centra el texto */
}

.qwinside_confirm-button_data_contact {
    color: #ffffff !important;
    border: 1px solid white !important;
    background-color: rgba(90, 90, 90, 0.95) !important;
    border-radius: 15px !important;
}

.qwinside_cancel-button_data_contact {
    color: #ffffff !important;
    border: 1px solid white !important;
    background-color: rgba(90, 90, 90, 0.95) !important;
    border-radius: 15px !important;
}

.qwinside_confirm-button_data_contact:hover,
.qwinside_cancel-button_data_contact:hover {
    background-color: #e0dddd !important;
    color: rgb(0, 0, 0) !important;
    border: 1px solid rgb(12, 12, 12) !important;
    border-radius: 15px !important;
}

.qwinside_time_inputs {
    display: flex !important;
    justify-content: center !important; /* Centra los inputs dentro del contenedor */
    gap: 10px !important; /* Ajusta este valor para regular la distancia entre los inputs */
    margin-bottom: 10px !important;
}

.qwinside_time_inputs select {
    width: 35% !important; /* Ancho ajustado */
    padding: 8px !important;
    margin-bottom: 10px !important;
    border-radius: 8px !important;
    border: 1px solid #ccc !important;
    background-color: #ffffff !important;
    font-family: "Montserrat-light", sans-serif !important;
    font-size: 12px !important;
    color: #808080 !important; /* Gris oscuro moderado */
    height: 30px !important;
    display: flex !important;
    align-items: center !important; /* Centrar texto verticalmente */
    text-align: center !important; /* Centrar texto horizontalmente */
}





/* Placeholder simulado en gris claro */
.qwinside_time_inputs select option[value=""] {
    color: #d3d3d3 !important; /* Gris muy claro para placeholders */
}






/* FIN MODAL CAPTURA DE DATOS CONTACTO */









/* MODAL DE AUTO USADO */
.qwinside_usedcar-modal {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    border-radius: 15px !important;
    padding: 15px !important;
    z-index: 2000 !important;
    max-width: 70% !important;
    width: 300px !important;
    height: 400px !important; /* Altura reducida */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    font-family: "Montserrat-light", sans-serif !important;
    opacity: 0 !important; /* Inicialmente oculto */
    visibility: hidden !important;
    transition: opacity 0.5s ease, visibility 0.5s ease !important;
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2) !important;
    border: 1px solid white !important;
    background-color: rgba(60, 60, 60, 0.95) !important;
}

.qwinside_usedcar-modal.visible {
    opacity: 1 !important;
    visibility: visible !important;
}


.qwinside_usedcar-content {
    width: 100% !important;
}

.qwinside_usedcar-content p {
    margin-bottom: 15px !important;
    font-family: "Montserrat-light", sans-serif !important;
    font-size: 12px !important;
    color: #ffffff !important;
}

.qwinside_usedcar-input {
    width: 100% !important;
    height: 35px !important; /* Controla directamente la altura */
    margin-bottom: 8px !important; /* Menor separación entre los inputs */
    border-radius: 8px !important; /* Bordes menos redondeados */
    border: 1px solid #ccc !important;
    background-color: #ffffff !important;
    font-family: "Montserrat-light", sans-serif !important;
    font-size: 12px !important; /* Texto más pequeño */
    color: #000000 !important;
    padding: 0 !important; /* Sin padding interno */
}



.qwinside_usedcar-buttons-container {
    display: flex !important;
    justify-content: center !important;
    gap: 10px !important;
}

.qwinside_usedcar-confirm-button,
.qwinside_usedcar-cancel-button {
    padding: 5px 10px !important;
    border-radius: 10px !important;
    border: none !important;
    cursor: pointer !important;
    font-family: "Montserrat-light", sans-serif !important;
    font-size: 8px !important;
    line-height: 15px !important;
    width: 60px !important;
    height: 28px !important;
}

.qwinside_usedcar-confirm-button {
    color: #ffffff !important;
    border: 1px solid white !important;
    background-color: rgba(90, 90, 90, 0.95) !important;
    border-radius: 15px !important;
}

.qwinside_usedcar-cancel-button {
    color: #ffffff !important;
    border: 1px solid white !important;
    background-color: rgba(90, 90, 90, 0.95) !important;
    border-radius: 15px !important;
}

.qwinside_usedcar-confirm-button:hover,
.qwinside_usedcar-cancel-button:hover {
    background-color: #e0dddd !important;
    color: rgb(0, 0, 0) !important;
    border: 1px solid rgb(12, 12, 12) !important;
    border-radius: 15px !important;
}

/* FIN MODAL DE AUTO USADO */




strong {
    font-weight: bold;
}








/* Estilo por defecto para el placeholder (opcional, si quieres uno específico) */
#userInput::placeholder {
  font-weight: normal; /* O el peso que uses normalmente */
  color: #6c757d; /* Color normal del placeholder */
  /* opacity: 1; */ /* Para Firefox < 19 si es necesario */
}

/* Estilo SEMIBOLD para el placeholder cuando el input tiene la clase 'placeholder-semibold' */
#userInput.placeholder-semibold::placeholder {
  font-weight: 500; /* 600 es comúnmente semibold */
  color: #505050; /* Puedes ajustar el color si quieres que sea un poco diferente en semibold */
  /* opacity: 1; */
}

/* Si necesitas prefijos para navegadores más antiguos para ::placeholder: */
/*
#userInput.placeholder-semibold::-webkit-input-placeholder { font-weight: 600; color: #505050; }
#userInput.placeholder-semibold::-moz-placeholder { font-weight: 600; color: #505050; opacity: 1; }
#userInput.placeholder-semibold:-ms-input-placeholder { font-weight: 600; color: #505050; }
#userInput.placeholder-semibold::-ms-input-placeholder { font-weight: 600; color: #505050; }
*/