iatoolkit 0.8.1__py3-none-any.whl → 0.63.4__py3-none-any.whl

iatoolkit/templates/change_password.html

@@ -1,45 +1,62 @@
 {% extends "base.html" %}
 
-{% block title %}Cambiar Contraseña{% endblock %}
+{% block title %}Cambiar Contraseña - {{ company.name }}{% endblock %}
+
+{% block styles %}
+    {# Carga las variables de CSS personalizadas de la empresa #}
+    <style>
+        {{ branding.css_variables | safe }}
+    </style>
+{% endblock %}
 
 {% block content %}
-<div class="container vh-100 d-flex justify-content-center align-items-center">
-    <div class="col-11 col-md-8 col-lg-5 border rounded p-3 shadow-sm">
-        <h4 class="text-muted fw-semibold text-start mb-3">Cambiar Contraseña</h4>
-        <h6 class="text-muted text-start mb-4">{{ email }}</h6>
-
-        <form action="{{ url_for('change_password', company_short_name=company_short_name, token=token) }}" method="post">
-            <div class="mb-3">
-                <label for="temp_code" class="form-label text-muted">Código Temporal recibido</label>
-                <input type="text" name="temp_code" id="temp_code"
-                       class="form-control text-muted" required
-                       autocomplete="off"
-                       value="{{ form_data.temp_code if form_data else '' }}">
-            </div>
-            <div class="mb-3">
-                <label for="new_password" class="form-label text-muted">Nueva Contraseña</label>
-                <input type="password" name="new_password" id="new_password"
-                       class="form-control text-muted" required
-                       value="{{ form_data.new_password if form_data else '' }}">
-                <small class="form-text text-muted">
-                        La contraseña debe contener al menos 8 caracteres, una letra mayúscula, una letra minúscula, un número y un carácter especial.
-                </small>
+{% include '_company_header.html' %}
 
-            </div>
-            <div class="mb-3">
-                <label for="confirm_password" class="form-label text-muted">Confirmar Nueva Contraseña</label>
-                <input type="password" name="confirm_password" id="confirm_password"
-                       class="form-control text-muted" required
-                       value="{{ form_data.password if form_data else '' }}">
-            </div>
-            <button type="submit" class="btn btn-primary w-100">Cambiar Contraseña</button>
+    <!-- Sección contenedora para centrar el contenido -->
+    <section class="hero-section">
+        <div class="container">
+            <div class="row justify-content-center">
+                <div class="col-lg-6 col-md-8">
+                    <div class="branded-form-container">
+                        <h4 class="branded-form-title">Crear Nueva Contraseña</h4>
+                        <p class="text-muted text-center mb-4">
+                            Estás cambiando la contraseña para <strong>{{ email }}</strong>.
+                        </p>
+
+                        <form action="{{ url_for('change_password', company_short_name=company_short_name, token=token) }}" method="post">
 
-            <p class="text-muted text-start mt-3" style="text-align: justify;">
-                    Ingresa el código de seguridad que recibiste por correo y elige una nueva contraseña.
-                    Asegúrate de que sea segura y fácil de recordar.
-            </p>
+                            <div class="mb-3">
+                                <label for="temp_code" class="form-label text-secondary">Código Temporal</label>
+                                <input type="text" id="temp_code" name="temp_code" class="form-control"
+                                       required value="{{ form_data.temp_code if form_data else '' }}"
+                                       placeholder="Revisa tu correo electrónico">
+                            </div>
 
-        </form>
-    </div>
-</div>
+                            <div class="mb-3">
+                                <label for="new_password" class="form-label text-secondary">Nueva Contraseña</label>
+                                <input type="password" id="new_password" name="new_password" class="form-control" required>
+                                <div class="d-flex align-items-start text-muted mt-2" style="font-size: 0.8rem;">
+                                    <i class="bi bi-info-circle me-2" style="font-size: 0.9rem; line-height: 1.4;"></i>
+                                    <span>Debe contener al menos 8 caracteres, mayúscula, minúscula, número y un carácter especial.</span>
+                                </div>
+                            </div>
+
+                            <div class="mb-3">
+                                <label for="confirm_password" class="form-label text-secondary">Confirmar Nueva Contraseña</label>
+                                <input type="password" id="confirm_password" name="confirm_password" class="form-control" required>
+                            </div>
+
+                            <button type="submit" class="btn btn-branded-primary w-100 fw-bold py-2 mt-3">Guardar Contraseña</button>
+                        </form>
+
+                        <div class="text-center mt-4 pt-3" style="border-top: 1px solid #e0e0e0;">
+                            <a href="{{ url_for('home', company_short_name=company_short_name) }}" class="text-muted text-decoration-none fw-semibold">
+                                <i class="bi bi-arrow-left me-1"></i>Volver al inicio
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
 {% endblock %}

iatoolkit/templates/chat.html

@@ -3,50 +3,87 @@
 {% block title %}IAToolkit{% endblock %}
 
 {% block content %}
+
+{% block styles %}
+    {# Movemos los estilos y los links aquí para que se rendericen en el <head> #}
+    <style>
+        {{ branding.css_variables | safe }}
+    </style>
+    <link rel="stylesheet" href="{{ url_for('static', filename='styles/onboarding.css', _external=True) }}">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
+
+    {% endblock %}
+
 <!-- Sección de encabezado con el usuario conectado -->
-<div class="company-section d-flex justify-content-between align-items-center">
-    <!-- Izquierda: Datos del usuario -->
-    <span class="text-muted small fw-bold">
-        {{ company_short_name }} - {{ external_user_id or user.email }}
-    </span>
-
-    <!-- Derecha: Grupo de iconos de acción -->
-    <div class="d-flex align-items-center">
-        <!-- "Powered by"  -->
-        <span class="text-muted" style="font-size: 0.75rem;">
-            Powered by <strong>IAToolkit</strong>
-        </span>
-
-        <!-- Icono de Historial -->
-        <a href="javascript:void(0);" id="history-button"
-           class="ms-3 action-icon-style" title="Historial con mis consultas">
-            <i class="bi bi-clock-history"></i>
-        </a>
-
-        <!-- Icono de Feedback -->
-        <a href="javascript:void(0);" id="send-feedback-button"
-           class="ms-3 action-icon-style" title="Tu feedback es muy importante">
-            <i class="bi bi-emoji-smile"></i>
-        </a>
-
-        <!-- Icono de cerrar sesión -->
-        {% if user.email %}
-            <a href="{{ url_for('logout', company_short_name=company_short_name) }}"
-                 class="ms-3 action-icon-style" title="Cerrar sesión">
-                <i class="bi bi-box-arrow-right"></i>
-            </a>
-        {% endif %}
+    <div id="company-section"
+         class="company-section d-flex flex-column flex-md-row justify-content-md-between align-items-center px-3 py-2"
+         style="{{ branding.header_style }}">
+
+        <!-- Fila 1 (Móvil) / Columna Izquierda (Desktop): Nombre de la Empresa -->
+        <div class="d-flex align-items-center mb-2 mb-md-0">
+            <span style="{{ branding.primary_text_style }}">
+                {{ branding.name }}
+            </span>
+            <span class="ms-2" data-bs-toggle="tooltip" data-bs-placement="bottom"
+                  title="Powered by IAToolkit ({{ iatoolkit_version }})">
+                <i class="bi bi-info-circle" style="color: {{ branding.header_text_color }}; opacity: 0.7; font-size: 0.9rem;"></i>
+            </span>
+        </div>
+
+        <!-- Contenedor para la derecha que agrupa ID de usuario y botones -->
+        <div class="d-flex flex-column flex-md-row align-items-center">
+
+            <!-- Fila 2 (Móvil) / Parte 1 de la Columna Derecha (Desktop): ID de Usuario -->
+            <span style="{{ branding.secondary_text_style }}" class="mb-2 mb-md-0">
+                {{ user_identifier }}
+            </span>
+
+            <!-- Separador Vertical (Solo visible en Desktop) -->
+            <div class="vr mx-3 d-none d-md-block"></div>
+
+            <!-- Fila 3 (Móvil) / Parte 2 de la Columna Derecha (Desktop): Iconos de Acción -->
+            <div class="d-flex align-items-center">
+                <a href="javascript:void(0);"
+                   id="history-button"
+                   class="action-icon-style" title="Historial con mis consultas" style="color: {{ branding.header_text_color }};">
+                    <i class="bi bi-clock-history"></i>
+                </a>
+                <a href="javascript:void(0);"
+                   id="force-reload-button"
+                   class="ms-3 action-icon-style"
+                   title="Forzar Recarga de Contexto"
+                   style="color: {{ branding.header_text_color }};">
+                    <i class="bi bi-arrow-clockwise"></i>
+                </a>
+                <a href="javascript:void(0);"
+                   id="send-feedback-button"
+                   class="ms-3 action-icon-style" title="Tu feedback es muy importante" style="color: {{ branding.header_text_color }};">
+                    <i class="bi bi-emoji-smile"></i>
+                </a>
+                <a href="javascript:void(0);"
+                   id="onboarding-button"
+                   class="ms-3 action-icon-style" title="Ver onboarding"
+                   style="color: {{ branding.header_text_color }};">
+                    <i class="bi bi-lightbulb"></i>
+                </a>
+                <a href="javascript:void(0);"
+                   id="logout-button"
+                   class="ms-3 action-icon-style" title="Cerrar sesión"
+                   style="color: {{ branding.header_text_color }}; !important;">
+                    <i class="bi bi-box-arrow-right"></i>
+                </a>
+            </div>
+        </div>
     </div>
-</div>
 
 <div id="chat-container"
-     class="mt-2 p-3 border border-2 rounded flex-grow-1"
+     class="chat-block mt-2 flex-grow-1"
      style="overflow-y: auto;">
-        <div id="chat-messages">
-        <!-- Mensaje de bienvenida estático -->
-        <div class="answer-section">
-            ¡Hola! en que te puedo ayudar hoy?
-        </div>
+    <!-- Mensaje de bienvenida estático -->
+    <div class="answer-section">
+                ¡Hola! en que te puedo ayudar hoy?
     </div>
 </div>
 
@@ -55,7 +92,7 @@
     <input type="file" id="file-upload" class="filepond" data-max-files="5" multiple>
 </div>
 
-<div class="input-area mt-2 mb-2">
+<div id="input-area" class="input-area chat-block  mt-2 mb-2">
 
     <!-- 1. Contenido Colapsable del Asistente de prompts -->
     <div class="collapse" id="prompt-assistant-collapse">
@@ -80,8 +117,11 @@
                                                data-custom-fields='{{ prompt.custom_fields | tojson  }}'>
                                                 {{ prompt.description }}
                                             </a>
-                                        </li>                                    {% endfor %}
-                                    {% if not loop.last %}<li><hr class="dropdown-divider"></li>{% endif %}
+                                        </li>
+                                    {% endfor %}
+                                    {% if not loop.last %}
+                                        <li><hr class="dropdown-divider"></li>
+                                    {% endif %}
                                 {% endfor %}
                                 {% endif %}
                             </ul>
@@ -100,11 +140,12 @@
     </div>
 
     <!-- 2. La Barra de Entrada Principal -->
-    <div class="chat-input-bar d-flex align-items-center">
+    <div id="chat-input-bar" class="chat-input-bar d-flex align-items-center">
         <!-- Iconos de la izquierda -->
         <div class="d-flex align-items-center">
-            <!-- BOTÓN  PARA CONTROLAR EL COLLAPSE -->
-            <a class="p-2" href="#prompt-assistant-collapse" data-bs-toggle="collapse" role="button" aria-expanded="false" aria-controls="prompt-assistant-collapse" title="Usar Asistente de Prompts">
+            <!-- varita magica -->
+            <a class="p-2" href="#prompt-assistant-collapse" data-bs-toggle="collapse" role="button"
+               aria-expanded="false" aria-controls="prompt-assistant-collapse" title="Usar Asistente de Prompts">
                 <i class="bi bi-magic"></i>
             </a>
             <a class="p-2" href="javascript:void(0);" id="paperclip-button" title="Adjuntar archivos">
@@ -147,34 +188,76 @@
 <script>
     // --- Global Configuration from Backend ---
     window.companyShortName = "{{ company_short_name }}";
+    window.user_identifier = "{{ user_identifier }}";
+    window.redeemToken = {{ redeem_token | tojson | default('null') }};
     window.iatoolkit_base_url = "{{ iatoolkit_base_url }}";
-    window.externalUserId = "{{ external_user_id }}";
     window.availablePrompts = {{ prompts.message | tojson }};
+    window.onboardingCards = {{ onboarding_cards | tojson }};
+    window.sendButtonColor = "{{ branding.send_button_color }}";
 
-    {% if auth_method == 'jwt' and session_jwt %}
-        // Store session JWT if it exists, defined in the same global scope
-        window.sessionJWT = "{{ session_jwt }}";
-    {% endif %}
 </script>
 
 <!-- Carga de los scripts JS externos después de definir las variables globales -->
-<script src="{{ url_for('static', filename='js/chat_filepond.js') }}"></script>
-<script src="{{ url_for('static', filename='js/chat_history.js') }}"></script>
-<script src="{{ url_for('static', filename='js/chat_feedback.js') }}"></script>
-<script src="{{ url_for('static', filename='js/chat_main.js') }}"></script>
+    <script src="{{ url_for('static', filename='js/chat_onboarding_button.js', _external=True) }}"></script>
+    <script src="{{ url_for('static', filename='js/chat_filepond.js', _external=True) }}"></script>
+    <script src="{{ url_for('static', filename='js/chat_history_button.js', _external=True) }}"></script>
+    <script src="{{ url_for('static', filename='js/chat_feedback_button.js', _external=True) }}"></script>
+    <script src="{{ url_for('static', filename='js/chat_reload_button.js', _external=True) }}"></script>
+    <script src="{{ url_for('static', filename='js/chat_main.js', _external=True) }}"></script>
+    <script src="{{ url_for('static', filename='js/chat_logout_button.js', _external=True) }}"></script>
+    <script src="{{ url_for('static', filename='js/chat_prompt_manager.js', _external=True) }}"></script>
+    <script src="{{ url_for('static', filename='js/chat_main.js', _external=True) }}"></script>
 
-<script>
-    document.addEventListener('DOMContentLoaded', function() {
-        const promptCollapse = document.getElementById('prompt-assistant-collapse');
-        if (promptCollapse) {
-            promptCollapse.addEventListener('shown.bs.collapse', function () {
-                // Desplazar la ventana al final de la página para mantener visible el área de entrada.
-                window.scrollTo({
-                    top: document.body.scrollHeight,
-                    behavior: 'smooth'
-                });
-            });
-        }
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
+
+    <script>
+
+    document.addEventListener('DOMContentLoaded', function () {
+        // Inicializar todos los tooltips de la página
+        var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
+        var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
+            return new bootstrap.Tooltip(tooltipTriggerEl)
+        })
     });
+
+// Inicialización del modal de onboarding
+document.addEventListener('DOMContentLoaded', function () {
+  const btn = document.getElementById('onboarding-button');
+  if (!btn) return;
+
+  const modalEl = document.getElementById('onboardingModal');
+  const modal = new bootstrap.Modal(modalEl);
+
+  if (!window.initOnboarding) {
+    console.error('initOnboarding no disponible. Verifica chat_onboarding.js');
+    return;
+  }
+
+  const onboarding = initOnboarding({
+    mode: 'modal',
+    cards: Array.isArray(window.onboardingCards) ? window.onboardingCards : [],
+    ui: {
+      icon: '#ob-icon',
+      title: '#ob-title',
+      text: '#ob-text',
+      dots: '#ob-dots',
+      prev: '#ob-prev',
+      next: '#ob-next'
+    },
+    autoRotateMs: 5000
+  });
+
+  modalEl.addEventListener('hidden.bs.modal', () => onboarding.stop());
+
+  btn.addEventListener('click', () => {
+    if (!onboarding.hasCards()) {
+      toastr.info('No hay información de onboarding disponible.');
+      return;
+    }
+    onboarding.start();
+    modal.show();
+  });
+});
 </script>
 {% endblock %}

iatoolkit/templates/chat_modals.html

@@ -2,7 +2,7 @@
 <div class="modal fade" id="uploadedFilesModal" tabindex="-1" aria-labelledby="uploadedFilesModalLabel" aria-hidden="true">
   <div class="modal-dialog">
     <div class="modal-content">
-      <div class="modal-header">
+      <div class="modal-header branded">
         <h5 class="modal-title" id="uploadedFilesModalLabel">Archivos Cargados</h5>
         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
       </div>
@@ -12,7 +12,7 @@
         </ul>
       </div>
       <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
+        <button type="button" class="btn btn-branded-secondary" data-bs-dismiss="modal">Cerrar</button>
       </div>
     </div>
   </div>
@@ -22,7 +22,7 @@
 <div class="modal fade" id="feedbackModal" tabindex="-1" aria-labelledby="feedbackModalLabel" aria-hidden="true">
     <div class="modal-dialog modal-dialog-centered">
         <div class="modal-content">
-            <div class="modal-header">
+            <div class="modal-header branded">
                 <h5 class="modal-title" id="feedbackModalLabel">
                     <i class="bi bi-chat-dots me-3"></i>Tu Opinión es Importante
                 </h5>
@@ -31,7 +31,6 @@
             <div class="modal-body">
                 <p class="text-center mb-2"><strong>¿Qué tan útil fue la respuesta del asistente?</strong></p>
 
-                <!-- ▼▼▼ ESTE ES EL BLOQUE DE HTML QUE FALTABA ▼▼▼ -->
                 <div class="rating-stars mb-4">
                     <span class="star" data-rating="1" onclick="gfg(1)"></span>
                     <span class="star" data-rating="2" onclick="gfg(2)"></span>
@@ -52,10 +51,10 @@
                 </div>
             </div>
             <div class="modal-footer">
-                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
+                <button type="button" class="btn btn-branded-secondary" data-bs-dismiss="modal">
                     <i class="bi bi-x-circle me-1"></i>Cancelar
                 </button>
-                <button type="button" class="btn btn-primary" id="submit-feedback">
+                <button type="button" class="btn btn-branded-primary" id="submit-feedback">
                     <i class="bi bi-send me-1"></i>Enviar
                 </button>
             </div>
@@ -65,9 +64,9 @@
 
 <!-- Modal para historial -->
 <div class="modal fade" id="historyModal" tabindex="-1" aria-labelledby="historyModalLabel" aria-hidden="true">
-    <div class="modal-dialog modal-lg modal-dialog-centered">
+    <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
         <div class="modal-content">
-            <div class="modal-header">
+            <div class="modal-header branded">
                 <h5 class="modal-title" id="historyModalLabel">
                     <i class="bi bi-clock-history me-3"></i>Historial de Consultas
                 </h5>
@@ -80,22 +79,19 @@
                     </div>
                     <p class="mt-2">Cargando historial...</p>
                 </div>
-                <div id="history-error" style="display: none;" class="alert alert-danger">
+                <div id="history-error" style="display: none;">
                     <!-- Los errores se mostrarán aquí -->
                 </div>
                 <div id="history-content" style="display: none;">
-                    <!-- Texto explicativo -->
-                    <div class="alert alert-info mb-3" role="alert">
-                        <i class="bi bi-info-circle me-2"></i>
-                        <strong>Tip:</strong> Haz clic en cualquier pregunta del historial para copiarla automáticamente al área de texto.
-                    </div>
+
                     <div class="table-responsive">
                         <table class="table table-striped table-hover">
-                            <thead class="thead-dark">
+                            <thead class="thead-branded">
                                 <tr>
-                                    <th scope="col">#</th>
-                                    <th scope="col">Fecha</th>
+                                    <th scope="col" class="col-min">Fecha</th>
                                     <th scope="col">Consulta</th>
+                                    <th scope="col" class="col-icon"></th>
+
                                 </tr>
                             </thead>
                             <tbody id="history-table-body">
@@ -106,10 +102,43 @@
                 </div>
             </div>
             <div class="modal-footer">
-                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
+                <button type="button" class="btn btn-branded-secondary" data-bs-dismiss="modal">
                     <i class="bi bi-x-circle me-1"></i>Cerrar
                 </button>
             </div>
         </div>
     </div>
+</div>
+
+<!-- Modal de Onboarding -->
+<div class="modal fade" id="onboardingModal" tabindex="-1" aria-labelledby="onboardingModalLabel" aria-hidden="true">
+  <div class="modal-dialog modal-dialog-centered">
+    <div class="modal-content" style="border-radius:12px;">
+      <div class="modal-header">
+        <h5 class="modal-title w-100 text-center" id="onboardingModalLabel" style="color: var(--brand-primary-color, #FF5100);">
+            Bienvenido a {{ branding.name }}
+        </h5>
+          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
+      </div>
+
+      <div class="modal-body ob-root">
+        <div id="ob-card" class="ob-card">
+          <div id="ob-icon" class="ob-icon"><i class="bi bi-lightbulb"></i></div>
+          <h6 id="ob-title" class="ob-title"></h6>
+          <div id="ob-text" class="ob-text"></div>
+          <div class="ob-nav">
+            <button id="ob-prev" class="ob-btn" aria-label="Anterior"><i class="bi bi-chevron-left"></i></button>
+            <div id="ob-dots" class="ob-dots"></div>
+            <button id="ob-next" class="ob-btn" aria-label="Siguiente"><i class="bi bi-chevron-right"></i></button>
+          </div>
+        </div>
+      </div>
+
+      <div class="modal-footer">
+        <button id="ob-close" type="button" class="btn btn-branded-primary" data-bs-dismiss="modal">
+            Cerrar
+        </button>
+        </div>
+    </div>
+  </div>
 </div>

iatoolkit/templates/error.html

@@ -1,15 +1,48 @@
 {% extends "base.html" %}
 
-{% block title %}Error - IAToolkit{% endblock %}
+{% block title %}Error {% endblock %}
+
+{% block styles %}
+{# Carga las variables de CSS personalizadas de la empresa #}
+{% if branding %}
+    <style>
+        {{ branding.css_variables | safe }}
+    </style>
+{% endif %}
+    {# Enlace a los iconos de Bootstrap para el icono de error #}
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
+{% endblock %}
 
 {% block content %}
-<div class="container vh-100 d-flex justify-content-center align-items-center">
-    <div class="text-center col-11 col-md-8 col-lg-6 border rounded p-4 shadow-sm bg-light">
-        <h1 class="text-danger fw-bold">¡Ups! Ha ocurrido un error</h1>
-        <p class="mt-3 text-muted">
-            {{ message }}
-        </p>
-        <a href="{{ url_for('home') }}" class="btn btn-primary mt-4">Volver al Inicio</a>
+{% include '_company_header.html' %}
+
+{# Contenedor principal para el mensaje de error #}
+<div class="container mt-5">
+    <div class="row justify-content-center">
+        <div class="col-md-8 col-lg-6">
+
+            {# Usamos una tarjeta para enmarcar el contenido del error #}
+            <div class="card shadow-sm text-center border-danger">
+                <div class="card-body p-4 p-md-5">
+
+                    {# Icono de error grande y visible #}
+                    <i class="bi bi-exclamation-triangle-fill text-danger" style="font-size: 4rem;"></i>
+
+                    <h4 class="card-title mt-4">Ha Ocurrido un Error</h4>
+
+                    {# El mensaje de error dinámico que se pasa desde la vista #}
+                    <p class="text-muted mt-3 mb-4">
+                        {{ message | default('Lo sentimos, algo salió mal. Por favor, inténtalo de nuevo más tarde.') }}
+                    </p>
+
+                    <a href="javascript:history.back()"
+                        class="btn btn-branded-primary px-4">
+                            Volver
+                    </a>
+                </div>
+            </div>
+        </div>
     </div>
 </div>
+
 {% endblock %}

iatoolkit/templates/forgot_password.html

@@ -1,33 +1,46 @@
 {% extends "base.html" %}
 
-{% block title %}Recuperar Contraseña{% endblock %}
+{% block title %}Recuperar Contraseña - {{ branding.name }}{% endblock %}
+
+{% block styles %}
+    <style>{{ branding.css_variables | safe }}</style>
+    <link rel="stylesheet" href="{{ url_for('static', filename='styles/chat_iatoolkit.css') }}">
+{% endblock %}
 
 {% block content %}
-<div class="container d-flex justify-content-center align-items-center vh-100">
-    <div class="col-11 col-md-6 col-lg-4 border rounded p-3 shadow-sm">
-        <h4 class="text-muted fw-semibold text-start mb-3">Recuperar Contraseña</h4>
-
-        <form action="{{ url_for('forgot_password', company_short_name=company_short_name) }}" method="post">
-            <div class="mb-3">
-                <label for="email" class="form-label text-muted">Correo Electrónico</label>
-                <input type="email" id="email" name="email"
-                       class="form-control text-muted"
-                       required value="{{ form_data.email if form_data else '' }}"
-                       style="text-align: justify;">
-            </div>
+{% include '_company_header.html' %}
+
+    <!-- 3. Sección contenedora para centrar el contenido -->
+    <section class="hero-section">
+        <div class="container">
+            <div class="row justify-content-center">
+                <div class="col-lg-6 col-md-8">
+                    <div class="branded-form-container">
+                        <h4 class="branded-form-title">Recuperar Contraseña</h4>
+
+                        <p class="text-muted text-center mb-4">
+                            Ingresa tu correo electrónico y te enviaremos un enlace para restablecer tu contraseña.
+                        </p>
 
-            <button type="submit" class="btn btn-primary w-100">Enviar Contraseña</button>
+                        <form action="{{ url_for('forgot_password', company_short_name=company_short_name) }}" method="post">
+                            <div class="mb-3">
+                                <label for="email" class="form-label text-secondary">Correo Electrónico</label>
+                                <input type="email" id="email" name="email"
+                                       class="form-control"
+                                       required value="{{ form_data.email if form_data else '' }}">
+                            </div>
 
-            <!-- Mensaje descriptivo -->
-            <p class="text-muted text-start mt-3" style="text-align: justify;">
-                Recibirás un correo con una nueva contraseña temporal junto con un código de seguridad.
-                Usa este código para cambiar tu contraseña de forma segura y mantener tu cuenta protegida.
-            </p>
+                            <button type="submit" class="btn btn-branded-primary w-100 fw-bold py-2 mt-3">Enviar Enlace</button>
+                        </form>
 
-            <div class="text-center mt-3">
-                <a href="{{ url_for('login', company_short_name=company_short_name) }}" class="text-muted text-decoration-none fw-semibold">Volver al Login</a>
+                        <div class="text-center mt-4 pt-3" style="border-top: 1px solid #e0e0e0;">
+                            <a href="{{ url_for('home', company_short_name=company_short_name) }}" class="text-muted text-decoration-none fw-semibold">
+                                <i class="bi bi-arrow-left me-1"></i>Volver al inicio
+                            </a>
+                        </div>
+                    </div>
+                </div>
             </div>
-        </form>
-    </div>
-</div>
+        </div>
+    </section>
 {% endblock %}