:root {

        --bg-principal: transparent linear-gradient(180deg, #122C4A 0%, #1C1C1C 100%) 0% 0% no-repeat padding-box;
        --fn-h1: 2.4em;
        --fn-h2: 2.1em;
        --fn-h4: 1.4em;
        --fn-h3: 1.05em;
        --fn-li: 1.2em;
        --fn-p: 1.06em;
        --fn-small: .8em;
        --font-family-b: "Montserrat";
        --padding-screen: 5rem 15rem;
        --borde-card: 10px;
    }



    * {
        font-family: var(--font-family-b) !important;
        padding: 0;
        margin: 0;
        font-style: normal;
    }

    body {
        background: var(--bg-whitev2) !important;
        font-family: var(--font-family-b) !important;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    span,
    label {
        font-family: var(--font-family-b) !important;
    }

    /* Estilos generales para el contenedor del chat */
    .chat-section {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        background: var(--bg-principal);
        /* Fondo degradado */
        padding: 20px;
    }

    /* Card estilo glassmorphism */
    .card {
        width: 100%;
        max-width: 600px;
        border-radius: 20px;
        backdrop-filter: blur(10px);
        background: var(--bg-principal);
        ;
        border: 1px solid rgba(255, 255, 255, 0.2);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
        overflow: hidden;
        animation: fadeIn 0.6s ease-in-out;
    }

    /* Header */
    .card-header {
        background: var(--bg-principal);
        ;
        color: #fff;
        font-size: 1.1rem;
        font-weight: 600;
        letter-spacing: 0.5px;
        padding: 15px;
        border: none;
    }

    /* Área de mensajes */
    #chatBox {
        height: 400px;
        overflow-y: auto;
        padding: 20px;
        background: rgba(233, 236, 239, 0.9);
        backdrop-filter: blur(6px);
        scroll-behavior: smooth;
    }

    /* Scrollbar minimalista */
    #chatBox::-webkit-scrollbar {
        width: 6px;
    }

    #chatBox::-webkit-scrollbar-thumb {
        background: #adb5bd;
        border-radius: 10px;
    }

    #chatBox::-webkit-scrollbar-track {
        background: transparent;
    }

    /* Animación de mensajes */
    .message {
        margin-bottom: 15px;
        display: flex;
        align-items: flex-end;
        animation: slideUp 0.4s ease forwards;
        opacity: 0;
    }

    @keyframes slideUp {
        from {
            transform: translateY(15px);
            opacity: 0;
        }

        to {
            transform: translateY(0);
            opacity: 1;
        }
    }

    /* Burbujas */
    .message-bubble {
        padding: 12px 16px;
        border-radius: 20px;
        max-width: 75%;
        word-wrap: break-word;
        font-size: 0.95rem;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
        transition: transform 0.2s;
    }

    .message-bubble:hover {
        transform: scale(1.02);
    }

    /* Usuario */
    .user-message {
        justify-content: flex-end;
    }

    .user-message .message-bubble {
        background: var(--bg-principal);
        color: #fff;
        border-bottom-right-radius: 6px;
    }

    /* Bot */
    .bot-message {
        justify-content: flex-start;
    }

    .bot-message .message-bubble {
        background: #fff;
        color: #212529;
        border: 1px solid #dee2e6;
        border-bottom-left-radius: 6px;
    }

    /* Footer */
    .card-footer {
        background: #f8f9fa;
        padding: 15px;
        border-top: 1px solid rgba(0, 0, 0, 0.05);

    }

    #formChat {
        display: grid;
        grid-template-columns: 90% 10%;
    }

    /* Input */
    #inputChat {
        border-radius: 20px;
        border: 1px solid #ced4da;
        transition: 0.2s;
    }

    #inputChat:focus {
        border-color: #0d6efd;
        box-shadow: 0 0 6px rgba(13, 110, 253, 0.5);
    }

    /* Botón */
    .btn-primary {
        border-radius: 50%;
        width: 50px;
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0;
        transition: background 0.3s, transform 0.2s;
    }

    .btn-primary:hover {
        background: #0b5ed7;
        transform: scale(1.1);
    }

    /* Animación fade-in inicial */
    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(20px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Responsive */
    @media (max-width: 768px) {
        .card {
            max-width: 100%;
            margin: 0;
        }

        .btn-primary {
            width: 42px;
            height: 42px;
        }
    }

    /* Contenedor general del chat */
    #chatBox .message {
        margin-bottom: 16px;
        display: flex;
        flex-direction: column;
        max-width: 75%;
    }

    /* Encabezado */
    #chatBox .message-header {
        font-size: 0.8rem;
        font-weight: 600;
        margin-bottom: 4px;
        padding: 0 4px;
    }


    #chatBox .message:nth-child(odd) {
        align-items: flex-end;
        margin-left: auto;
    }

    #chatBox .message:nth-child(odd) .message-header {
        text-align: right;
        color: #4e8ef7;
    }

    #chatBox .message:nth-child(odd) .message-bubble {
        background: linear-gradient(135deg, #0d6efd, #0a58ca);
        color: #fff;
        border-bottom-right-radius: 6px;
    }

    #chatBox .message:nth-child(even) {
        align-items: flex-start;
    }

    #chatBox .message:nth-child(even) .message-header {
        text-align: left;
        color: #495057;
    }

    #chatBox .message:nth-child(even) .message-bubble {
        background: #f1f3f5;
        color: #212529;
        border-bottom-left-radius: 6px;
    }

    /* Animación */
    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(10px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Burbuja */
    #chatBox .message-bubble {
        padding: 12px 16px;
        border-radius: 18px;
        font-size: 0.95rem;
        line-height: 1.4;
        word-wrap: break-word;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
        animation: fadeIn 0.3s ease;
    }