iatoolkit 0.18.1__py3-none-any.whl → 0.20.0__py3-none-any.whl

iatoolkit/common/routes.py

@@ -13,15 +13,14 @@ import os
 def logout(company_short_name: str):
     SessionManager.clear()
     flash("Has cerrado sesión correctamente", "info")
-    if company_short_name:
-        return redirect(url_for('login', company_short_name=company_short_name))
-    else:
-        return redirect(url_for('home'))
+    return redirect(url_for('index', company_short_name=company_short_name))
 
 
 # this function register all the views
 def register_views(injector, app):
 
+    from iatoolkit.views.index_view import IndexView
+    from iatoolkit.views.init_context_view import InitContextView
     from iatoolkit.views.llmquery_view import LLMQueryView
     from iatoolkit.views.tasks_view import TaskView
     from iatoolkit.views.tasks_review_view import TaskReviewView
@@ -38,11 +37,14 @@ def register_views(injector, app):
     from iatoolkit.views.chat_token_request_view import ChatTokenRequestView
     from iatoolkit.views.download_file_view import DownloadFileView
 
-    app.add_url_rule('/', view_func=HomeView.as_view('home'))
+    # landing page
+    app.add_url_rule('/<company_short_name>', view_func=IndexView.as_view('index'))
+    app.add_url_rule('/<company_short_name>/initiate_external_chat',
+                     view_func=InitContextView.as_view('initiate_external_chat'))
 
     # login for external portals
-    app.add_url_rule('/<company_short_name>/initiate_external_chat',
-                         view_func=InitiateExternalChatView.as_view('initiate_external_chat'))
+    app.add_url_rule('/<company_short_name>/<external_user_id>/init-context',
+                         view_func=InitContextView.as_view('init-context'))
     app.add_url_rule('/<company_short_name>/external_login',
                      view_func=ExternalChatLoginView.as_view('external_login'))
     app.add_url_rule('/auth/chat_token',
@@ -68,6 +70,9 @@ def register_views(injector, app):
     app.add_url_rule('/tasks/review/<int:task_id>', view_func=TaskReviewView.as_view('tasks-review'))
     app.add_url_rule('/load', view_func=FileStoreView.as_view('load'))
 
+    # login testing /login_testing
+    app.add_url_rule('/login_testing', view_func=HomeView.as_view('home'))
+
     app.add_url_rule(
         '/about',  # URL de la ruta
         view_func=lambda: render_template('about.html'))
@@ -99,3 +104,9 @@ def register_views(injector, app):
         except FileNotFoundError:
             abort(404)
 
+    # Redirección opcional: hacer que la raíz '/' vaya a la landing de sample_company
+    @app.route('/')
+    def root_redirect():
+        return redirect(url_for('index', company_short_name='sample_company'))
+
+

iatoolkit/iatoolkit.py

@@ -153,7 +153,6 @@ class IAToolkit:
         except PackageNotFoundError:
             pass
 
-        self.app.wsgi_app = ProxyFix(self.app.wsgi_app, x_proto=1)
 
         self.app.config.update({
             'VERSION': self.version,
@@ -171,6 +170,9 @@ class IAToolkit:
         if parsed_url.scheme == 'https':
             self.app.config['PREFERRED_URL_SCHEME'] = 'https'
 
+        # 2. ProxyFix para no tener problemas con iframes y rutas
+        self.app.wsgi_app = ProxyFix(self.app.wsgi_app, x_proto=1)
+
         # Configuración para tokenizers en desarrollo
         if is_dev:
             os.environ["TOKENIZERS_PARALLELISM"] = "false"
@@ -379,6 +381,7 @@ class IAToolkit:
                 'app_name': 'IAToolkit',
                 'user': SessionManager.get('user'),
                 'user_company': SessionManager.get('company_short_name'),
+                'iatoolkit_base_url': os.environ.get('IATOOLKIT_BASE_URL', ''),
             }
 
     def _get_default_static_folder(self) -> str:

iatoolkit/services/branding_service.py

@@ -71,6 +71,14 @@ class BrandingService:
         if company and company.branding:
             final_branding_values.update(company.branding)
 
+        # Función para convertir HEX a RGB
+        def hex_to_rgb(hex_color):
+            hex_color = hex_color.lstrip('#')
+            return tuple(int(hex_color[i:i + 2], 16) for i in (0, 2, 4))
+
+        primary_rgb = hex_to_rgb(final_branding_values['brand_primary_color'])
+        secondary_rgb = hex_to_rgb(final_branding_values['brand_secondary_color'])
+
         # --- CONSTRUCCIÓN DE ESTILOS Y VARIABLES CSS ---
         header_style = (
             f"background-color: {final_branding_values['header_background_color']}; "
@@ -95,6 +103,8 @@ class BrandingService:
             :root {{
                 --brand-primary-color: {final_branding_values['brand_primary_color']};
                 --brand-secondary-color: {final_branding_values['brand_secondary_color']};
+                --brand-primary-color-rgb: {', '.join(map(str, primary_rgb))};
+                --brand-secondary-color-rgb: {', '.join(map(str, secondary_rgb))};
                 --brand-text-on-primary: {final_branding_values['brand_text_on_primary']};
                 --brand-text-on-secondary: {final_branding_values['brand_text_on_secondary']};
                 --brand-modal-header-bg: {final_branding_values['header_background_color']};

iatoolkit/static/js/chat_history.js

@@ -12,7 +12,7 @@ $(document).ready(function () {
         const queryText = $(this).data('query');
 
         // Copiar el texto al textarea del chat
-        if (queryText) { // Buena práctica: Asegurarse de que el dato no es indefinido
+        if (queryText) {
             $('#question').val(queryText);
             autoResizeTextarea($('#question')[0]);
             $('#send-button').removeClass('disabled');
@@ -92,7 +92,7 @@ $(document).ready(function () {
             }
         });
 
-        // Poblar tabla con un método más seguro
+        // Poblar la tabla
         filteredHistory.forEach((item, index) => {
             const icon = $('<i>').addClass('bi bi-pencil-fill');
 
@@ -100,23 +100,21 @@ $(document).ready(function () {
                 .attr('href', 'javascript:void(0);')
                 .addClass('copy-query-icon')
                 .attr('title', 'Copiar consulta al chat')
-                .data('query', item.query) // Usar .data() es más seguro que un atributo de string
+                .data('query', item.query)
                 .append(icon);
 
             const row = $('<tr>').append(
                 $('<td>').text(index + 1),
                 $('<td>').addClass('date-cell').text(formatDate(item.created_at)),
-                $('<td>').text(item.query), // Usar .text() para evitar inyección de HTML
+                $('<td>').text(item.query),
                 $('<td>').addClass('text-center').append(link)
             );
 
             historyTableBody.append(row);
         });
-
-        // El event handler ya no se adjunta aquí.
     }
 
-    // Función para formatear fecha (sin cambios)
+    // Función para formatear fecha
     function formatDate(dateString) {
         const date = new Date(dateString);
 

iatoolkit/static/js/chat_main.js

@@ -403,7 +403,7 @@ const showSpinner = function () {
             <div class="spinner-border text-primary" role="status" style="width: 1.5rem; height: 1.5rem; margin-right: 15px;">
                 <span class="${accessibilityClass}">Loading...</span>
             </div>
-            <span style="font-weight: bold; font-size: 15px;">Loading...</span>
+            <span style="font-weight: bold; font-size: 15px;">Cargando...</span>
         </div>
     `);
     $('#chat-container').append(spinner).scrollTop($('#chat-container')[0].scrollHeight);

iatoolkit/static/styles/chat_iatoolkit.css

@@ -185,6 +185,11 @@
     box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
 }
 
+/* Aplica el color secundario de la marca al icono de ver archivos */
+#view-files-button i {
+    color: var(--brand-secondary-color, #6c757d);
+}
+
 /* Estilo para mensajes sutiles del sistema (ej. abortado) */
 .system-message {
     color: var(--brand-secondary-color, #6c757d); /* Usa el color secundario o un gris por defecto */

iatoolkit/static/styles/landing_page.css

@@ -0,0 +1,156 @@
+/* static/styles/landing_page.css */
+
+/* --- Configuración General --- */
+body {
+    background-color: #ffffff; /* Cambiado a blanco para que el hero destaque */
+}
+
+/* --- 1. Barra de Navegación Superior --- */
+.landing-navbar {
+    background-color: var(--brand-primary-color, #0d6efd);
+    padding: 1rem 1.5rem;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+
+.landing-navbar .navbar-brand {
+    color: var(--brand-text-on-primary, #FFFFFF);
+    font-weight: 700;
+    font-size: 1.8rem; /* Aumentado el tamaño del texto */
+}
+
+/* --- 2. Sección Principal (Hero) --- */
+.hero-section {
+    padding: 5rem 0; /* <-- ESTA LÍNEA RESTAURA EL ESPACIADO SUPERIOR E INFERIOR */
+    background-color: #f8f9fa; /* Fondo gris claro para la sección principal */
+}
+
+/* Estilos para el texto de la propuesta de valor */
+.value-proposition {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    height: 100%;
+    /* Se ajusta el padding para la nueva posición a la izquierda */
+    padding-left: 2rem;
+}
+
+.value-proposition .hero-title {
+    font-size: 2.8rem;
+    font-weight: 700;
+    line-height: 1.2;
+    color: #212529;
+}
+
+.value-proposition .hero-accelerator {
+    color: var(--brand-primary-color, #0d6efd);
+}
+
+.value-proposition .hero-subtitle {
+    font-size: 1.1rem;
+    color: #6c757d;
+    margin-top: 1.5rem;
+}
+
+/* --- Estilo para el título del widget de login --- */
+.hero-section .bg-light h4 {
+    color: var(--brand-primary-color, #0d6efd);
+}
+
+/* --- Estilo para el texto introductorio del widget --- */
+.widget-intro-text {
+    font-style: italic;
+    font-size: 0.9rem;
+    line-height: 1.4;
+}
+
+
+/* --- 3. Sección de Características --- */
+.features-section {
+    padding: 5rem 0;
+    background-color: #ffffff; /* Fondo blanco para esta sección */
+}
+
+/* (El resto del archivo CSS permanece sin cambios) */
+.feature-item {
+    text-align: center;
+    padding: 2rem;
+    background-color: #f8f9fa; /* Fondo gris claro para cada tarjeta */
+    border: 1px solid #dee2e6;
+    border-radius: 0.5rem;
+    height: 100%; /* CLAVE: Asegura que todas las tarjetas en una fila tengan el mismo alto */
+}
+
+.feature-icon {
+    font-size: 3rem;
+    color: var(--brand-primary-color); /* Usar color primario para más impacto */
+    margin-bottom: 1.5rem;
+    display: inline-block;
+}
+
+.feature-item h3 {
+    font-size: 1.4rem;
+    font-weight: 600;
+    margin-bottom: 1rem;
+}
+
+.feature-item p {
+    color: #6c757d;
+}
+
+.opensource-box {
+    background-color: #343a40;
+    color: #f8f9fa;
+    padding: 2rem;
+    border-radius: 0.5rem;
+    height: 100%; /* CLAVE: Asegura que tenga el mismo alto */
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    text-align: center;
+}
+
+.opensource-icon {
+    font-size: 3rem; /* Tamaño consistente con los otros iconos */
+    color: var(--brand-text-on-primary, #FFFFFF);
+    opacity: 0.9;
+    margin-bottom: 1.5rem;
+}
+
+.opensource-content h3 {
+    font-weight: 600;
+    font-size: 1.4rem; /* Tamaño consistente */
+    margin-bottom: 1rem;
+}
+
+.opensource-content p {
+    margin-bottom: 1.5rem;
+    color: #adb5bd;
+}
+
+.opensource-content .btn {
+    width: 100%;
+}
+
+.pypi-link {
+    margin-top: 1.5rem;
+    padding-top: 1.5rem;
+    border-top: 1px solid #495057;
+    font-size: 0.9rem;
+    color: #ced4da;
+}
+
+.pypi-link code {
+    background-color: #212529;
+    padding: 0.2rem 0.5rem;
+    border-radius: 4px;
+    color: #e83e8c;
+}
+
+/* --- 4. Footer --- */
+.landing-footer {
+    background-color: #343a40;
+    color: #adb5bd;
+    padding: 2rem 0;
+    text-align: center;
+    font-size: 0.9rem;
+}

iatoolkit/templates/_branding_styles.html

@@ -0,0 +1,53 @@
+<!-- templates/_branding_styles.html -->
+<style>
+    {{ branding.css_variables | safe }}
+
+    /* Clases de botón reutilizables basadas en el branding */
+    .btn-branded-primary {
+        background-color: var(--brand-primary-color);
+        color: var(--brand-text-on-primary);
+        border-color: var(--brand-primary-color);
+        transition: all 0.2s ease-in-out;
+    }
+    .btn-branded-primary:hover {
+        color: var(--brand-text-on-primary);
+        box-shadow: inset 0 0 0 200px rgba(0, 0, 0, 0.15);
+    }
+    .btn-branded-secondary {
+        background-color: var(--brand-secondary-color);
+        color: var(--brand-text-on-secondary);
+        border-color: var(--brand-secondary-color);
+        transition: all 0.2s ease-in-out;
+    }
+    .btn-branded-secondary:hover {
+        color: var(--brand-text-on-secondary);
+        box-shadow: inset 0 0 0 200px rgba(0, 0, 0, 0.15);
+    }
+    .form-title {
+        color: var(--brand-primary-color);
+    }
+
+    /* --- ESTILOS CORREGIDOS Y MÁS ESPECÍFICOS PARA SWEETALERT2 --- */
+
+    /* Botón de Confirmar (OK) */
+    .swal2-confirm.custom-confirm-button {
+        background-color: var(--brand-primary-color) !important;
+        color: var(--brand-text-on-primary) !important;
+        border: 1px solid var(--brand-primary-color) !important;
+        box-shadow: none !important;
+    }
+    .swal2-confirm.custom-confirm-button:hover {
+        box-shadow: inset 0 0 0 200px rgba(0, 0, 0, 0.15) !important;
+    }
+
+    /* Botón de Cancelar */
+    .swal2-cancel.custom-cancel-button {
+        background-color: var(--brand-secondary-color) !important;
+        color: var(--brand-text-on-secondary) !important;
+        border: 1px solid var(--brand-secondary-color) !important;
+        box-shadow: none !important;
+    }
+    .swal2-cancel.custom-cancel-button:hover {
+        box-shadow: inset 0 0 0 200px rgba(0, 0, 0, 0.15) !important;
+    }
+</style>

iatoolkit/templates/_login_widget.html

@@ -0,0 +1,42 @@
+<!-- templates/_login_widget.html -->
+<div class="border rounded p-4 shadow-sm bg-light">
+    <!-- 1. Nuevo Encabezado de Marketing -->
+    <div class="text-center mb-4">
+        <h4 class="form-title fw-bold">Acceso a la Plataforma</h4>
+        <!-- Párrafo modificado con nuevo texto y nueva clase CSS -->
+        <p class="text-muted widget-intro-text">
+            Ingresa a la plataforma o regístrate y prueba una demo interactiva con nuestra empresa de ejemplo.
+        </p>
+    </div>
+
+    <!-- 2. Formulario de Inicio de Sesión -->
+    <form id="login-form"
+          action="{{ url_for('initiate_login', company_short_name=company_short_name) }}"
+          method="post">
+      <div class="mb-3">
+        <label for="email" class="form-label d-block text-muted">Correo Electrónico</label>
+        <input type="email" id="email" name="email" class="form-control" required>
+      </div>
+      <div class="mb-3">
+        <label for="password" class="form-label d-block text-muted">Contraseña</label>
+        <input type="password" id="password" name="password"
+               class="form-control" required>
+      </div>
+      <button type="submit" class="btn btn-branded-primary w-100 fw-bold py-2">
+          Ingresar
+      </button>
+    </form>
+
+    <!-- 3. Nueva Sección de Registro más Atractiva -->
+    <div class="mt-4 pt-3 text-center" style="border-top: 1px solid #e0e0e0;">
+        <span class="text-muted small">¿Eres nuevo aquí?</span>
+        <a href="{{ url_for('signup', company_short_name=company_short_name) }}" id="signup-link" class="fw-bold ms-1 text-decoration-none">Crea una cuenta gratis</a>
+    </div>
+
+    <!-- 4. Enlace de Recuperación de Contraseña (más sutil) -->
+    <div class="text-center mt-2">
+      <a href="{{ url_for('forgot_password', company_short_name=company_short_name) }}" class="text-decoration-none text-muted" style="font-size: 0.8rem;">
+        ¿Olvidaste tu contraseña?
+      </a>
+    </div>
+</div>

iatoolkit/templates/_navbar.html

@@ -0,0 +1,9 @@
+<!-- templates/_navbar.html -->
+<nav class="navbar landing-navbar">
+    <div class="container-fluid">
+        <!-- Convertido en un enlace a la landing page de la compañía actual -->
+        <a class="navbar-brand text-decoration-none" href="{{ url_for('index', company_short_name=company_short_name) }}">
+            IAToolkit
+        </a>
+    </div>
+</nav>

iatoolkit/templates/base.html

@@ -14,10 +14,12 @@
     <link rel="stylesheet" href="{{ url_for('static', filename='styles/llm_output.css', _external=True) }}">
 </head>
 <body class="d-flex flex-column p-3" style="min-height: 100vh;">
+
     <main class="d-flex flex-column flex-grow-1">
         {% block content %}{% endblock %}
     </main>
 
+
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
     <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/filepond/dist/filepond.min.js"></script>

iatoolkit/templates/change_password.html

@@ -1,45 +1,64 @@
 {% extends "base.html" %}
 
-{% block title %}Cambiar Contraseña{% endblock %}
+{% block title %}Cambiar Contraseña - {{ company.name }}{% 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>
+    <!-- 1. Incluimos los estilos de branding reutilizables -->
+    {% include '_branding_styles.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>
+    <!-- Enlazamos la hoja de estilos de la landing page para reutilizar estilos -->
+    <link rel="stylesheet" href="{{ iatoolkit_base_url }}/static/styles/landing_page.css">
+
+    <!-- 2. Incluimos la barra de navegación reutilizable -->
+    {% include '_navbar.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="border rounded p-4 p-md-5 shadow-sm bg-light">
+                        <h4 class="form-title fw-bold mb-3 text-center">Crear Nueva Contraseña</h4>
+
+                        <p class="text-muted text-center mb-4">
+                            Estás cambiando la contraseña para <strong>{{ email }}</strong>.
+                        </p>
 
-            <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>
+                        <form action="{{ url_for('change_password', company_short_name=company_short_name, token=token) }}" method="post">
 
-        </form>
-    </div>
-</div>
+                            <!-- CAMPO RESTAURADO: Código Temporal -->
+                            <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>
+
+                            <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('index', 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

@@ -118,8 +118,9 @@
     <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">

iatoolkit/templates/forgot_password.html

@@ -1,33 +1,48 @@
 {% extends "base.html" %}
 
-{% block title %}Recuperar Contraseña{% endblock %}
+{% block title %}Recuperar Contraseña - {{ company.name }}{% 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>
+    <!-- 1. Incluimos los estilos de branding reutilizables -->
+    {% include '_branding_styles.html' %}
+
+    <!-- Enlazamos la hoja de estilos de la landing page para reutilizar estilos -->
+    <link rel="stylesheet" href="{{ iatoolkit_base_url }}/static/styles/landing_page.css">
+
+    <!-- 2. Incluimos la barra de navegación reutilizable -->
+    {% include '_navbar.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="border rounded p-4 p-md-5 shadow-sm bg-light">
+                        <h4 class="form-title fw-bold mb-3 text-center">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('index', 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 %}