first comit

.gitignore

@@ -0,0 +1,7 @@
+venv/
+__pycache__/
+project/__pycache__
+*.pyc
+.env
+project/ninja_cv.ipynb
+project/tmp

project/cv_matcher.py

@@ -0,0 +1,370 @@
+import json
+import traceback
+import numpy as np
+from sentence_transformers import SentenceTransformer
+from sklearn.metrics.pairwise import cosine_similarity
+from gemini_api import GeminiAPI
+import os
+import dotenv
+from dotenv import load_dotenv
+
+# Cargar variables de entorno desde .env
+load_dotenv()
+
+apikey = os.getenv("GEMINI_API_KEY")
+
+# Crear instancia global (o se la pasamos a la clase)
+gemini = GeminiAPI(api_key=apikey)
+
+
+class CVMatcher:
+    def __init__(self, model_name="all-MiniLM-L6-v2"):
+        self.model = SentenceTransformer(model_name)
+        self.cv_data = None
+        self.offer_data = None
+
+    # ----------- 1. Sector -----------
+    def preprocess_sector(self, sector):
+        if isinstance(sector, str):
+            output = sector.lower().strip().replace(",", " and")
+        elif isinstance(sector, list):
+            output = " and ".join([s.lower().strip() for s in sector])
+        else:
+            output = ""
+        return f"principal job sector: {output}"
+
+    def sector_similarity(self, offer_dict, cv_dict):
+        offer_sector = offer_dict.get("sector", "")
+        cv_sector = cv_dict.get("primary_sector", "")
+        
+        if not offer_sector or not cv_sector:
+            return 0.0
+            
+        # Preprocess sectors for better matching
+        offer_sector_processed = self.preprocess_sector(offer_sector)
+        cv_sector_processed = self.preprocess_sector(cv_sector)
+        
+        # If sectors are exactly the same after preprocessing
+        if offer_sector_processed == cv_sector_processed:
+            return 1.0
+            
+        # Calculate semantic similarity
+        try:
+            cv_emb, offer_emb = self.model.encode([cv_sector_processed, offer_sector_processed])
+            sim_score = cosine_similarity([offer_emb], [cv_emb])[0][0]
+            
+            # Add a small boost to the score
+            sim_score = min(1.0, sim_score + 0.1)
+            return sim_score
+            
+        except Exception as e:
+            print(f"Error calculating sector similarity: {e}")
+            return 0.5  # Default similarity in case of error
+
+
+    # ----------- 2. Educación -----------
+    def preprocess_field(self, field):
+        return f"field of study: {field.lower().strip().replace(',', ' and')}"
+
+
+    def education_similarity(self, offer_dict, cv_education):
+        offer_field = self.preprocess_field(offer_dict['education']['field'])
+        cv_field    = self.preprocess_field(cv_education['field'])
+        offer_emb, cv_emb = self.model.encode([offer_field, cv_field])
+        sim_score = cosine_similarity([offer_emb], [cv_emb])[0][0] + 0.05
+        return float(min(1, sim_score))
+
+
+
+    def education_final_score(self, offer_dict, cv_dict):
+        # Get minimum education level from offer and ensure it's a float
+        min_education = float(offer_dict.get('education', {}).get('number', 0))
+        
+        # Get all education entries from CV
+        cv_education = cv_dict.get('education', [])
+        
+        if not cv_education:
+            return 0.0
+            
+        # Find the highest education level in CV, ensuring all are floats
+        highest_cv_edu = max([float(edu.get('number', 0)) for edu in cv_education])
+        
+        # If highest CV education is below minimum required
+        if highest_cv_edu < min_education:
+            return 0.0
+            
+        # Calculate base similarity with the closest matching education
+        best_similarity = float(0)
+        same_level_edu = None
+        
+        for edu in cv_education:
+            edu_level = float(edu.get('number', 0))
+            if edu_level >= min_education:
+                similarity = self.education_similarity(offer_dict, edu)
+                if similarity > best_similarity:
+                    best_similarity = similarity
+                    if edu_level == min_education:
+                        same_level_edu = edu
+        
+        # Calculate addon for higher education
+        higher_education = [edu for edu in cv_education if float(edu.get('number', 0)) > min_education]
+        addon = 0.0
+        
+        for edu in higher_education:
+            edu_level = float(edu.get('number', 0))
+            level_diff = edu_level - min_education
+            similarity = self.education_similarity(offer_dict, edu)
+            addon += 0.1 * level_diff * similarity
+        
+        # Cap the final score at 1.0
+        return min(1.0, best_similarity + addon)
+
+
+    # ----------- 3. Skills -----------
+    def skills_similarity(self, offer_dict, cv_dict, type="technical"):
+        if type == "technical":
+            cv_skills = [s.lower() for s in cv_dict.get("technical_abilities", [])]
+            offer_skills = [s.lower() for s in offer_dict.get("technical_abilities", [])]
+        elif type == "soft":
+            cv_skills = [s.lower() for s in cv_dict.get("soft_skills", [])]
+            offer_skills = [s.lower() for s in offer_dict.get("soft_skills", [])]
+        else:
+            return {}, 0
+
+        if not offer_skills or not cv_skills:
+            return {}, 0
+
+        cv_embeddings = self.model.encode(cv_skills)
+        offer_embeddings = self.model.encode(offer_skills)
+
+        # Calculate similarity for each offer skill against all CV skills
+        skill_similarities = {}
+        for i, offer_skill in enumerate(offer_skills):
+            if offer_skill in cv_skills:
+                # Exact match
+                skill_similarities[offer_skill] = 1.0
+            else:
+                # Semantic similarity
+                sim_scores = cosine_similarity([offer_embeddings[i]], cv_embeddings)[0]
+                max_sim = np.max(sim_scores)
+                skill_similarities[offer_skill] = min(1, max_sim + 0.1)
+
+        avg_similarity = np.mean(list(skill_similarities.values())) if skill_similarities else 0
+        return skill_similarities, avg_similarity
+
+
+    # ----------- 4. Experiencia en el rol -----------
+    def role_similarity(self, offer_role, cv_roles):
+        cv_embeddings    = self.model.encode(cv_roles)
+        offer_embedding  = self.model.encode(offer_role)
+        return cosine_similarity([offer_embedding], cv_embeddings)[0]
+
+    def role_experience_similarity(self, offer_dict, cv_dict):
+        total_experience = 0
+        role_similarities = []
+        
+        # Extract all roles and their years of experience from CV
+        cv_experience = []
+        for experience in cv_dict.get('experience', []):
+            for role in experience.get('roles', []):
+                position = role.get('position', '')
+                years = float(role.get('years', 0))
+                if position and years > 0:
+                    cv_experience.append({
+                        'position': position,
+                        'years': years,
+                        'company': experience.get('company', ''),
+                        'duration': experience.get('duration', '')
+                    })
+        
+        if not cv_experience:
+            return 0, 0, 0, 0
+            
+        # Calculate similarity for each role
+        cv_roles = [exp['position'] for exp in cv_experience]
+        offer_role = offer_dict.get("role", "")
+        
+        if not offer_role:
+            return 0, 0, 0, 0
+            
+        role_similarities = self.role_similarity(offer_role, cv_roles)
+        
+        # Calculate weighted experience
+        weighted_experience = 0
+        for i, exp in enumerate(cv_experience):
+            similarity = role_similarities[i]
+            weighted_experience += similarity * exp['years']
+            
+        # Get min and max experience from offer
+        min_exp = float(offer_dict.get('experience', {}).get('min', 0))
+        max_exp = float(offer_dict.get('experience', {}).get('max', min_exp + 5))  # Default range if max not specified
+        
+        # Calculate experience percentage (capped at 1.0)
+        if min_exp > 0:
+            experience_perc = min(1.0, weighted_experience / min_exp)
+        else:
+            experience_perc = 1.0 if weighted_experience > 0 else 0
+            
+        return min_exp, max_exp, weighted_experience, experience_perc
+
+
+    # ----------- 5. Creación del diccionario -----------
+
+    def final_score(self, offer_path, cv_path):
+        """
+        Calculate final matching scores between an offer and a CV.
+        
+        Args:
+            offer_path (str): Path to the job offer file
+            cv_path (str): Path to the CV file
+            
+        Returns:
+            dict: Dictionary containing all matching scores and details
+        """
+        # Parse the offer and CV
+        offer_dict = gemini.parse_offer(offer_path)
+        cv_dict = gemini.parse_cv(cv_path)
+        
+        # Return the complete matching results
+        return self.create_dict(offer_dict, cv_dict)
+
+
+
+
+    def create_dict(self, offer_dict, cv_dict):
+        # Get technical skills with similarity scores
+        tech_skills_dict, tech_score = self.skills_similarity(offer_dict, cv_dict, "technical")
+        soft_skills_dict, soft_score = self.skills_similarity(offer_dict, cv_dict, "soft")
+        
+        # Process technical skills - check if we should show top/bottom or all
+        tech_skills = {}
+        if tech_skills_dict:
+            sorted_tech = sorted(tech_skills_dict.items(), key=lambda x: x[1], reverse=True)
+            if len(sorted_tech) >= 6:
+                tech_skills = {
+                    'top_matches': [skill for skill, _ in sorted_tech[:3]],
+                    'bottom_matches': [skill for skill, _ in sorted_tech[-3:]]
+                }
+            else:
+                tech_skills = {
+                    'title': 'Technical skills similarity order',
+                    'skills': [skill for skill, _ in sorted_tech]
+                }
+        
+        # Process soft skills - check if we should show top/bottom or all
+        soft_skills = {}
+        if soft_skills_dict:
+            sorted_soft = sorted(soft_skills_dict.items(), key=lambda x: x[1], reverse=True)
+            if len(sorted_soft) >= 6:
+                soft_skills = {
+                    'top_matches': [skill for skill, _ in sorted_soft[:3]],
+                    'bottom_matches': [skill for skill, _ in sorted_soft[-3:]]
+                }
+            else:
+                soft_skills = {
+                    'title': 'Soft skills similarity order',
+                    'skills': [skill for skill, _ in sorted_soft]
+                }
+        
+        # Get role experience details
+        min_exp, max_exp, total_exp, exp_score = self.role_experience_similarity(offer_dict, cv_dict)
+        role = offer_dict.get("role", "")
+        
+        # Get sector information
+        sector_similarity = self.sector_similarity(offer_dict, cv_dict)
+        offer_sector = offer_dict.get("sector", "")
+        cv_sector = cv_dict.get("primary_sector", "")
+        
+        # Get education information
+        education_score = self.education_final_score(offer_dict, cv_dict)
+        min_education       = float(offer_dict.get("education", {}).get("number", 0))
+        min_education_level = offer_dict.get("education", {}).get("min", "No especificado")
+        min_education_field = offer_dict.get("education", {}).get("field", "No especificado")
+        
+        # Find same level education and higher education
+        same_level_education = []
+        higher_education     = []
+        
+        for edu in cv_dict.get("education", []):
+            try:
+                edu_level = float(edu.get("number", 0))
+                if edu_level == min_education:
+                    same_level_education.append(edu)
+                elif edu_level > min_education:
+                    higher_education.append(edu)
+            except (ValueError, TypeError):
+                continue
+        
+        # Prepare education explanation
+        same_level_text = ""
+        if same_level_education:
+            same_level_text = f"The candidate has the same required education level: {same_level_education[0].get('degree', 'Similar level')}"
+        else:
+            same_level_text = "The candidate does not have the same required education level"
+            
+        higher_education_text = ""
+        if higher_education:
+            higher_education_text = ", ".join([edu.get('degree', '') for edu in higher_education])
+        else:
+            higher_education_text = "No higher education"
+        
+        # Format the return dictionary with all the processed information
+        result = {
+            # Scores
+            "technical_skills_score": int(np.round(100 * tech_score, 2)),
+            "soft_skills_score": int(np.round(100 * soft_score, 2)),
+            "role_experience_score": int(np.round(100 * exp_score, 2)),
+            "education_score": int(np.round(100 * education_score, 2)),
+            "sector_score": int(np.round(100 * sector_similarity, 2)),
+            
+            # Detailed information
+            "technical_skills": tech_skills,
+            "soft_skills": soft_skills,
+            
+            # Role experience details
+            "role_experience": {
+                "explanation": f"You have approximately {round(total_exp, 1)} years of experience in roles similar to '{role}'. "
+                              f"The offer is looking for between {min_exp} and {max_exp} years of experience.",
+                "details": {
+                    "role": role,
+                    "min_years": min_exp,
+                    "max_years": max_exp,
+                    "total_experience": round(total_exp, 1)
+                }
+            },
+            
+            # Education details
+            "education": {
+                "explanation": f"The offer requires at least {min_education_level}. {same_level_text}.",
+                "details": {
+                    "minimum_required_level": min_education_level,
+                    "minimum_required_field": min_education_field,
+                    "equivalent_level_cv": same_level_education[0].get('degree', 'Not available') if same_level_education else 'Not available',
+                    "equivalent_field_cv": same_level_education[0].get('field', 'Not available') if same_level_education else 'Not available',
+                    "higher_education_degrees": [edu.get('degree', '') for edu in higher_education],
+                    "higher_education_fields": [edu.get('field', '') for edu in higher_education],
+                    "meets_requirement": education_score >= 0.5
+                }
+            },
+            
+            # Sector information
+            "sector": {
+                "explanation": f"The offer's sector is '{offer_sector}' and your main sector is '{cv_sector}'. "
+                              f"The similarity between both sectors is {round(sector_similarity * 100, 1)}%.",
+                "details": {
+                    "offer_sector": offer_sector,
+                    "cv_sector": cv_sector,
+                    "similarity": round(sector_similarity * 100, 1)
+                }
+            }
+        }
+
+        
+        return result
+
+
+# instanciamos la clase
+matcher = CVMatcher()
+
+    
+

project/gemini_api.py

@@ -0,0 +1,259 @@
+# gemini_api.py
+
+import json
+import pprint
+import re
+from datetime import datetime
+import fitz
+from google.generativeai import GenerativeModel, configure
+
+# === TEMPLATES ===
+CV_TEMPLATE = {
+    "education": [
+        {
+            "degree": str,
+            "number": float,
+            "field": str
+        }
+    ],
+    "experience": [
+        {
+            "company": str,
+            "roles": [
+                {
+                    "position": str,
+                    "years": float
+                }
+            ],
+            "total_years": float
+        }
+    ],
+    "primary_sector": list,
+    "soft_skills": list,
+    "technical_abilities": list
+}
+
+OFFER_TEMPLATE = {
+    "company": str,
+    "education": {
+        "field": str,
+        "number": float,
+        "min": str
+    },
+    "experience": {
+        "max": float,
+        "min": float
+    },
+    "role": str,
+    "sector": str,
+    "soft_skills": list,
+    "technical_abilities": list
+}
+
+# === HELPERS ===
+
+# leer cv
+def read_cv(file_path: str) -> str:
+    doc = fitz.open(file_path)
+    cv = ""
+    for page in doc:
+        # devuelve bloques con coordenadas
+        text = page.get_text("blocks")
+        # Ordenar los bloques por (y, x) → para mantener coherencia de lectura
+        blocks_sorted = sorted(text, key=lambda b: (b[1], b[0]))
+        for b in blocks_sorted:
+            cv += b[4]
+        if len(cv) > 10000:
+            return -1
+        elif len(cv) < 10:
+            return -2
+    return cv
+
+
+# parsear la respuesta de gemini
+def fill_from_template(template, source):
+    """
+    Llena un diccionario siguiendo la estructura y tipos de 'template'
+    usando los valores de 'source' solo si cumplen el tipo esperado.
+    """
+    if isinstance(template, dict):
+        result = {}
+        for key, expected in template.items():
+            if key in source:
+                result[key] = fill_from_template(expected, source[key])
+            else:
+                result[key] = None
+        return result
+
+    elif isinstance(template, list):
+        if not isinstance(source, list):
+            return []
+        if not template:  # lista vacía como plantilla
+            return source if isinstance(source, list) else []
+        return [
+            fill_from_template(template[0], item)
+            for item in source if isinstance(item, dict)
+        ]
+
+    elif isinstance(template, type):
+        if template is float and isinstance(source, (int, float)):
+            return float(source)
+        return source if isinstance(source, template) else None
+
+    return None
+
+
+def clean_and_validate_json(json_str: str) -> dict:
+    """
+    Clean and validate JSON string, fixing common formatting issues.
+    
+    Args:
+        json_str: The JSON string to clean and validate
+        
+    Returns:
+        dict: The parsed and cleaned JSON as a dictionary
+        
+    Raises:
+        json.JSONDecodeError: If the JSON cannot be properly parsed after cleaning
+    """
+    if not json_str or not isinstance(json_str, str):
+        raise ValueError("Input must be a non-empty string")
+    
+    # Remove trailing commas before closing brackets/braces
+    json_str = re.sub(r',\s*([}\]])', r'\1', json_str)
+    
+    # Fix unescaped quotes within strings
+    json_str = re.sub(r'(?<!\\)"(.*?)(?<!\\)"', 
+                     lambda m: '"' + m.group(1).replace('"', '\\"') + '"', 
+                     json_str)
+    
+    # Remove any non-printable characters
+    json_str = ''.join(char for char in json_str if char.isprintable() or char.isspace())
+    
+    # Attempt to parse the cleaned JSON
+    try:
+        return json.loads(json_str)
+    except json.JSONDecodeError as e:
+        # If parsing still fails, try to extract JSON from the string
+        match = re.search(r'({.*})', json_str, re.DOTALL)
+        if match:
+            try:
+                return json.loads(match.group(1))
+            except json.JSONDecodeError:
+                pass
+        raise json.JSONDecodeError("Failed to parse JSON after cleaning attempts", 
+                                 json_str, e.pos) from e
+
+
+
+class GeminiAPI:
+    def __init__(self, api_key: str):
+        self.api_key = api_key
+        configure(api_key=self.api_key)
+        self.model = GenerativeModel(
+            "gemini-2.5-flash",
+            generation_config={
+                "temperature": 0.0,
+                "top_p": 0.9,
+                "top_k": 4,
+                "max_output_tokens": 4096,
+                "response_mime_type": "application/json",
+            },
+        )
+
+
+    def load_prompt(self, filename: str) -> str:
+        with open(filename, "r", encoding="utf-8") as f:
+            return f.read()
+
+    def _call_gemini(self, prompt: str):
+        """Hace la llamada a Gemini y devuelve JSON crudo"""
+        try:
+            # Validar y limpiar el prompt
+            if not isinstance(prompt, str):
+                prompt = str(prompt)
+            
+            # Limpiar caracteres no ASCII del prompt
+            prompt = prompt.encode('ascii', 'ignore').decode('ascii')
+            
+            response = self.model.generate_content(prompt)
+            
+            if not hasattr(response, 'text') or not response.text:
+                return {"error": "La respuesta de la API no contiene texto"}
+                
+            response_text = response.text.strip()
+            
+            # Limpiar caracteres no ASCII de la respuesta
+            response_text = response_text.encode('ascii', 'ignore').decode('ascii')
+            
+            # Extraer JSON de bloques de código markdown
+            if '```json' in response_text:
+                response_text = response_text.split('```json')[1].split('```')[0].strip()
+            elif '```' in response_text:
+                response_text = response_text.split('```')[1].split('```')[0].strip()
+            
+            # Validar y limpiar el JSON
+            try:
+                return clean_and_validate_json(response_text)
+            except json.JSONDecodeError as e:
+                print(f"Error al decodificar JSON: {e}")
+                print(f"Respuesta original: {response_text[:500]}...")  # Mostrar solo los primeros 500 caracteres
+                return {"error": "No se pudo procesar la respuesta de la API"}
+                
+        except Exception as e:
+            error_msg = str(e)
+            print(f"Error en _call_gemini: {error_msg}")
+            
+            # Información adicional para depuración
+            if 'response' in locals():
+                try:
+                    response_text = getattr(response, 'text', 'No hay texto en la respuesta')
+                    print(f"Respuesta cruda: {response_text[:500]}...")  # Mostrar solo los primeros 500 caracteres
+                except Exception as debug_e:
+                    print(f"Error al obtener la respuesta: {debug_e}")
+                    
+            return {"error": f"Error en la comunicación con la API: {error_msg}"}
+
+    def parse_cv(self, cv_path: str) -> dict:
+        """Devuelve CV como diccionario limpio"""
+        cv_text = read_cv(cv_path)
+        prompt = self.load_prompt("./prompts/prompt_cv.txt")
+        now = datetime.now()
+        actual_date = now.strftime("%B, %Y")
+        # añadimos el cv al prompt
+        prompt = prompt.replace("{cv_text}", cv_text)
+        prompt = prompt.replace("{actual_date}", actual_date)
+        raw    = self._call_gemini(prompt)
+        return fill_from_template(CV_TEMPLATE, raw)
+
+    def parse_offer(self, offer_path: str) -> dict:
+        """Devuelve oferta como diccionario limpio"""
+        try:
+            with open(offer_path, 'r', encoding='utf-8') as f:
+                offer_text = f.read().strip()
+                
+            # Clean the offer text - remove any trailing periods that might be in the file
+            offer_text = offer_text.rstrip('.').strip()
+            
+            prompt = self.load_prompt("./prompts/prompt_offer.txt")
+            prompt = prompt.replace("{offer_text}", offer_text)
+            
+            raw = self._call_gemini(prompt)
+            
+            # Clean the response - remove any trailing characters that might break JSON parsing
+            if isinstance(raw, str):
+                raw = raw.strip()
+                # Remove any trailing punctuation that might have been included
+                raw = raw.rstrip('.').strip()
+                
+            result = fill_from_template(OFFER_TEMPLATE, raw)
+            
+            if not result or all(v is None for v in result.values()):
+                print(f"Warning: Empty or invalid response for offer: {offer_path}")
+                
+            return result
+            
+        except Exception as e:
+            print(f"Error parsing offer from {offer_path}: {str(e)}")
+            print(f"Raw response was: {raw if 'raw' in locals() else 'N/A'}")
+            raise

project/main.py

@@ -0,0 +1,140 @@
+import traceback
+import sys
+from fastapi import FastAPI, UploadFile, Form, Request, Response, HTTPException
+from fastapi.staticfiles import StaticFiles
+from fastapi.templating import Jinja2Templates
+from fastapi.responses import HTMLResponse, FileResponse, RedirectResponse, JSONResponse
+from fastapi.middleware.cors import CORSMiddleware
+import os
+import uvicorn
+from pathlib import Path
+import json
+from cv_matcher import matcher  # tu instancia global de CVMatcher
+
+# uvicorn main:app --reload
+
+app = FastAPI()
+
+# Manejador de excepciones global
+@app.exception_handler(Exception)
+async def global_exception_handler(request: Request, exc: Exception):
+    exc_type, exc_value, exc_traceback = sys.exc_info()
+    error_details = {
+        "error": str(exc),
+        "type": exc_type.__name__,
+        "file": exc_traceback.tb_frame.f_code.co_filename,
+        "line": exc_traceback.tb_lineno,
+        "traceback": traceback.format_exc()
+    }
+    print("\n" + "="*50)
+    print("ERROR DETALLADO:")
+    print(json.dumps(error_details, indent=2))
+    print("="*50 + "\n")
+    
+    # Para depuración, devolvemos el error completo
+    return JSONResponse(
+        status_code=500,
+        content={"error": "Error interno del servidor", "details": error_details}
+    )
+
+# Configurar CORS
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],  # En producción, reemplaza con el origen de tu frontend
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+# Configurar directorios
+BASE_DIR = Path(__file__).parent
+TMP_DIR  = Path("/tmp")
+STATIC_DIR = BASE_DIR / "static"
+TEMPLATES_DIR = BASE_DIR / "templates"
+
+# Crear directorios si no existen
+TMP_DIR.mkdir(exist_ok=True)
+STATIC_DIR.mkdir(exist_ok=True)
+TEMPLATES_DIR.mkdir(exist_ok=True)
+
+# Montar archivos estáticos
+app.mount("/static", StaticFiles(directory=str(STATIC_DIR)), name="static")
+templates = Jinja2Templates(directory=str(TEMPLATES_DIR))
+
+# Servir archivo HTML principal
+@app.get("/", response_class=HTMLResponse)
+async def read_root(request: Request):
+    return FileResponse(str(STATIC_DIR / "index.html"))
+
+# Servir archivos estáticos
+@app.get("/{filename}")
+async def get_static(filename: str):
+    if filename == "favicon.ico":
+        return FileResponse(str(STATIC_DIR / "favicon.ico"))
+    return FileResponse(str(STATIC_DIR / filename))
+
+# Redirigir favicon.ico a la ruta estática
+@app.get("/favicon.ico")
+async def favicon():
+    return FileResponse(str(STATIC_DIR / "favicon.ico"))
+
+@app.post("/match_cv/")
+async def match_cv(offer_text: str = Form(...), 
+                   cv_file: UploadFile = None):
+    # Constantes de validación
+    MIN_OFFER_LENGTH = 100
+    MAX_OFFER_LENGTH = 10000
+    MIN_CV_LENGTH = 10
+    
+    # Validar longitud del texto de la oferta
+    offer_length = len(offer_text)
+    if offer_length < MIN_OFFER_LENGTH:
+        return {"error": f"The text of the offer is too short. Minimum required: {MIN_OFFER_LENGTH} characters"}
+    if offer_length > MAX_OFFER_LENGTH:
+        return {"error": f"The text of the offer is too long. Maximum allowed: {MAX_OFFER_LENGTH} characters"}
+    
+    if cv_file is None:
+        return {"error": "No CV file was uploaded"}
+        
+    # Leer el contenido del archivo una sola vez
+    content = await cv_file.read()
+    
+    # Validar tamaño mínimo del CV
+    if len(content) < MIN_CV_LENGTH:
+        return {"error": f"The CV file is too small. Minimum required: {MIN_CV_LENGTH} characters"}
+
+    # Validar tamaño máximo del archivo (5MB)
+    MAX_FILE_SIZE = 5 * 1024 * 1024  # 5MB en bytes
+    if len(content) > MAX_FILE_SIZE:
+        return {"error": "The file is too large. Maximum allowed: 5MB"}
+    
+    # Guardar el contenido para su posterior uso
+    file_content = content
+    await cv_file.seek(0)
+    
+    # Guardar CV temporalmente cambiando el nombre a cv.pdf
+    cv_file.filename = "cv.pdf"
+    cv_path = os.path.join(TMP_DIR, cv_file.filename)
+    with open(cv_path, "wb") as f:
+        f.write(content)
+
+    # Guardar oferta como txt temporal
+    offer_path = os.path.join(TMP_DIR, "offer.txt")
+    with open(offer_path, "w", encoding="utf-8") as f:
+        f.write(offer_text)
+
+    # Calcular similitud usando tu matcher
+    try:
+        scores = matcher.final_score(offer_path, cv_path)
+    except Exception as e:
+        return {"error": str(e)}
+
+    return scores
+
+
+if __name__ == "__main__":
+    import os, uvicorn
+    port = int(os.environ.get("PORT", 8000))
+    # reload
+    uvicorn.reload = True
+    uvicorn.run("main:app", host="0.0.0.0", port=port)

project/prompts/prompt_cv.txt

@@ -0,0 +1,61 @@
+Analiza el siguiente CV.
+
+CV:
+{cv_text}
+
+Tareas:
+
+1. Extrae todas las habilidades técnicas del candidato.
+2. Extrae todas las soft skills relevantes.
+3. Calcula los años de experiencia del candidato por empresa.
+   - Si aparece directamente la antigüedad en años, usa ese valor.
+   - Si aparecen fechas de inicio y fin, resta ambas (fin - inicio).
+   - Si no aparece fecha fin, usa la fecha actual {actual_date} como fin.
+   - Si dentro de una empresa hay varios roles, suma los años de cada rol.
+  Por favor piensa muy bien y toma el tiempo que necesites en hacer esta operación, ya que es muy importante. Formatea todos las fechas al mismo formato si así es más sencillo hacer la operación
+  Sobre todo si la fecha fin no está escrita en el CV, es importante que hagas la resta de la fecha actual {actual_date} - fecha inicio. Siempre hacer la resta año-mes y devolver en años.
+
+4. Identifica el sector o industria principal de la experiencia del candidato.
+5. Extrae los grados de educación del candidato, siguiendo la siguiente jerarquía:
+
+  1. Educación secundaria/bachillerato
+  2. Bootcamp
+  3. Formación profesional
+  4. Grado universitario
+  5. Máster
+  6. Doctorado
+
+  En el json mostrar el texto (degree, en inglés americano) y el numero asociado en otro parámetro "number".
+  Además indica el campo de estudio más relevante.
+
+Devuelve la respuesta en formato JSON en inglés americano y con esta estructura exacta:
+
+{
+  "technical_abilities": [ ... ],
+  "soft_skills": [ ... ],
+  "experience": [
+    {
+      "company": "nombre empresa",
+      "roles": [
+        {"position": "name", "years": X},
+        {"position": "name", "years": Y},
+      ],
+      "total_years": Z (sería X + Y)
+    }
+  ],
+  "primary_sector": [ *incluir máximo 2 sectores* ],
+  "education": [{
+                "degree": X,
+                "number": Y,
+                "field": Z
+                }, 
+                {
+                "degree": X,
+                "number": Y,
+                "field": Z
+                }, ...]
+}
+
+Por favor no alterar el orden de ningún elemento, devolverlo exactamente en este formato.
+No incluyas explicaciones adicionales fuera del JSON. 
+Eliminar ```json y ``` de los extremos de la respuesta.

project/prompts/prompt_offer.txt

@@ -0,0 +1,48 @@
+Analiza la siguiente oferta de trabajo.
+
+Oferta:
+{offer_text}
+
+Tareas:
+
+1. Extrae la compañia de la oferta.
+2. Extrae el sector al que se refiere la oferta.
+3. Extrae todas las habilidades técnicas relevantes.
+4. Extrae la experiencia mínima / máxima requerida
+   - si no hay mínima, establecer la mínima como 0
+   - si no hay máxima, establecer la máxima como mínima
+5. Extrae la educación mínima requerida y en caso de que haya varias opciones, coger la mínima siguiendo el orden:
+  
+  1. Educación secundaria/bachillerato
+  2. Bootcamp
+  3. Formación profesional
+  4. Grado universitario
+  5. Máster
+  6. Doctorado
+
+Si en la oferta está escrito "grado x ó grado y", coger el grado mínimo. Si por el contrario está escrito "grado x y grado y", coger el grado máximo.
+
+  En el json mostrar el texto y el numero asociado en otro parámetro "number".
+  Además indica el campo de estudio más relevante requerido asociado al nivel educativo.
+
+6. Extrae las soft skills
+
+Devuelve la respuesta en formato JSON en inglés americano (el contenido del JSON también debe ser en inglés americano) y con esta estructura exacta:
+{
+  "company": "nombre empresa",
+  "sector": "nombre sector",
+  "role": "nombre rol",
+  "technical_abilities": [ ... ],
+  "experience": {
+    "min": X,
+    "max": Y
+  },
+  "education": {
+    "min": X,
+    "number": Y,
+    "field": Z
+  },
+  "soft_skills": [ ... ]
+}
+
+No incluyas explicaciones adicionales fuera del JSON.

project/static/chart.js

@@ -0,0 +1,190 @@
+function createRadarChart(scores) {
+    const canvas = document.getElementById('radarChart');
+    if (!canvas) {
+        console.error('No se encontró el elemento canvas con id "radarChart"');
+        return;
+    }
+    
+    const ctx = canvas.getContext('2d');
+    if (!ctx) {
+        console.error('No se pudo obtener el contexto 2D del canvas');
+        return;
+    }
+    
+    // Destruir el gráfico anterior si existe
+    if (window.radarChartInstance) {
+        window.radarChartInstance.destroy();
+    }
+    
+    // Definir las categorías que queremos mostrar en el radar
+    const categoriesToShow = [
+        'technical_skills_score',
+        'soft_skills_score',
+        'role_experience_score',
+        'education_score',
+        'sector_score'
+    ];
+
+    // Filtrar y formatear solo las categorías que nos interesan
+    const filteredScores = {};
+    categoriesToShow.forEach(category => {
+        if (scores[category] !== undefined) {
+            filteredScores[category] = scores[category];
+        }
+    });
+
+    // Formatear las etiquetas: quitar 'score', guiones bajos y capitalizar cada palabra
+    const formattedCategories = Object.keys(filteredScores).map(label => {
+        // Eliminar 'score' al final del texto
+        let formatted = label.replace(/score$/i, '');
+        // Reemplazar guiones bajos por espacios
+        formatted = formatted.replace(/_/g, ' ');
+        // Capitalizar la primera letra de cada palabra
+        formatted = formatted.toLowerCase()
+            .split(' ')
+            .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+            .join(' ')
+            .trim();
+        return formatted;
+    });
+    
+    const values = Object.values(filteredScores).map(Number);
+    
+    // Configuración del gráfico
+    const config = {
+        type: 'radar',
+        data: {
+            labels: formattedCategories,
+            datasets: [{
+                label: 'Puntuación',
+                data: values,
+                backgroundColor: 'rgba(67, 97, 238, 0.15)',
+                borderColor: 'rgba(67, 97, 238, 0.8)',
+                borderWidth: 2,
+                borderDash: [5, 5],  // Makes the line dashed: [dash length, gap length]
+                pointBackgroundColor: 'rgba(67, 97, 238, 1)',
+                pointBorderColor: '#fff',
+                pointHoverBackgroundColor: '#fff',
+                pointHoverBorderColor: 'rgba(67, 97, 238, 0.8)',
+                pointRadius: 4,
+                pointHoverRadius: 6
+            }]
+        },
+        options: {
+            responsive: true,
+            maintainAspectRatio: false,
+            elements: {
+                line: {
+                    borderWidth: 2
+                }
+            },
+            plugins: {
+                legend: {
+                    display: false
+                },
+                tooltip: {
+                    titleFont: {
+                        size: 14,
+                        weight: '600'
+                    },
+                    bodyFont: {
+                        size: 13
+                    },
+                    padding: 10
+                }
+            },
+            scales: {
+                r: {
+                    angleLines: {
+                        display: true,
+                        color: 'rgba(0, 0, 0, 0.03)',  // Reduced opacity
+                        lineWidth: 1
+                    },
+                    grid: {
+                        color: 'rgba(0, 0, 0, 0.03)',  // Reduced opacity
+                        circular: true,
+                        borderWidth: 0.5
+                    },
+                    pointLabels: {
+                        color: '#2b2d42',
+                        font: {
+                            size: 16,
+                            weight: '600',
+                            family: '"Segoe UI", Tahoma, Geneva, Verdana, sans-serif'
+                        },
+                        padding: 15
+                    },
+                    // Show only 100% tick
+                    ticks: {
+                        backdropColor: 'transparent',
+                        color: 'rgba(0, 0, 0, 0.5)',
+                        stepSize: 20,
+                        showLabelBackdrop: false,
+                        callback: function(value) {
+                            if (value === 100) return '100%';
+                            return '';
+                        },
+                        z: 1
+                    },
+                    // Grid lines
+                    grid: {
+                        color: 'rgba(0, 0, 0, 0.2)',
+                        circular: true,
+                        lineWidth: 1
+                    },
+                    // Angle lines (spokes)
+                    angleLines: {
+                        display: true,
+                        color: 'rgba(0, 0, 0, 0.2)'
+                    },
+                    // Show point labels (category names)
+                    pointLabels: {
+                        color: '#2b2d42',
+                        font: {
+                            size: 14,
+                            weight: '500'
+                        },
+                        padding: 10
+                    },
+                    // Chart range
+                    beginAtZero: true,
+                    min: 0,
+                    max: 100,
+                    // Remove center label
+                    afterFit: function(scale) {
+                        // This ensures the center label is not shown
+                        scale.drawCenterLabel = function() {};
+                    }
+                }
+            },
+            plugins: {
+                legend: {
+                    display: false
+                },
+                tooltip: {
+                    callbacks: {
+                        label: function(context) {
+                            return context.dataset.label + ': ' + context.raw.toFixed(2) + '%';
+                        }
+                    },
+                    titleFont: {
+                        size: 14,
+                        weight: 'bold'
+                    },
+                    bodyFont: {
+                        size: 13
+                    },
+                    padding: 10,
+                    backgroundColor: 'rgba(0, 0, 0, 0.8)',
+                    titleColor: '#fff',
+                    bodyColor: '#fff',
+                    cornerRadius: 6,
+                    displayColors: false
+                }
+            }
+        }
+    };
+    
+    // Crear el gráfico
+    window.radarChartInstance = new Chart(ctx, config);
+}

project/static/index.html

@@ -0,0 +1,1701 @@
+<!DOCTYPE html>
+<html lang="es">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Comparador de CV</title>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <script src="chart.js"></script>
+    <style>
+        :root {
+            --primary-color: #4361ee;
+            --primary-hover: #3a56d4;
+            --secondary-color: #f8f9fa;
+            --background-color: #f5f7ff;
+            --surface-color: #ffffff;
+            --text-color: #2b2d42;
+            --text-light: #6c757d;
+            --border-color: #dee2e6;
+            --success-color: #4bb543;
+            --error-color: #dc3545;
+            --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+            --border-radius: 8px;
+            --transition: all 0.3s ease;
+        }
+
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        html {
+            overflow-x: hidden;
+            width: 100%;
+        }
+
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            line-height: 1.6;
+            color: var(--text-color);
+            background-color: var(--background-color);
+            padding: 0;
+            margin: 0;
+            min-height: 100vh;
+            transition: var(--transition);
+            width: 100%;
+            overflow-x: hidden;
+        }
+
+        .full-width {
+            width: 100vw;
+            position: relative;
+            left: 50%;
+            right: 50%;
+            margin-left: -50vw;
+            margin-right: -50vw;
+        }
+
+        .app-container {
+            max-width: 100%;
+            width: 100%;
+            margin: 0 auto;
+            min-height: 100vh;
+            display: flex;
+            flex-direction: column;
+            position: relative;
+            overflow-x: hidden;
+        }
+
+        .main-content {
+            flex: 1;
+            max-width: 1200px;
+            width: 90%;
+            margin: 0 auto;
+            padding: 2rem 0;
+            width: 100%;
+        }
+
+        .hero {
+            background: linear-gradient(135deg, #4361ee, #3a0ca3);
+            color: white;
+            padding: 4rem 1rem;
+            text-align: center;
+            position: relative;
+            overflow: hidden;
+            max-width: 100vw;
+            width: 100%;
+            margin: 0 auto;
+        }
+
+        .hero-content {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 0 1rem;
+        }
+
+        .hero::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: radial-gradient(circle at 30% 50%, rgba(255,255,255,0.1) 0%, transparent 50%);
+            pointer-events: none;
+        }
+
+        .hero-content {
+            position: relative;
+            z-index: 1;
+            max-width: 800px;
+            margin: 0 auto;
+        }
+
+        .hero-title {
+            font-size: 3.5rem;
+            font-weight: 700;
+            margin-bottom: 1rem;
+            letter-spacing: -0.5px;
+            line-height: 1.1;
+        }
+
+        .hero-subtitle {
+            font-size: 1.5rem;
+            font-weight: 400;
+            margin-bottom: 2rem;
+            opacity: 0.9;
+        }
+
+        .hero-cta {
+            display: inline-flex;
+            align-items: center;
+            background: rgba(255, 255, 255, 0.15);
+            backdrop-filter: blur(10px);
+            padding: 0.75rem 1.5rem;
+            border-radius: 50px;
+            font-size: 1rem;
+            font-weight: 500;
+        }
+
+        /* Info Section */
+        .info-section {
+            margin-bottom: 4rem;
+        }
+
+        .info-card {
+            background: var(--surface-color);
+            border-radius: var(--border-radius);
+            padding: 2.5rem;
+            box-shadow: var(--shadow);
+        }
+
+        .info-card h2 {
+            text-align: center;
+            font-size: 2rem;
+            margin-bottom: 2.5rem;
+            color: var(--text-color);
+            font-weight: 700;
+        }
+
+        .info-grid {
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            gap: 2rem;
+        }
+
+        .info-item {
+            text-align: center;
+            padding: 1.5rem;
+            border-radius: var(--border-radius);
+            transition: var(--transition);
+            background: rgba(67, 97, 238, 0.05);
+            border: 1px solid rgba(67, 97, 238, 0.1);
+        }
+
+        .info-item:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
+        }
+
+        .info-icon {
+            width: 50px;
+            height: 50px;
+            background: var(--primary-color);
+            color: white;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 1.5rem;
+            font-weight: 700;
+            margin: 0 auto 1rem;
+        }
+
+        .info-item h3 {
+            font-size: 1.25rem;
+            margin-bottom: 0.75rem;
+            color: var(--text-color);
+        }
+
+        .info-item p {
+            color: var(--text-light);
+            line-height: 1.6;
+        }
+
+        /* Divider */
+        .divider {
+            display: flex;
+            align-items: center;
+            text-align: center;
+            margin: 3rem 0;
+            color: #6c757d;
+            font-size: 0.9rem;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+            position: relative;
+        }
+
+        .divider::before,
+        .divider::after {
+            content: '';
+            flex: 1;
+            height: 1px;
+            background: linear-gradient(90deg, transparent, #dee2e6, transparent);
+            border: none;
+            margin: 0;
+            opacity: 0.5;
+        }
+
+        .divider span {
+            padding: 0 1.5rem;
+            position: relative;
+            z-index: 1;
+            color: #6c757d;
+        }
+
+        /* Form Container */
+        .form-container {
+            background: var(--surface-color);
+            border-radius: var(--border-radius);
+            padding: 2.5rem;
+            box-shadow: var(--shadow);
+            margin: 0 auto 3rem;
+            border: 1px solid var(--border-color);
+            max-width: 1200px;
+            width: 90%;
+        }
+
+        .form-actions {
+            margin-top: 2rem;
+            text-align: center;
+        }
+
+        .btn {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            padding: 0.75rem 2rem;
+            border: none;
+            border-radius: 50px;
+            font-size: 1rem;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .btn-primary {
+            background: var(--primary-color);
+            color: white;
+            box-shadow: 0 4px 15px rgba(67, 97, 238, 0.3);
+        }
+
+        .btn-primary:hover {
+            background: var(--primary-hover);
+            transform: translateY(-2px);
+            box-shadow: 0 6px 20px rgba(67, 97, 238, 0.4);
+        }
+
+        .btn-primary:active {
+            transform: translateY(0);
+        }
+
+        .btn .btn-loader {
+            display: none;
+            align-items: center;
+            gap: 0.5rem;
+        }
+
+        .btn.loading .btn-text {
+            display: none;
+        }
+
+        .btn.loading .btn-loader {
+            display: flex;
+        }
+
+        .spinner {
+            width: 18px;
+            height: 18px;
+            border: 3px solid rgba(67, 97, 238, 0.2);
+            border-radius: 50%;
+            border-top-color: var(--primary-color);
+            animation: spin 1s ease-in-out infinite;
+            margin-right: 8px;
+        }
+
+        @keyframes spin {
+            to { transform: rotate(360deg); }
+        }
+
+        /* Footer */
+        .footer {
+            background: var(--surface-color);
+            padding: 3rem 1rem;
+            margin: 0 auto;
+            border-top: 1px solid var(--border-color);
+            max-width: 100vw;
+            width: 100%;
+        }
+
+        .footer-content {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 0 2rem;
+            text-align: center;
+        }
+
+        .footer-logo {
+            font-size: 1.5rem;
+            font-weight: 700;
+            color: var(--primary-color);
+            margin-bottom: 1.5rem;
+        }
+
+        .footer-links {
+            display: flex;
+            justify-content: center;
+            gap: 2rem;
+            margin-bottom: 1.5rem;
+            flex-wrap: wrap;
+        }
+
+        .footer-link {
+            color: var(--text-light);
+            text-decoration: none;
+            transition: color 0.2s ease;
+        }
+
+        .footer-link:hover {
+            color: var(--primary-color);
+        }
+
+        .footer-copyright {
+            color: var(--text-light);
+            font-size: 0.9rem;
+        }
+
+        .badge {
+            background: #fff;
+            color: var(--primary-color);
+            padding: 0.25rem 0.75rem;
+            border-radius: 50px;
+            font-size: 0.8rem;
+            font-weight: 600;
+            margin-right: 1rem;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+        }
+        
+        header::after {
+            content: '';
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            height: 4px;
+            background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
+        }
+
+        h1 {
+            font-size: 2.2rem;
+            margin-bottom: 0.5rem;
+            font-weight: 700;
+        }
+
+        .subtitle {
+            color: rgba(255, 255, 255, 0.9);
+            font-size: 1.1rem;
+            margin-bottom: 1.5rem;
+        }
+
+        .form-container {
+            padding: 2rem;
+        }
+
+        .form-group {
+            margin-bottom: 1.5rem;
+        }
+
+        label {
+            display: block;
+            margin-bottom: 0.5rem;
+            font-weight: 600;
+            color: var(--text-color);
+        }
+
+        textarea {
+            width: 100%;
+            min-height: 150px;
+            padding: 14px;
+            border: 1px solid var(--border-color);
+            border-radius: var(--border-radius);
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            font-size: 1rem;
+            line-height: 1.5;
+            color: var(--text-color);
+            background-color: var(--surface-color);
+            resize: vertical;
+            transition: var(--transition);
+            box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
+        }
+
+        textarea:focus {
+            outline: none;
+            border-color: var(--primary-color);
+            box-shadow: 0 0 0 2px rgba(67, 97, 238, 0.25);
+            background-color: #fff;
+        }
+
+        textarea::placeholder {
+            color: var(--text-light);
+            opacity: 0.8;
+        }
+
+        /* Character counter styles */
+        .character-counter {
+            text-align: right;
+            font-size: 0.8rem;
+            color: #666;
+            margin-top: 0.25rem;
+        }
+
+        .character-counter.warning {
+            color: #e67e22;
+        }
+
+        .character-counter.error {
+            color: #e74c3c;
+            font-weight: bold;
+        }
+
+        .file-input-container {
+            position: relative;
+            margin-top: 0.5rem;
+            border: 2px dashed var(--border-color);
+            border-radius: var(--border-radius);
+            padding: 2rem 1rem;
+            text-align: center;
+            transition: var(--transition);
+            background-color: var(--surface-color);
+        }
+
+        .file-input-container.drag-over {
+            background-color: rgba(67, 97, 238, 0.1);
+            border-color: var(--primary-color);
+        }
+
+        .file-input-container .file-label {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            padding: 1rem;
+        }
+
+        .file-input-container i {
+            font-size: 2rem;
+            margin-bottom: 0.5rem;
+            display: block;
+        }
+
+        .file-input-container .file-input {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            top: 0;
+            left: 0;
+            opacity: 0;
+            cursor: pointer;
+        }
+
+        .file-input {
+            width: 0.1px;
+            height: 0.1px;
+            opacity: 0;
+            position: absolute;
+            z-index: -1;
+        }
+
+        .file-label {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 12px 20px;
+            background-color: rgba(67, 97, 238, 0.05);
+            border: 2px dashed var(--primary-color);
+            border-radius: var(--border-radius);
+            cursor: pointer;
+            transition: var(--transition);
+            text-align: center;
+            color: var(--text-color);
+        }
+
+        .file-label:hover {
+            background-color: rgba(67, 97, 238, 0.1);
+            border-color: var(--primary-hover);
+        }
+
+        .file-label i {
+            margin-right: 8px;
+            color: var(--primary-color);
+            font-size: 1.2em;
+        }
+
+        .file-name {
+            margin-top: 0.5rem;
+            font-size: 0.9rem;
+            color: var(--text-light);
+            font-style: italic;
+            padding: 0.25rem 0.5rem;
+            background: rgba(255, 255, 255, 0.05);
+            border-radius: 4px;
+            display: inline-block;
+        }
+
+        button {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            background-color: var(--primary-color);
+            color: white;
+            border: none;
+            padding: 12px 24px;
+            border-radius: var(--border-radius);
+            font-size: 1rem;
+            font-weight: 600;
+            cursor: pointer;
+            transition: var(--transition);
+            width: 100%;
+        }
+
+        button:hover {
+            background-color: var(--primary-hover);
+            transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+        }
+
+        button:active {
+            transform: translateY(0);
+        }
+
+        button:disabled {
+            background-color: #cccccc;
+            cursor: not-allowed;
+            transform: none;
+            box-shadow: none;
+        }
+
+        button i {
+            margin-right: 8px;
+        }
+        /* Resultados */
+        #result {
+            margin-top: 2rem;
+            display: none;
+            animation: fadeIn 0.5s ease;
+        }
+
+        .results-container {
+            background: var(--surface-color);
+            border-radius: var(--border-radius);
+            box-shadow: var(--shadow);
+            padding: 2rem;
+            margin-top: 2rem;
+            border: 1px solid var(--border-color);
+        }
+
+        .results-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 1.5rem;
+            padding-bottom: 1rem;
+            border-bottom: 1px solid rgba(67, 97, 238, 0.15);
+            position: relative;
+        }
+        
+        .results-header::after {
+            content: '';
+            position: absolute;
+            bottom: -1px;
+            left: 0;
+            width: 100px;
+            height: 2px;
+            background: var(--primary-color);
+        }
+
+        .results-title {
+            font-size: 1.5rem;
+            color: #fff;
+            font-weight: 600;
+            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+            position: relative;
+            padding-left: 15px;
+        }
+        
+        .results-title::before {
+            content: '';
+            position: absolute;
+            left: 0;
+            top: 50%;
+            transform: translateY(-50%);
+            width: 4px;
+            height: 24px;
+            background: var(--primary-color);
+            border-radius: 2px;
+        }
+
+        .chart-container {
+            position: relative;
+            width: 100%;
+            height: 500px;
+            margin: 2rem 0;
+        }
+
+        #radarChart {
+            width: 100% !important;
+            height: 100% !important;
+        }
+
+        .scores-container {
+            margin-top: 2rem;
+            width: 100%;
+        }
+        
+        .scores-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+            gap: 1.5rem;
+            margin-top: 1.5rem;
+        }
+        
+        @media (max-width: 768px) {
+            .scores-grid {
+                grid-template-columns: 1fr;
+            }
+        }
+
+        .scores-list ul {
+            list-style: none;
+            padding: 0;
+            margin: 0;
+            display: flex;
+            flex-direction: column;
+            gap: 1rem;
+            width: 100%;
+        }
+
+        .scores-list li {
+            background: var(--secondary-color);
+            padding: 1rem;
+            border-radius: var(--border-radius);
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            font-size: 0.95rem;
+        }
+
+        .score-value {
+            font-weight: 700;
+            color: var(--primary-color);
+            background: rgba(67, 97, 238, 0.1);
+            padding: 0.25rem 0.75rem;
+            border-radius: 20px;
+            font-size: 0.9rem;
+        }
+
+        /* Loading */
+        .loading {
+            text-align: center;
+            display: none;
+            margin: 2rem 0;
+            padding: 2rem;
+            background: rgba(67, 97, 238, 0.1);
+            border-radius: var(--border-radius);
+            border: 1px dashed rgba(67, 97, 238, 0.3);
+        }
+
+        .spinner {
+            border: 4px solid rgba(67, 97, 238, 0.1);
+            border-top: 4px solid var(--primary-color);
+            border-radius: 50%;
+            width: 40px;
+            height: 40px;
+            animation: spin 1s linear infinite;
+            margin: 0 auto 1rem;
+            box-shadow: 0 0 10px rgba(67, 97, 238, 0.3);
+        }
+
+        .loading-text {
+            color: var(--text-light);
+            font-size: 1.1rem;
+            margin-top: 1rem;
+            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
+        }
+
+        /* Animaciones */
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(10px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+
+        /* Notificaciones */
+        .notification {
+            position: fixed;
+            bottom: 20px;
+            right: 20px;
+            padding: 15px 25px;
+            border-radius: var(--border-radius);
+            color: white;
+            font-weight: 500;
+            box-shadow: var(--shadow);
+            transform: translateY(100px);
+            opacity: 0;
+            transition: all 0.3s ease;
+            z-index: 1000;
+            max-width: 90%;
+        }
+        
+        .notification.show {
+            transform: translateY(0);
+            opacity: 1;
+        }
+        
+        .notification.success {
+            background-color: var(--success-color);
+        }
+        
+        .notification.error {
+            background-color: var(--error-color);
+        }
+        
+        .notification.info {
+            background-color: var(--primary-color);
+        }
+        
+        /* Barras de progreso */
+        .progress-bar {
+            position: relative;
+            background: #f0f2f5;
+            border-radius: 8px;
+            height: 50px;
+            overflow: hidden;
+            display: flex;
+            align-items: center;
+            padding: 0 20px;
+            border: 1px solid #e1e4e8;
+            transition: all 0.3s ease;
+            width: 100%;
+            box-sizing: border-box;
+            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+        }
+        
+        .progress-bar:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 15px rgba(67, 97, 238, 0.15);
+            border-color: var(--primary-color);
+        }
+        
+        .progress-bar-fill {
+            position: absolute;
+            top: 0;
+            left: 0;
+            height: 100%;
+            background: linear-gradient(90deg, 
+                rgba(67, 97, 238, 0.15), 
+                rgba(67, 97, 238, 0.3));
+            border-radius: 8px 0 0 8px;
+            transition: width 0.7s cubic-bezier(0.4, 0, 0.2, 1);
+            width: 0;
+            box-shadow: 2px 0 10px rgba(67, 97, 238, 0.1);
+        }
+        
+        .score-card {
+            background: var(--surface-color);
+            border-radius: var(--border-radius);
+            box-shadow: var(--shadow);
+            margin-bottom: 1rem;
+            overflow: hidden;
+            transition: all 0.3s ease;
+            opacity: 0;
+            transform: translateY(20px);
+            animation: fadeInUp 0.5s ease forwards;
+        }
+
+        .score-card-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 1rem 1.5rem;
+            cursor: pointer;
+            transition: background-color 0.2s ease;
+        }
+
+        .score-card-header:hover {
+            background-color: rgba(67, 97, 238, 0.05);
+        }
+
+        .score-card-header h3 {
+            margin: 0;
+            font-size: 1.1rem;
+            color: var(--text-color);
+        }
+
+        .score-value {
+            font-weight: 600;
+            color: var(--primary-color);
+            margin: 0 1rem;
+        }
+
+        .toggle-icon {
+            transition: transform 0.3s ease;
+            color: var(--text-light);
+        }
+
+        .score-card.active .toggle-icon {
+            transform: rotate(180deg);
+        }
+
+        .score-card-content {
+            max-height: 0;
+            overflow: hidden;
+            transition: max-height 0.3s ease;
+            padding: 0 1.5rem;
+        }
+
+        .score-card.active .score-card-content {
+            max-height: 500px;
+            padding: 0 1.5rem 1.5rem;
+        }
+
+        .score-details {
+            margin-top: 1rem;
+            padding-top: 1rem;
+            border-top: 1px solid var(--border-color);
+        }
+
+        .progress-text {
+            position: relative;
+            z-index: 1;
+            font-weight: 600;
+            color: var(--text-color);
+            font-size: 0.95rem;
+            flex: 1;
+            text-transform: capitalize;
+            letter-spacing: 0.3px;
+        }
+        
+        .progress-value {
+            position: relative;
+            font-weight: 700;
+            color: #fff;
+            background: linear-gradient(45deg, var(--primary-color), #5a7aff);
+            padding: 5px 12px;
+            border-radius: 15px;
+            font-size: 0.95rem;
+            z-index: 1;
+            margin-left: 10px;
+            border: 1px solid rgba(255, 255, 255, 0.3);
+            min-width: 70px;
+            text-align: center;
+            box-shadow: 0 2px 8px rgba(67, 97, 238, 0.2);
+        }
+        
+        /* Responsive */
+        /* Responsive */
+        @media (max-width: 992px) {
+            .info-grid {
+                grid-template-columns: 1fr 1fr;
+            }
+        }
+
+        @media (max-width: 768px) {
+            .hero-title {
+                font-size: 2.5rem;
+            }
+
+            .hero-subtitle {
+                font-size: 1.25rem;
+            }
+
+            .info-grid {
+                grid-template-columns: 1fr;
+            }
+
+            .form-container {
+                padding: 1.5rem;
+            }
+            body {
+                padding: 10px;
+            }
+
+            .form-container {
+                padding: 1.5rem;
+            }
+
+            .scores-list ul {
+                grid-template-columns: 1fr;
+            }
+
+            .chart-container {
+                height: 400px;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="app-container">
+        <div class="full-width">
+            <header class="hero">
+                <div class="hero-content">
+                    <h1 class="hero-title">Ninja CV</h1>
+                    <p class="hero-subtitle">Leverage your job search</p>
+                    <div class="hero-cta">
+                        <span>Smart • Fast • Precise</span>
+                    </div>
+                </div>
+            </header>
+        </div>
+
+        <!-- Main Content -->
+        <main class="main-content">
+            <section class="info-section">
+                <div class="info-card">
+                    <h2>How does it work?</h2>
+                    <div class="info-grid">
+                        <div class="info-item">
+                            <div class="info-icon">1</div>
+                            <h3>Paste the offer</h3>
+                            <p>Insert the full text of the job offer you are interested in</p>
+                        </div>
+                        <div class="info-item">
+                            <div class="info-icon">2</div>
+                            <h3>Upload your CV</h3>
+                            <p>Upload your CV in PDF format to analyze it</p>
+                        </div>
+                        <div class="info-item">
+                            <div class="info-icon">3</div>
+                            <h3>Get results</h3>
+                            <p>Receive a detailed analysis of your compatibility with the offer</p>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="divider">
+                    <span>Start analysis</span>
+                </div>
+
+                <div class="form-container">
+                    <form id="cvForm" onsubmit="evaluateCV(); return false;">
+                        <div class="form-group">
+                            <label for="offerText">📋 Offer text</label>
+                            <textarea 
+                                class="form-control" 
+                                id="offerText" 
+                                name="offer_text" 
+                                rows="15" 
+                                maxlength="10000" 
+                                placeholder="Pega aquí el texto de la oferta de empleo..." 
+                                required
+                                oninput="updateCharCount(this)"
+                            ></textarea>
+                            <div class="character-counter" id="charCounter">0/10000 characters</div>
+                        </div>
+                        
+                        <div class="form-group">
+                            <label for="cvFile">📄 Upload your CV (PDF)</label>
+                            <div class="file-input-container" id="dropZone">
+                                <label for="cvFile" class="file-label">
+                                    <i>📤</i>
+                                    <span id="fileName">Click to select or drag & drop your CV here</span>
+                                </label>
+                                <input 
+                                    type="file" 
+                                    id="cvFile" 
+                                    class="file-input" 
+                                    accept=".pdf" 
+                                    onchange="updateFileName()"
+                                    required
+                                >
+                            </div>
+                        </div>
+                        
+                        <div class="form-actions">
+                            <button type="submit" class="btn btn-primary" id="analyzeBtn">
+                                <span class="btn-text">Analyze</span>
+                                <span class="btn-loader" style="display: none;">
+                                    <span class="spinner"></span>
+                                    Analyzing...
+                                </span>
+                    </div>
+                    
+                    <section id="result" class="section" style="display: none;">
+                        <div class="container">
+                            <h2 class="section-title">Results</h2>
+                            <div class="results-container">
+                                <div class="chart-container">
+                                    <canvas id="radarChart"></canvas>
+                                </div>
+                                <div class="scores-container">
+                                    <h3>Score details</h3>
+                                    <div id="scoresList" class="scores-grid">
+                                        <!-- Las tarjetas de puntuación se insertarán aquí dinámicamente -->
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </section>
+                </section>
+            </main>
+
+        <div class="full-width">
+            <footer class="footer">
+                <div class="footer-content">
+                    <div class="footer-logo">Ninja CV</div>
+                    <div class="footer-copyright">
+                        &copy; 2025 Ninja CV. All rights reserved.
+                    </div>
+                </div>
+            </footer>
+        </div>
+    </div>
+
+    <script>
+        // Función para actualizar el nombre del archivo seleccionado
+        function updateFileName() {
+            const fileInput = document.getElementById('cvFile');
+            const fileNameDisplay = document.getElementById('fileName');
+            const file = fileInput.files[0];
+            fileNameDisplay.textContent = file ? file.name : 'Click to select or drag & drop your CV here';
+        }
+
+        // Drag and Drop functionality
+        document.addEventListener('DOMContentLoaded', function() {
+            const dropZone = document.getElementById('dropZone');
+            const fileInput = document.getElementById('cvFile');
+
+            // Prevent default drag behaviors
+            ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
+                dropZone.addEventListener(eventName, preventDefaults, false);
+                document.body.addEventListener(eventName, preventDefaults, false);
+            });
+
+            // Highlight drop zone when item is dragged over it
+            ['dragenter', 'dragover'].forEach(eventName => {
+                dropZone.addEventListener(eventName, highlight, false);
+            });
+
+            ['dragleave', 'drop'].forEach(eventName => {
+                dropZone.addEventListener(eventName, unhighlight, false);
+            });
+
+            // Handle dropped files
+            dropZone.addEventListener('drop', handleDrop, false);
+            
+            // File input change handler
+            fileInput.addEventListener('change', function(e) {
+                const file = this.files[0];
+                if (file) {
+                    const maxSize = 5 * 1024 * 1024; // 5MB in bytes
+                    if (file.size > maxSize) {
+                        showNotification('File size must be less than 5MB', 'error');
+                        this.value = ''; // Clear the input
+                        updateFileName();
+                    } else {
+                        updateFileName();
+                    }
+                }
+            });
+
+            function preventDefaults(e) {
+                e.preventDefault();
+                e.stopPropagation();
+            }
+
+            function highlight() {
+                dropZone.classList.add('drag-over');
+            }
+
+            function unhighlight() {
+                dropZone.classList.remove('drag-over');
+            }
+
+            function handleDrop(e) {
+                const dt = e.dataTransfer;
+                const files = dt.files;
+                
+                if (files.length) {
+                    const file = files[0];
+                    // Check file type
+                    if (file.type !== 'application/pdf') {
+                        showNotification('Please upload a valid PDF file', 'error');
+                        return;
+                    }
+                    
+                    // Check file size (5MB max)
+                    const maxSize = 5 * 1024 * 1024; // 5MB in bytes
+                    if (file.size > maxSize) {
+                        showNotification('File size must be less than 5MB', 'error');
+                        return;
+                    }
+                    
+                    fileInput.files = files;
+                    updateFileName();
+                }
+            }
+            
+        });
+
+        // Función para actualizar el contador de caracteres
+        function updateCharCount(textarea) {
+            const charCount = textarea.value.length;
+            const maxLength = textarea.maxLength;
+            const minLength = 100; // Mínimo de caracteres
+            const counter = document.getElementById('charCounter');
+            
+            counter.textContent = `${charCount}/${maxLength} characters`;
+            
+            // Cambiar estilos según el número de caracteres
+            counter.className = 'character-counter';
+            
+            if (charCount === 0) {
+                counter.textContent = `At least ${minLength} characters`;
+                counter.classList.add('error');
+            } else if (charCount < minLength) {
+                counter.textContent = `${charCount}/${minLength} characters`;
+                counter.classList.add('error');
+            } else {
+                const percentage = (charCount / maxLength) * 100;
+                if (percentage > 90) {
+                    counter.classList.add('error');
+                } else if (percentage > 75) {
+                    counter.classList.add('warning');
+                }
+            }
+        }
+        
+        // Inicializar contador al cargar la página
+        document.addEventListener('DOMContentLoaded', function() {
+            const textarea = document.getElementById('offerText');
+            if (textarea) {
+                updateCharCount(textarea);
+            }
+        });
+
+        // Función para mostrar notificación
+        function showNotification(message, type = 'info') {
+            const notification = document.createElement('div');
+            notification.className = `notification ${type}`;
+            notification.textContent = message;
+            
+            document.body.appendChild(notification);
+            
+            // Mostrar notificación
+            setTimeout(() => notification.classList.add('show'), 10);
+            
+            // Ocultar después de 5 segundos
+            setTimeout(() => {
+                notification.classList.remove('show');
+                setTimeout(() => notification.remove(), 300);
+            }, 5000);
+        }
+
+        // Function to validate the form
+        function validateForm() {
+            // Validate offer text
+            const offerText = document.getElementById('offerText').value.trim();
+            const MIN_OFFER_LENGTH = 100;
+            const MAX_OFFER_LENGTH = 10000;
+            
+            if (!offerText) {
+                showNotification('Please enter the offer text', 'error');
+                return false;
+            }
+            
+            if (offerText.length < MIN_OFFER_LENGTH) {
+                showNotification(`The offer text is too short. Minimum required: ${MIN_OFFER_LENGTH} characters`, 'error');
+                return false;
+            }
+            
+            if (offerText.length > MAX_OFFER_LENGTH) {
+                showNotification(`The offer text is too long. Maximum allowed: ${MAX_OFFER_LENGTH} characters`, 'error');
+                return false;
+            }
+            
+            // Validate CV file
+            const cvFile = document.getElementById('cvFile').files[0];
+            const MIN_CV_SIZE = 10; // characters
+            const MAX_CV_SIZE = 5 * 1024 * 1024; // 5MB
+            
+            if (!cvFile) {
+                showNotification('Please select a PDF file', 'error');
+                return false;
+            }
+            
+            // Check file type
+            if (cvFile.type !== 'application/pdf') {
+                showNotification('Only PDF files are allowed', 'error');
+                return false;
+            }
+            
+            // Check file size
+            if (cvFile.size < MIN_CV_SIZE) {
+                showNotification(`The CV file is too small. Minimum required: ${MIN_CV_SIZE} characters`, 'error');
+                return false;
+            }
+            
+            if (cvFile.size > MAX_CV_SIZE) {
+                showNotification('The file is too large. Maximum allowed: 5MB', 'error');
+                return false;
+            }
+            
+            return true;
+        }
+
+        async function evaluateCV() {
+            // Validate form before submitting
+            if (!validateForm()) {
+                return;
+            }
+            
+            const form = document.getElementById('cvForm');
+            const formData = new FormData(form);
+            const offerText = document.getElementById('offerText').value;
+            const cvFile = document.getElementById('cvFile').files[0];
+
+            // Get DOM elements
+            const loadingSpinner = document.getElementById('loadingSpinner');
+            const analyzeBtn = document.getElementById('analyzeBtn');
+            const btnText = analyzeBtn?.querySelector('.btn-text');
+            const btnLoader = analyzeBtn?.querySelector('.btn-loader');
+            const resultDiv = document.getElementById('result');
+            const loadingDiv = document.getElementById('loading');
+            
+            // Show loading elements
+            if (loadingSpinner) loadingSpinner.style.display = 'block';
+            if (analyzeBtn) analyzeBtn.disabled = true;
+            if (btnText) btnText.style.display = 'none';
+            if (btnLoader) btnLoader.style.display = 'flex';
+            if (loadingDiv) loadingDiv.style.display = 'block';
+            if (resultDiv) resultDiv.style.display = 'none';
+    
+
+            try {
+                // Deshabilitar botón y mostrar carga
+                analyzeBtn.disabled = true;
+                if (btnText) btnText.style.display = 'none';
+                if (btnLoader) btnLoader.style.display = 'flex';
+                
+                // Mostrar indicador de carga y ocultar resultados anteriores
+                if (loadingDiv) loadingDiv.style.display = 'block';
+                if (resultDiv) resultDiv.style.display = 'none';
+                
+                // Mostrar notificación de inicio
+                showNotification('Analyzing your CV, please wait...', 'info');
+                
+                const formData = new FormData();
+                formData.append('offer_text', offerText);
+                formData.append('cv_file', cvFile);
+                
+                console.log('Sending request to server...');
+                const response = await fetch('http://localhost:8000/match_cv/', {
+                    method: 'POST',
+                    body: formData
+                });
+                
+                console.log('Response received:', response.status, response.statusText);
+                
+                if (!response.ok) {
+                    const errorText = await response.text();
+                    console.error('Error in response:', errorText);
+                    throw new Error(`Error en la solicitud: ${response.status} ${response.statusText}`);
+                }
+                
+                const data = await response.json();
+                console.log('Received data:', data);
+                
+                if (data.error) {
+                    throw new Error(data.error);
+                }
+                
+                // Mostrar resultados con animación
+                setTimeout(() => {
+                    displayResults(data);
+                    showNotification('Analysis completed successfully!', 'success');
+                }, 300);
+                
+            } catch (error) {
+                console.error('Error en evaluateCV:', error);
+                
+                // Mostrar notificación de error
+                const errorMessage = error.message || 'An error occurred while processing the request';
+                showNotification(`Error: ${errorMessage}`, 'error');
+                
+            } finally {
+                // Asegurarse de que el botón se restablezca incluso si hay un error
+                if (analyzeBtn) analyzeBtn.disabled = false;
+                if (btnText) btnText.style.display = 'inline';
+                if (btnLoader) btnLoader.style.display = 'none';
+                if (loadingDiv) loadingDiv.style.display = 'none';
+            }
+        }
+        
+        function formatCategoryName(category) {
+            let formatted = category.replace(/score$/i, '');
+            formatted = formatted.replace(/_/g, ' ');
+            return formatted.toLowerCase()
+                .split(' ')
+                .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+                .join(' ')
+                .trim();
+        }
+
+        function displayResults(scores) {
+            const resultDiv = document.getElementById('result');
+            const scoresList = document.getElementById('scoresList');
+            
+            // Limpiar resultados anteriores
+            scoresList.innerHTML = '';
+            
+            try {
+                // Crear el gráfico de radar
+                createRadarChart(scores);
+                
+                // Definir las categorías que queremos mostrar (mismas que en el radar)
+                const categoriesToShow = [
+                    'technical_skills_score',
+                    'soft_skills_score',
+                    'role_experience_score',
+                    'education_score',
+                    'sector_score'
+                ];
+                
+                // Filtrar y mostrar solo las categorías que nos interesan
+                categoriesToShow.forEach((category, index) => {
+                    if (scores[category] !== undefined) {
+                        const score = scores[category];
+                        const formattedScore = parseFloat(score).toFixed(2);
+                        const percentage = Math.max(5, Math.round(score));
+                        
+                        // Crear tarjeta
+                        const card = document.createElement('div');
+                        card.className = 'score-card';
+                        card.style.animationDelay = `${index * 0.1}s`;
+                        
+                        // Crear encabezado de la tarjeta
+                        const cardHeader = document.createElement('div');
+                        cardHeader.className = 'score-card-header';
+                        
+                        // Título de la categoría
+                        const title = document.createElement('h3');
+                        title.textContent = formatCategoryName(category);
+                        
+                        // Valor del score
+                        const scoreValue = document.createElement('div');
+                        scoreValue.className = 'score-value';
+                        scoreValue.textContent = `${formattedScore}%`;
+                        
+                        // Ícono de toggle
+                        const toggleIcon = document.createElement('span');
+                        toggleIcon.className = 'toggle-icon';
+                        toggleIcon.innerHTML = '▼';
+                        
+                        // Barra de progreso
+                        const progressBar = document.createElement('div');
+                        progressBar.className = 'progress-bar';
+                        
+                        const progressFill = document.createElement('div');
+                        progressFill.className = 'progress-bar-fill';
+                        progressBar.appendChild(progressFill);
+                        
+                        // Contenido expandible
+                        const cardContent = document.createElement('div');
+                        cardContent.className = 'score-card-content';
+                        
+                        // Detalles específicos de cada categoría
+                        const details = document.createElement('div');
+                        details.className = 'score-details';
+                        
+                        // Mostrar habilidades técnicas (top 3 y bottom 3)
+                        if (category === 'technical_skills_score' && scores.technical_skills) {
+                            const skillsContainer = document.createElement('div');
+                            
+                            // Mostrar top 3 habilidades
+                            if (scores.technical_skills.top_matches && scores.technical_skills.top_matches.length > 0) {
+                                const topTitle = document.createElement('h4');
+                                topTitle.textContent = 'Top 3 skills (high similarity):';
+                                topTitle.style.margin = '0.5rem 0';
+                                skillsContainer.appendChild(topTitle);
+                                
+                                const topList = document.createElement('ul');
+                                topList.style.listStyle = 'none';
+                                topList.style.padding = '0';
+                                topList.style.margin = '0.5rem 0 1rem 0';
+                                
+                                scores.technical_skills.top_matches.forEach(skill => {
+                                    if (skill) {
+                                        const li = document.createElement('li');
+                                        li.style.padding = '0.5rem 0';
+                                        li.style.borderBottom = '1px solid var(--border-color)';
+                                        li.textContent = skill;
+                                        topList.appendChild(li);
+                                    }
+                                });
+                                skillsContainer.appendChild(topList);
+                            }
+                            
+                            // Mostrar bottom 3 habilidades si existen
+                            if (scores.technical_skills.bottom_matches && scores.technical_skills.bottom_matches.length > 0) {
+                                const bottomTitle = document.createElement('h4');
+                                bottomTitle.textContent = 'Bottom 3 skills (low similarity):';
+                                bottomTitle.style.margin = '1rem 0 0.5rem 0';
+                                skillsContainer.appendChild(bottomTitle);
+                                
+                                const bottomList = document.createElement('ul');
+                                bottomList.style.listStyle = 'none';
+                                bottomList.style.padding = '0';
+                                bottomList.style.margin = '0.5rem 0';
+                                
+                                scores.technical_skills.bottom_matches.forEach(skill => {
+                                    if (skill) {
+                                        const li = document.createElement('li');
+                                        li.style.padding = '0.5rem 0';
+                                        li.style.borderBottom = '1px solid var(--border-color)';
+                                        li.textContent = skill;
+                                        bottomList.appendChild(li);
+                                    }
+                                });
+                                skillsContainer.appendChild(bottomList);
+                            }
+                            
+                            details.appendChild(skillsContainer);
+                        }
+                        
+                        // Mostrar detalles de educación
+                        if (category === 'education_score' && scores.education) {
+                            const eduDetails = document.createElement('div');
+                            eduDetails.style.marginTop = '1rem';
+                            
+                            // Explicación principal
+                            //if (scores.education.explanation) {
+                            //    const explanation = document.createElement('p');
+                            //    explanation.textContent = scores.education.explanation;
+                            //    explanation.style.margin = '0.5rem 0';
+                            //    eduDetails.appendChild(explanation);
+                            //}
+                            
+                            // Detalles adicionales
+                            if (scores.education.details) {
+                                const detailList = document.createElement('ul');
+                                detailList.style.listStyle = 'none';
+                                detailList.style.padding = '0';
+                                detailList.style.margin = '0.5rem 0';
+                                
+                                const minReqItem = document.createElement('li');
+                                minReqItem.style.padding = '0.5rem 0';
+                                minReqItem.style.borderBottom = '1px solid var(--border-color)';
+                                minReqItem.innerHTML = `<strong>Required education level:</strong> ${scores.education.details.minimum_required_level || 'Not specified'}`;
+                                
+                                const minFieldItem = document.createElement('li');
+                                minFieldItem.style.padding = '0.5rem 0';
+                                minFieldItem.style.borderBottom = '1px solid var(--border-color)';
+                                minFieldItem.innerHTML = `<strong>Required field of study:</strong> ${scores.education.details.minimum_required_field || 'Not specified'}`;
+                                
+                                const candidateLevelItem = document.createElement('li');
+                                candidateLevelItem.style.padding = '0.5rem 0';
+                                candidateLevelItem.style.borderBottom = '1px solid var(--border-color)';
+                                candidateLevelItem.innerHTML = `<strong>Candidate education level:</strong> ${scores.education.details.equivalent_level_cv || 'Not specified'}`;
+                                
+                                const candidateFieldItem = document.createElement('li');
+                                candidateFieldItem.style.padding = '0.5rem 0';
+                                candidateFieldItem.style.borderBottom = '1px solid var(--border-color)';
+                                candidateFieldItem.innerHTML = `<strong>Candidate field of study:</strong> ${scores.education.details.equivalent_field_cv || 'Not specified'}`;
+                                
+                                const higherItem = document.createElement('li');
+                                higherItem.style.padding = '0.5rem 0';
+                                higherItem.style.borderBottom = '1px solid var(--border-color)';
+                                higherItem.innerHTML = `<strong>Higher education:</strong> ${scores.education.details.higher_education_degrees && scores.education.details.higher_education_degrees.length > 0 ? scores.education.details.higher_education_degrees.join(', ') : 'None'}`;
+                                
+                                detailList.appendChild(minReqItem);
+                                detailList.appendChild(minFieldItem);
+                                detailList.appendChild(candidateLevelItem);
+                                detailList.appendChild(candidateFieldItem);
+                                detailList.appendChild(higherItem);
+                                
+                                eduDetails.appendChild(detailList);
+                            }
+                            
+                            details.appendChild(eduDetails);
+                        }
+
+                        
+                        // Mostrar soft skills (formato top/bottom o lista ordenada)
+                        if (category === 'soft_skills_score' && scores.soft_skills) {
+                            const skillsContainer = document.createElement('div');
+                            
+                            if (scores.soft_skills.top_matches) {
+                                // Formato con top y bottom matches
+                                if (scores.soft_skills.top_matches && scores.soft_skills.top_matches.length > 0) {
+                                    const topTitle = document.createElement('h4');
+                                    topTitle.textContent = 'Top 3 skills (high similarity):';
+                                    topTitle.style.margin = '0.5rem 0';
+                                    skillsContainer.appendChild(topTitle);
+                                    
+                                    const topList = document.createElement('ul');
+                                    topList.style.listStyle = 'none';
+                                    topList.style.padding = '0';
+                                    topList.style.margin = '0.5rem 0 1rem 0';
+                                    
+                                    scores.soft_skills.top_matches.forEach(skill => {
+                                        if (skill) {
+                                            const li = document.createElement('li');
+                                            li.style.padding = '0.5rem 0';
+                                            li.style.borderBottom = '1px solid var(--border-color)';
+                                            li.textContent = skill;
+                                            topList.appendChild(li);
+                                        }
+                                    });
+                                    skillsContainer.appendChild(topList);
+                                }
+                                
+                                if (scores.soft_skills.bottom_matches && scores.soft_skills.bottom_matches.length > 0) {
+                                    const bottomTitle = document.createElement('h4');
+                                    bottomTitle.textContent = 'Bottom 3 skills (low similarity):';
+                                    bottomTitle.style.margin = '1rem 0 0.5rem 0';
+                                    skillsContainer.appendChild(bottomTitle);
+                                    
+                                    const bottomList = document.createElement('ul');
+                                    bottomList.style.listStyle = 'none';
+                                    bottomList.style.padding = '0';
+                                    bottomList.style.margin = '0.5rem 0';
+                                    
+                                    scores.soft_skills.bottom_matches.forEach(skill => {
+                                        if (skill) {
+                                            const li = document.createElement('li');
+                                            li.style.padding = '0.5rem 0';
+                                            li.style.borderBottom = '1px solid var(--border-color)';
+                                            li.textContent = skill;
+                                            bottomList.appendChild(li);
+                                        }
+                                    });
+                                    skillsContainer.appendChild(bottomList);
+                                }
+                            } else if (scores.soft_skills.title && scores.soft_skills.skills) {
+                                // Formato con lista ordenada
+                                const title = document.createElement('h4');
+                                title.textContent = scores.soft_skills.title;
+                                title.style.margin = '0.5rem 0';
+                                skillsContainer.appendChild(title);
+                                
+                                const skillsList = document.createElement('ul');
+                                skillsList.style.listStyle = 'none';
+                                skillsList.style.padding = '0';
+                                skillsList.style.margin = '0.5rem 0';
+                                
+                                scores.soft_skills.skills.forEach(skill => {
+                                    if (skill) {
+                                        const li = document.createElement('li');
+                                        li.style.padding = '0.5rem 0';
+                                        li.style.borderBottom = '1px solid var(--border-color)';
+                                        li.textContent = skill;
+                                        skillsList.appendChild(li);
+                                    }
+                                });
+                                skillsContainer.appendChild(skillsList);
+                            }
+                            
+                            details.appendChild(skillsContainer);
+                        }
+                        
+                        // Mostrar detalles de experiencia en el rol
+                        if (category === 'role_experience_score' && scores.role_experience) {
+                            const expDetails = document.createElement('div');
+                            expDetails.style.marginTop = '1rem';
+                            
+                            if (scores.role_experience.explanation) {
+                                const explanation = document.createElement('p');
+                                explanation.textContent = scores.role_experience.explanation;
+                                explanation.style.margin = '0.5rem 0';
+                                expDetails.appendChild(explanation);
+                            }
+                            
+                            details.appendChild(expDetails);
+                        }
+                        
+                        // Mostrar detalles del sector
+                        if (category === 'sector_score' && scores.sector) {
+                            const sectorDetails = document.createElement('div');
+                            sectorDetails.style.marginTop = '1rem';                         
+                            
+                            // Detalles adicionales
+                            if (scores.sector.details) {
+                                const detailList = document.createElement('ul');
+                                detailList.style.listStyle = 'none';
+                                detailList.style.padding = '0';
+                                detailList.style.margin = '0.5rem 0';
+                                
+                                const offerSectorItem = document.createElement('li');
+                                offerSectorItem.style.padding = '0.5rem 0';
+                                offerSectorItem.style.borderBottom = '1px solid var(--border-color)';
+                                offerSectorItem.innerHTML = `<strong>Offer sector:</strong> ${scores.sector.details.offer_sector || 'Not specified'}`;
+                                
+                                const cvSectorItem = document.createElement('li');
+                                cvSectorItem.style.padding = '0.5rem 0';
+                                cvSectorItem.style.borderBottom = '1px solid var(--border-color)';
+                                cvSectorItem.innerHTML = `<strong>CV sector:</strong> ${scores.sector.details.cv_sector || 'Not specified'}`;
+                                
+                                const similarityItem = document.createElement('li');
+                                similarityItem.style.padding = '0.5rem 0';
+                                similarityItem.style.borderBottom = '1px solid var(--border-color)';
+                                similarityItem.innerHTML = `<strong>Similarity:</strong> ${scores.sector.details.similarity || '0'}%`;
+                                
+                                detailList.appendChild(offerSectorItem);
+                                detailList.appendChild(cvSectorItem);
+                                detailList.appendChild(similarityItem);
+                                
+                                sectorDetails.appendChild(detailList);
+                            }
+                            
+                            details.appendChild(sectorDetails);
+                        }
+                        
+                        cardContent.appendChild(details);
+                        
+                        // Construir la estructura
+                        cardHeader.appendChild(title);
+                        cardHeader.appendChild(scoreValue);
+                        cardHeader.appendChild(toggleIcon);
+                        
+                        card.appendChild(cardHeader);
+                        card.appendChild(progressBar);
+                        card.appendChild(cardContent);
+                        
+                        scoresList.appendChild(card);
+                        
+                        // Animar la entrada
+                        setTimeout(() => {
+                            card.style.opacity = '1';
+                            card.style.transform = 'translateY(0)';
+                            
+                            // Animar la barra de progreso
+                            setTimeout(() => {
+                                progressFill.style.width = `${percentage}%`;
+                            }, 50);
+                            
+                            // Toggle para expandir/colapsar
+                            cardHeader.addEventListener('click', () => {
+                                card.classList.toggle('active');
+                            });
+                            
+                        }, 100 * index);
+                    }
+                });
+                
+                // Mostrar resultados con animación
+                resultDiv.style.display = 'block';
+                
+                // Desplazarse suavemente a los resultados
+                setTimeout(() => {
+                    resultDiv.scrollIntoView({ 
+                        behavior: 'smooth',
+                        block: 'start'
+                    });
+                }, 100);
+                
+            } catch (error) {
+                console.error('Error showing results:', error);
+                showNotification('Error showing results', 'error');
+            }
+        }
+    </script>
+</body>
+</html>