/* CSS Variables */
        :root {
            --primary-blue: #17A2B8;
            --primary-light: #00c6ff;
            --primary-dark: #0056b3;
            --primary-darker: #0099e6;
            --purple-gradient-start: #17A2B8;
            --purple-gradient-end: #0ad8f8;
            --gray-light: #f0f2f5;
            --gray-medium: #e6e6e6;
            --gray-dark: #888;
            --gray-darker: #555;
            --error-bg: #ffcccc;
            --error-text: #cc0000;
            --border-radius: 10px;
            --border-radius-lg: 20px;
            --font-size-base: 14px;
            --gradient-primary: linear-gradient(45deg, var(--primary-blue), var(--primary-light));
            --gradient-primary-dark: linear-gradient(45deg, var(--primary-dark), var(--primary-darker));
            --gradient-purple: linear-gradient(135deg, var(--purple-gradient-start), var(--purple-gradient-end));
        }

        #chat-widget-embed #chat-widget h1,
        #chat-widget-embed #chat-widget h2,
        #chat-widget-embed #chat-widget p {
            font-size: var(--font-size-base);
        }


        /* --- Widget Flotante --- */
        #chat-widget {
            position: fixed;
            bottom: 30px;
            right: 30px;
            z-index: 9999;
        }

        /* --- Icono del Chat --- */
        #chat-icon {
            width: 60px;
            height: 60px;
            background: var(--gradient-purple);
            border-radius: 50%;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
            animation: pulse 1.8s infinite cubic-bezier(0.66, 0, 0, 1);
        }

        #chat-icon:hover {
            transform: scale(1.05);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
        }

        #chat-icon svg {
            fill: #fff;
        }

        @keyframes pulse {
            0% {
                box-shadow: 0 0 0 0 rgba(106, 17, 203, 0.7);
            }

            70% {
                box-shadow: 0 0 0 18px rgba(106, 17, 203, 0);
            }

            100% {
                box-shadow: 0 0 0 0 rgba(106, 17, 203, 0);
            }
        }

        /* --- Contenedor del Chat (la ventana principal) --- */
        #chat-container {
            box-sizing: border-box;
            width: 380px;
            height: 580px;
            border: none;
            border-radius: 12px;
            background-color: #fff;
            display: flex;
            flex-direction: column;
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
            position: fixed;
            bottom: 100px;
            right: 30px;
            z-index: 10000;
            transition: opacity 0.3s ease-out, transform 0.3s ease-out;
            overflow: hidden;
        }

        #chat-container.hidden {
            opacity: 0;
            pointer-events: none;
            transform: translateY(20px) scale(0.95);
        }

        /* --- Caja de Mensajes (donde se ven los mensajes) --- */
        #chat-box {
            flex-grow: 1;
            padding: 15px;
            overflow-y: auto;
            background-color: #f9f9fb;
            display: flex;
            flex-direction: column;
            margin-top: 10px;
            border-radius: var(--border-radius);
        }


        /* Clase reutilizable para scrollbars */
        .custom-scrollbar::-webkit-scrollbar,
        #chat-box::-webkit-scrollbar,
        #pregunta::-webkit-scrollbar {
            width: 8px;
        }

        .custom-scrollbar::-webkit-scrollbar-track,
        #chat-box::-webkit-scrollbar-track,
        #pregunta::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: var(--border-radius);
        }

        .custom-scrollbar::-webkit-scrollbar-thumb,
        #chat-box::-webkit-scrollbar-thumb {
            background: var(--gray-dark);
            border-radius: var(--border-radius);
        }

        #pregunta::-webkit-scrollbar-thumb {
            background: #aaa;
            border-radius: var(--border-radius);
        }

        .custom-scrollbar::-webkit-scrollbar-thumb:hover,
        #chat-box::-webkit-scrollbar-thumb:hover {
            background: var(--gray-darker);
        }

        #pregunta::-webkit-scrollbar-thumb:hover {
            background: #777;
        }

        /* --- Mensajes Base --- */
        .message {
            margin-bottom: 8px;
            padding: 10px 15px;
            border-radius: var(--border-radius-lg);
            max-width: 85%;
            word-wrap: break-word;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
            font-size: var(--font-size-base);
            line-height: 1.5;
        }

        .user-message {
            background: var(--gradient-primary);
            color: white;
            margin-left: auto;
            border-bottom-right-radius: 5px;
        }

        .bot-message {
            background-color: var(--gray-medium);
            color: #333;
            margin-right: auto;
            border-bottom-left-radius: 5px;
        }

        .loading-indicator {
            text-align: center;
            color: var(--gray-dark);
            font-style: italic;
            padding: 15px;
            font-size: 0.8em;
            margin: 15px;
        }

        .error-message {
            background-color: var(--error-bg) !important;
            color: var(--error-text) !important;
            border: 1px solid var(--error-border);
            border-radius: 18px;
        }

        /* --- Estilos para elementos Markdown dentro de bot-message --- */
        .bot-message p {
            margin: 0 0 0.5em 0;
            padding: 0;
        }

        .bot-message ul,
        .bot-message ol {
            margin: 0.5em 0 0.5em 1.5em;
            padding: 0;
        }

        .bot-message li {
            margin-bottom: 0.3em;
            line-height: 1.4;
        }

        .bot-message strong,
        .bot-message b {
            font-weight: bold;
            color: #0056b3;
        }

        .bot-message code {
            background-color: rgba(0, 0, 0, 0.07);
            padding: 2px 4px;
            border-radius: 4px;
            font-size: 0.85em;
        }

        .bot-message pre {
            background-color: #f0f0f0;
            border-left: 4px solid #ccc;
            padding: 10px 15px;
            border-radius: 6px;
            margin: 1em 0;
            overflow-x: auto;
            font-size: 0.85em;
            line-height: 1.6;
            color: #333;
        }

        .bot-message pre code {
            background: none;
            padding: 0;
            font-size: 1em;
            color: inherit;
        }


        /* --- Formulario de Entrada --- */
        #chat-form {
            display: flex;
            padding: 10px;
            background-color: #fff;
            border-top: 1px solid #eee;
        }



        #pregunta {
            flex-grow: 1;
            border: 2px solid #007bff;
            border-radius: 22px;
            padding: 10px 15px;
            font-size: 1em;
            min-height: 40px;
            max-height: 120px;
            resize: none;
            overflow-y: hidden !important;
            box-sizing: border-box;
            transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
            color: black;
        }

        #pregunta:focus {
            outline: none;
            border-color: var(--primary-darker);
            box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.15);
        }

        #enviar {
            background: var(--gradient-primary);
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 22px;
            margin-left: 10px;
            cursor: pointer;
            font-size: 0.95em;
            font-weight: 600;
            transition: background 0.3s ease-in-out, transform 0.2s ease-in-out;
        }

        #enviar:hover {
            background: var(--gradient-primary-dark);
            transform: translateY(-1px);
        }

        /* Botón FAQ */
        #btn-faq {
            width: 100%;
            margin: 5px 0 5px 0;
            padding: 8px 0;
            border: none;
            background: var(--gray-light);
            color: var(--primary-blue);
            font-weight: 600;
            border-radius: 18px;
            cursor: pointer;
            transition: background 0.2s ease;
            flex-shrink: 0;
        }

        #btn-faq:hover {
            background: #e8eaed;
        }

        /* Header del chat - estilo tradicional de chatbot */
        .chat-header {
            background: var(--gradient-primary);
            color: white;
            padding: 15px;
            border-radius: 12px 12px 0 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-weight: 600;
        }

        .chat-header-buttons {
            display: flex;
            gap: 8px;
            align-items: center;
        }

        .chat-header .clear-btn {
            background: rgba(255, 255, 255, 0.3);
            border: none;
            color: white;
            font-size: 16px;
            cursor: pointer;
            width: 36px;
            height: 36px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.2s ease;
            filter: grayscale(1) brightness(2);
        }

        .chat-header .clear-btn:hover {
            background: rgba(255, 255, 255, 0.45);
        }

        .chat-header .close-btn {
            background: #dc3545;
            border: none;
            color: white;
            font-size: 18px;
            cursor: pointer;
            width: 36px;
            height: 36px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.2s ease;
        }

        .chat-header .close-btn:hover {
            background: #c82333;
        }

        /* Indicador de escritura típico de chatbots */
        .typing-dots {
            display: inline-flex;
            gap: 4px;
        }

        .typing-dots::before,
        .typing-dots::after,
        .typing-dots {
            content: '•';
            animation: typing 1.4s infinite;
        }

        .typing-dots::before {
            animation-delay: 0s;
        }

        .typing-dots {
            animation-delay: 0.2s;
        }

        .typing-dots::after {
            animation-delay: 0.4s;
        }

        @keyframes typing {

            0%,
            60%,
            100% {
                opacity: 0.3;
            }

            30% {
                opacity: 1;
            }
        }