.home {
    --color-submit: #1ee63c;
    --color-chatbot-background: #17699B;
    --color-cancel: #e63c1e;

    background-color: var(--color-chatbot-background);
    border-radius: 1.5rem;

    .chatbot {
        position: relative;
        width: 80%;
        /* color: white; */
        padding: 0.1rem;
        height: calc(100vh - 20rem);
        margin-left: 10%;

        .chatbot-messages {
            width: 100%;
            max-height: calc(100vh - 25rem);
            overflow-y: auto;
            
            .chatbot-card {
                background-color: var(--color-background);
                border-radius: 1.5rem;
                color: black;
                margin: 1rem;
                padding: 1rem 2rem;
            }

            .message-bot,
            .message-user {
                width: 60%;
            }

            .message-user {
                text-align: right;
                margin-left: auto;
            }
        }

        .chatbot-footer {
            position: absolute;
            bottom: 0;
            left: 0;
            border-radius: 1.5rem;
            justify-content: center;
            align-items: center;
            text-align: center;
            width: 100%;
            padding: 1rem;

            .chatbot-form {
                align-items: center;
                justify-content: center;
                width: 100%;
                gap: 1rem;
                
                input {
                    border-radius: 1.5rem;
                    border: 1px solid transparent;
                    padding: 1rem;
                    width: 45%;
                }
                
                .chatbot-input {
                    color:#17699B;
                }
    
                button {
                    background-color: var(--color-chatbot-background);
                    color: white;
                    border: 3px solid transparent;
                    border-radius: 1.5rem;
                    padding: 1rem;
                    cursor: pointer;
                    width: fit-content;

                }
                
                button:hover {
                    background-color: white;
                    border: 3px solid var(--color-submit);

                    .icon {
                        color: var(--color-submit);
                    }

                }

                .chatbot-clear:hover {
                    border: 3px solid var(--color-cancel);

                    .icon {
                        color: var(--color-cancel);
                    }
                }
            }
        }

        .loading {
            display: none;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 9999; /* Asegúrate de que el valor sea mayor que el de otros elementos */
            border-radius: 1.5rem;
            color:#17699B;
            background-color: #ffffffe9;
            width: 12rem;
            height: 12rem;
            
            .loading-content {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                display: flex;
                justify-content: center;
                align-items: center;
                text-align: center;
                font-size: 1.5rem;
                padding: 1rem;
                
                i {
                    font-size: 3rem;
                }
            }
        }
    }
}