From 42e1a76fd10bc1dfe27ca427a459290b89b5debc Mon Sep 17 00:00:00 2001
From: Your Name <javiermengual@live.com>
Date: Mon, 23 Feb 2026 20:23:29 +0100
Subject: [PATCH] Initial commit

---
 README.md            |  60 ++++
 app.py               | 698 +++++++++++++++++++++++++++++++++++++++++++
 requirements.txt     |   2 +
 templates/index.html | 652 ++++++++++++++++++++++++++++++++++++++++
 4 files changed, 1412 insertions(+)
 create mode 100644 README.md
 create mode 100644 app.py
 create mode 100644 requirements.txt
 create mode 100644 templates/index.html

diff --git a/README.md b/README.md
new file mode 100644
index 0000000..c155615
--- /dev/null
+++ b/README.md
@@ -0,0 +1,60 @@
+# PSP Mail – Cliente de correo web
+
+Aplicación web tipo Gmail para gestionar el correo de `javi@psp.es` en el servidor `10.10.0.101`.
+
+## Características
+
+- 📥 **Bandeja de entrada** – Lista de mensajes con paginación (25 por página)
+- ✉️ **Redactar** – Envío de correos con adjuntos, CC, soporte HTML
+- 📖 **Leer mensajes** – Visualización de texto y HTML con iframes seguros
+- 📎 **Adjuntos** – Descarga directa de archivos adjuntos
+- 🔍 **Búsqueda** – Por asunto y remitente en cualquier carpeta
+- 🗂️ **Carpetas IMAP** – INBOX, Enviados, Borradores, Papelera, Spam
+- ⭐ **Destacar** – Marcar mensajes con estrella
+- ✅ **Acciones masivas** – Eliminar/marcar varios mensajes a la vez
+- ↩️ **Responder / Reenviar** – Con historial original incluido
+
+## Requisitos
+
+```bash
+pip install flask imapclient
+```
+
+## Configuración del servidor
+
+En `app.py` (líneas 14-19):
+
+```python
+MAIL_SERVER = '10.10.0.101'
+MAIL_USER   = 'javi@psp.es'
+MAIL_PASS   = '1234'
+SMTP_PORT   = 25
+IMAP_PORT   = 143
+POP_PORT    = 110
+```
+
+## Ejecutar
+
+```bash
+cd mailapp
+python app.py
+```
+
+Abre el navegador en: **http://localhost:5000**
+
+## Notas sobre SSL
+
+Si tu servidor usa SSL/TLS en IMAP (puerto 993) o SMTP (465/587), cambia en `app.py`:
+
+- IMAP con SSL: `imaplib.IMAP4_SSL(MAIL_SERVER, 993)`
+- SMTP con TLS: añade `server.starttls()` antes de `sendmail`
+
+## Estructura del proyecto
+
+```
+mailapp/
+├── app.py              # Backend Flask + lógica IMAP/SMTP
+├── requirements.txt
+└── templates/
+    └── index.html      # Frontend (HTML/CSS/JS - todo en uno)
+```
diff --git a/app.py b/app.py
new file mode 100644
index 0000000..8ad4f50
--- /dev/null
+++ b/app.py
@@ -0,0 +1,698 @@
+# ════════════════════════════════════════════════════════════════════════
+# APLICACIÓN DE CORREO WEB - SERVIDOR FLASK + IMAP + SMTP
+# ════════════════════════════════════════════════════════════════════════
+
+# IMPORTAR LIBRERÍAS NECESARIAS
+import os                          # Para operaciones del sistema
+import email                       # Para procesar mensajes de correo
+import smtplib                     # Para enviar correos
+import imaplib                     # Para recibir/gestionar correos
+import poplib                      # Para descargar correos (alternativa a IMAP)
+import base64                      # Para codificar datos (adjuntos)
+import json                        # Para trabajar con JSON
+from email.mime.multipart import MIMEMultipart  # Para correos con múltiples partes
+from email.mime.text import MIMEText            # Para cuerpo de texto en correos
+from email.mime.base import MIMEBase            # Para adjuntos
+from email import encoders         # Para codificar adjuntos en base64
+from email.header import decode_header # Para decodificar cabeceras especiales
+from datetime import datetime      # Para fecha/hora
+from flask import Flask, render_template, request, jsonify, send_file, session  # Framework web
+import io                          # Para manejar datos en memoria
+
+# ════════════════════════════════════════════════════════════════════════
+# CREAR APLICACIÓN FLASK Y CONFIGURAR PARÁMETROS
+# ════════════════════════════════════════════════════════════════════════
+app = Flask(__name__)  # Crear la aplicación web
+app.secret_key = 'secret_mail_key_2024'  # Clave para encriptar sesiones
+
+# ════════════════════════════════════════════════════════════════════════
+# CONFIGURACIÓN DEL SERVIDOR DE CORREO (PSP)
+# ════════════════════════════════════════════════════════════════════════
+MAIL_SERVER = '10.10.0.101'  # Dirección IP del servidor de correo corporativo
+MAIL_USER   = 'javi@psp.es'  # Email del usuario
+MAIL_PASS   = '1234'          # Contraseña de acceso
+SMTP_PORT   = 25              # Puerto para ENVIAR correos (SMTP)
+IMAP_PORT   = 143             # Puerto para RECIBIR/GESTIONAR correos (IMAP)
+POP_PORT    = 110             # Puerto alternativo para descargar (POP3) - no usado aquí
+
+# ════════════════════════════════════════════════════════════════════════
+# FUNCIONES AUXILIARES (HELPERS)
+# ════════════════════════════════════════════════════════════════════════
+
+def decode_str(s):
+    """
+    Decodificar cabeceras de correo que pueden estar en diferentes codificaciones.
+    Algunos correos tienen asuntos o remitentes en ISO-8859-1, UTF-8, etc.
+    Esta función los convierte todos a texto normal.
+    """
+    if s is None:
+        return ''
+    
+    # Descomponer la cabecera codificada en partes
+    parts = decode_header(s)
+    result = []
+    
+    # Procesar cada parte
+    for part, enc in parts:
+        if isinstance(part, bytes):
+            # Si está en bytes, decodificar usando la codificación detectada
+            result.append(part.decode(enc or 'utf-8', errors='replace'))
+        else:
+            # Si ya es texto, usarlo tal cual
+            result.append(str(part))
+    
+    return ' '.join(result)
+
+
+def get_imap():
+    """
+    CONECTAR CON EL SERVIDOR IMAP
+    Abre una conexión segura con el servidor de correo para leer/gestionar mensajes.
+    Retorna: (conexión, error) - Si hay error, conexión=None
+    """
+    try:
+        # Crear conexión IMAP al servidor
+        M = imaplib.IMAP4(MAIL_SERVER, IMAP_PORT)
+        
+        # Autentificarse con usuario y contraseña
+        M.login(MAIL_USER, MAIL_PASS)
+        
+        # Retornar conexión exitosa y sin error
+        return M, None
+    
+    except Exception as e:
+        # Si hay problema, retornar error
+        return None, str(e)
+
+def parse_email_message(raw):
+    """
+    EXTRAER INFORMACIÓN DEL CORREO COMPLETO
+    Recibe el contenido RAW (sin procesar) del correo completo.
+    Extrae: remitente, destinatario, asunto, cuerpo (texto/HTML), adjuntos, imágenes inline.
+    Retorna: diccionario con toda la información organizada.
+    """
+    
+    # Convertir el contenido RAW en un objeto de mensaje procesable
+    msg = email.message_from_bytes(raw)
+    
+    # Inicializar variables para el contenido
+    body_text = ''      # Texto plano del correo
+    body_html = ''      # Versión HTML del correo
+    attachments = []    # Lista de archivos adjuntos
+
+    def walk(part):
+        """
+        FUNCIÓN INTERNA: Recorrer todas las partes del correo
+        Los correos modernos pueden tener texto, HTML, imágenes, adjuntos, todo mezclado.
+        Esta función recursiva procesa cada parte.
+        """
+        nonlocal body_text, body_html  # Poder modificar variables externas
+        
+        # Obtener el tipo de contenido (image/jpeg, text/plain, application/pdf, etc.)
+        ct = part.get_content_type()
+        
+        # Obtener la disposición (attachment, inline, etc.)
+        cd = str(part.get('Content-Disposition', ''))
+        
+        # Obtener el ID único si es una imagen inline (para mostrarla en el HTML)
+        cid = part.get('Content-ID')
+        if cid:
+            cid = cid.strip('<>')  # Limpiar formato <ID> a ID
+
+        # ══════════════════════════════════════════════════════════════
+        # 1. PROCESAR ADJUNTOS E IMÁGENES INLINE
+        # ══════════════════════════════════════════════════════════════
+        if 'attachment' in cd or part.get_filename() or (cid and ct.startswith('image/')):
+            # Es un archivo adjunto o imagen
+            fn = decode_str(part.get_filename() or 'file')  # Nombre del archivo
+            data = part.get_payload(decode=True)  # Contenido binario del archivo
+            
+            # Guardar en la lista de adjuntos
+            attachments.append({
+                'filename': fn,                                      # Nombre
+                'data': base64.b64encode(data).decode() if data else '',  # Contenido en BASE64
+                'mime': ct,                                          # Tipo (image/jpeg, etc)
+                'size': len(data) if data else 0,                   # Tamaño en bytes
+                'content_id': cid                                   # ID para imágenes inline
+            })
+
+        # ══════════════════════════════════════════════════════════════
+        # 2. PROCESAR CUERPO DE TEXTO PLANO
+        # ══════════════════════════════════════════════════════════════
+        elif ct == 'text/plain' and not body_text:
+            # Es texto plano y aún no hemos capturado uno
+            payload = part.get_payload(decode=True)
+            body_text = payload.decode(part.get_content_charset() or 'utf-8', errors='replace')
+
+        # ══════════════════════════════════════════════════════════════
+        # 3. PROCESAR CUERPO HTML
+        # ══════════════════════════════════════════════════════════════
+        elif ct == 'text/html' and not body_html:
+            # Es HTML y aún no hemos capturado uno
+            payload = part.get_payload(decode=True)
+            body_html = payload.decode(part.get_content_charset() or 'utf-8', errors='replace')
+
+        # ══════════════════════════════════════════════════════════════
+        # 4. RECURSIÓN: Si la parte contiene más partes, procesarlas
+        # ══════════════════════════════════════════════════════════════
+        if part.is_multipart():
+            # Procesar cada sub-parte
+            for p in part.get_payload():
+                walk(p)
+
+    # ══════════════════════════════════════════════════════════════════
+    # EJECUTAR EL PROCESAMIENTO
+    # ══════════════════════════════════════════════════════════════════
+    
+    if msg.is_multipart():
+        # El correo tiene múltiples partes (lo más común)
+        for part in msg.get_payload():
+            walk(part)
+    else:
+        # El correo es simple (solo texto o solo HTML)
+        ct = msg.get_content_type()
+        payload = msg.get_payload(decode=True)
+        text = payload.decode(msg.get_content_charset() or 'utf-8', errors='replace') if payload else ''
+        
+        if ct == 'text/html':
+            body_html = text
+        else:
+            body_text = text
+
+    # ══════════════════════════════════════════════════════════════════
+    # REEMPLAZAR IMÁGENES INLINE (cid:xxx) POR DATA URLs
+    # ══════════════════════════════════════════════════════════════════
+    # Los correos HTML puede referenciar imágenes así: <img src="cid:image123">
+    # Necesitamos convertirlas a data URLs para que se vean en el navegador
+    
+    if body_html and attachments:
+        for att in attachments:
+            if att.get('content_id'):
+                # Encontrar la imagen en los adjuntos
+                cid = att['content_id']
+                # Crear URL de datos: data:image/jpeg;base64,XXXXX...
+                dataurl = f"data:{att['mime']};base64,{att['data']}"
+                
+                # Reemplazar en el HTML (comillas dobles y simples)
+                body_html = body_html.replace(f'src="cid:{cid}"', f'src="{dataurl}"')
+                body_html = body_html.replace(f"src='cid:{cid}'", f"src='{dataurl}'")
+
+    # ══════════════════════════════════════════════════════════════════
+    # RETORNAR TODA LA INFORMACIÓN ORGANIZADA
+    # ══════════════════════════════════════════════════════════════════
+    return {
+        'from':    decode_str(msg.get('From', '')),        # Quién envió
+        'to':      decode_str(msg.get('To', '')),          # A quién fue
+        'subject': decode_str(msg.get('Subject', '(Sin asunto)')),  # Asunto
+        'date':    decode_str(msg.get('Date', '')),        # Cuándo
+        'body_text': body_text,                            # Cuerpo texto plano
+        'body_html': body_html,                            # Cuerpo HTML (con imágenes procesadas)
+        'attachments': attachments,                        # Lista de archivos
+    }
+
+
+# ════════════════════════════════════════════════════════════════════════
+# RUTAS API (Endpoints que el navegador web llamará)
+# Cada @app.route es una URL que responde con JSON
+# ════════════════════════════════════════════════════════════════════════
+
+# ──────────────────────────────────────────────────────────────────────────
+# 1. RUTA PRINCIPAL: Servir la página HTML
+# ──────────────────────────────────────────────────────────────────────────
+@app.route('/')
+def index():
+    """
+    GET / 
+    Cuando el usuario accede a http://localhost:5000/, 
+    servir el archivo HTML (interfaz gráfica).
+    """
+    return render_template('index.html')
+
+
+# ──────────────────────────────────────────────────────────────────────────
+# 2. OBTENER LISTA DE CARPETAS (Inbox, Enviados, Papelera, etc)
+# ──────────────────────────────────────────────────────────────────────────
+@app.route('/api/folders')
+def get_folders():
+    """
+    GET /api/folders
+    Conectar con IMAP y obtener la lista de carpetas del correo.
+    Responde con: {"folders": ["INBOX", "Sent", "Drafts", "Trash", ...]}
+    """
+    M, err = get_imap()  # Conectar
+    if err:
+        return jsonify({'error': err}), 500  # Si hay error, retornar
+    
+    try:
+        # Listar carpetas del servidor
+        _, folders_raw = M.list()
+        folders = []
+        
+        # Procesar cada carpeta (parsear el formato IMAP)
+        for f in folders_raw:
+            parts = f.decode().split('"."')
+            name = parts[-1].strip().strip('"')
+            folders.append(name)
+        
+        M.logout()  # Cerrar conexión
+        return jsonify({'folders': folders})
+    
+    except Exception as e:
+        return jsonify({'error': str(e)}), 500
+
+
+# ──────────────────────────────────────────────────────────────────────────
+# 3. OBTENER LISTA DE MENSAJES CON PAGINACIÓN
+# ──────────────────────────────────────────────────────────────────────────
+@app.route('/api/messages')
+def get_messages():
+    """
+    GET /api/messages?folder=INBOX&page=1&per_page=25
+    
+    Obtener los mensajes de una carpeta, con paginación.
+    Parámetros:
+      - folder: nombre de la carpeta (INBOX, Sent, etc)
+      - page: número de página (por defecto 1)
+      - per_page: cuántos mensajes por página (por defecto 20)
+    
+    Retorna:
+    {
+      "messages": [
+        {"uid": "123", "from": "user@example.com", "subject": "Asunto", "date": "...", "seen": false},
+        ...
+      ],
+      "total": 150,
+      "page": 1,
+      "per_page": 25
+    }
+    """
+    folder  = request.args.get('folder', 'INBOX')  # Carpeta solicitada
+    page    = int(request.args.get('page', 1))      # Número de página
+    per_page = int(request.args.get('per_page', 20))  # Mensajes por página
+
+    M, err = get_imap()
+    if err:
+        return jsonify({'error': err}), 500
+    
+    try:
+        # Seleccionar la carpeta
+        M.select(folder)
+        
+        # Buscar TODOS los mensajes
+        _, data = M.search(None, 'ALL')
+        ids = data[0].split()  # Obtener lista de IDs
+        ids = list(reversed(ids))  # Invertir para mostrar más nuevos primero
+        
+        total = len(ids)  # Total de mensajes en la carpeta
+        
+        # Calcular qué mensajes mostrar (paginación)
+        start = (page - 1) * per_page
+        end   = start + per_page
+        page_ids = ids[start:end]
+
+        messages = []
+        
+        # Procesar cada mensaje de esta página
+        for uid in page_ids:
+            # Obtener solo las cabeceras (más rápido que todo el mensaje)
+            _, header_data = M.fetch(uid, '(BODY.PEEK[HEADER.FIELDS (FROM SUBJECT DATE)])')
+            raw_header = header_data[0][1]
+            msg = email.message_from_bytes(raw_header)
+            
+            # Verificar si el mensaje ya fue leído (flag \Seen)
+            _, flags_data = M.fetch(uid, '(FLAGS)')
+            flags = flags_data[0].decode() if flags_data[0] else ''
+            seen = '\\Seen' in flags
+
+            # Guardar información del mensaje
+            messages.append({
+                'uid':     uid.decode(),
+                'from':    decode_str(msg.get('From', '')),
+                'subject': decode_str(msg.get('Subject', '(Sin asunto)')),
+                'date':    decode_str(msg.get('Date', '')),
+                'seen':    seen,
+            })
+        
+        M.logout()
+        return jsonify({
+            'messages': messages,
+            'total': total,
+            'page': page,
+            'per_page': per_page
+        })
+    
+    except Exception as e:
+        return jsonify({'error': str(e)}), 500
+
+
+# ──────────────────────────────────────────────────────────────────────────
+# 4. OBTENER UN MENSAJE COMPLETO (con cuerpo, adjuntos, etc)
+# ──────────────────────────────────────────────────────────────────────────
+@app.route('/api/message/<uid>')
+def get_message(uid):
+    """
+    GET /api/message/123?folder=INBOX
+    
+    Descargar un correo completo con su contenido, imágenes, adjuntos, etc.
+    También marca el correo como leído (flag \Seen).
+    
+    Retorna el JSON del correo procesado por parse_email_message()
+    """
+    folder = request.args.get('folder', 'INBOX')
+    
+    M, err = get_imap()
+    if err:
+        return jsonify({'error': err}), 500
+    
+    try:
+        M.select(folder)
+        
+        # Descargar el correo completo (RFC822)
+        _, data = M.fetch(uid.encode(), '(RFC822)')
+        raw = data[0][1]
+        
+        # Marcar el correo como leído
+        M.store(uid.encode(), '+FLAGS', '\\Seen')
+        M.logout()
+        
+        # Procesar el correo con la función parse_email_message()
+        parsed = parse_email_message(raw)
+        parsed['uid'] = uid  # Agregar el UID
+        
+        return jsonify(parsed)
+    
+    except Exception as e:
+        return jsonify({'error': str(e)}), 500
+
+
+# ──────────────────────────────────────────────────────────────────────────
+# 5. DESCARGAR UN ADJUNTO ESPECÍFICO
+# ──────────────────────────────────────────────────────────────────────────
+@app.route('/api/attachment/<uid>/<int:idx>')
+def get_attachment(uid, idx):
+    """
+    GET /api/attachment/123/0?folder=INBOX
+    
+    Descargar un archivo adjunto específico.
+    Parámetros:
+      - uid: ID del correo
+      - idx: índice del adjunto (0 = primer adjunto, 1 = segundo, etc)
+      - folder: carpeta donde está el correo
+    
+    Retorna el archivo con su nombre y tipo MIME para descargar.
+    """
+    folder = request.args.get('folder', 'INBOX')
+    
+    M, err = get_imap()
+    if err:
+        return jsonify({'error': err}), 500
+    
+    try:
+        M.select(folder)
+        
+        # Descargar el correo completo
+        _, data = M.fetch(uid.encode(), '(RFC822)')
+        raw = data[0][1]
+        M.logout()
+        
+        # Procesar el correo
+        parsed = parse_email_message(raw)
+        att = parsed['attachments'][idx]  # Obtener el adjunto por índice
+        
+        # Decodificar el contenido de base64 a bytes
+        file_data = base64.b64decode(att['data'])
+        
+        # Enviar el archivo para descargar
+        return send_file(
+            io.BytesIO(file_data),
+            download_name=att['filename'],  # Nombre del archivo
+            as_attachment=True,              # Descargar (no mostrar en navegador)
+            mimetype=att['mime']            # Tipo (image/jpeg, application/pdf, etc)
+        )
+    
+    except Exception as e:
+        return jsonify({'error': str(e)}), 500
+
+
+# ──────────────────────────────────────────────────────────────────────────
+# 6. ENVIAR UN CORREO (con o sin adjuntos)
+# ──────────────────────────────────────────────────────────────────────────
+@app.route('/api/send', methods=['POST'])
+def send_email():
+    """
+    POST /api/send
+    
+    Enviar un correo electrónico con opcionalmente:
+      - cuerpo de texto plano
+      - cuerpo HTML (formato enriquecido)
+      - múltiples archivos adjuntos
+    
+    Parámetros (formulario):
+      - to: dirección de correo destino
+      - subject: asunto del correo
+      - body: contenido del correo
+      - body_type: 'plain' (texto) o 'html' (formato enriquecido)
+      - attachments: lista de archivos (opcional)
+    
+    Usa SMTP para conectarse al servidor y enviar.
+    """
+    data = request.form
+    to_addr  = data.get('to', '')
+    subject  = data.get('subject', '')
+    body     = data.get('body', '')
+    body_type = data.get('body_type', 'plain')
+
+    # Crear estructura MIME del correo
+    msg = MIMEMultipart('alternative' if body_type == 'html' else 'mixed')
+    msg['From']    = MAIL_USER
+    msg['To']      = to_addr
+    msg['Subject'] = subject
+
+    # Agregar el cuerpo del correo (texto HTML o plano)
+    if body_type == 'html':
+        msg.attach(MIMEText(body, 'html', 'utf-8'))
+    else:
+        msg.attach(MIMEText(body, 'plain', 'utf-8'))
+
+    # Procesar adjuntos si los hay
+    files = request.files.getlist('attachments')
+    for f in files:
+        if f.filename:
+            # Crear una parte MIME para el archivo
+            part = MIMEBase('application', 'octet-stream')
+            part.set_payload(f.read())  # Leer contenido del archivo
+            encoders.encode_base64(part)  # Codificar en base64
+            part.add_header('Content-Disposition', f'attachment; filename="{f.filename}"')
+            msg.attach(part)
+
+    # Enviar el correo vía SMTP
+    try:
+        with smtplib.SMTP(MAIL_SERVER, SMTP_PORT, timeout=10) as server:
+            server.sendmail(MAIL_USER, [to_addr], msg.as_string())
+        return jsonify({'ok': True})
+    except Exception as e:
+        return jsonify({'error': str(e)}), 500
+
+
+# ──────────────────────────────────────────────────────────────────────────
+# 7. ELIMINAR UN MENSAJE
+# ──────────────────────────────────────────────────────────────────────────
+@app.route('/api/delete/<uid>', methods=['DELETE'])
+def delete_message(uid):
+    """
+    DELETE /api/delete/123?folder=INBOX
+    
+    Marcar un correo como eliminado en IMAP.
+    Parámetros:
+      - uid: ID del correo a eliminar
+      - folder: carpeta donde está el correo
+    
+    Usa dos comandos IMAP:
+      1. store(..., '+FLAGS', '\\Deleted') - marca con bandera \Deleted
+      2. expunge() - elimina permanentemente los marcados
+    """
+    folder = request.args.get('folder', 'INBOX')
+    M, err = get_imap()
+    if err:
+        return jsonify({'error': err}), 500
+    try:
+        M.select(folder)
+        M.store(uid.encode(), '+FLAGS', '\\Deleted')  # Marcar como eliminado
+        M.expunge()  # Expulsar definitivamente
+        M.logout()
+        return jsonify({'ok': True})
+    except Exception as e:
+        return jsonify({'error': str(e)}), 500
+
+
+# ──────────────────────────────────────────────────────────────────────────
+# 8. MOVER UN MENSAJE A OTRA CARPETA
+# ──────────────────────────────────────────────────────────────────────────
+@app.route('/api/move/<uid>', methods=['POST'])
+def move_message(uid):
+    """
+    POST /api/move/123
+    
+    Copiar un correo a otra carpeta y eliminar del original.
+    Parámetros JSON:
+      - from: carpeta origen (ej. "INBOX")
+      - to: carpeta destino (ej. "Trash")
+    
+    Proceso:
+      1. copy() - copiar el correo a la carpeta destino
+      2. store()+FLAGS - marcar \Deleted en la carpeta origen
+      3. expunge() - eliminar de la carpeta origen
+    """
+    src = request.json.get('from', 'INBOX')
+    dst = request.json.get('to', 'Trash')
+    M, err = get_imap()
+    if err:
+        return jsonify({'error': err}), 500
+    try:
+        M.select(src)
+        M.copy(uid.encode(), dst)  # Copiar a carpeta destino
+        M.store(uid.encode(), '+FLAGS', '\\Deleted')  # Marcar para eliminar
+        M.expunge()  # Eliminar del origen
+        M.logout()
+        return jsonify({'ok': True})
+    except Exception as e:
+        return jsonify({'error': str(e)}), 500
+
+
+# ──────────────────────────────────────────────────────────────────────────
+# 9. BUSCAR MENSAJES
+# ──────────────────────────────────────────────────────────────────────────
+@app.route('/api/search')
+def search_messages():
+    """
+    GET /api/search?q=palabra&folder=INBOX
+    
+    Buscar correos por asunto o remitente.
+    Parámetros:
+      - q: término de búsqueda
+      - folder: carpeta donde buscar
+    
+    Usa el comando IMAP:
+      - (OR SUBJECT "palabra" FROM "palabra")
+    
+    Retorna máximo 50 resultados.
+    """
+    query  = request.args.get('q', '')
+    folder = request.args.get('folder', 'INBOX')
+    M, err = get_imap()
+    if err:
+        return jsonify({'error': err}), 500
+    try:
+        M.select(folder)
+        
+        # Criterio búsqueda: coincida en ASUNTO o REMITENTE
+        criteria = f'(OR SUBJECT "{query}" FROM "{query}")'
+        _, data = M.search(None, criteria)
+        
+        # Obtener máximo 50 resultados, más nuevos primero
+        ids = list(reversed(data[0].split()))[:50]
+        messages = []
+        
+        # Procesar cada resultado encontrado
+        for uid in ids:
+            _, header_data = M.fetch(uid, '(BODY.PEEK[HEADER.FIELDS (FROM SUBJECT DATE)])')
+            raw_header = header_data[0][1]
+            msg = email.message_from_bytes(raw_header)
+            _, flags_data = M.fetch(uid, '(FLAGS)')
+            flags = flags_data[0].decode() if flags_data[0] else ''
+            seen = '\\Seen' in flags
+            
+            messages.append({
+                'uid':     uid.decode(),
+                'from':    decode_str(msg.get('From', '')),
+                'subject': decode_str(msg.get('Subject', '(Sin asunto)')),
+                'date':    decode_str(msg.get('Date', '')),
+                'seen':    seen,
+            })
+        
+        M.logout()
+        return jsonify({'messages': messages, 'total': len(messages)})
+    except Exception as e:
+        return jsonify({'error': str(e)}), 500
+
+
+# ──────────────────────────────────────────────────────────────────────────
+# 10. MARCAR COMO LEÍDO O DESTACAR CON ESTRELLA
+# ──────────────────────────────────────────────────────────────────────────
+@app.route('/api/mark/<uid>', methods=['POST'])
+def mark_message(uid):
+    """
+    POST /api/mark/123?folder=INBOX
+    
+    Marcar o desmarcar un correo como leído, o agregarlo/quitarlo de favoritos.
+    Parámetros JSON:
+      - flag: qué marcar ('seen' = leído, 'flagged' = estrella)
+      - action: 'add' (marcar) o 'remove' (desmarcar)
+    
+    Usa comando IMAP store:
+      - '+FLAGS' para agregar bandera
+      - '-FLAGS' para quitar bandera
+    
+    Banderas IMAP:
+      - \\Seen    : el correo fue leído
+      - \\Flagged : el correo tiene estrella/favorito
+    """
+    folder = request.args.get('folder', 'INBOX')
+    flag   = request.json.get('flag', 'seen')  # 'seen' o 'flagged'
+    action = request.json.get('action', 'add')  # 'add' o 'remove'
+    
+    M, err = get_imap()
+    if err:
+        return jsonify({'error': err}), 500
+    try:
+        M.select(folder)
+        
+        # Convertir flag a bandera IMAP
+        imap_flag = {'seen': '\\Seen', 'flagged': '\\Flagged'}.get(flag, '\\Seen')
+        
+        # Operación: agregar (+FLAGS) o quitar (-FLAGS)
+        op = '+FLAGS' if action == 'add' else '-FLAGS'
+        
+        # Ejecutar en IMAP
+        M.store(uid.encode(), op, imap_flag)
+        M.logout()
+        return jsonify({'ok': True})
+    except Exception as e:
+        return jsonify({'error': str(e)}), 500
+
+
+# ──────────────────────────────────────────────────────────────────────────
+# 11. CREAR UNA NUEVA CARPETA
+# ──────────────────────────────────────────────────────────────────────────
+@app.route('/api/create_folder', methods=['POST'])
+def create_folder():
+    """
+    POST /api/create_folder
+    
+    Crear una carpeta nueva en el servidor IMAP.
+    Parámetro JSON:
+      - name: nombre de la nueva carpeta
+    
+    Usa el comando IMAP create().
+    """
+    name = request.json.get('name', '')
+    M, err = get_imap()
+    if err:
+        return jsonify({'error': err}), 500
+    try:
+        M.create(name)  # Crear la carpeta en el servidor
+        M.logout()
+        return jsonify({'ok': True})
+    except Exception as e:
+        return jsonify({'error': str(e)}), 500
+
+
+# ════════════════════════════════════════════════════════════════════════
+# INICIO DEL SERVIDOR
+# ════════════════════════════════════════════════════════════════════════
+if __name__ == '__main__':
+    # Iniciar el servidor Flask
+    # debug=True: recarga automática al cambiar código
+    # host='0.0.0.0': aceptar conexiones desde cualquier dirección IP
+    # port=5000: puerto donde escuchar
+    app.run(debug=True, host='0.0.0.0', port=5000)
diff --git a/requirements.txt b/requirements.txt
new file mode 100644
index 0000000..b4a5928
--- /dev/null
+++ b/requirements.txt
@@ -0,0 +1,2 @@
+flask>=3.0.0
+imapclient>=3.0.0
diff --git a/templates/index.html b/templates/index.html
new file mode 100644
index 0000000..a71a41b
--- /dev/null
+++ b/templates/index.html
@@ -0,0 +1,652 @@
+<!DOCTYPE html>
+<html lang="es">
+<head>
+<meta charset="UTF-8"/>
+<meta name="viewport" content="width=device-width, initial-scale=1"/>
+<title>PSP Mail</title>
+<link href="https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;600&family=Roboto:wght@300;400;500&display=swap" rel="stylesheet"/>
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"/>
+<style>
+*{box-sizing:border-box;margin:0;padding:0}
+:root{
+  --bg:#f6f8fc;
+  --surface:#fff;
+  --accent:#1a73e8;
+  --accent-hover:#1557b0;
+  --accent-light:#e8f0fe;
+  --red:#d93025;
+  --yellow:#f4b400;
+  --green:#34a853;
+  --text:#202124;
+  --text2:#5f6368;
+  --text3:#444746;
+  --border:#e0e0e0;
+  --border2:#c4c7c5;
+  --hover:#f2f2f2;
+  --selected:#c2dbff;
+  --shadow-sm:0 1px 2px rgba(60,64,67,.3),0 1px 3px 1px rgba(60,64,67,.15);
+  --sidebar-w:256px;
+  --header-h:64px;
+}
+body{font-family:'Roboto',sans-serif;background:var(--bg);color:var(--text);height:100vh;display:flex;flex-direction:column;overflow:hidden;font-size:14px}
+
+/* HEADER */
+.header{display:flex;align-items:center;padding:8px 16px;background:var(--surface);height:var(--header-h);gap:8px;z-index:30;flex-shrink:0;border-bottom:1px solid var(--border)}
+.menu-btn,.icon-btn{width:40px;height:40px;border-radius:50%;border:none;background:none;cursor:pointer;color:var(--text2);font-size:16px;display:flex;align-items:center;justify-content:center;transition:.15s;flex-shrink:0}
+.menu-btn{font-size:18px}
+.menu-btn:hover,.icon-btn:hover{background:var(--hover)}
+.logo{display:flex;align-items:center;gap:4px;width:188px;flex-shrink:0;font-family:'Google Sans',sans-serif;font-size:22px;text-decoration:none;user-select:none;cursor:default}
+.logo .l-p{color:#4285F4}.logo .l-s{color:#EA4335}.logo .l-pp{color:#FBBC05}
+.logo-txt{font-weight:400;color:#5f6368;letter-spacing:-.5px}
+.search-wrap{flex:1;max-width:720px;margin:0 auto;background:#eaf1fb;border-radius:24px;display:flex;align-items:center;padding:0 6px 0 16px;height:46px;transition:.2s}
+.search-wrap:focus-within{background:#fff;box-shadow:var(--shadow-sm)}
+.search-wrap input{border:none;background:transparent;outline:none;width:100%;font-size:16px;color:var(--text);font-family:'Google Sans',sans-serif}
+.search-wrap input::placeholder{color:var(--text2)}
+.s-btn{background:none;border:none;cursor:pointer;width:38px;height:38px;border-radius:50%;color:var(--text2);font-size:15px;display:flex;align-items:center;justify-content:center;transition:.15s;flex-shrink:0}
+.s-btn:hover{background:rgba(60,64,67,.1)}
+.header-right{display:flex;align-items:center;gap:2px;margin-left:4px}
+.avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#4285F4,#34A853);color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Google Sans';font-weight:600;font-size:13px;cursor:pointer;margin-left:6px;flex-shrink:0}
+
+/* LAYOUT */
+.layout{display:flex;flex:1;overflow:hidden}
+
+/* SIDEBAR */
+.sidebar{width:var(--sidebar-w);flex-shrink:0;background:var(--bg);padding:8px 0;overflow-y:auto;overflow-x:hidden;transition:width .2s}
+.compose-btn{display:flex;align-items:center;gap:12px;margin:4px 12px 12px;padding:17px 22px;background:var(--surface);border-radius:24px;box-shadow:0 1px 3px rgba(0,0,0,.2),0 1px 2px rgba(0,0,0,.1);cursor:pointer;font-family:'Google Sans';font-weight:500;font-size:14px;color:#444746;transition:.2s;border:none;width:calc(100% - 24px)}
+.compose-btn:hover{box-shadow:0 2px 8px rgba(0,0,0,.25);background:#fafafa}
+.compose-btn i{font-size:17px;color:var(--text2)}
+.nav-item{display:flex;align-items:center;padding:0 16px 0 26px;height:32px;border-radius:0 16px 16px 0;margin-right:16px;cursor:pointer;font-size:14px;color:#444746;gap:14px;transition:background .1s;position:relative;user-select:none}
+.nav-item:hover{background:#e8eaed}
+.nav-item.active{background:#d3e3fd;font-weight:600;color:#041e49}
+.nav-item .n-icon{font-size:17px;color:var(--text2);width:20px;text-align:center;flex-shrink:0}
+.nav-item.active .n-icon{color:#041e49}
+.nav-item .n-badge{margin-left:auto;font-size:12px;font-weight:600;color:#444746}
+.nav-sep{height:1px;background:var(--border);margin:6px 0}
+.nav-label{padding:8px 16px 4px 26px;font-size:11px;font-weight:600;color:var(--text2);text-transform:uppercase;letter-spacing:.5px}
+
+/* MAIN */
+.main{flex:1;display:flex;flex-direction:column;overflow:hidden;background:var(--bg)}
+.toolbar{display:flex;align-items:center;padding:4px 8px;gap:2px;flex-shrink:0}
+.t-btn{background:none;border:none;cursor:pointer;width:36px;height:36px;border-radius:50%;color:var(--text2);font-size:15px;display:flex;align-items:center;justify-content:center;transition:.15s;flex-shrink:0}
+.t-btn:hover{background:var(--hover)}
+.t-sep{width:1px;height:20px;background:var(--border);margin:0 4px;flex-shrink:0}
+.t-label{font-size:13px;color:var(--text2);white-space:nowrap;padding:0 4px}
+.t-spacer{flex:1}
+
+/* MSG LIST BOX */
+.list-box{flex:1;margin:0 16px 16px;overflow:hidden;border-radius:16px;background:var(--surface);box-shadow:0 1px 2px rgba(60,64,67,.15);display:flex;flex-direction:column}
+.list-scroll{flex:1;overflow-y:auto}
+
+/* MSG ROW */
+.msg-row{display:flex;align-items:center;padding:0 12px;height:50px;cursor:pointer;gap:8px;transition:background .1s;border-bottom:1px solid #f0f0f0;flex-shrink:0}
+.msg-row:last-child{border-bottom:none}
+.msg-row:hover{background:#f5f5f5;box-shadow:inset 1px 0 0 #dadce0, inset -1px 0 0 #dadce0, 0 1px 3px 1px rgba(60,64,67,.12)}
+.msg-row.unread{background:#fff}
+.msg-row.read{background:#f2f6fc}
+.msg-row.selected{background:#e8f0fe}
+.msg-check{width:18px;height:18px;flex-shrink:0;display:flex;align-items:center;opacity:0;transition:opacity .15s}
+.msg-row:hover .msg-check,.msg-row.selected .msg-check{opacity:1}
+.msg-check input[type=checkbox]{cursor:pointer;width:16px;height:16px;accent-color:var(--accent)}
+.msg-star{font-size:15px;cursor:pointer;color:transparent;flex-shrink:0;transition:.15s;-webkit-text-stroke:1.5px #bbb;line-height:1}
+.msg-row:hover .msg-star{-webkit-text-stroke:1.5px #9aa0a6}
+.msg-star.starred{color:var(--yellow);-webkit-text-stroke:1.5px var(--yellow)}
+.msg-av{width:28px;height:28px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-family:'Google Sans';font-weight:500;font-size:12px;color:#fff}
+.msg-from{width:155px;flex-shrink:0;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#444746}
+.msg-row.unread .msg-from{font-weight:700;color:var(--text)}
+.msg-body-col{flex:1;display:flex;align-items:baseline;gap:6px;overflow:hidden;min-width:0}
+.msg-subject{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#444746;flex-shrink:0;max-width:50%}
+.msg-row.unread .msg-subject{color:var(--text);font-weight:500}
+.msg-snippet{font-size:13px;color:#9aa0a6;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
+.msg-snippet::before{content:" — ";color:#c5c5c5}
+.msg-date{font-size:12px;color:var(--text2);flex-shrink:0;min-width:52px;text-align:right}
+.msg-row.unread .msg-date{font-weight:600;color:var(--text)}
+
+/* EMPTY / LOADING */
+.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:80px 20px;color:var(--text2);text-align:center;flex:1}
+.empty-state i{font-size:60px;opacity:.18;color:var(--accent)}
+.empty-state h3{font-family:'Google Sans';font-size:20px;color:var(--text2);font-weight:400}
+.spinner{width:28px;height:28px;border:3px solid #e0e0e0;border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}
+@keyframes spin{to{transform:rotate(360deg)}}
+.loading-wrap{display:flex;align-items:center;justify-content:center;gap:14px;padding:60px;color:var(--text2);font-size:14px}
+
+/* READ VIEW */
+.read-panel{display:none;flex-direction:column;flex:1;overflow:hidden;background:var(--surface);border-radius:16px;margin:0 16px 16px;box-shadow:0 1px 2px rgba(60,64,67,.15)}
+.read-panel.open{display:flex}
+.read-toolbar{display:flex;align-items:center;padding:6px 12px;border-bottom:1px solid var(--border);gap:2px;flex-shrink:0}
+.read-scroll{flex:1;overflow-y:auto;padding:0 24px 32px}
+.read-subject-line{padding:20px 0 16px;font-family:'Google Sans';font-size:24px;font-weight:400;color:var(--text);line-height:1.3}
+.msg-card{border:1px solid var(--border);border-radius:12px;margin-bottom:12px;overflow:hidden}
+.card-head{display:flex;align-items:center;padding:14px 16px;gap:12px;cursor:pointer;background:var(--surface)}
+.card-head:hover{background:#fafafa}
+.card-sender-av{width:36px;height:36px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-family:'Google Sans';font-weight:500;font-size:15px;color:#fff}
+.card-sender-info{flex:1;overflow:hidden}
+.card-sender-name{font-weight:500;font-size:14px;color:var(--text)}
+.card-sender-addr{font-size:12px;color:var(--text2);margin-top:2px}
+.card-time{font-size:12px;color:var(--text2);flex-shrink:0;align-self:flex-start;margin-top:2px}
+.card-acts{display:flex;gap:2px}
+.card-body{padding:4px 16px 20px;font-size:14px;line-height:1.7;color:var(--text)}
+.card-body iframe{width:100%;border:none;min-height:200px;display:block}
+.card-body pre{white-space:pre-wrap;font-family:'Roboto',sans-serif;font-size:14px;line-height:1.6;color:var(--text)}
+.card-atts{border-top:1px solid var(--border);padding:14px 16px;background:#fafafa}
+.att-title{font-size:13px;color:var(--text2);font-weight:500;margin-bottom:10px}
+.att-grid{display:flex;flex-wrap:wrap;gap:8px}
+.att-chip{display:inline-flex;align-items:center;gap:10px;padding:8px 14px;border:1px solid var(--border);border-radius:8px;cursor:pointer;font-size:13px;transition:.15s;text-decoration:none;color:#444746;background:var(--surface)}
+.att-chip:hover{background:var(--hover);border-color:var(--border2)}
+.reply-row{display:flex;gap:10px;padding:16px 0 8px;flex-wrap:wrap}
+.reply-btn{display:inline-flex;align-items:center;gap:8px;padding:8px 22px;border-radius:20px;font-size:14px;font-family:'Google Sans';cursor:pointer;transition:.15s;border:1px solid var(--border2);background:var(--surface);color:#444746}
+.reply-btn:hover{background:var(--hover)}
+
+/* BUTTONS */
+.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 20px;border-radius:4px;font-size:14px;font-family:'Google Sans';cursor:pointer;transition:.15s;border:1px solid var(--border)}
+.btn-primary{background:var(--accent);color:#fff;border-color:var(--accent);border-radius:4px;box-shadow:0 1px 3px rgba(26,115,232,.3)}
+.btn-primary:hover{background:var(--accent-hover);box-shadow:0 2px 6px rgba(26,115,232,.4)}
+.btn-outline{background:var(--surface);color:var(--accent)}
+.btn-outline:hover{background:var(--accent-light)}
+
+/* COMPOSE */
+.compose-modal{position:fixed;bottom:0;right:24px;width:560px;max-height:90vh;background:var(--surface);border-radius:8px 8px 0 0;box-shadow:0 8px 40px rgba(0,0,0,.3),0 2px 12px rgba(0,0,0,.2);display:flex;flex-direction:column;z-index:200;transform:translateY(100%);transition:transform .22s cubic-bezier(.4,0,.2,1)}
+.compose-modal.open{transform:translateY(0)}
+.compose-modal.minimized .compose-fields,.compose-modal.minimized .compose-body-wrap{display:none!important}
+.compose-header{display:flex;align-items:center;padding:10px 16px;background:#404040;color:#fff;border-radius:8px 8px 0 0;cursor:pointer;user-select:none;gap:6px}
+.compose-header h3{flex:1;font-size:14px;font-family:'Google Sans';font-weight:500}
+.c-hbtn{background:none;border:none;color:rgba(255,255,255,.85);cursor:pointer;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;transition:.15s}
+.c-hbtn:hover{background:rgba(255,255,255,.18)}
+.compose-fields{display:flex;flex-direction:column}
+.compose-field{display:flex;align-items:center;padding:6px 16px;border-bottom:1px solid var(--border);gap:8px}
+.compose-field label{font-size:13px;color:var(--text2);min-width:44px;flex-shrink:0}
+.compose-field input{flex:1;border:none;outline:none;font-size:14px;color:var(--text);font-family:'Roboto'}
+.compose-body-wrap{flex:1;display:flex;flex-direction:column;min-height:0}
+.att-preview{display:flex;flex-wrap:wrap;gap:6px;padding:6px 16px 0}
+.att-pill{display:flex;align-items:center;gap:6px;padding:4px 10px;background:var(--accent-light);border-radius:12px;font-size:12px;color:var(--accent)}
+.att-pill button{background:none;border:none;color:var(--accent);cursor:pointer;font-size:11px;padding:0 2px}
+.compose-body{flex:1;padding:12px 16px;border:none;outline:none;font-size:14px;resize:none;font-family:'Roboto';min-height:220px;color:var(--text);line-height:1.6}
+.compose-footer{display:flex;align-items:center;padding:10px 16px;border-top:1px solid var(--border);gap:6px}
+.c-foot-btn{background:none;border:none;cursor:pointer;width:34px;height:34px;border-radius:50%;color:var(--text2);font-size:16px;display:flex;align-items:center;justify-content:center;transition:.15s}
+.c-foot-btn:hover{background:var(--hover)}
+#att-input{display:none}
+
+/* TOAST */
+.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(12px);background:#323232;color:#fff;padding:12px 20px;border-radius:6px;font-size:14px;opacity:0;transition:.3s cubic-bezier(.4,0,.2,1);z-index:400;pointer-events:none;box-shadow:0 4px 12px rgba(0,0,0,.3)}
+.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
+
+/* SCROLLBAR */
+::-webkit-scrollbar{width:7px}::-webkit-scrollbar-track{background:transparent}
+::-webkit-scrollbar-thumb{background:#dadce0;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#bbb}
+
+/* AVATAR PALETTE */
+.av-0{background:#DB4437}.av-1{background:#F4B400}.av-2{background:#0F9D58}
+.av-3{background:#4285F4}.av-4{background:#AB47BC}.av-5{background:#00ACC1}
+.av-6{background:#FF7043}.av-7{background:#5C6BC0}.av-8{background:#26A69A}.av-9{background:#8D6E63}
+
+@media(max-width:900px){
+  :root{--sidebar-w:72px}
+  .nav-item span:not(.n-icon):not(.n-badge){display:none}
+  .nav-item{padding:0;justify-content:center}
+  .compose-btn span{display:none}
+  .compose-btn{padding:18px;justify-content:center}
+  .logo-txt{display:none}
+}
+@media(max-width:600px){
+  .sidebar{display:none}
+  .compose-modal{width:100%;right:0}
+}
+</style>
+</head>
+<body>
+
+<!-- HEADER -->
+<header class="header">
+  <button class="menu-btn" onclick="toggleSidebar()" title="Menú"><i class="fas fa-bars"></i></button>
+  <div class="logo">
+    <span class="l-p">P</span><span class="l-s">S</span><span class="l-pp">P</span>
+    <span class="logo-txt">&nbsp;Mail</span>
+  </div>
+
+  <div class="search-wrap">
+    <button class="s-btn" onclick="doSearch()" title="Buscar"><i class="fas fa-search"></i></button>
+    <input id="search-input" placeholder="Buscar en el correo" onkeydown="if(event.key==='Enter')doSearch()"/>
+    <button class="s-btn" onclick="clearSearch()" id="search-clear" style="display:none" title="Limpiar"><i class="fas fa-times"></i></button>
+  </div>
+
+  <div class="header-right">
+    <button class="icon-btn" onclick="refreshList()" id="refresh-btn" title="Actualizar"><i class="fas fa-sync-alt"></i></button>
+    <button class="icon-btn" title="Configuración"><i class="fas fa-cog"></i></button>
+    <button class="icon-btn" title="Aplicaciones"><i class="fas fa-th"></i></button>
+    <div class="avatar" title="javi@psp.es">J</div>
+  </div>
+</header>
+
+<div class="layout">
+
+<!-- SIDEBAR -->
+<nav class="sidebar" id="sidebar">
+  <button class="compose-btn" onclick="openCompose()">
+    <i class="fas fa-pen"></i><span>Redactar</span>
+  </button>
+  <div id="folder-list">
+    <div class="nav-item active" data-folder="INBOX" onclick="selectFolder(this,'INBOX')">
+      <span class="n-icon"><i class="fas fa-inbox"></i></span><span>Recibidos</span>
+      <span class="n-badge" id="badge-inbox"></span>
+    </div>
+    <div class="nav-item" data-folder="Sent" onclick="selectFolder(this,'Sent')">
+      <span class="n-icon"><i class="fas fa-paper-plane"></i></span><span>Enviados</span>
+    </div>
+    <div class="nav-item" data-folder="Drafts" onclick="selectFolder(this,'Drafts')">
+      <span class="n-icon"><i class="fas fa-file-alt"></i></span><span>Borradores</span>
+    </div>
+    <div class="nav-sep"></div>
+    <div class="nav-item" data-folder="Trash" onclick="selectFolder(this,'Trash')">
+      <span class="n-icon"><i class="fas fa-trash-alt"></i></span><span>Papelera</span>
+    </div>
+    <div class="nav-item" data-folder="Junk" onclick="selectFolder(this,'Junk')">
+      <span class="n-icon"><i class="fas fa-shield-alt"></i></span><span>Spam</span>
+    </div>
+    <div class="nav-sep"></div>
+    <div class="nav-label">Etiquetas</div>
+    <div class="nav-item" onclick="filterStarred()">
+      <span class="n-icon"><i class="fas fa-star" style="color:#f4b400"></i></span><span>Destacados</span>
+    </div>
+  </div>
+</nav>
+
+<!-- MAIN -->
+<main class="main">
+
+  <!-- LIST VIEW -->
+  <div id="list-view" style="display:flex;flex-direction:column;flex:1;overflow:hidden">
+    <div class="toolbar">
+      <button class="t-btn" title="Seleccionar todo" onclick="toggleSelectAll()">
+        <i id="sel-icon" class="far fa-square"></i>
+      </button>
+      <button class="t-btn" title="Actualizar" onclick="refreshList()"><i class="fas fa-sync-alt"></i></button>
+      <div class="t-sep"></div>
+      <button class="t-btn" id="btn-delete" title="Eliminar" onclick="deleteSelected()" style="display:none"><i class="fas fa-trash-alt"></i></button>
+      <button class="t-btn" id="btn-mark-read" title="Marcar leído" onclick="markSelected('seen','add')" style="display:none"><i class="fas fa-envelope-open"></i></button>
+      <button class="t-btn" id="btn-mark-unread" title="Marcar no leído" onclick="markSelected('seen','remove')" style="display:none"><i class="fas fa-envelope"></i></button>
+      <div class="t-spacer"></div>
+      <span class="t-label" id="page-info"></span>
+      <button class="t-btn" title="Página anterior" onclick="prevPage()"><i class="fas fa-chevron-left"></i></button>
+      <button class="t-btn" title="Página siguiente" onclick="nextPage()"><i class="fas fa-chevron-right"></i></button>
+    </div>
+    <div class="list-box">
+      <div class="list-scroll" id="msg-list">
+        <div class="loading-wrap"><div class="spinner"></div><span>Cargando…</span></div>
+      </div>
+    </div>
+  </div>
+
+  <!-- READ VIEW -->
+  <div id="read-view" class="read-panel">
+    <div class="read-toolbar">
+      <button class="t-btn" title="Volver" onclick="backToList()"><i class="fas fa-arrow-left"></i></button>
+      <div class="t-sep"></div>
+      <button class="t-btn" title="Archivar" onclick="archiveMsg()"><i class="fas fa-archive"></i></button>
+      <button class="t-btn" title="Eliminar" onclick="deleteCurrentMsg()"><i class="fas fa-trash-alt"></i></button>
+      <button class="t-btn" title="Spam"><i class="fas fa-ban"></i></button>
+      <div class="t-sep"></div>
+      <button class="t-btn" title="Marcar no leído" onclick="markCurrentMsg('seen','remove')"><i class="fas fa-envelope"></i></button>
+      <button class="t-btn" title="Posponer"><i class="fas fa-clock"></i></button>
+      <div class="t-spacer"></div>
+      <button class="t-btn" title="Más opciones"><i class="fas fa-ellipsis-v"></i></button>
+    </div>
+    <div id="read-content" class="read-scroll"></div>
+  </div>
+
+</main>
+</div>
+
+<!-- COMPOSE MODAL -->
+<div class="compose-modal" id="compose-modal">
+  <div class="compose-header" onclick="toggleMinimize()">
+    <h3 id="compose-title">Nuevo mensaje</h3>
+    <button class="c-hbtn" onclick="event.stopPropagation();minimizeCompose()" title="Minimizar"><i class="fas fa-minus"></i></button>
+    <button class="c-hbtn" onclick="event.stopPropagation();maximizeCompose()" title="Maximizar"><i class="fas fa-expand-alt"></i></button>
+    <button class="c-hbtn" onclick="event.stopPropagation();closeCompose()" title="Cerrar"><i class="fas fa-times"></i></button>
+  </div>
+  <div class="compose-fields">
+    <div class="compose-field">
+      <label>Para</label>
+      <input id="c-to" type="email" placeholder="Destinatarios"/>
+    </div>
+    <div class="compose-field">
+      <label>Asunto</label>
+      <input id="c-subject" placeholder="Asunto"/>
+    </div>
+  </div>
+  <div class="compose-body-wrap">
+    <div class="att-preview" id="att-preview"></div>
+    <textarea class="compose-body" id="c-body" placeholder="Escribe tu mensaje aquí…"></textarea>
+  </div>
+  <div class="compose-footer">
+    <button class="btn btn-primary" onclick="sendEmail()">Enviar</button>
+    <label class="c-foot-btn" title="Adjuntar archivo">
+      <i class="fas fa-paperclip"></i>
+      <input type="file" id="att-input" multiple onchange="addAttachments(this)"/>
+    </label>
+    <label class="c-foot-btn" title="Emoji"><i class="far fa-smile"></i></label>
+    <div style="flex:1"></div>
+    <button class="t-btn" onclick="closeCompose()" title="Descartar borrador"><i class="fas fa-trash-alt"></i></button>
+  </div>
+</div>
+
+<!-- TOAST -->
+<div class="toast" id="toast"></div>
+
+<script>
+'use strict';
+let currentFolder='INBOX',currentPage=1,totalMessages=0;
+const PER_PAGE=25;
+let selectedUIDs=new Set(),currentMsg=null,attachFiles=[],isSearchMode=false,allMessages=[];
+
+document.addEventListener('DOMContentLoaded',()=>loadMessages());
+
+async function api(url,opts={}){
+  try{const r=await fetch(url,opts);return await r.json();}
+  catch(e){return{error:e.message};}
+}
+
+// ── Sidebar ───────────────────────────────────────────
+function toggleSidebar(){
+  const s=document.getElementById('sidebar');
+  const open=s.style.width!=='0px'&&s.style.width!=='0';
+  s.style.width=open?'0':'';s.style.padding=open?'0':'';s.style.overflow=open?'hidden':'';
+}
+
+// ── Folders ───────────────────────────────────────────
+function selectFolder(el,folder){
+  currentFolder=folder;currentPage=1;isSearchMode=false;
+  document.querySelectorAll('.nav-item').forEach(x=>x.classList.remove('active'));
+  el.classList.add('active');backToList();loadMessages();
+}
+function filterStarred(){
+  const s=allMessages.filter(m=>document.getElementById('star-'+m.uid)?.classList.contains('starred'));
+  if(!s.length){toast('No hay mensajes destacados');return;}
+  renderMessages(s);
+}
+
+// ── Message List ──────────────────────────────────────
+async function loadMessages(){
+  const list=document.getElementById('msg-list');
+  list.innerHTML='<div class="loading-wrap"><div class="spinner"></div><span>Cargando mensajes…</span></div>';
+  selectedUIDs.clear();updateToolbar();
+  const data=await api(`/api/messages?folder=${encodeURIComponent(currentFolder)}&page=${currentPage}&per_page=${PER_PAGE}`);
+  allMessages=data.messages||[];totalMessages=data.total||0;
+  const pi=document.getElementById('page-info');
+  if(totalMessages>0){
+    const f=(currentPage-1)*PER_PAGE+1,t=Math.min(currentPage*PER_PAGE,totalMessages);
+    pi.textContent=`${f}–${t} de ${totalMessages}`;
+  }else{pi.textContent='';}
+  renderMessages(allMessages);
+}
+
+function avClass(name){
+  let h=0;for(let i=0;i<name.length;i++)h=(h*31+name.charCodeAt(i))&0xFFFF;
+  return'av-'+(h%10);
+}
+function avLetter(name){return(name||'?').trim()[0].toUpperCase();}
+
+function renderMessages(msgs){
+  const list=document.getElementById('msg-list');
+  if(!msgs||!msgs.length){
+    list.innerHTML='<div class="empty-state"><i class="fas fa-inbox"></i><h3>Bandeja vacía</h3><p>No hay mensajes aquí</p></div>';
+    return;
+  }
+  list.innerHTML=msgs.map(m=>{
+    const from=shortFrom(m.from);
+    return`<div class="msg-row ${m.seen?'read':'unread'}" id="row-${m.uid}" onclick="openMessage('${m.uid}')">
+      <div class="msg-check" onclick="event.stopPropagation()"><input type="checkbox" onchange="toggleSelect('${m.uid}',this)"/></div>
+      <span class="msg-star ${m.flagged?'starred':''}" id="star-${m.uid}" onclick="event.stopPropagation();toggleStar('${m.uid}')">★</span>
+      <div class="msg-av ${avClass(from)}">${avLetter(from)}</div>
+      <span class="msg-from">${escHtml(from)}</span>
+      <span class="msg-body-col">
+        <span class="msg-subject">${escHtml(m.subject)}</span>
+      </span>
+      <span class="msg-date">${formatDate(m.date)}</span>
+    </div>`;
+  }).join('');
+}
+
+function shortFrom(from){
+  if(!from)return'(desconocido)';
+  const m=from.match(/^"?([^"<]+)"?\s*</);if(m)return m[1].trim();
+  const a=from.match(/<([^>]+)>/);return a?a[1].split('@')[0]:from.split('@')[0];
+}
+function formatDate(ds){
+  if(!ds)return'';
+  try{
+    const d=new Date(ds),now=new Date();
+    if(d.toDateString()===now.toDateString())return d.toLocaleTimeString('es-ES',{hour:'2-digit',minute:'2-digit'});
+    if((now-d)/86400000<7)return d.toLocaleDateString('es-ES',{weekday:'short'});
+    if(d.getFullYear()===now.getFullYear())return d.toLocaleDateString('es-ES',{day:'numeric',month:'short'});
+    return d.toLocaleDateString('es-ES',{day:'numeric',month:'short',year:'2-digit'});
+  }catch{return'';}
+}
+function escHtml(s){
+  return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
+}
+
+// ── Pagination ────────────────────────────────────────
+function prevPage(){if(currentPage>1){currentPage--;loadMessages();}}
+function nextPage(){if(currentPage*PER_PAGE<totalMessages){currentPage++;loadMessages();}}
+
+// ── Selection ─────────────────────────────────────────
+function toggleSelect(uid,cb){
+  if(cb.checked)selectedUIDs.add(uid);else selectedUIDs.delete(uid);
+  document.getElementById('row-'+uid)?.classList.toggle('selected',cb.checked);
+  updateToolbar();
+}
+function toggleSelectAll(){
+  const cbs=document.querySelectorAll('.msg-check input');
+  const sel=selectedUIDs.size<cbs.length;
+  cbs.forEach(cb=>{
+    cb.checked=sel;
+    const uid=cb.closest('.msg-row').id.replace('row-','');
+    if(sel)selectedUIDs.add(uid);else selectedUIDs.delete(uid);
+    cb.closest('.msg-row').classList.toggle('selected',sel);
+  });
+  document.getElementById('sel-icon').className=sel?'fas fa-check-square':'far fa-square';
+  updateToolbar();
+}
+function updateToolbar(){
+  const has=selectedUIDs.size>0;
+  ['btn-delete','btn-mark-read','btn-mark-unread'].forEach(id=>{
+    const el=document.getElementById(id);if(el)el.style.display=has?'':'none';
+  });
+}
+async function deleteSelected(){
+  if(!selectedUIDs.size)return;
+  toast('Eliminando…');
+  for(const uid of selectedUIDs)await api(`/api/delete/${uid}?folder=${encodeURIComponent(currentFolder)}`,{method:'DELETE'});
+  selectedUIDs.clear();toast('Mensajes eliminados');loadMessages();
+}
+async function markSelected(flag,action){
+  for(const uid of selectedUIDs)await api(`/api/mark/${uid}?folder=${encodeURIComponent(currentFolder)}`,{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({flag,action})});
+  toast('Actualizado');loadMessages();
+}
+
+// ── Open Message ──────────────────────────────────────
+async function openMessage(uid){
+  document.getElementById('list-view').style.display='none';
+  const rv=document.getElementById('read-view');rv.classList.add('open');
+  document.getElementById('read-content').innerHTML='<div class="loading-wrap"><div class="spinner"></div></div>';
+
+  const data=await api(`/api/message/${uid}?folder=${encodeURIComponent(currentFolder)}`);
+  if(data.error){
+    document.getElementById('read-content').innerHTML=`<div class="loading-wrap" style="color:var(--red)"><i class="fas fa-exclamation-circle"></i>&nbsp;${escHtml(data.error)}</div>`;
+    return;
+  }
+  currentMsg=data;
+  document.getElementById('row-'+uid)?.classList.replace('unread','read');
+
+  const sn=shortFrom(data.from);
+  const hasAtt=data.attachments&&data.attachments.length>0;
+  const attHtml=hasAtt?`
+    <div class="card-atts">
+      <div class="att-title"><i class="fas fa-paperclip" style="margin-right:6px"></i>${data.attachments.length} adjunto${data.attachments.length>1?'s':''}</div>
+      <div class="att-grid">
+        ${data.attachments.map((a,i)=>{
+          const isImg=a.mime&&a.mime.startsWith('image/');
+          const thumb=isImg?`<img src="data:${a.mime};base64,${a.data}" style="width:56px;height:44px;object-fit:cover;border-radius:4px;border:1px solid var(--border)"/>`
+                           :`<i class="fas fa-file" style="font-size:20px;color:var(--text2)"></i>`;
+          return`<a class="att-chip" href="/api/attachment/${uid}/${i}?folder=${encodeURIComponent(currentFolder)}" download="${escHtml(a.filename)}">${thumb}<span><div style="font-weight:500;font-size:12px">${escHtml(a.filename)}</div><div style="font-size:11px;color:var(--text2)">${fmtSize(a.size)}</div></span></a>`;
+        }).join('')}
+      </div>
+    </div>`:'';
+
+  const bodyHtml=data.body_html
+    ?`<iframe sandbox="allow-same-origin" srcdoc="${escHtml(data.body_html)}" style="width:100%;border:none;min-height:200px;display:block" onload="resizeIframe(this)"></iframe>`
+    :`<pre>${escHtml(data.body_text||'')}</pre>`;
+
+  document.getElementById('read-content').innerHTML=`
+    <div class="read-subject-line">${escHtml(data.subject)}</div>
+    <div class="msg-card">
+      <div class="card-head">
+        <div class="card-sender-av ${avClass(sn)}">${avLetter(sn)}</div>
+        <div class="card-sender-info">
+          <div class="card-sender-name">${escHtml(sn)}</div>
+          <div class="card-sender-addr"><span style="color:var(--text2)">De:</span> ${escHtml(data.from)} &nbsp;<span style="color:var(--text2)">Para:</span> ${escHtml(data.to)}</div>
+        </div>
+        <div class="card-time">${escHtml(data.date)}</div>
+        <div class="card-acts">
+          <button class="t-btn" title="Responder" onclick="replyMessage()"><i class="fas fa-reply"></i></button>
+          <button class="t-btn" title="Más"><i class="fas fa-ellipsis-v"></i></button>
+        </div>
+      </div>
+      <div class="card-body">${bodyHtml}</div>
+      ${attHtml}
+    </div>
+    <div class="reply-row">
+      <button class="reply-btn" onclick="replyMessage()"><i class="fas fa-reply" style="color:var(--text2)"></i> Responder</button>
+      <button class="reply-btn" onclick="forwardMessage()"><i class="fas fa-share" style="color:var(--text2)"></i> Reenviar</button>
+    </div>`;
+}
+
+function resizeIframe(iframe){
+  try{iframe.style.height=(iframe.contentWindow.document.body.scrollHeight+24)+'px';}catch(e){}
+}
+function fmtSize(bytes){
+  if(!bytes)return'0 B';
+  if(bytes<1024)return bytes+' B';
+  if(bytes<1048576)return(bytes/1024).toFixed(1)+' KB';
+  return(bytes/1048576).toFixed(1)+' MB';
+}
+function backToList(){
+  document.getElementById('list-view').style.display='flex';
+  document.getElementById('read-view').classList.remove('open');
+  currentMsg=null;
+}
+async function deleteCurrentMsg(){
+  if(!currentMsg)return;
+  await api(`/api/delete/${currentMsg.uid}?folder=${encodeURIComponent(currentFolder)}`,{method:'DELETE'});
+  toast('Conversación eliminada');backToList();loadMessages();
+}
+function archiveMsg(){toast('Archivado');backToList();loadMessages();}
+async function markCurrentMsg(flag,action){
+  if(!currentMsg)return;
+  await api(`/api/mark/${currentMsg.uid}?folder=${encodeURIComponent(currentFolder)}`,{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({flag,action})});
+  toast('Actualizado');
+}
+
+// ── Reply / Forward ───────────────────────────────────
+function replyMessage(){
+  if(!currentMsg)return;openCompose();
+  document.getElementById('c-to').value=currentMsg.from;
+  document.getElementById('c-subject').value='Re: '+currentMsg.subject.replace(/^Re:\s*/i,'');
+  document.getElementById('c-body').value='\n\nEl '+currentMsg.date+', '+currentMsg.from+' escribió:\n\n'+(currentMsg.body_text||'').split('\n').map(l=>'> '+l).join('\n');
+  document.getElementById('compose-title').textContent='Responder';
+  document.getElementById('c-to').focus();
+}
+function forwardMessage(){
+  if(!currentMsg)return;openCompose();
+  document.getElementById('c-subject').value='Fwd: '+currentMsg.subject.replace(/^Fwd:\s*/i,'');
+  document.getElementById('c-body').value='\n\n---------- Mensaje reenviado ----------\nDe: '+currentMsg.from+'\nFecha: '+currentMsg.date+'\nAsunto: '+currentMsg.subject+'\nPara: '+currentMsg.to+'\n\n'+(currentMsg.body_text||'');
+  document.getElementById('compose-title').textContent='Reenviar';
+  document.getElementById('c-to').focus();
+}
+
+// ── Compose ───────────────────────────────────────────
+function openCompose(){
+  const m=document.getElementById('compose-modal');
+  m.classList.add('open');m.classList.remove('minimized');
+  m.style.height='';m.style.maxWidth='';m.style.right='24px';m.style.left='';m.style.width='';m.style.borderRadius='';
+  document.getElementById('c-to').focus();
+}
+function closeCompose(){
+  document.getElementById('compose-modal').classList.remove('open','minimized');
+  ['c-to','c-subject','c-body'].forEach(id=>document.getElementById(id).value='');
+  document.getElementById('compose-title').textContent='Nuevo mensaje';
+  attachFiles=[];document.getElementById('att-preview').innerHTML='';document.getElementById('att-input').value='';
+}
+let _minimized=false;
+function minimizeCompose(){_minimized=!_minimized;document.getElementById('compose-modal').classList.toggle('minimized',_minimized);}
+function toggleMinimize(){minimizeCompose();}
+function maximizeCompose(){
+  const m=document.getElementById('compose-modal');
+  if(m.dataset.max==='1'){m.dataset.max='';m.style.maxWidth='';m.style.width='560px';m.style.height='';m.style.left='';m.style.right='24px';m.style.borderRadius='';}
+  else{m.dataset.max='1';m.style.maxWidth='100%';m.style.width='100%';m.style.height='100%';m.style.left='0';m.style.right='0';m.style.borderRadius='0';}
+}
+function addAttachments(input){Array.from(input.files).forEach(f=>attachFiles.push(f));renderAttPreviews();}
+function renderAttPreviews(){
+  document.getElementById('att-preview').innerHTML=attachFiles.map((f,i)=>
+    `<div class="att-pill"><i class="fas fa-file" style="font-size:11px"></i>${escHtml(f.name)}<button onclick="removeAtt(${i})" title="Quitar"><i class="fas fa-times"></i></button></div>`
+  ).join('');
+}
+function removeAtt(i){attachFiles.splice(i,1);renderAttPreviews();}
+async function sendEmail(){
+  const to=document.getElementById('c-to').value.trim();
+  if(!to){toast('Indica el destinatario');return;}
+  const fd=new FormData();
+  fd.append('to',to);
+  fd.append('subject',document.getElementById('c-subject').value.trim()||'(Sin asunto)');
+  fd.append('body',document.getElementById('c-body').value);
+  fd.append('body_type','plain');
+  attachFiles.forEach(f=>fd.append('attachments',f));
+  const btn=document.querySelector('.compose-footer .btn-primary');
+  btn.innerHTML='<i class="fas fa-circle-notch fa-spin"></i> Enviando…';btn.disabled=true;
+  const data=await api('/api/send',{method:'POST',body:fd});
+  btn.innerHTML='Enviar';btn.disabled=false;
+  if(data.error){toast('Error: '+data.error);}else{toast('Mensaje enviado');closeCompose();}
+}
+
+// ── Search ─────────────────────────────────────────────
+async function doSearch(){
+  const q=document.getElementById('search-input').value.trim();
+  document.getElementById('search-clear').style.display=q?'':'none';
+  if(!q){clearSearch();return;}
+  isSearchMode=true;backToList();
+  const list=document.getElementById('msg-list');
+  list.innerHTML='<div class="loading-wrap"><div class="spinner"></div><span>Buscando…</span></div>';
+  const data=await api(`/api/search?q=${encodeURIComponent(q)}&folder=${encodeURIComponent(currentFolder)}`);
+  allMessages=data.messages||[];
+  document.getElementById('page-info').textContent=allMessages.length?`${allMessages.length} resultado${allMessages.length!==1?'s':''}`:' Sin resultados';
+  renderMessages(allMessages);
+}
+function clearSearch(){
+  document.getElementById('search-input').value='';
+  document.getElementById('search-clear').style.display='none';
+  isSearchMode=false;loadMessages();
+}
+
+// ── Star ──────────────────────────────────────────────
+async function toggleStar(uid){
+  const el=document.getElementById('star-'+uid);
+  const s=el.classList.toggle('starred');
+  await api(`/api/mark/${uid}?folder=${encodeURIComponent(currentFolder)}`,{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({flag:'flagged',action:s?'add':'remove'})});
+}
+
+// ── Refresh ───────────────────────────────────────────
+function refreshList(){
+  const i=document.querySelector('#refresh-btn i');
+  if(i){i.classList.add('fa-spin');setTimeout(()=>i.classList.remove('fa-spin'),700);}
+  if(isSearchMode)doSearch();else loadMessages();
+}
+
+// ── Toast ─────────────────────────────────────────────
+let _tt;
+function toast(msg){
+  const t=document.getElementById('toast');t.textContent=msg;t.classList.add('show');
+  clearTimeout(_tt);_tt=setTimeout(()=>t.classList.remove('show'),3200);
+}
+</script>
+</body>
+</html>