/* Estilo para el ícono flotante de WhatsApp */
.whatsapp-icon {
    position: fixed;
    bottom: 20px;
    /* Separación desde el fondo */
    right: 20px;
    /* Separación desde la derecha */
    background-color: #4CAF50;
    /* Color verde para el fondo */
    border-radius: 50%;
    /* Redondeado para el fondo */
    padding: 12px;
    /* Ajuste de padding */
    cursor: pointer;
    z-index: 9999;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
    /* Sombra para destacarlo */
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    /* Transición suave */
    width: 60px;
    /* Tamaño del ícono del círculo */
    height: 60px;
    /* Tamaño del ícono del círculo */
    display: flex;
    /* Para alinear la imagen dentro */
    justify-content: center;
    /* Centra la imagen dentro del círculo */
    align-items: center;
    /* Centra la imagen dentro del círculo */
}

/* Cambia el color cuando el usuario pasa el ratón sobre el ícono */
.whatsapp-icon:hover {
    background-color: #e62929;
    /* Color más oscuro al pasar el ratón */
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3);
    /* Aumenta la sombra */
}

/* Eliminar cualquier borde o marco alrededor de la imagen */
.whatsapp-icon img {
    width: 60px;
    /* Tamaño más grande de la imagen */
    height: 60px;
    /* Tamaño más grande de la imagen */
    border-radius: 50%;
    /* Asegura que la imagen sea circular */
    object-fit: cover;
    /* Recorta la imagen de manera uniforme */
    border: none;
    outline: none;
    display: block;
}

/* Estilo para la ventana del chat */
.chatbox {
    position: fixed;
    bottom: 80px;
    /* Separación desde el fondo */
    right: 20px;
    /* Separación desde la derecha */
    width: 350px;
    /* Tamaño ajustado */
    background-color: #ffffff;
    /* Fondo blanco */
    border-radius: 15px;
    /* Bordes redondeados más grandes */
    display: none;
    /* Inicialmente oculto */
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1);
    /* Sombra sutil */
    z-index: 9998;
    opacity: 0;
    transform: translateY(20px);
    /* Deslizar hacia arriba */
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Animación para mostrar el chat */
.chatbox.show {
    opacity: 1;
    transform: translateY(0);
}

/* Estilo para la cabecera del chat */
.chat-header {
    background-color: #000000;
    /* Verde brillante */
    color: white;
    padding: 12px;
    border-radius: 15px 15px 0 0;
    /* Bordes redondeados en la parte superior */
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
}

/* Estilo para el botón de cerrar (X) */
.close-chat {
    background-color: #E53E3E;
    /* Rojo brillante */
    color: white;
    border: none;
    border-radius: 50%;
    /* Haciendo el botón circular */
    padding: 10px;
    /* Ajusta el tamaño del botón */
    cursor: pointer;
    transition: background-color 0.3s;
    width: 35px;
    /* Ajuste el tamaño del botón */
    height: 35px;
    /* Asegura que sea un círculo */
    display: flex;
    justify-content: center;
    align-items: center;
    /* Centra la "X" */
    font-size: 18px;
    /* Ajuste del tamaño de la "X" */
}

.close-chat:hover {
    background-color: #df2323;
    /* Rojo oscuro al pasar el ratón */
}

/* Estilo para el cuerpo del chat */
.chat-body {
    padding: 15px;
    color: #333;
    font-size: 15px;
    line-height: 1.6;
    border-radius: 0px;
    max-height: 400px;
    overflow-y: auto;
    height: 2000px;
}

/* Estilo para el pie del chat */
.chat-footer {
    padding: 15px;
    text-align: center;
    border-top: 1px solid #ddd;
    /* Línea de separación */
}

/* Campo de entrada de texto */
#user-input {
    width: 80%;
    padding: 10px;
    border-radius: 20px;
    border: 1px solid #ddd;
    font-size: 14px;
    margin-right: 10px;
    outline: none;
    transition: border-color 0.3s ease;
    position: relative;
    margin-bottom: 10px;
}

#user-input:focus {
    border-color: #afafaf;
    /* Verde cuando está enfocado */
}

/* Botón de "Enviar" */
#send-message {
    background-color: #E53E3E;
    /* Verde brillante */
    color: white;
    padding: 12px 25px;
    /* Aseguramos el tamaño consistente */
    border: none;
    border-radius: 20px;
    font-size: 16px;
    /* Tamaño de fuente consistente */
    cursor: pointer;
    transition: background-color 0.3s ease;
    width: 100%;
    /* Hace que el botón ocupe todo el ancho disponible */
    max-width: 120px;
    /* Tamaño máximo para evitar que se haga demasiado grande */
    display: inline-block;
    /* Hace que se comporten de manera similar */
}

#send-message:hover {
    background-color: #e21f1f;
}

/* Botón "Abrir chat" */
#open-chat {
    background-color: #E53E3E;
    /* Verde brillante */
    color: white;
    padding: 12px 25px;
    /* Hacemos que sea el mismo tamaño que "Enviar" */
    border: none;
    border-radius: 20px;
    font-size: 16px;
    /* Mismo tamaño de fuente que "Enviar" */
    cursor: pointer;
    font-weight: bold;
    text-transform: uppercase;
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    width: 100%;
    /* Hace que el botón ocupe todo el ancho disponible */
    max-width: 120px;
    /* Tamaño máximo igual que el de "Enviar" */
    display: inline-block;
    /* Asegura que se comporten de manera similar */
}

#open-chat:hover {
    background-color: #ec2222;
    /* Verde más oscuro */
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.2);
}

.option-btn {
    background-color: #E53E3E;
    /* Verde similar al color del icono */
    color: white;
    padding: 10px 20px;
    margin: 5px;
    border-radius: 5px;
    cursor: pointer;
    border: none;
    font-size: 16px;
    transition: background-color 0.3s ease;
}

.option-btn:hover {
    background-color: #388E3C;
    /* Más oscuro al pasar el ratón */
}

.barra_sup_chatbot_no_x {
    display: flex;
    gap: 10px;
}

.texto_interno_chatbot {
    display: flex;
    flex-direction: column;
}

.texto_interno_chatbot .primer_texto {
    font-weight: 300;
}

.texto_interno_chatbot .segundo_texto {
    font-weight: 800;
}

.estilo_msg_chatbot {
    background: #efefef;
    padding: 16px;
    border-radius: 25px;
}

/*Mensaje estilo cliente*/
.estilo_msg_cliente {
    background: #E53E3E;
    left: 50%;
    padding: 16px;
    border-radius: 20px;
    margin-left: 50%;
    color: white;
    word-wrap: break-word;
    /* compatibilidad antigua */
    overflow-wrap: break-word;
    /* más moderno */
    max-width: 90%;
}

.expand {
    background-color: #E53E3E;
    color: inherit;
    border: none;
    border-radius: 50%;
    padding: 10px;
    cursor: pointer;
    transition: background-color 0.3s;
    width: 35px;
    height: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    text-decoration: none;
}

.expand:hover {
    color: inherit;
    text-decoration: none;
    font-style: normal;
    background-color: #d62424;
}