/* Estilos para el ícono del chatbot */
#chatbot-icon {
    position: fixed;
    bottom: 90px;
    right: 40px;
    width: 150px; /* Ajusta el tamaño del ícono */
    height: 150px; /* Ajusta el tamaño del ícono */
    
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    z-index: 1000; /* Asegura que el ícono esté por encima de otros elementos */
}

#chatbot-icon img {   /*Tamaño de la imagen dentro sin tomar en cuenta el ícono*/
    width: 480px;
    height: 150px;
    object-fit: cover;
    border-radius: 50%;
}


/* --- Estilos para la ventana del chatbot (tu código) --- */
#chatbot-container {
    position: fixed;
    bottom: 90px;
    right: 20px;
    width: 500px; /* Tamaño más adecuado para una ventana flotante */
    max-width: 500px;
    height: 570px; /* Tamaño más adecuado para una ventana flotante */
    max-height: 570px;
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 999;
}




.source-link {
    background-color: #d8d8d8 !important; /* Este será el color constante */
    color: #333 !important;
    padding: 8px 12px !important;
    border-radius: 12px !important;
    text-decoration: none !important;
    display: inline-block !important;
    margin-top: 10px !important;
}

.source-link:hover {
    background-color: #c1c1c1 !important; /* Un tono un poco más oscuro al pasar el mouse */
}

















.clara-chat-header {
    background-color: #0d3666; /*ESTO ES PARA CAMBIAR COLOR DE FRANJA QUE DICE CLARA CONDADORI*/
    color: #ffffff;
    padding: 15px 20px;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.clara-chat-header h1 {
    margin: 0;
    font-size: 1.1em;
}

.close-chat-btn {
    background: none;
    border: none;
    color: white;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    opacity: 0.8;
    transition: opacity 0.2s ease-in-out;
}

.close-chat-btn:hover {
    opacity: 1;
}

.message-list {
    flex-grow: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    background-color: #f7f9fc; /* Coherencia con el estilo de bienvenida */
}

.message-bubble {
    padding: 10px 15px;
    border-radius: 18px;
    max-width: 75%;
    line-height: 1.5;
    word-wrap: break-word;
}

.message-bubble p { margin: 0; }
.message-bubble.bot {
    background-color: #e9e9eb;
    color: #333;
    border-bottom-left-radius: 4px;
    align-self: flex-start;
}
.message-bubble.user {
    background-color: #007bff;
    color: #ffffff;
    border-bottom-right-radius: 4px;
    align-self: flex-end;
}
.chat-input-area {
    padding: 15px 20px;
    border-top: 1px solid #e0e0e0;
    background-color: #ffffff;
    position: relative;
}
.chat-form { display: flex; gap: 10px; }
.user-input {
    flex-grow: 1;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 20px;
    font-size: 1em;
    outline: none;
    transition: border-color 0.2s;
}
.user-input:focus { border-color: #007bff; }
.send-button {
    padding: 12px 20px;
    border: none;
    background-color: #245b98;
    color: white;
    border-radius: 20px;
    cursor: pointer;
    font-size: 1em;
    font-weight: bold;
    transition: background-color 0.2s;
}
.send-button:hover:not(:disabled) { background-color: #4a6580; }
.send-button:disabled { background-color: #95a5a6; cursor: not-allowed; }

/* Mensaje de bienvenida (tu código) */
.message-bubble.welcome-message { background-color: #f7f9fc; border-left: 4px solid #0056b3; padding: 20px; box-shadow: 0 4px 8px rgba(0,0,0,0.05); }
.welcome-banner { padding: 12px; background-color: #e7f0fa; border-radius: 8px; margin-bottom: 20px; text-align: center; }
.welcome-banner p { font-size: 1.1em; font-weight: 600; margin: 0 0 5px 0; color: #004a99; }
.welcome-banner span { font-size: 0.9em; color: #333; }
.welcome-intro p { margin-bottom: 0.5em; }
.welcome-topics { list-style: none; padding-left: 0; margin: 15px 0; }
.welcome-topics li { background-color: #fff; padding: 10px 15px; margin-bottom: 8px; border-radius: 6px; border: 1px solid #e0e0e0; display: flex; align-items: center; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.welcome-topics li:hover { transform: translateY(-2px); box-shadow: 0 2px 5px rgba(0,0,0,0.08); }
.welcome-topics li::before { content: '✓'; color: #007bff; font-weight: bold; margin-right: 12px; font-size: 1.1em; }
.welcome-cta { margin-top: 20px; font-size: 1em; color: #555; font-style: italic; text-align: center; padding: 10px; background-color: #f0f0f0; border-radius: 6px; }

/* Resto de estilos que no interfieren con la funcionalidad básica */
#clara-loading-spinner {
    position: absolute;
    top: -30px;
    left: 20px;
    border: 3px solid rgba(0,0,0,0.1);
    border-top: 3px solid #007bff;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin 1s linear infinite;
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* Otros estilos de tu archivo que se mantienen */
#chat-interaction-wrapper.disabled { opacity: 0.5; pointer-events: none; transition: opacity 0.3s ease; }
#resume-chat-button { width: 100%; padding: 12px 20px; margin-top: 10px; font-size: 1em; font-weight: bold; color: #fff; background-color: #34495e; border: none; border-radius: 20px; cursor: pointer; transition: background-color 0.2s ease, transform 0.1s ease; }
#resume-chat-button:hover { background-color: #4a6580; }
#resume-chat-button:active { transform: scale(0.98); }
.hidden { display: none !important; }
.structured-message { padding: 10px; text-align: left; line-height: 1.6; }
.structured-message p { margin: 0 0 1em 0; }
.structured-message p:last-child { margin-bottom: 0; }
.structured-message .suggestion-list { list-style-type: none; padding: 0; margin: 15px 0; }
.structured-message .suggestion-list li { background-color: #f0f4f8; border-left: 4px solid #007bff; border-radius: 6px; padding: 12px 15px; margin-bottom: 8px; font-weight: 500; box-shadow: 0 2px 4px rgba(0,0,0,0.05); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.structured-message .suggestion-list li:hover { transform: translateX(5px); box-shadow: 0 4px 8px rgba(0,0,0,0.1); }
.structured-message .suggestion-list li::before { content: '✓'; color: #007bff; font-weight: bold; margin-right: 10px; }
.structured-message .message-slogan { margin-top: 20px; padding-top: 15px; border-top: 1px solid rgba(0, 0, 0, 0.1); text-align: center; font-size: 0.9em; color: #555; }
.structured-message .message-slogan p { margin: 0; }

/*media queries para telefonos y tablet*/

@media (max-width: 600px) {
 /* Ajustes para el ícono del chatbot */
 #chatbot-icon {
 width: 100px;
 height: 100px;
 bottom: 20px;
 right: 20px;
 }
 
 #chatbot-icon img {
 width: 300px;
 height: 100px;
 }

 /* Ajustes para la ventana del chatbot */
 #chatbot-container {
 width: 90% !important;
 height: 55vh !important;
 bottom: 20px !important;
 right: 5% !important;
 left: 5% !important;
 max-width: none !important;
 max-height: none !important;
 z-index: 1001;
 }



 /* Ajustes del área de mensajes para el desplazamiento */
 .message-list {
 padding: 10px;
 height: calc(85vh - 120px);
 }

 /* Reducir el tamaño de la burbuja de mensaje y el texto */
 .message-bubble {
 max-width: 85%;
 font-size: 0.9em;
 }

 /* Ajustes de la sección de entrada de texto */
 .chat-input-area {
 padding: 10px;
 }

 .user-input {
 padding: 8px;
 }

 .send-button {
 padding: 8px 15px;
 }
}