Deploy Morphos en HF Spaces

.dockerignore

@@ -0,0 +1,29 @@
+# Sensitive files
+.env
+*.env
+
+# SQLite database (will be created at runtime)
+data/*.db
+
+# OS
+.DS_Store
+Thumbs.db
+
+# IDE
+.vscode/
+.idea/
+*.swp
+*.swo
+
+# Git
+.git/
+.gitignore
+
+# Node / build tools (none used, but just in case)
+node_modules/
+
+# Documentation not needed in the image
+README.md
+CLAUDE.md
+SKILL.md
+USO_DE_IA.md

.gitignore

@@ -0,0 +1,29 @@
+# General
+.DS_Store
+.localized
+__MACOSX/
+.AppleDouble
+.LSOverride
+Icon[]
+
+# Thumbnails
+._*
+
+# Files that might appear in the root of a volume
+.DocumentRevisions-V100
+.fseventsd
+.Spotlight-V100
+.TemporaryItems
+.Trashes
+.VolumeIcon.icns
+.com.apple.timemachine.donotpresent
+
+# Directories potentially created on remote AFP share
+.AppleDB
+.AppleDesktop
+Network Trash Folder
+Temporary Items
+.apdisk
+
+
+.env

.htaccess

@@ -0,0 +1,39 @@
+# Deny access to sensitive files
+<FilesMatch "^(\.env|setup\.php)$">
+    Require all denied
+</FilesMatch>
+
+# Gzip compression
+<IfModule mod_deflate.c>
+    AddOutputFilterByType DEFLATE text/html text/css text/javascript application/javascript application/json font/ttf font/woff font/woff2
+</IfModule>
+
+# Cache-Control headers
+<IfModule mod_expires.c>
+    ExpiresActive On
+
+    # HTML — short cache, content can change
+    ExpiresByType text/html "access plus 1 hour"
+
+    # CSS and JS — 1 year (filenames are stable)
+    ExpiresByType text/css "access plus 1 year"
+    ExpiresByType application/javascript "access plus 1 year"
+    ExpiresByType text/javascript "access plus 1 year"
+
+    # Fonts — 1 year
+    ExpiresByType font/ttf "access plus 1 year"
+    ExpiresByType font/woff "access plus 1 year"
+    ExpiresByType font/woff2 "access plus 1 year"
+
+    # JSON data files
+    ExpiresByType application/json "access plus 1 day"
+</IfModule>
+
+<IfModule mod_headers.c>
+    <FilesMatch "\.(css|js|ttf|woff|woff2)$">
+        Header set Cache-Control "public, max-age=31536000, immutable"
+    </FilesMatch>
+    <FilesMatch "\.json$">
+        Header set Cache-Control "public, max-age=86400"
+    </FilesMatch>
+</IfModule>

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}

CLAUDE.md

@@ -0,0 +1,78 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Project Overview
+
+Morphos is a veterinary diagnostic support tool — a single-page application (SPA) that performs real-time clinical pattern detection from lab values and optionally calls an AI model (HuggingFace or local Ollama) for clinical interpretation. It targets Canino and Felino patients.
+
+## Running the App
+
+This is a static frontend with a PHP proxy backend. No build step required.
+
+Serve it locally with PHP's built-in server from the project root:
+```bash
+php -S localhost:8000
+```
+
+Then open `http://localhost:8000` in a browser. The PHP proxy (`api/hf_proxy.php`) requires the API key in `api/.env`:
+```
+HF_API_KEY=<your_key>
+```
+
+For local AI inference, Ollama must be running at `http://localhost:11434` with `medgemma:latest` pulled.
+
+## Architecture
+
+### Data Flow
+
+```
+User form input
+  → analisis.js (real-time pattern detection, no server)
+  → UI updates (color-coded fields, pattern cards)
+
+User clicks "Análisis IA"
+  → ia.js (constructs prompt with patient data + flagged values)
+  → [HF route]    → api/hf_proxy.php → HF Space Gradio API (SSE response)
+  → [Local route] → Ollama chat completions API
+  → Display AI output in #salida-ia
+```
+
+### Key Files and Their Roles
+
+- **`js/analisis.js`** — Core engine (505 lines). Compares values against species-specific reference ranges, classifies severity (mild/moderate/severe), applies age/breed/sex adjustments, and identifies 50+ clinical patterns (anemia types, hepatic, renal, endocrine, etc.).
+- **`js/ia.js`** — AI abstraction layer. Builds the clinical prompt in Spanish, calls either HF Proxy or Ollama, and strips model-specific tokens from the response.
+- **`js/main.js`** — Orchestration: loads JSON data files, wires form events, triggers analysis, handles PDF export.
+- **`js/ui.js`** — Tab navigation (8 panels, 4 exam sub-tabs), swipe gestures, mobile/desktop field sync, collapsible panels.
+- **`js/pdf-parser.js`** — Client-side PDF extraction using PDF.js. 47 regex patterns to identify analytes in Spanish/English. Runs fully in the browser.
+- **`api/hf_proxy.php`** — PHP proxy that reads `api/.env`, forwards requests to HugginFace Space (`blackmistcode-morphos-medgemma.hf.space/gradio_api`), handles SSE polling, and returns `{text: ...}`.
+- **`data/valores_referencia.json`** — Reference ranges for 34 analytes per species.
+- **`data/alteraciones.json`** — 100+ clinical entities used to enrich AI prompts with etiologic context.
+
+### AI Backend Configuration
+
+Stored in `localStorage`:
+- `mx-ia-backend`: `"hf"` (default) or `"local"`
+- `mx-ia-ollama-url`: custom Ollama endpoint
+- `mx-ia-ollama-model`: custom model name (default `medgemma:latest`)
+
+The HF route supports up to 4 images (vision model). The local route uses Ollama's OpenAI-compatible chat completions API, also with vision support.
+
+### Pattern Detection Logic (`analisis.js`)
+
+Severity thresholds are based on deviation from the reference range. Reference ranges are dynamically adjusted for:
+- **Age**: puppies, adults, seniors, geriatric (age in months)
+- **Breed**: Greyhounds (lower platelets normal), Akita/Shiba (different RBC ranges), etc.
+- **Sex**: Male felines have a higher creatinine tolerance
+
+The `analizarResultados()` function is called on every `input` event and returns flagged findings + matched clinical patterns.
+
+### CSS Notes
+
+Do not use `!important` — use specificity or cascade ordering instead. The stylesheet is `css/styles.css` (1796 lines). The desktop grid breakpoint is `>1100px`.
+
+### Coding notes
+
+All variables should be named in spanish unless they're referencing common technical names like tab, input, output, etc.
+Always use descriptive names for variables and functions keeping legibility as a priority.
+Don't use aligment spaces.

Dockerfile

@@ -0,0 +1,33 @@
+FROM php:8.2-apache
+
+# Install extensions and enable Apache modules
+RUN apt-get update && apt-get install -y \
+    libpng-dev \
+    libjpeg-dev \
+    libfreetype6-dev \
+    libzip-dev \
+    unzip \
+    && docker-php-ext-install pdo pdo_mysql pdo_sqlite \
+    && docker-php-ext-enable pdo pdo_mysql pdo_sqlite \
+    && a2enmod rewrite deflate headers expires
+
+# Copy project
+COPY . /var/www/html/
+
+# Create data directory for SQLite and ensure permissions
+RUN mkdir -p /var/www/html/data \
+    && chown -R www-data:www-data /var/www/html \
+    && chmod -R 755 /var/www/html
+
+# Expose HF Spaces default port
+RUN sed -i 's/Listen 80/Listen 7860/' /etc/apache2/ports.conf \
+    && sed -i 's/:80/:7860/' /etc/apache2/sites-available/000-default.conf
+
+EXPOSE 7860
+
+# Entrypoint handles runtime initialization
+COPY docker-entrypoint.sh /usr/local/bin/docker-entrypoint.sh
+RUN chmod +x /usr/local/bin/docker-entrypoint.sh
+
+ENTRYPOINT ["docker-entrypoint.sh"]
+CMD ["apache2-foreground"]

LICENSE

@@ -0,0 +1,28 @@
+MIT License
+
+Copyright (c) 2026 Jose Salazar
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+
+
+
+
+
+

README.md

@@ -1,12 +1,230 @@
+# Morphos — Intérprete de analíticas veterinarias asistido por I.A
+## Proyecto final — Curso de Desarrollo Web 2026
+
+---
+
+## Descripción
+
+Morphos es una aplicación web de apoyo al diagnóstico veterinario. Detecta patrones clínicos en tiempo real a partir de valores de laboratorio usando un motor propio de JS puro con la opción de interpretarlos mediante un modelo de inteligencia artificial especializado en medicina (medGemma 1.5 4B it multimodal de Google Deep Mind).
+
+Está orientada a caninos y felinos, con ajuste automático de rangos de referencia por especie, edad, raza y sexo.
+Ataca una necesidad real del sector veterinario que actualmente no dispone de herramientas de este tipo que sean gratuitas y de fácil uso y que permitan obtener información complementaria relevante sobre sus pacientes en muy poco tiempo y sin exponer la data sensible a los LLM.
+
+Funcionalidades principales:
+
+```text
+Detección de patrones clínicos en tiempo real con motor nativo de JS
+Interpretación con IA (HuggingFace o Ollama local)
+Importación de resultados desde PDF
+Análisis de citologías mediante imágenes 
+Búsqueda de literatura científica en PubMed
+Sistema de autenticación con registro e inicio de sesión
+```
+
+---
+
+## Objetivo del proyecto
+
+Integrar los conocimientos del curso en una aplicación web completa que además sea útil y
+cubra una necesidad de mercado:
+
+```text
+HTML semántico y accesible
+CSS personalizado (variables, grid, responsive)
+JavaScript modular
+Sin uso de frameworks
+PHP como backend de API (proxy, autenticación, base de datos)
+```
+
+Conceptos aplicados:
+
+* Separación de responsabilidades por módulos
+* Comunicación asíncrona con `fetch` (JSON y SSE)
+* Sesiones PHP y autenticación con PDO
+* Contraseñas hasheadas con `password_hash`
+* Consultas preparadas para prevenir inyección SQL
+* Detección de patrones mediante lógica clínica codificada
+
+---
+
+## Estructura del proyecto
+
+```text
+/api
+    auth.php         → login, registro y cierre de sesión (PDO + sesiones)
+    conexion.php     → conexión a la base de datos MySQL
+    hf_proxy.php     → proxy hacia HuggingFace Space (oculta la API key)
+    papers_proxy.php → consulta PubMed con caché de 30 minutos
+    setup.php        → crea la base de datos y la tabla de usuarios
+    .env             → variables de entorno (HF_API_KEY, DB_PORT)
+
+/js
+    main.js          → orquestación general, eventos y renderizado
+    analisis.js      → motor de detección de patrones clínicos
+    ia.js            → construcción del prompt y llamadas al modelo IA
+    ui.js            → navegación por tabs, gestos, sincronización móvil
+    auth.js          → modal de autenticación y validación en tiempo real
+    papers.js        → búsqueda y paginación de literatura científica
+    pdf-parser.js    → extracción de valores desde PDF en el navegador
+
+/css
+    styles.css       → estilos completos (tema claro/oscuro, grid, mobile)
+
+/data
+    valores_referencia.json → rangos de referencia por especie y analito
+    alteraciones.json       → descripciones clínicas de los patrones
+
+/assets
+    /fonts           → Inter y JetBrains Mono (carga local)
+    /icons           → iconos SVG de la interfaz
+    /lib/pdfjs       → librería PDF.js en local
+
+index.html           → SPA principal
+.htaccess            → compresión, caché y protección de archivos sensibles
+```
+
+---
+
+## Flujo de la aplicación
+
+```text
+[ Formulario de valores ]
+        |
+        v
+   analisis.js
+   (deteccion de patrones en tiempo real, sin servidor)
+        |
+        v
+[ UI: campos coloreados + tarjetas de patron ]
+        |
+        v
+  Usuario pulsa "Analisis IA"
+        |
+        v
+   ia.js (construye el prompt con los hallazgos)
+        |
+      ┌─┴──────────────┐
+      v                v
+ HuggingFace       Ollama local
+ (hf_proxy.php)    (/v1/chat/completions)
+      |                |
+      └────────┬────────┘
+               v
+     [ Interpretacion en pantalla ]
+```
+
+---
+
+## Instalacion
+
+### 1. Requisitos
+
+* XAMPP (Apache + PHP 8.1+ + MySQL)
+* El proyecto ubicado en `htdocs/morphos_proyecto_final/`
+
+### 2. Variables de entorno
+
+Crear el archivo `api/.env`:
+
+```text
+HF_API_KEY=tu_clave_de_huggingface
+DB_PORT=3306
+```
+
+### 3. Base de datos
+
+Acceder en el navegador a:
+
+```text
+http://localhost/morphos_proyecto_final/api/setup.php
+```
+
+Esto crea la base de datos `morphos_db` y la tabla `usuarios`. El archivo puede eliminarse tras ejecutarse.
+
+### 4. Iniciar la aplicacion
+
+Iniciar Apache y MySQL desde el panel de XAMPP y abrir:
+
+```text
+http://localhost/morphos_proyecto_final/
+```
+
+O bien con el servidor integrado de PHP desde la raiz del proyecto:
+
+```bash
+php -S localhost:8000
+```
+
 ---
-title: Morphos
-emoji: 🦀
-colorFrom: yellow
-colorTo: purple
-sdk: docker
-pinned: false
-license: mit
-short_description: Morphos - Interprete de Analíticas veterinarias
+
+## Backend de IA
+
+El modelo de IA se configura desde la propia interfaz. La seleccion se guarda en `localStorage`.
+
+| Opcion | Descripcion |
+|---|---|
+| HuggingFace (por defecto) | Llama al Space `blackmistcode-morphos-medgemma` a traves del proxy PHP |
+| Local (Ollama) | Llama directamente a `http://localhost:11434` con `medgemma1.5:latest` |
+
+Para usar Ollama, debe estar ejecutandose con `ollama serve` y el modelo descargado.
+
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+## Motor de deteccion de patrones
+
+`analisis.js` compara cada valor ingresado contra los rangos de referencia del JSON, ajustados dinamicamente segun:
+
+* **Especie**: canino / felino
+* **Edad**: cachorro, adulto, senior, geriatrico
+* **Raza**: galgo/whippet (RBC y plaquetas), Shiba/Akita (RBC)
+* **Sexo**: felinos machos tienen mayor tolerancia a creatinina
+
+La gravedad se calcula como la desviacion relativa al ancho del rango de referencia. Con los hallazgos se identifican mas de 50 patrones clinicos (anemias, hepatopatias, nefropatia, alteraciones endocrinas, electrolitos, entre otros).
+
+---
+
+## Seguridad aplicada
+
+* Consultas SQL con sentencias preparadas (sin interpolacion directa)
+* Contrasenas hasheadas con `password_hash` / `password_verify`
+* API key de HuggingFace protegida en servidor, nunca expuesta al cliente
+* Archivos `.env` y `setup.php` bloqueados por `.htaccess`
+* Datos externos de APIs sanitizados con `textContent` antes de insertarse en el DOM
+* Sin uso de `eval`, `document.write` ni `innerHTML` con datos externos
+
+---
+
+## Conceptos del curso aplicados
+
+* HTML5 semantico 
+* CSS personalizado: variables, fuentes fluidas, grid, flexbox, media queries, temas claro/oscuro
+* JavaScript: ES Modules, `fetch`, `async/await`, eventos, DOM API
+* PHP: sesiones, PDO, proxy HTTP con cURL, lectura de `.env`, caché en disco
+* MariaDB: creacion de tablas, consultas con parametros, indices unicos
+
+---
+
+## Mejoras futuras
+* Implementación de dashboard de administrador
+* Desarrollo de extensión de navegador para captar datos del DOM de PIMS y obtener los datos de los analisis de los pacientes con intervención mínima del usuario
+* Desarrollo de mobile app dedicada
+* Integración con PIMS más utilizados en veterinaria
+* Rankeo de papers basado en confiabilidad y relevancia
+* Creación de Dataset específico para citologías de animales
+* Hosting del modelo en VPS serverless para finetuning y menor latencia
+* Ampliación de la base de alteraciones 
+* Parseo con OCR de fotografías de analíticas
+* Incluir resultados de gasometría, coprologías, informes de histopatologías y tiempos de coagulación
+
+## Retos
+* Por la diversidad de unidades de medición que utilizan los diferentes fabricantes de equipos de laboratorio se incorporó una detección de unidades para su conversión y normalización
+* El modelado del output de la I.A requirió muchísimas iteraciones de formateo del prompt y harness
+* Inicialmente quería usar proveedores de inferencia gratuita de medGemma (como featherless AI) pero fallaban continuamente, por eso decidí optar por hostear al modelo en Zero GPU de HF con la subscripción pro para la prueba de concepto
+* Incluir las librería de parseo de pdf y las fuentes en el directorio del proyecto con la intención de reducir dependencias externas estaba generando problemas con las métricas de velocidad de lighthouse que no lograba solucionar. Claude planteó implementación de caché en htacesss y pre carga de las fuentes, lo cual llevó la puntuación de 60 a 90/100 sin mayores cambios estructurales
+* Lograr una interfaz limpia y entendible requirío de muchos intentos hasta lograr un flujo de trabajo intuitivo y accsesible con la mínima friccion posible para los usuarios
+* La API de PubMed sólo admite input en inglés, así que implementó un objeto con traducciones de los patrones clínicos más comúnes para poder realizar las peticiones
+
+## Notas
+* `api/setup.php` puede eliminarse una vez creada la base de datos
+* El parser de PDF funciona completamente en el navegador (sin subida al servidor) para evitar enviar información privada al modelo de IA.
+* La busqueda de literatura filtra los patrones detectados, los traduce al ingles y consulta PubMed via `esearch` + `esummary`

SKILL.md

@@ -0,0 +1,205 @@
+---
+name: hf-cli
+description: "Hugging Face Hub CLI (`hf`) for downloading, uploading, and managing models, datasets, spaces, buckets, repos, papers, jobs, and more on the Hugging Face Hub. Use when: handling authentication; managing local cache; managing Hugging Face Buckets; running or scheduling jobs on Hugging Face infrastructure; managing Hugging Face repos; discussions and pull requests; browsing models, datasets and spaces; reading, searching, or browsing academic papers; managing collections; querying datasets; configuring spaces; setting up webhooks; or deploying and managing HF Inference Endpoints. Make sure to use this skill whenever the user mentions 'hf', 'huggingface', 'Hugging Face', 'huggingface-cli', or 'hugging face cli', or wants to do anything related to the Hugging Face ecosystem and to AI and ML in general. Also use for cloud storage needs like training checkpoints, data pipelines, or agent traces. Use even if the user doesn't explicitly ask for a CLI command. Replaces the deprecated `huggingface-cli`."
+---
+
+Install: `curl -LsSf https://hf.co/cli/install.sh | bash -s`.
+
+The Hugging Face Hub CLI tool `hf` is available. IMPORTANT: The `hf` command replaces the deprecated `huggingface-cli` command.
+
+Use `hf --help` to view available functions. Note that auth commands are now all under `hf auth` e.g. `hf auth whoami`.
+
+Generated with `huggingface_hub v1.13.0`. Run `hf skills add --force` to regenerate.
+
+## Commands
+
+- `hf download REPO_ID` — Download files from the Hub. `[--type CHOICE --revision TEXT --include TEXT --exclude TEXT --cache-dir TEXT --local-dir TEXT --force-download --dry-run --max-workers INTEGER --format CHOICE]`
+- `hf env` — Print information about the environment. `[--format CHOICE]`
+- `hf sync` — Sync files between local directory and a bucket. `[--delete --ignore-times --ignore-sizes --plan TEXT --apply TEXT --dry-run --include TEXT --exclude TEXT --filter-from TEXT --existing --ignore-existing --verbose --format CHOICE]`
+- `hf update` — Update the `hf` CLI to the latest version. `[--format CHOICE]`
+- `hf upload REPO_ID` — Upload a file or a folder to the Hub. Recommended for single-commit uploads. `[--type CHOICE --revision TEXT --private --include TEXT --exclude TEXT --delete TEXT --commit-message TEXT --commit-description TEXT --create-pr --every FLOAT --format CHOICE]`
+- `hf upload-large-folder REPO_ID LOCAL_PATH` — Upload a large folder to the Hub. Recommended for resumable uploads. `[--type CHOICE --revision TEXT --private --include TEXT --exclude TEXT --num-workers INTEGER --no-report --no-bars --format CHOICE]`
+- `hf version` — Print information about the hf version. `[--format CHOICE]`
+
+### `hf auth` — Manage authentication (login, logout, etc.).
+
+- `hf auth list` — List all stored access tokens. `[--format CHOICE]`
+- `hf auth login` — Login using a token from huggingface.co/settings/tokens. `[--add-to-git-credential --force --format CHOICE]`
+- `hf auth logout` — Logout from a specific token. `[--token-name TEXT --format CHOICE]`
+- `hf auth switch` — Switch between access tokens. `[--token-name TEXT --add-to-git-credential --format CHOICE]`
+- `hf auth token` — Print the current access token to stdout. `[--format CHOICE]`
+- `hf auth whoami` — Find out which huggingface.co account you are logged in as. `[--format CHOICE]`
+
+### `hf buckets` — Commands to interact with buckets.
+
+- `hf buckets cp SRC` — Copy files to or from buckets. `[--format CHOICE]`
+- `hf buckets create BUCKET_ID` — Create a new bucket. `[--private --exist-ok --format CHOICE]`
+- `hf buckets delete BUCKET_ID` — Delete a bucket. `[--yes --missing-ok --format CHOICE]`
+- `hf buckets info BUCKET_ID` — Get info about a bucket. `[--format CHOICE]`
+- `hf buckets list` — List buckets or files in a bucket. `[--human-readable --tree --recursive --search TEXT --format CHOICE]`
+- `hf buckets move FROM_ID TO_ID` — Move (rename) a bucket to a new name or namespace. `[--format CHOICE]`
+- `hf buckets remove ARGUMENT` — Remove files from a bucket. `[--recursive --yes --dry-run --include TEXT --exclude TEXT --format CHOICE]`
+- `hf buckets sync` — Sync files between local directory and a bucket. `[--delete --ignore-times --ignore-sizes --plan TEXT --apply TEXT --dry-run --include TEXT --exclude TEXT --filter-from TEXT --existing --ignore-existing --verbose --format CHOICE]`
+
+### `hf cache` — Manage local cache directory.
+
+- `hf cache list` — List cached repositories or revisions. `[--cache-dir TEXT --revisions --filter TEXT --sort CHOICE --limit INTEGER --format CHOICE]`
+- `hf cache prune` — Remove detached revisions from the cache. `[--cache-dir TEXT --yes --dry-run --format CHOICE]`
+- `hf cache rm TARGETS` — Remove cached repositories or revisions. `[--cache-dir TEXT --yes --dry-run --format CHOICE]`
+- `hf cache verify REPO_ID` — Verify checksums for a single repo revision from cache or a local directory. `[--type CHOICE --revision TEXT --cache-dir TEXT --local-dir TEXT --fail-on-missing-files --fail-on-extra-files --format CHOICE]`
+
+### `hf collections` — Interact with collections on the Hub.
+
+- `hf collections add-item COLLECTION_SLUG ITEM_ID ITEM_TYPE` — Add an item to a collection. `[--note TEXT --exists-ok --format CHOICE]`
+- `hf collections create TITLE` — Create a new collection on the Hub. `[--namespace TEXT --description TEXT --private --exists-ok --format CHOICE]`
+- `hf collections delete COLLECTION_SLUG` — Delete a collection from the Hub. `[--missing-ok --format CHOICE]`
+- `hf collections delete-item COLLECTION_SLUG ITEM_OBJECT_ID` — Delete an item from a collection. `[--missing-ok --format CHOICE]`
+- `hf collections info COLLECTION_SLUG` — Get info about a collection on the Hub. `[--format CHOICE]`
+- `hf collections list` — List collections on the Hub. `[--owner TEXT --item TEXT --sort CHOICE --limit INTEGER --format CHOICE]`
+- `hf collections update COLLECTION_SLUG` — Update a collection's metadata on the Hub. `[--title TEXT --description TEXT --position INTEGER --private --theme TEXT --format CHOICE]`
+- `hf collections update-item COLLECTION_SLUG ITEM_OBJECT_ID` — Update an item in a collection. `[--note TEXT --position INTEGER --format CHOICE]`
+
+### `hf datasets` — Interact with datasets on the Hub.
+
+- `hf datasets card DATASET_ID` — Get the dataset card (README) for a dataset on the Hub. `[--metadata --text --format CHOICE]`
+- `hf datasets info DATASET_ID` — Get info about a dataset on the Hub. `[--revision TEXT --expand TEXT --format CHOICE]`
+- `hf datasets leaderboard DATASET_ID` — List model scores from a dataset leaderboard. This command helps find the best models for a task or compare models by benchmark scores. `[--limit INTEGER --format CHOICE]`
+- `hf datasets list` — List datasets on the Hub, or files in a dataset repo. `[--search TEXT --author TEXT --filter TEXT --sort CHOICE --limit INTEGER --expand TEXT --human-readable --tree --recursive --revision TEXT --format CHOICE]`
+- `hf datasets parquet DATASET_ID` — List parquet file URLs available for a dataset. `[--subset TEXT --split TEXT --format CHOICE]`
+- `hf datasets sql SQL` — Execute a raw SQL query with DuckDB against dataset parquet URLs. `[--format CHOICE]`
+
+### `hf discussions` — Manage discussions and pull requests on the Hub.
+
+- `hf discussions close REPO_ID NUM` — Close a discussion or pull request. `[--comment TEXT --yes --type CHOICE --format CHOICE]`
+- `hf discussions comment REPO_ID NUM` — Comment on a discussion or pull request. `[--body TEXT --body-file PATH --type CHOICE --format CHOICE]`
+- `hf discussions create REPO_ID --title TEXT` — Create a new discussion or pull request on a repo. `[--body TEXT --body-file PATH --pull-request --type CHOICE --format CHOICE]`
+- `hf discussions diff REPO_ID NUM` — Show the diff of a pull request. `[--type CHOICE --format CHOICE]`
+- `hf discussions info REPO_ID NUM` — Get info about a discussion or pull request. `[--type CHOICE --format CHOICE]`
+- `hf discussions list REPO_ID` — List discussions and pull requests on a repo. `[--status CHOICE --kind CHOICE --author TEXT --limit INTEGER --type CHOICE --format CHOICE]`
+- `hf discussions merge REPO_ID NUM` — Merge a pull request. `[--comment TEXT --yes --type CHOICE --format CHOICE]`
+- `hf discussions rename REPO_ID NUM NEW_TITLE` — Rename a discussion or pull request. `[--type CHOICE --format CHOICE]`
+- `hf discussions reopen REPO_ID NUM` — Reopen a closed discussion or pull request. `[--comment TEXT --yes --type CHOICE --format CHOICE]`
+
+### `hf endpoints` — Manage Hugging Face Inference Endpoints.
+
+- `hf endpoints catalog deploy --repo TEXT` — Deploy an Inference Endpoint from the Model Catalog. `[--name TEXT --accelerator TEXT --namespace TEXT --format CHOICE]`
+- `hf endpoints catalog list` — List available Catalog models. `[--format CHOICE]`
+- `hf endpoints delete NAME` — Delete an Inference Endpoint permanently. `[--namespace TEXT --yes --format CHOICE]`
+- `hf endpoints deploy NAME --repo TEXT --framework TEXT --accelerator TEXT --instance-size TEXT --instance-type TEXT --region TEXT --vendor TEXT` — Deploy an Inference Endpoint from a Hub repository. `[--namespace TEXT --task TEXT --min-replica INTEGER --max-replica INTEGER --scale-to-zero-timeout INTEGER --scaling-metric CHOICE --scaling-threshold FLOAT --format CHOICE]`
+- `hf endpoints describe NAME` — Get information about an existing endpoint. `[--namespace TEXT --format CHOICE]`
+- `hf endpoints list` — Lists all Inference Endpoints for the given namespace. `[--namespace TEXT --format CHOICE]`
+- `hf endpoints pause NAME` — Pause an Inference Endpoint. `[--namespace TEXT --format CHOICE]`
+- `hf endpoints resume NAME` — Resume an Inference Endpoint. `[--namespace TEXT --fail-if-already-running --format CHOICE]`
+- `hf endpoints scale-to-zero NAME` — Scale an Inference Endpoint to zero. `[--namespace TEXT --format CHOICE]`
+- `hf endpoints update NAME` — Update an existing endpoint. `[--namespace TEXT --repo TEXT --accelerator TEXT --instance-size TEXT --instance-type TEXT --framework TEXT --revision TEXT --task TEXT --min-replica INTEGER --max-replica INTEGER --scale-to-zero-timeout INTEGER --scaling-metric CHOICE --scaling-threshold FLOAT --format CHOICE]`
+
+### `hf extensions` — Manage hf CLI extensions.
+
+- `hf extensions exec NAME` — Execute an installed extension.
+- `hf extensions install REPO_ID` — Install an extension from a public GitHub repository. `[--force --format CHOICE]`
+- `hf extensions list` — List installed extension commands. `[--format CHOICE]`
+- `hf extensions remove NAME` — Remove an installed extension. `[--format CHOICE]`
+- `hf extensions search` — Search extensions available on GitHub (tagged with 'hf-extension' topic). `[--format CHOICE]`
+
+### `hf jobs` — Run and manage Jobs on the Hub.
+
+- `hf jobs cancel JOB_ID` — Cancel a Job `[--namespace TEXT --format CHOICE]`
+- `hf jobs hardware` — List available hardware options for Jobs `[--format CHOICE]`
+- `hf jobs inspect JOB_IDS` — Display detailed information on one or more Jobs `[--namespace TEXT --format CHOICE]`
+- `hf jobs logs JOB_ID` — Fetch the logs of a Job. `[--follow --tail INTEGER --namespace TEXT --format CHOICE]`
+- `hf jobs ps` — List Jobs. `[--all --namespace TEXT --filter TEXT --format TEXT --quiet]`
+- `hf jobs run IMAGE COMMAND` — Run a Job. `[--env TEXT --secrets TEXT --label TEXT --volume TEXT --env-file TEXT --secrets-file TEXT --flavor CHOICE --timeout TEXT --detach --namespace TEXT]`
+- `hf jobs scheduled delete SCHEDULED_JOB_ID` — Delete a scheduled Job. `[--namespace TEXT --format CHOICE]`
+- `hf jobs scheduled inspect SCHEDULED_JOB_IDS` — Display detailed information on one or more scheduled Jobs `[--namespace TEXT --format CHOICE]`
+- `hf jobs scheduled ps` — List scheduled Jobs `[--all --namespace TEXT --filter TEXT --format TEXT --quiet]`
+- `hf jobs scheduled resume SCHEDULED_JOB_ID` — Resume (unpause) a scheduled Job. `[--namespace TEXT --format CHOICE]`
+- `hf jobs scheduled run SCHEDULE IMAGE COMMAND` — Schedule a Job. `[--suspend --concurrency --env TEXT --secrets TEXT --label TEXT --volume TEXT --env-file TEXT --secrets-file TEXT --flavor CHOICE --timeout TEXT --namespace TEXT]`
+- `hf jobs scheduled suspend SCHEDULED_JOB_ID` — Suspend (pause) a scheduled Job. `[--namespace TEXT --format CHOICE]`
+- `hf jobs scheduled uv run SCHEDULE SCRIPT` — Run a UV script (local file or URL) on HF infrastructure `[--suspend --concurrency --image TEXT --flavor CHOICE --env TEXT --secrets TEXT --label TEXT --volume TEXT --env-file TEXT --secrets-file TEXT --timeout TEXT --namespace TEXT --with TEXT --python TEXT]`
+- `hf jobs stats` — Fetch the resource usage statistics and metrics of Jobs `[--namespace TEXT --format CHOICE]`
+- `hf jobs uv run SCRIPT` — Run a UV script (local file or URL) on HF infrastructure `[--image TEXT --flavor CHOICE --env TEXT --secrets TEXT --label TEXT --volume TEXT --env-file TEXT --secrets-file TEXT --timeout TEXT --detach --namespace TEXT --with TEXT --python TEXT]`
+
+### `hf models` — Interact with models on the Hub.
+
+- `hf models card MODEL_ID` — Get the model card (README) for a model on the Hub. `[--metadata --text --format CHOICE]`
+- `hf models info MODEL_ID` — Get info about a model on the Hub. `[--revision TEXT --expand TEXT --format CHOICE]`
+- `hf models list` — List models on the Hub, or files in a model repo. `[--search TEXT --author TEXT --filter TEXT --num-parameters TEXT --sort CHOICE --limit INTEGER --expand TEXT --human-readable --tree --recursive --revision TEXT --format CHOICE]`
+
+### `hf papers` — Interact with papers on the Hub.
+
+- `hf papers info PAPER_ID` — Get info about a paper on the Hub. `[--format CHOICE]`
+- `hf papers list` — List daily papers on the Hub. `[--date TEXT --week TEXT --month TEXT --submitter TEXT --sort CHOICE --limit INTEGER --format CHOICE]`
+- `hf papers read PAPER_ID` — Read a paper as markdown. `[--format CHOICE]`
+- `hf papers search QUERY` — Search papers on the Hub. `[--limit INTEGER --format CHOICE]`
+
+### `hf repos` — Manage repos on the Hub.
+
+- `hf repos branch create REPO_ID BRANCH` — Create a new branch for a repo on the Hub. `[--revision TEXT --type CHOICE --exist-ok --format CHOICE]`
+- `hf repos branch delete REPO_ID BRANCH` — Delete a branch from a repo on the Hub. `[--type CHOICE --format CHOICE]`
+- `hf repos create REPO_ID` — Create a new repo on the Hub. `[--type CHOICE --space-sdk TEXT --private --public --protected --exist-ok --resource-group-id TEXT --flavor CHOICE --storage CHOICE --sleep-time INTEGER --secrets TEXT --secrets-file TEXT --env TEXT --env-file TEXT --volume TEXT --format CHOICE]`
+- `hf repos delete REPO_ID` — Delete a repo from the Hub. This is an irreversible operation. `[--type CHOICE --missing-ok --yes --format CHOICE]`
+- `hf repos delete-files REPO_ID PATTERNS` — Delete files from a repo on the Hub. `[--type CHOICE --revision TEXT --commit-message TEXT --commit-description TEXT --create-pr --format CHOICE]`
+- `hf repos duplicate FROM_ID` — Duplicate a repo on the Hub (model, dataset, or Space). `[--type CHOICE --private --public --protected --exist-ok --flavor CHOICE --storage CHOICE --sleep-time INTEGER --secrets TEXT --secrets-file TEXT --env TEXT --env-file TEXT --volume TEXT --format CHOICE]`
+- `hf repos move FROM_ID TO_ID` — Move a repository from a namespace to another namespace. `[--type CHOICE --format CHOICE]`
+- `hf repos settings REPO_ID` — Update the settings of a repository. `[--gated CHOICE --private --public --protected --type CHOICE --format CHOICE]`
+- `hf repos tag create REPO_ID TAG` — Create a tag for a repo. `[--message TEXT --revision TEXT --type CHOICE --format CHOICE]`
+- `hf repos tag delete REPO_ID TAG` — Delete a tag for a repo. `[--yes --type CHOICE --format CHOICE]`
+- `hf repos tag list REPO_ID` — List tags for a repo. `[--type CHOICE --format CHOICE]`
+
+### `hf skills` — Manage skills for AI assistants.
+
+- `hf skills add` — Download a Hugging Face skill and install it for an AI assistant. `[--claude --global --dest PATH --force --format CHOICE]`
+- `hf skills preview` — Print the generated `hf-cli` SKILL.md to stdout. `[--format CHOICE]`
+- `hf skills upgrade` — Upgrade installed Hugging Face marketplace skills. `[--claude --global --dest PATH --format CHOICE]`
+
+### `hf spaces` — Interact with spaces on the Hub.
+
+- `hf spaces card SPACE_ID` — Get the Space card (README) for a Space on the Hub. `[--metadata --text --format CHOICE]`
+- `hf spaces dev-mode SPACE_ID` — Enable or disable dev mode on a Space. `[--stop --format CHOICE]`
+- `hf spaces hardware` — List available hardware options for Spaces. `[--format CHOICE]`
+- `hf spaces hot-reload SPACE_ID` — Hot-reload any Python file of a Space without a full rebuild + restart. `[--local-file PATH --skip-checks --skip-summary --format CHOICE]`
+- `hf spaces info SPACE_ID` — Get info about a space on the Hub. `[--revision TEXT --expand TEXT --format CHOICE]`
+- `hf spaces list` — List spaces on the Hub, or files in a space repo. `[--search TEXT --author TEXT --filter TEXT --sort CHOICE --limit INTEGER --expand TEXT --human-readable --tree --recursive --revision TEXT --format CHOICE]`
+- `hf spaces logs SPACE_ID` — Fetch the run or build logs of a Space. `[--build --follow --tail INTEGER --format CHOICE]`
+- `hf spaces pause SPACE_ID` — Pause a Space. `[--format CHOICE]`
+- `hf spaces restart SPACE_ID` — Restart a Space. `[--factory-reboot --format CHOICE]`
+- `hf spaces search QUERY` — Search spaces on the Hub using semantic search. `[--filter TEXT --sdk TEXT --include-non-running --description --limit INTEGER --format CHOICE]`
+- `hf spaces settings SPACE_ID` — Update the settings of a Space. `[--sleep-time INTEGER --hardware CHOICE --format CHOICE]`
+- `hf spaces volumes delete SPACE_ID` — Remove all volumes from a Space. `[--yes --format CHOICE]`
+- `hf spaces volumes list SPACE_ID` — List volumes mounted in a Space. `[--format CHOICE]`
+- `hf spaces volumes set SPACE_ID` — Set (replace) volumes for a Space. `[--volume TEXT --format CHOICE]`
+
+### `hf webhooks` — Manage webhooks on the Hub.
+
+- `hf webhooks create --watch TEXT` — Create a new webhook. `[--url TEXT --job-id TEXT --domain CHOICE --secret TEXT --format CHOICE]`
+- `hf webhooks delete WEBHOOK_ID` — Delete a webhook permanently. `[--yes --format CHOICE]`
+- `hf webhooks disable WEBHOOK_ID` — Disable an active webhook. `[--format CHOICE]`
+- `hf webhooks enable WEBHOOK_ID` — Enable a disabled webhook. `[--format CHOICE]`
+- `hf webhooks info WEBHOOK_ID` — Show full details for a single webhook. `[--format CHOICE]`
+- `hf webhooks list` — List all webhooks for the current user. `[--format CHOICE]`
+- `hf webhooks update WEBHOOK_ID` — Update an existing webhook. Only provided options are changed. `[--url TEXT --watch TEXT --domain CHOICE --secret TEXT --format CHOICE]`
+
+## Common options
+
+- `--format` — Output format: `--format json` (or `--json`) or `--format table` (default).
+- `-q / --quiet` — Print only IDs (one per line).
+- `--revision` — Git revision id which can be a branch name, a tag, or a commit hash.
+- `--token` — Use a User Access Token. Prefer setting `HF_TOKEN` env var instead of passing `--token`.
+- `--type` — The type of repository (model, dataset, or space).
+
+## Mounting repos as local filesystems
+
+To mount Hub repositories or buckets as local filesystems — no download, no copy, no waiting — use `hf-mount`. Files are fetched on demand. GitHub: https://github.com/huggingface/hf-mount
+
+Install: `curl -fsSL https://raw.githubusercontent.com/huggingface/hf-mount/main/install.sh | sh`
+
+Some command examples:
+- `hf-mount start repo openai-community/gpt2 /tmp/gpt2` — mount a repo (read-only)
+- `hf-mount start --hf-token $HF_TOKEN bucket myuser/my-bucket /tmp/data` — mount a bucket (read-write)
+- `hf-mount status` / `hf-mount stop /tmp/data` — list or unmount
+
+## Tips
+
+- Use `hf <command> --help` for full options, descriptions, usage, and real-world examples
+- Authenticate with `HF_TOKEN` env var (recommended) or with `--token`
+- Update the CLI with `hf update` (uses the correct command for the detected install method)

USO_DE_IA.md

@@ -0,0 +1,69 @@
+# Uso de inteligencia artificial en el desarrollo de Morphos
+## Proyecto final — Curso de Desarrollo Web 2026
+
+---
+
+## Modelo utilizado
+
+Se utilizó exclusivamente Claude Code (Sonnet 4.6) de Anthropic como asistente de desarrollo a lo largo de todo el proyecto.
+
+---
+
+## Enfoque: Spec Driven Development
+
+El uso de IA no consistió en generar código y aceptarlo sin más. Se aplicó un enfoque de desarrollo guiado por especificaciones: en cada paso se definió primero el comportamiento esperado, funciones base, las restricciones de diseño y los criterios de aceptación, y el modelo generó propuestas dentro de ese marco. La arquitectura, la separación de módulos, las decisiones de estructura y el flujo de datos fueron definidos y controlados por mi parte en todo momento gracias a los criterios y conocimientos adquiridos durante el curso.
+
+El modelo actuó como ejecutor de decisiones ya tomadas, no como tomador de decisiones.
+
+---
+
+## Literatura de referencia en patología clínica veterinaria
+
+Para el motor de detección de patrones (`analisis.js`) y los datos de referencia (`valores_referencia.json`, `alteraciones.json`), se proporcionó al modelo literatura especializada en patología clínica veterinaria como contexto de generación.
+
+Los rangos de referencia por especie, los ajustes por edad, raza y sexo, las descripciones clínicas de cada alteración, y la lógica de clasificación de gravedad fueron **validados gracias a mi formación y experiencia profesional en Medicina Veterinaria**, antes de ser incorporados al código. El modelo fue un medio para estructurar y codificar ese conocimiento, no la fuente del mismo.
+
+Textos de referencia utilizados:
+- Thrall,  *Veterinary Hematology and Clinical Chemistry*, 3.ª ed. 2022
+- Weiss, — *Schalm's Veterinary Hematology*, 7.ª ed. 2022
+---
+
+## Afinamiento del prompt y control de salidas del modelo de IA
+
+Morphos utiliza medGemma como modelo de interpretación clínica. Durante el desarrollo se detectó que el modelo producía salidas con problemas recurrentes:
+
+- Respuestas en inglés a pesar de instrucciones en español
+- Tokens de control expuestos en la salida (`<start_of_turn>`, `<unused94>`, `<unused95>`)
+- Bloques de LaTeX embebidos en la respuesta
+- Párrafos repetidos en bucle al acercarse al límite de tokens
+- Prefijos de rol visibles al inicio del texto
+
+Se iteró sobre el prompt y se implementó una función de limpieza de salida (`limpiarRespuesta` en `ia.js`) que elimina estos artefactos antes de mostrar el resultado al usuario. El prompt final incluye restricciones explícitas de idioma, alcance clínico y formato de respuesta.
+
+---
+
+## Caché y optimización de rendimiento
+
+Durante las auditorías de rendimiento con Lighthouse se identificó que la carga de fuentes tipográficas locales y librerías (PDF.js) afectaba negativamente las métricas. Se implementaron las siguientes mejoras, asistidas por el modelo:
+
+- Directivas `preload` y `preconnect` en el `<head>` para recursos críticos
+- Caché de larga duración para fuentes, CSS y JS en `.htaccess`
+- Caché en disco de 30 minutos para las respuestas de la API de PubMed, evitando llamadas repetidas a la misma consulta
+- Compresión gzip habilitada por tipo de contenido
+
+---
+
+## Auditoría final de código
+
+Al concluir el desarrollo se realizó una auditoría asistida por IA con los siguientes objetivos:
+
+**Código muerto**
+- Identificación y eliminación de exportaciones sin consumidores y código que ya no era necesario o era experimental
+
+**Seguridad**
+- Protección de archivos sensibles (`.env`, `setup.php`) mediante `.htaccess`
+- Sanitización de datos externos de APIs con `textContent` en lugar de `innerHTML`, eliminando el riesgo de XSS
+- Validación de URLs externas antes de usarlas como atributos `href`
+- Separación del nombre de usuario del SVG estático al actualizar el botón de sesión, evitando inyección de HTML desde la base de datos
+
+---

api/auth.php

@@ -0,0 +1,115 @@
+<?php
+
+session_start();
+header('Content-Type: application/json; charset=utf-8');
+
+// Verificar estado de sesión (GET)
+if ($_SERVER['REQUEST_METHOD'] === 'GET') {
+    echo json_encode([
+        'autenticado' => isset($_SESSION['morphos_usuario']),
+        'nombre' => $_SESSION['morphos_nombre'] ?? null,
+    ]);
+    exit;
+}
+
+if ($_SERVER['REQUEST_METHOD'] !== 'POST') {
+    http_response_code(405);
+    echo json_encode(['error' => 'Método no permitido.']);
+    exit;
+}
+
+require __DIR__ . '/conexion.php';
+
+if (!$conexion) {
+    http_response_code(503);
+    echo json_encode(['error' => 'Error de conexión con la base de datos.']);
+    exit;
+}
+
+$cuerpo = json_decode(file_get_contents('php://input'), true) ?? [];
+$accion = $cuerpo['accion'] ?? '';
+
+switch ($accion) {
+
+    case 'login':
+        $email = trim($cuerpo['email'] ?? '');
+        $password = $cuerpo['password'] ?? '';
+
+        if (!$email || !$password) {
+            http_response_code(422);
+            echo json_encode(['error' => 'Email y contraseña son requeridos.']);
+            exit;
+        }
+
+        $stmt = $conexion->prepare("SELECT id, nombre, email, password FROM usuarios WHERE email = :email LIMIT 1");
+        $stmt->bindParam(':email', $email);
+        $stmt->execute();
+        $usuario = $stmt->fetch(PDO::FETCH_ASSOC);
+
+        if ($usuario && password_verify($password, $usuario['password'])) {
+            $_SESSION['morphos_usuario'] = $usuario['email'];
+            $_SESSION['morphos_nombre'] = $usuario['nombre'];
+            echo json_encode(['ok' => true, 'nombre' => $usuario['nombre']]);
+        } else {
+            http_response_code(401);
+            echo json_encode(['error' => 'Email o contraseña incorrectos.']);
+        }
+        break;
+
+    case 'registro':
+        $nombre = trim($cuerpo['nombre'] ?? '');
+        $apellido = trim($cuerpo['apellido'] ?? '');
+        $email = trim($cuerpo['email'] ?? '');
+        $password = $cuerpo['password'] ?? '';
+
+        if (!$nombre || !$apellido || !$email || !$password) {
+            http_response_code(422);
+            echo json_encode(['error' => 'Todos los campos son requeridos.']);
+            exit;
+        }
+
+        if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
+            http_response_code(422);
+            echo json_encode(['error' => 'El email no es válido.']);
+            exit;
+        }
+
+        if (strlen($password) < 6) {
+            http_response_code(422);
+            echo json_encode(['error' => 'La contraseña debe tener al menos 6 caracteres.']);
+            exit;
+        }
+
+        $stmt = $conexion->prepare("SELECT id FROM usuarios WHERE email = :email LIMIT 1");
+        $stmt->bindParam(':email', $email);
+        $stmt->execute();
+        if ($stmt->fetch()) {
+            http_response_code(409);
+            echo json_encode(['error' => 'Ya existe una cuenta con ese email.']);
+            exit;
+        }
+
+        $hash = password_hash($password, PASSWORD_DEFAULT);
+        $stmt = $conexion->prepare(
+            "INSERT INTO usuarios (nombre, apellido, email, password) VALUES (:nombre, :apellido, :email, :password)"
+        );
+        $stmt->bindParam(':nombre', $nombre);
+        $stmt->bindParam(':apellido', $apellido);
+        $stmt->bindParam(':email', $email);
+        $stmt->bindParam(':password', $hash);
+        $stmt->execute();
+
+        $_SESSION['morphos_usuario'] = $email;
+        $_SESSION['morphos_nombre'] = $nombre;
+        echo json_encode(['ok' => true, 'nombre' => $nombre]);
+        break;
+
+    case 'logout':
+        session_destroy();
+        echo json_encode(['ok' => true]);
+        break;
+
+    default:
+        http_response_code(400);
+        echo json_encode(['error' => 'Acción no válida.']);
+}

api/conexion.php

@@ -0,0 +1,49 @@
+<?php
+
+// Try MySQL first (local XAMPP), fallback to SQLite (Docker / HF Spaces)
+$dbHost = '127.0.0.1';
+$dbUsuario = 'root';
+$dbClave = '';
+$dbNombre = 'morphos_db';
+$dbPort = 3306;
+$dbPath = __DIR__ . '/../data/morphos.db';
+
+if (file_exists(__DIR__ . '/.env')) {
+    foreach (file(__DIR__ . '/.env', FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES) as $line) {
+        if (str_starts_with($line, 'DB_PORT=')) $dbPort = (int) trim(substr($line, 8));
+    }
+}
+
+$conexion = null;
+
+// Attempt MySQL only if not explicitly forced to SQLite
+$useSqlite = getenv('DB_FORCE_SQLITE') === '1';
+
+if (!$useSqlite) {
+    try {
+        $conexion = new PDO("mysql:host=$dbHost;port=$dbPort;dbname=$dbNombre;charset=utf8mb4", $dbUsuario, $dbClave);
+        $conexion->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
+    } catch (PDOException $e) {
+        $conexion = null;
+    }
+}
+
+// Fallback to SQLite
+if (!$conexion) {
+    try {
+        $conexion = new PDO("sqlite:$dbPath");
+        $conexion->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
+
+        // Ensure users table exists (idempotent)
+        $conexion->exec("CREATE TABLE IF NOT EXISTS usuarios (
+            id INTEGER PRIMARY KEY AUTOINCREMENT,
+            nombre TEXT NOT NULL,
+            apellido TEXT NOT NULL,
+            email TEXT NOT NULL UNIQUE,
+            password TEXT NOT NULL,
+            creado_en DATETIME DEFAULT CURRENT_TIMESTAMP
+        )");
+    } catch (PDOException $e) {
+        $conexion = null;
+    }
+}

api/hf_proxy.php

@@ -0,0 +1,111 @@
+<?php
+header('Content-Type: application/json; charset=utf-8');
+
+if ($_SERVER['REQUEST_METHOD'] !== 'POST') { http_response_code(405); exit; }
+
+$hfKey = $_ENV['HF_API_KEY'] ?? $_SERVER['HF_API_KEY'] ?? getenv('HF_API_KEY') ?? '';
+
+if (!$hfKey && file_exists(__DIR__ . '/.env')) {
+    foreach (file(__DIR__ . '/.env', FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES) as $line) {
+        if (str_starts_with($line, 'HF_API_KEY=')) { $hfKey = trim(substr($line, 11)); break; }
+    }
+}
+
+if (!$hfKey) { http_response_code(503); echo json_encode(['error' => 'Servicio no configurado.']); exit; }
+
+$body = json_decode(file_get_contents('php://input'), true);
+$SPACE = 'https://blackmistcode-morphos-medgemma.hf.space/gradio_api';
+$auth = ['Content-Type: application/json', "Authorization: Bearer $hfKey"];
+
+set_time_limit(120);
+
+function hf_get(string $url, array $headers, ?string $post = null): array {
+    $ch = curl_init($url);
+    curl_setopt_array($ch, [CURLOPT_RETURNTRANSFER => true, CURLOPT_HTTPHEADER => $headers, CURLOPT_TIMEOUT => 120]);
+    if ($post !== null) { curl_setopt($ch, CURLOPT_POST, true); curl_setopt($ch, CURLOPT_POSTFIELDS, $post); }
+    return [curl_exec($ch), curl_getinfo($ch, CURLINFO_HTTP_CODE)];
+}
+
+// Upload a data URL to the Gradio /upload endpoint and return a FileData object,
+// or fall back to the raw data URL format if the upload fails.
+function uploadImagen(string $space, string $hfKey, string $dataUrl): ?array {
+    if (!preg_match('/^data:(image\/[\w+]+);base64,(.+)$/s', $dataUrl, $m)) return null;
+    $mimeType = $m[1];
+    $ext = explode('/', $mimeType)[1] ?? 'jpg';
+    $binary = base64_decode($m[2]);
+    if ($binary === false) return null;
+
+    $boundary = bin2hex(random_bytes(16));
+    $body = "--$boundary\r\n"
+        . "Content-Disposition: form-data; name=\"files\"; filename=\"image.$ext\"\r\n"
+        . "Content-Type: $mimeType\r\n\r\n"
+        . $binary
+        . "\r\n--$boundary--\r\n";
+
+    $ch = curl_init("$space/upload");
+    curl_setopt_array($ch, [
+        CURLOPT_RETURNTRANSFER => true,
+        CURLOPT_POST => true,
+        CURLOPT_POSTFIELDS => $body,
+        CURLOPT_HTTPHEADER => [
+            "Authorization: Bearer $hfKey",
+            "Content-Type: multipart/form-data; boundary=$boundary",
+        ],
+        CURLOPT_TIMEOUT => 60,
+    ]);
+    $result = curl_exec($ch);
+    $code = curl_getinfo($ch, CURLINFO_HTTP_CODE);
+    curl_close($ch);
+
+    if ($code >= 400 || !$result) {
+        // Fall back: pass as data URL directly (older Gradio versions accept this)
+        return ['url' => $dataUrl, 'orig_name' => "image.$ext", 'mime_type' => $mimeType];
+    }
+
+    $files = json_decode($result, true);
+    $path = is_array($files) && isset($files[0]) ? $files[0] : null;
+    if (!$path) {
+        return ['url' => $dataUrl, 'orig_name' => "image.$ext", 'mime_type' => $mimeType];
+    }
+
+    return [
+        'path' => $path,
+        'url' => "$space/file=" . $path,
+        'orig_name' => "image.$ext",
+        'mime_type' => $mimeType,
+    ];
+}
+
+$rawImages = array_slice(array_values($body['images'] ?? []), 0, 4);
+$data = [];
+foreach ($rawImages as $img) {
+    $data[] = $img ? uploadImagen($SPACE, $hfKey, $img) : null;
+}
+while (count($data) < 4) $data[] = null;
+$data[] = $body['prompt'] ?? '';
+
+[$submitBody, $code] = hf_get("$SPACE/call/analyze", $auth, json_encode(['data' => $data]));
+
+if ($code >= 400) { http_response_code(502); echo json_encode(['error' => "Error Space: HTTP $code"]); exit; }
+
+$eventId = json_decode($submitBody, true)['event_id'] ?? null;
+if (!$eventId) { http_response_code(502); echo json_encode(['error' => 'No se obtuvo event_id.']); exit; }
+
+[$stream] = hf_get("$SPACE/call/analyze/$eventId", ["Authorization: Bearer $hfKey"]);
+
+$result = $error = null; $lastEvent = '';
+foreach (explode("\n", $stream) as $raw) {
+    $line = rtrim($raw, "\r");
+    if (str_starts_with($line, 'event:')) $lastEvent = trim(substr($line, 6));
+    elseif (str_starts_with($line, 'data:')) {
+        $parsed = json_decode(trim(substr($line, 5)), true);
+        if (in_array($lastEvent, ['complete', 'process_completed']))
+            $result = is_array($parsed) ? $parsed[0] : ($parsed['output'] ?? $parsed);
+        elseif ($lastEvent === 'error')
+            $error = $parsed['error'] ?? 'Error del modelo.';
+    }
+}
+
+if ($error) { http_response_code(503); echo json_encode(['error' => $error]); }
+elseif ($result !== null) { echo json_encode(['text' => $result]); }
+else { http_response_code(502); echo json_encode(['error' => 'Sin respuesta del modelo.']); }

api/papers_proxy.php

@@ -0,0 +1,108 @@
+<?php
+header('Content-Type: application/json');
+
+$consulta = trim($_GET['query'] ?? '');
+if ($consulta === '') {
+    http_response_code(400);
+    echo json_encode(['error' => 'query requerido']);
+    exit;
+}
+
+$dirCache = sys_get_temp_dir() . '/morphos_papers_cache';
+if (!is_dir($dirCache)) mkdir($dirCache, 0700, true);
+
+function leerCache(string $clave, int $ttl): string|false {
+    global $dirCache;
+    $archivo = $dirCache . '/' . md5($clave) . '.json';
+    if (file_exists($archivo) && (time() - filemtime($archivo)) < $ttl) {
+        return file_get_contents($archivo);
+    }
+    return false;
+}
+
+function escribirCache(string $clave, string $contenido): void {
+    global $dirCache;
+    file_put_contents($dirCache . '/' . md5($clave) . '.json', $contenido);
+}
+
+$claveCache = 'pm:' . $consulta;
+$cached = leerCache($claveCache, 1800);
+if ($cached) { echo $cached; exit; }
+
+function fetchHttp(string $url, array $cabeceras, int $timeout = 15): array {
+    $ctx = stream_context_create(['http' => [
+        'method' => 'GET',
+        'header' => implode("\r\n", $cabeceras),
+        'timeout' => $timeout,
+        'ignore_errors' => true,
+    ]]);
+    $body = @file_get_contents($url, false, $ctx);
+    $codigo = 0;
+    foreach ($http_response_header ?? [] as $h) {
+        if (preg_match('#HTTP/\S+\s+(\d+)#', $h, $m)) $codigo = (int)$m[1];
+    }
+    return ['body' => $body, 'codigo' => $codigo];
+}
+
+$cabeceras = ['User-Agent: Morphos/1.0 (mailto:ceo@equipamed.net)', 'Accept: application/json'];
+
+$urlBusqueda = 'https://eutils.ncbi.nlm.nih.gov/entrez/eutils/esearch.fcgi'
+    . '?db=pubmed&retmode=json&retmax=100&term=' . urlencode($consulta);
+
+$resp = fetchHttp($urlBusqueda, $cabeceras);
+if ($resp['body'] === false || $resp['codigo'] >= 400) {
+    http_response_code(502);
+    echo json_encode(['error' => 'No se pudo contactar PubMed.']);
+    exit;
+}
+
+$busqueda = json_decode($resp['body'], true);
+$ids = $busqueda['esearchresult']['idlist'] ?? [];
+
+if (empty($ids)) {
+    $salida = json_encode(['total' => 0, 'data' => []]);
+    escribirCache($claveCache, $salida);
+    echo $salida;
+    exit;
+}
+
+$urlResumen = 'https://eutils.ncbi.nlm.nih.gov/entrez/eutils/esummary.fcgi'
+    . '?db=pubmed&retmode=json&id=' . implode(',', $ids);
+
+$resp2 = fetchHttp($urlResumen, $cabeceras);
+if ($resp2['body'] === false || $resp2['codigo'] >= 400) {
+    http_response_code(502);
+    echo json_encode(['error' => 'No se pudo obtener los resultados de PubMed.']);
+    exit;
+}
+
+$resumen = json_decode($resp2['body'], true);
+$resultado = $resumen['result'] ?? [];
+$uids = $resultado['uids'] ?? $ids;
+
+$papers = [];
+foreach ($uids as $uid) {
+    $p = $resultado[$uid] ?? null;
+    if (!$p) continue;
+
+    $anio = '';
+    if (!empty($p['pubdate'])) { preg_match('/\d{4}/', $p['pubdate'], $m); $anio = $m[0] ?? ''; }
+
+    $doi = '';
+    foreach ($p['articleids'] ?? [] as $aid) {
+        if ($aid['idtype'] === 'doi') { $doi = $aid['value']; break; }
+    }
+
+    $papers[] = [
+        'pmid' => $uid,
+        'title' => $p['title'] ?? 'Sin título',
+        'authors' => array_map(fn($a) => ['name' => $a['name']], $p['authors'] ?? []),
+        'year' => $anio,
+        'doi' => $doi,
+        'journal' => $p['source'] ?? '',
+    ];
+}
+
+$salida = json_encode(['total' => count($papers), 'data' => $papers]);
+escribirCache($claveCache, $salida);
+echo $salida;

api/setup.php

@@ -0,0 +1,37 @@
+<?php
+
+header('Content-Type: text/html; charset=utf-8');
+
+$dbHost = '127.0.0.1';
+$dbUsuario = 'root';
+$dbClave = '';
+$dbNombre = 'morphos_db';
+$dbPort = 3306;
+
+foreach (file(__DIR__ . '/.env', FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES) as $line) {
+    if (str_starts_with($line, 'DB_PORT=')) $dbPort = (int) trim(substr($line, 8));
+}
+
+try {
+    $conexion = new PDO("mysql:host=$dbHost;port=$dbPort;charset=utf8mb4", $dbUsuario, $dbClave);
+    $conexion->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
+
+    $conexion->exec("CREATE DATABASE IF NOT EXISTS `$dbNombre`");
+    $conexion->exec("USE `$dbNombre`");
+    $conexion->exec("
+        CREATE TABLE IF NOT EXISTS usuarios (
+            id INT AUTO_INCREMENT PRIMARY KEY,
+            nombre VARCHAR(100) NOT NULL,
+            apellido VARCHAR(100) NOT NULL,
+            email VARCHAR(150) NOT NULL UNIQUE,
+            password VARCHAR(255) NOT NULL,
+            creado_en TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+        )
+    ");
+
+    echo "<p style='font-family:sans-serif;color:green'>✓ Base de datos <strong>$dbNombre</strong> y tabla <strong>usuarios</strong> listas.</p>";
+    echo "<p style='font-family:sans-serif'><a href='../index.html'>← Volver a Morphos</a></p>";
+
+} catch (PDOException $e) {
+    echo "<p style='font-family:sans-serif;color:red'>Error: " . htmlspecialchars($e->getMessage()) . "</p>";
+}

assets/fonts/Inter/OFL.txt

@@ -0,0 +1,93 @@
+Copyright 2020 The Inter Project Authors (https://github.com/rsms/inter)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://openfontlicense.org
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

assets/fonts/Inter/README.txt

@@ -0,0 +1,118 @@
+Inter Variable Font
+===================
+
+This download contains Inter as both variable fonts and static fonts.
+
+Inter is a variable font with these axes:
+  opsz
+  wght
+
+This means all the styles are contained in these files:
+  Inter-VariableFont_opsz,wght.ttf
+  Inter-Italic-VariableFont_opsz,wght.ttf
+
+If your app fully supports variable fonts, you can now pick intermediate styles
+that aren’t available as static fonts. Not all apps support variable fonts, and
+in those cases you can use the static font files for Inter:
+  static/Inter_18pt-Thin.ttf
+  static/Inter_18pt-ExtraLight.ttf
+  static/Inter_18pt-Light.ttf
+  static/Inter_18pt-Regular.ttf
+  static/Inter_18pt-Medium.ttf
+  static/Inter_18pt-SemiBold.ttf
+  static/Inter_18pt-Bold.ttf
+  static/Inter_18pt-ExtraBold.ttf
+  static/Inter_18pt-Black.ttf
+  static/Inter_24pt-Thin.ttf
+  static/Inter_24pt-ExtraLight.ttf
+  static/Inter_24pt-Light.ttf
+  static/Inter_24pt-Regular.ttf
+  static/Inter_24pt-Medium.ttf
+  static/Inter_24pt-SemiBold.ttf
+  static/Inter_24pt-Bold.ttf
+  static/Inter_24pt-ExtraBold.ttf
+  static/Inter_24pt-Black.ttf
+  static/Inter_28pt-Thin.ttf
+  static/Inter_28pt-ExtraLight.ttf
+  static/Inter_28pt-Light.ttf
+  static/Inter_28pt-Regular.ttf
+  static/Inter_28pt-Medium.ttf
+  static/Inter_28pt-SemiBold.ttf
+  static/Inter_28pt-Bold.ttf
+  static/Inter_28pt-ExtraBold.ttf
+  static/Inter_28pt-Black.ttf
+  static/Inter_18pt-ThinItalic.ttf
+  static/Inter_18pt-ExtraLightItalic.ttf
+  static/Inter_18pt-LightItalic.ttf
+  static/Inter_18pt-Italic.ttf
+  static/Inter_18pt-MediumItalic.ttf
+  static/Inter_18pt-SemiBoldItalic.ttf
+  static/Inter_18pt-BoldItalic.ttf
+  static/Inter_18pt-ExtraBoldItalic.ttf
+  static/Inter_18pt-BlackItalic.ttf
+  static/Inter_24pt-ThinItalic.ttf
+  static/Inter_24pt-ExtraLightItalic.ttf
+  static/Inter_24pt-LightItalic.ttf
+  static/Inter_24pt-Italic.ttf
+  static/Inter_24pt-MediumItalic.ttf
+  static/Inter_24pt-SemiBoldItalic.ttf
+  static/Inter_24pt-BoldItalic.ttf
+  static/Inter_24pt-ExtraBoldItalic.ttf
+  static/Inter_24pt-BlackItalic.ttf
+  static/Inter_28pt-ThinItalic.ttf
+  static/Inter_28pt-ExtraLightItalic.ttf
+  static/Inter_28pt-LightItalic.ttf
+  static/Inter_28pt-Italic.ttf
+  static/Inter_28pt-MediumItalic.ttf
+  static/Inter_28pt-SemiBoldItalic.ttf
+  static/Inter_28pt-BoldItalic.ttf
+  static/Inter_28pt-ExtraBoldItalic.ttf
+  static/Inter_28pt-BlackItalic.ttf
+
+Get started
+-----------
+
+1. Install the font files you want to use
+
+2. Use your app's font picker to view the font family and all the
+available styles
+
+Learn more about variable fonts
+-------------------------------
+
+  https://developers.google.com/web/fundamentals/design-and-ux/typography/variable-fonts
+  https://variablefonts.typenetwork.com
+  https://medium.com/variable-fonts
+
+In desktop apps
+
+  https://theblog.adobe.com/can-variable-fonts-illustrator-cc
+  https://helpx.adobe.com/nz/photoshop/using/fonts.html#variable_fonts
+
+Online
+
+  https://developers.google.com/fonts/docs/getting_started
+  https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide
+  https://developer.microsoft.com/en-us/microsoft-edge/testdrive/demos/variable-fonts
+
+Installing fonts
+
+  MacOS: https://support.apple.com/en-us/HT201749
+  Linux: https://www.google.com/search?q=how+to+install+a+font+on+gnu%2Blinux
+  Windows: https://support.microsoft.com/en-us/help/314960/how-to-install-or-remove-a-font-in-windows
+
+Android Apps
+
+  https://developers.google.com/fonts/docs/android
+  https://developer.android.com/guide/topics/ui/look-and-feel/downloadable-fonts
+
+License
+-------
+Please read the full license text (OFL.txt) to understand the permissions,
+restrictions and requirements for usage, redistribution, and modification.
+
+You can use them in your products & projects – print or digital,
+commercial or otherwise.
+
+This isn't legal advice, please consider consulting a lawyer and see the full
+license for all details.

assets/fonts/JetBrains_Mono/OFL.txt

@@ -0,0 +1,93 @@
+Copyright 2020 The JetBrains Mono Project Authors (https://github.com/JetBrains/JetBrainsMono)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://openfontlicense.org
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

assets/fonts/JetBrains_Mono/README.txt

@@ -0,0 +1,79 @@
+JetBrains Mono Variable Font
+============================
+
+This download contains JetBrains Mono as both variable fonts and static fonts.
+
+JetBrains Mono is a variable font with this axis:
+  wght
+
+This means all the styles are contained in these files:
+  JetBrainsMono-VariableFont_wght.ttf
+  JetBrainsMono-Italic-VariableFont_wght.ttf
+
+If your app fully supports variable fonts, you can now pick intermediate styles
+that aren’t available as static fonts. Not all apps support variable fonts, and
+in those cases you can use the static font files for JetBrains Mono:
+  static/JetBrainsMono-Thin.ttf
+  static/JetBrainsMono-ExtraLight.ttf
+  static/JetBrainsMono-Light.ttf
+  static/JetBrainsMono-Regular.ttf
+  static/JetBrainsMono-Medium.ttf
+  static/JetBrainsMono-SemiBold.ttf
+  static/JetBrainsMono-Bold.ttf
+  static/JetBrainsMono-ExtraBold.ttf
+  static/JetBrainsMono-ThinItalic.ttf
+  static/JetBrainsMono-ExtraLightItalic.ttf
+  static/JetBrainsMono-LightItalic.ttf
+  static/JetBrainsMono-Italic.ttf
+  static/JetBrainsMono-MediumItalic.ttf
+  static/JetBrainsMono-SemiBoldItalic.ttf
+  static/JetBrainsMono-BoldItalic.ttf
+  static/JetBrainsMono-ExtraBoldItalic.ttf
+
+Get started
+-----------
+
+1. Install the font files you want to use
+
+2. Use your app's font picker to view the font family and all the
+available styles
+
+Learn more about variable fonts
+-------------------------------
+
+  https://developers.google.com/web/fundamentals/design-and-ux/typography/variable-fonts
+  https://variablefonts.typenetwork.com
+  https://medium.com/variable-fonts
+
+In desktop apps
+
+  https://theblog.adobe.com/can-variable-fonts-illustrator-cc
+  https://helpx.adobe.com/nz/photoshop/using/fonts.html#variable_fonts
+
+Online
+
+  https://developers.google.com/fonts/docs/getting_started
+  https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide
+  https://developer.microsoft.com/en-us/microsoft-edge/testdrive/demos/variable-fonts
+
+Installing fonts
+
+  MacOS: https://support.apple.com/en-us/HT201749
+  Linux: https://www.google.com/search?q=how+to+install+a+font+on+gnu%2Blinux
+  Windows: https://support.microsoft.com/en-us/help/314960/how-to-install-or-remove-a-font-in-windows
+
+Android Apps
+
+  https://developers.google.com/fonts/docs/android
+  https://developer.android.com/guide/topics/ui/look-and-feel/downloadable-fonts
+
+License
+-------
+Please read the full license text (OFL.txt) to understand the permissions,
+restrictions and requirements for usage, redistribution, and modification.
+
+You can use them in your products & projects – print or digital,
+commercial or otherwise.
+
+This isn't legal advice, please consider consulting a lawyer and see the full
+license for all details.

css/styles.css

@@ -0,0 +1,2607 @@
+@charset "utf-8";
+
+@font-face {
+    font-family: 'Inter';
+    src: url('../assets/fonts/Inter/Inter-VariableFont_opsz,wght.ttf') format('truetype');
+    font-weight: 100 900;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Inter';
+    src: url('../assets/fonts/Inter/Inter-Italic-VariableFont_opsz,wght.ttf') format('truetype');
+    font-weight: 100 900;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'JetBrains Mono';
+    src: url('../assets/fonts/JetBrains_Mono/JetBrainsMono-VariableFont_wght.ttf') format('truetype');
+    font-weight: 100 800;
+    font-style: normal;
+    font-display: swap;
+}
+
+:root {
+    --surface-page: #E8EEF5;
+    --surface-1: #FFFFFF;
+    --surface-header: #0A4F45;
+    --header-text: #FFFFFF;
+    --header-text-muted: rgba(255, 255, 255, 0.75);
+    --color-placeholder: #747474;
+    --header-text-action: rgba(255, 255, 255, 0.85);
+    --header-text-hover: #000000;
+    --header-input-bg: rgba(255, 255, 255, 0.12);
+    --header-input-border: rgba(255, 255, 255, 0.25);
+    --header-input-border-focus: rgba(255, 255, 255, 0.6);
+    --header-focus-ring: rgba(255, 255, 255, 0.1);
+    --surface-2: #E3EAF2;
+    --surface-3: #D6E0EB;
+    --surface-input: #FFFFFF;
+
+    --text-1: #0F1923;
+    --text-2: #2D3E50;
+    --text-3: #3D5470;
+    --text-4: #536B7A;
+    --text-accent: #0B6158;
+    --text-on-accent: #FFFFFF;
+
+    --border-1: #D0DAE4;
+    --border-2: #B8C6D4;
+    --border-focus: var(--accent);
+
+    --accent: #0F7A6B;
+    --accent-hover: #0B6158;
+    --accent-dim: #8DCCBE;
+    --focus-ring: rgba(15, 122, 107, 0.15);
+
+    --alto: #B8372C;
+    --alto-bg: rgba(184, 55, 44, 0.10);
+    --alto-border: rgba(184, 55, 44, 0.35);
+    --alto-strong: #8C271E;
+
+    --bajo: #2F6FB5;
+    --bajo-bg: rgba(47, 111, 181, 0.10);
+    --bajo-border: rgba(47, 111, 181, 0.35);
+    --bajo-strong: #21548D;
+
+    --urgent: #A21E1E;
+    --monitor: #B5791A;
+    --monitor-bg: rgba(181, 121, 26, 0.12);
+
+    --radius-sm: 4px;
+    --radius-md: 8px;
+
+    --space-1: 4px;
+    --space-2: 8px;
+    --space-3: 12px;
+    --space-4: 16px;
+    --space-5: 20px;
+    --space-6: 24px;
+
+    --dur-fast: 120ms;
+    --dur-base: 180ms;
+
+    --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
+    --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
+    --fs-xs: clamp(11px, 10.7px + 0.09vw, 12px);
+    --fs-sm: clamp(13px, 12.6px + 0.09vw, 14px);
+    --fs-ui: clamp(14px, 13.6px + 0.18vw, 16px);
+    --fs-base: clamp(16px, 15.7px + 0.09vw, 17px);
+    --fs-xl: clamp(22px, 21.3px + 0.18vw, 1.5rem);
+    --lh-snug: 1.4;
+    --lh-normal: 1.5;
+    --tracking-wide: 1px;
+    --tracking-wider: 0.1em;
+    --tracking-widest: 4px;
+}
+
+:root[data-theme="dark"] {
+    --surface-page: #0E1011;
+    --surface-header: var(--surface-1);
+    --header-text: var(--text-1);
+    --header-text-muted: var(--text-3);
+    --header-text-action: var(--text-2);
+    --header-text-hover: var(--header-text);
+    --header-input-bg: var(--surface-input);
+    --header-input-border: var(--border-1);
+    --header-input-border-focus: var(--border-focus);
+    --header-focus-ring: var(--focus-ring);
+    --surface-1: #16191B;
+    --surface-2: #1E2224;
+    --surface-3: #262B2E;
+    --surface-input: #121517;
+
+    --text-1: #FFFFFF;
+    --text-2: #E0E2DF;
+    --text-3: #C2C6C4;
+    --text-4: #B0B5B3;
+    --text-accent: #5ECDB8;
+    --text-on-accent: #062520;
+
+    --border-1: #2A2E31;
+    --border-2: #363B3E;
+    --border-focus: #5ECDB8;
+
+    --accent: #5ECDB8;
+    --accent-hover: #7BDAC7;
+    --accent-dim: #2A5A52;
+    --focus-ring: rgba(94, 205, 184, 0.15);
+
+    --alto: #F08478;
+    --alto-bg: rgba(240, 132, 120, 0.14);
+    --alto-border: rgba(240, 132, 120, 0.32);
+    --alto-strong: #F5A59B;
+
+    --bajo: #7EB8F0;
+    --bajo-bg: rgba(126, 184, 240, 0.14);
+    --bajo-border: rgba(126, 184, 240, 0.32);
+    --bajo-strong: #A3CDF5;
+
+    --urgent: #F08478;
+    --monitor: #E5B261;
+    --monitor-bg: rgba(229, 178, 97, 0.14);
+}
+
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+html, body {
+    height: 100%;
+    overflow: hidden;
+    background: var(--surface-page);
+    color: var(--text-1);
+    font-family: var(--font-sans);
+    font-size: var(--fs-base);
+    line-height: var(--lh-normal);
+    transition: background-color var(--dur-base), color var(--dur-base);
+}
+
+body {
+    display: flex;
+    flex-direction: column;
+}
+
+/*  HEADER  */
+header {
+    display: flex;
+    align-items: center;
+    gap: 20px;
+    padding: var(--space-3) var(--space-6) var(--space-3) var(--space-4);
+    background: var(--surface-header);
+    border-bottom: none;
+    flex-wrap: wrap;
+    flex-shrink: 0;
+}
+
+header #logo {
+    color: var(--header-text-muted);
+}
+
+header .barra-paciente label {
+    color: var(--header-text-muted);
+}
+
+header .barra-paciente select,
+header .barra-paciente input {
+    background: var(--header-input-bg);
+    border-color: var(--header-input-border);
+    color: var(--header-text);
+}
+
+header .barra-paciente select:focus,
+header .barra-paciente input:focus {
+    border-color: var(--header-input-border-focus);
+    box-shadow: 0 0 0 3px var(--header-focus-ring);
+}
+
+#pt-especie:has(option[value=""]:checked),
+#pt-sexo:has(option[value=""]:checked),
+#pt-edad-unidad {
+    color: var(--header-text-muted);
+}
+
+#mob-pt-especie:has(option[value=""]:checked),
+#mob-pt-sexo:has(option[value=""]:checked),
+#mob-pt-edad-unidad {
+    color: var(--color-placeholder);
+}
+
+select:has(option[value=""]:checked) {
+    color: var(--color-placeholder);
+}
+
+header .barra-paciente select option {
+    background: var(--surface-1);
+    color: var(--text-1);
+}
+
+header .boton-tema,
+header .boton-usuario {
+    color: var(--header-text-action);
+}
+
+header .boton-tema:hover,
+header .boton-usuario:hover {
+    color: var(--header-text-hover);
+}
+
+#logo {
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+    font-size: var(--fs-xl);
+    font-weight: 300;
+    letter-spacing: var(--tracking-widest);
+    color: var(--text-1);
+    margin-right: auto;
+    text-transform: uppercase;
+}
+
+#logo svg {
+    width: 1.4em;
+    height: 1.4em;
+    fill: currentColor;
+    flex-shrink: 0;
+}
+
+.barra-paciente {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    flex-wrap: wrap;
+}
+
+.barra-paciente-titulo {
+    display: none;
+}
+
+.barra-paciente label {
+    color: var(--text-3);
+    font-size: var(--fs-sm);
+    font-weight: 500;
+}
+
+button {
+    font-family: inherit;
+    font-size: inherit;
+    background: none;
+    border: none;
+    cursor: pointer;
+}
+
+input::placeholder,
+textarea::placeholder {
+    color: var(--color-placeholder);
+}
+
+.barra-paciente select,
+.barra-paciente input {
+    background: var(--surface-input);
+    border: 1px solid var(--border-1);
+    border-radius: var(--radius-sm);
+    color: var(--text-1);
+    padding: 5px var(--space-2);
+    font-size: var(--fs-ui);
+    font-family: var(--font-sans);
+    outline: none;
+    transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
+}
+
+.barra-paciente select:focus,
+.barra-paciente input:focus {
+    border-color: var(--border-focus);
+    box-shadow: 0 0 0 3px var(--focus-ring);
+}
+
+.barra-paciente select option {
+    color: var(--text-2);
+    background: var(--surface-input);
+}
+
+.barra-paciente select {
+    min-width: 110px;
+    cursor: pointer;
+}
+
+.barra-paciente input {
+    width: 7.5rem;
+}
+
+/*  ACCIONES CABECERA  */
+.acciones-cabecera {
+    display: flex;
+    gap: var(--space-2);
+    align-items: center;
+    flex-shrink: 0;
+    margin-left: 4rem;
+}
+
+/*  GRID PRINCIPAL  */
+main {
+    display: grid;
+    grid-template-columns: 1fr 1fr 40rem 30rem;
+    grid-template-rows: 1fr auto auto;
+    grid-template-areas:
+        "hema    bioquim  col3 resultados"
+        "endo    uri      col3 resultados"
+        "flujo   flujo    col3 resultados";
+    gap: 1px;
+    background: var(--border-1);
+    flex: 1;
+    min-height: 0;
+    overflow: hidden;
+}
+
+#panel-hema       { grid-area: hema; }
+#panel-bioquim    { grid-area: bioquim; }
+#panel-endo       { grid-area: endo; }
+#panel-uri        { grid-area: uri; }
+#panel-resultados { grid-area: resultados; }
+.panel-flujo      { grid-area: flujo; }
+
+.col3-wrapper {
+    grid-area: col3;
+    display: flex;
+    flex-direction: column;
+    background: var(--border-1);
+    gap: 1px;
+    overflow: hidden;
+}
+
+#panel-imagenes {
+    flex: 1;
+    min-height: 0;
+}
+
+#panel-clinico {
+    flex-shrink: 0;
+}
+
+
+/*  HEMA / BIOQUIM — contenido más grande  */
+#panel-hema,
+#panel-bioquim {
+    --fs-xs: 12px;
+    --fs-sm: 0.9rem;
+    --fs-ui: 15px;
+}
+
+#panel-hema .panel-cuerpo,
+#panel-bioquim .panel-cuerpo {
+    padding: 12px 1rem;
+}
+
+#panel-hema .fila-campo,
+#panel-bioquim .fila-campo {
+    margin-bottom: 9px;
+    gap: 0.6rem;
+}
+
+#panel-hema .fila-campo label,
+#panel-bioquim .fila-campo label {
+    font-size: var(--fs-ui);
+}
+
+#panel-hema .fila-campo input,
+#panel-bioquim .fila-campo input {
+    width: calc(6rem + 2rem);
+    padding: 6px 0.6rem;
+    font-size: var(--fs-ui);
+}
+
+#panel-hema .fila-campo .unidad,
+#panel-bioquim .fila-campo .unidad {
+    min-width: 4rem;
+    font-size: var(--fs-ui);
+}
+
+.panel {
+    background: var(--surface-1);
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+
+.panel-cabecera {
+    height: 2.5rem;
+    display: flex;
+    align-items: center;
+    padding: 0 var(--space-4);
+    font-size: clamp(13px, 12.6px + 0.09vw, 14px);
+    font-weight: 600;
+    letter-spacing: var(--tracking-wide);
+    text-transform: uppercase;
+    color: var(--text-3);
+    border-bottom: 1px solid var(--border-1);
+    background: var(--surface-2);
+    flex-shrink: 0;
+}
+
+
+
+.panel-cuerpo {
+    flex: 1;
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding: var(--space-3) var(--space-4);
+    scrollbar-width: thin;
+    scrollbar-color: var(--border-2) transparent;
+}
+
+/*  ENCABEZADOS DE COLUMNA  */
+.cabecera-columnas {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    padding: 0 0 var(--space-1) 0;
+    margin-bottom: var(--space-3);
+    border-bottom: 1px solid var(--border-1);
+    position: sticky;
+    top: 0;
+    background: var(--surface-1);
+    z-index: 1;
+}
+
+.cabecera-columnas span {
+    font-size: var(--fs-xs);
+    font-weight: 600;
+    letter-spacing: var(--tracking-wide);
+    text-transform: uppercase;
+    color: var(--color-placeholder);
+}
+
+.cabecera-columnas span:first-child {
+    flex: 1;
+}
+.cabecera-columnas span:nth-child(2) {
+    width: calc(5rem + 2rem);
+    text-align: center;
+}
+.cabecera-columnas span:nth-child(3) {
+    min-width: 50px;
+    text-align: right;
+}
+
+/*  CAMPOS DEL FORMULARIO  */
+.grupo-campo {
+    margin-bottom: 18px;
+}
+
+.titulo-grupo {
+    font-size: var(--fs-xs);
+    font-weight: 600;
+    letter-spacing: var(--tracking-wider);
+    text-transform: uppercase;
+    color: var(--text-accent);
+    margin-bottom: 14px;
+    padding-bottom: var(--space-1);
+    border-bottom: 1px solid var(--border-1);
+}
+
+.fila-campo {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 6px;
+    gap: var(--space-2);
+}
+
+.fila-campo label {
+    font-size: var(--fs-sm);
+    color: var(--text-3);
+    flex: 1;
+}
+
+.fila-campo .unidad {
+    font-size: var(--fs-xs);
+    color: var(--color-placeholder);
+    white-space: nowrap;
+    min-width: 50px;
+    text-align: right;
+}
+
+.estado-campo {
+    font-size: var(--fs-xs);
+    font-weight: 600;
+    white-space: nowrap;
+    flex-shrink: 0;
+    letter-spacing: 0.16px;
+}
+
+.estado-campo--alto {
+    color: var(--alto);
+}
+.estado-campo--bajo {
+    color: var(--bajo);
+}
+
+.fila-campo input {
+    width: calc(5rem + 2rem);
+    background: var(--surface-input);
+    border: 1px solid var(--border-1);
+    border-radius: var(--radius-sm);
+    color: var(--text-1);
+    padding: var(--space-1) var(--space-2);
+    font-size: var(--fs-ui);
+    font-family: var(--font-mono);
+    font-variant-numeric: tabular-nums;
+    text-align: right;
+    outline: none;
+    appearance: none;
+    transition: border-color var(--dur-fast), background-color var(--dur-fast), color var(--dur-fast);
+}
+
+.fila-campo input[type="number"]::-webkit-outer-spin-button,
+.fila-campo input[type="number"]::-webkit-inner-spin-button {
+    display: none;
+}
+
+.fila-campo input:focus {
+    border-color: var(--border-focus);
+    box-shadow: 0 0 0 3px var(--focus-ring);
+}
+
+.fila-campo input.alto,
+.fila-campo input.alto:focus {
+    border-color: var(--alto);
+    background: var(--alto-bg);
+    color: var(--alto-strong);
+}
+
+.fila-campo input.bajo,
+.fila-campo input.bajo:focus {
+    border-color: var(--bajo);
+    background: var(--bajo-bg);
+    color: var(--bajo-strong);
+}
+
+.fila-campo input.max-chars,
+.fila-campo input.max-chars:focus {
+    border-color: var(--monitor);
+    background: var(--monitor-bg);
+}
+
+/*  PANEL COLUMNA MEDIA (urianálisis + endocrino + imágenes)  */
+#panel-uri,
+#panel-endo {
+    --fs-ui: 15px;
+    --fs-xs: 12px;
+    --fs-sm: 0.9rem;
+}
+
+#panel-imagenes {
+    --fs-ui: 15px;
+    --fs-xs: 12px;
+    --fs-sm: 0.9rem;
+    overflow-y: auto;
+    overflow-x: hidden;
+    scrollbar-width: thin;
+    scrollbar-color: var(--border-2) transparent;
+    flex: 1;
+}
+
+#panel-imagenes .panel-cabecera {
+    position: sticky;
+    top: 0;
+    z-index: 2;
+    border-top: 1px solid var(--border-1);
+}
+
+#panel-imagenes .panel-cabecera:first-child {
+    border-top: none;
+}
+
+.col3-wrapper > .panel.subpanel:first-child > .panel-cabecera {
+    border-top: none;
+}
+
+.subpanel-anim {
+    overflow: hidden;
+    transition: height 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.subpanel-cuerpo {
+    flex-shrink: 0;
+    padding: 12px 1rem;
+}
+
+/*  TOOLTIP GLOBAL  */
+#tooltip-global {
+    position: fixed;
+    background: var(--surface-0, #1a1a1a);
+    color: #fff;
+    border: 1px solid var(--border-1);
+    border-radius: var(--radius-sm);
+    padding: 3px 8px;
+    font-size: 11px;
+    font-weight: 500;
+    white-space: nowrap;
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity 0.15s;
+    z-index: 10000;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.18);
+}
+
+#tooltip-global.visible {
+    opacity: 1;
+}
+
+/*  BOTÓN LIMPIAR PANEL  */
+.btn-limpiar-panel {
+    margin-left: auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.875rem;
+    height: 1.875rem;
+    flex-shrink: 0;
+    border: none;
+    background: transparent;
+    color: var(--text-4);
+    cursor: pointer;
+    border-radius: var(--radius-sm);
+    transition: background 0.15s, color 0.15s;
+}
+
+.btn-limpiar-panel svg {
+    width: 17.5px;
+    height: 17.5px;
+    fill: currentColor;
+}
+
+.btn-limpiar-panel:hover {
+    background: var(--alto-bg);
+    color: var(--alto);
+}
+
+/*  BOTÓN IMPORTAR PDF  */
+.btn-importar-pdf {
+    margin-left: 2px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.875rem;
+    height: 1.875rem;
+    flex-shrink: 0;
+    border: none;
+    background: transparent;
+    color: var(--text-4);
+    cursor: pointer;
+    border-radius: var(--radius-sm);
+    transition: background 0.15s, color 0.15s;
+}
+
+.btn-importar-pdf svg {
+    width: 17.5px;
+    height: 17.5px;
+    fill: currentColor;
+}
+
+.btn-importar-pdf:hover {
+    background: var(--border-1);
+    color: var(--accent);
+}
+
+.btn-importar-pdf + .btn-colapsar-subpanel {
+    margin-left: 2px;
+}
+
+/*  TOAST NOTIFICACIÓN PDF  */
+.pdf-toast {
+    position: fixed;
+    bottom: 2rem;
+    left: 50%;
+    transform: translateX(-50%) translateY(6px);
+    background: var(--surface-1);
+    color: var(--text-1);
+    border: 1px solid var(--border-1);
+    border-radius: var(--radius-md);
+    padding: var(--space-2) var(--space-4);
+    font-size: var(--fs-sm);
+    font-weight: 500;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);
+    opacity: 0;
+    transition: opacity 0.2s, transform 0.2s;
+    pointer-events: none;
+    z-index: 9999;
+    white-space: nowrap;
+}
+
+.pdf-toast--show {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0);
+}
+
+.pdf-toast--error {
+    border-color: var(--alto);
+    color: var(--alto);
+}
+
+/*  BOTÓN COLAPSAR SUBPANEL  */
+.btn-colapsar-subpanel {
+    margin-left: auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.875rem;
+    height: 1.875rem;
+    flex-shrink: 0;
+    border: none;
+    background: transparent;
+    color: var(--text-3);
+    cursor: pointer;
+    border-radius: var(--radius-sm, 4px);
+    transition: background 0.15s, color 0.15s;
+}
+
+.btn-colapsar-subpanel:hover {
+    background: var(--border-1);
+    color: var(--text-1);
+}
+
+.btn-colapsar-subpanel svg {
+    width: 16.25px;
+    height: 16.25px;
+    fill: currentColor;
+}
+
+.btn-colapsar-subpanel .icono-colapsar {
+    display: none;
+}
+
+.subpanel.collapsed .btn-colapsar-subpanel .icono-expandir {
+    display: none;
+}
+
+.subpanel.collapsed .btn-colapsar-subpanel .icono-colapsar {
+    display: block;
+}
+
+.fila-campo select {
+    width: calc(5rem + 2rem);
+    background: var(--surface-input);
+    border: 1px solid var(--border-1);
+    border-radius: var(--radius-sm);
+    color: var(--text-1);
+    padding: var(--space-1) var(--space-2);
+    font-size: var(--fs-ui);
+    font-family: var(--font-sans);
+    outline: none;
+    cursor: pointer;
+    transition: border-color var(--dur-fast), background-color var(--dur-fast);
+}
+
+.fila-campo select:focus {
+    border-color: var(--border-focus);
+    box-shadow: 0 0 0 3px var(--focus-ring);
+}
+
+
+/*  CHAT AREA (signos clínicos en resultados)  */
+.chat-area {
+    padding: 0.5rem var(--space-4);
+    border-top: 1px solid var(--border-1);
+    background: var(--surface-2);
+    flex-shrink: 0;
+}
+
+.chat-area textarea {
+    width: 100%;
+    box-sizing: border-box;
+    background: var(--surface-input);
+    border: 1px solid var(--border-1);
+    border-radius: var(--radius-sm);
+    color: var(--text-1);
+    padding: var(--space-2) var(--space-3);
+    font-size: var(--fs-ui);
+    font-family: var(--font-sans);
+    resize: none;
+    height: 4rem;
+    outline: none;
+    line-height: var(--lh-normal);
+    transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
+}
+
+.chat-area textarea:focus {
+    border-color: var(--border-focus);
+    box-shadow: 0 0 0 3px var(--focus-ring);
+}
+
+/*  PANEL DE RESULTADOS  */
+
+.seccion-resultado {
+    margin-bottom: 20px;
+}
+
+.titulo-seccion-resultado {
+    font-size: var(--fs-xs);
+    font-weight: 600;
+    letter-spacing: var(--tracking-wider);
+    text-transform: uppercase;
+    color: var(--text-accent);
+    margin-bottom: var(--space-2);
+}
+
+.titulo-patrones {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    cursor: pointer;
+}
+
+.btn-colapsar-patrones {
+    margin-left: auto;
+    display: flex;
+    align-items: center;
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: var(--text-4);
+    padding: 2px;
+    border-radius: var(--radius-sm);
+    transition: color var(--dur-fast), transform var(--dur-base);
+}
+
+.btn-colapsar-patrones:hover {
+    color: var(--text-accent);
+}
+
+.btn-colapsar-patrones svg {
+    width: 12px;
+    height: 12px;
+    fill: currentColor;
+}
+
+.btn-colapsar-patrones .icono-colapsar {
+    display: none;
+}
+
+.btn-colapsar-patrones[aria-expanded="false"] .icono-expandir {
+    display: none;
+}
+
+.btn-colapsar-patrones[aria-expanded="false"] .icono-colapsar {
+    display: block;
+}
+
+.patrones-anim {
+    overflow: hidden;
+    transition: height 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/*  PATRONES  */
+.elemento-patron {
+    background: var(--surface-2);
+    border: 1px solid var(--border-1);
+    border-left: 3px solid var(--accent);
+    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
+    padding: var(--space-2) var(--space-3);
+    margin-bottom: var(--space-2);
+}
+
+.elemento-patron .titulo-patron {
+    font-size: var(--fs-xs);
+    font-weight: 600;
+    letter-spacing: var(--tracking-wider);
+    text-transform: uppercase;
+    color: var(--text-accent);
+    margin-bottom: 2px;
+}
+
+.elemento-patron .cuerpo-patron {
+    font-size: var(--fs-sm);
+    color: var(--text-2);
+    line-height: var(--lh-normal);
+}
+
+.elemento-patron.gravedad-grave {
+    border-left-color: var(--urgent);
+}
+
+.elemento-patron.gravedad-grave .titulo-patron {
+    color: var(--urgent);
+}
+
+.elemento-patron.gravedad-moderado {
+    border-left-color: var(--monitor);
+}
+
+.elemento-patron.gravedad-moderado .titulo-patron {
+    color: var(--monitor);
+}
+
+.sin-hallazgos {
+    font-size: var(--fs-sm);
+    color: var(--text-4);
+    font-style: italic;
+}
+
+/*  IA OUTPUT  */
+#salida-ia {
+    font-size: var(--fs-ui);
+    color: var(--text-3);
+    line-height: 1.7;
+    white-space: pre-wrap;
+    background: var(--surface-2);
+    border: 1px solid var(--border-1);
+    border-radius: var(--radius-md);
+    padding: var(--space-3) var(--space-4);
+}
+
+/*  FOOTER  */
+footer {
+    display: flex;
+    align-items: center;
+    gap: var(--space-4);
+    padding: var(--space-2) var(--space-6);
+    background: var(--surface-1);
+    border-top: 1px solid var(--border-1);
+    flex-wrap: wrap;
+    flex-shrink: 0;
+}
+
+#aviso {
+    flex: 1;
+    font-size: var(--fs-xs);
+    color: var(--color-placeholder);
+    line-height: var(--lh-snug);
+}
+
+#aviso strong {
+    color: var(--color-placeholder);
+}
+
+.btn-adjuntar-mob {
+    display: none;
+    width: 100%;
+    justify-content: center;
+    gap: var(--space-2);
+    margin-top: var(--space-4);
+    background: var(--accent);
+    color: var(--text-on-accent);
+    border-color: var(--accent);
+    min-width: 100px;
+}
+
+.btn-adjuntar-mob:hover {
+    background: var(--accent-hover);
+    border-color: var(--accent-hover);
+}
+
+.btn-adjuntar-mob svg {
+    width: 18px;
+    height: 18px;
+    fill: currentColor;
+}
+
+#aviso-mob {
+    display: none;
+    font-size: var(--fs-xs);
+    color: var(--color-placeholder);
+    line-height: var(--lh-snug);
+    padding: var(--space-3) 0 var(--space-1);
+    margin-top: 3rem;
+}
+
+#aviso-mob strong {
+    color: var(--color-placeholder);
+}
+
+#creditos-mob {
+    display: none;
+    align-items: center;
+    justify-content: center;
+    gap: var(--space-1);
+    font-size: var(--fs-xs);
+    color: var(--color-placeholder);
+    white-space: nowrap;
+    padding: var(--space-3) 0;
+    margin-top: var(--space-2);
+    border-top: 1px solid var(--border-1);
+}
+
+#creditos-mob svg {
+    width: 14px;
+    height: 14px;
+    fill: currentColor;
+    flex-shrink: 0;
+}
+
+#creditos-mob a {
+    color: inherit;
+    text-decoration: none;
+}
+
+#creditos-mob a:hover {
+    color: var(--text-accent);
+}
+
+#creditos {
+    display: flex;
+    align-items: center;
+    gap: var(--space-1);
+    font-size: var(--fs-xs);
+    color: var(--color-placeholder);
+    white-space: nowrap;
+}
+
+#creditos svg {
+    width: 14px;
+    height: 14px;
+    fill: currentColor;
+    flex-shrink: 0;
+}
+
+#creditos a {
+    color: inherit;
+    text-decoration: none;
+}
+
+#creditos a:hover {
+    color: var(--text-accent);
+}
+
+.acciones-pie {
+    display: flex;
+    gap: var(--space-2);
+    flex-shrink: 0;
+}
+
+/*  BOTONES  */
+.boton {
+    padding: 7px 16px;
+    border-radius: var(--radius-sm);
+    border: 1px solid transparent;
+    font-size: var(--fs-ui);
+    font-weight: 500;
+    font-family: var(--font-sans);
+    cursor: pointer;
+    transition:
+        background-color var(--dur-fast),
+        color var(--dur-fast),
+        border-color var(--dur-fast),
+        opacity var(--dur-fast);
+    white-space: nowrap;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-1);
+}
+
+.boton:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+}
+
+
+.boton-analizar {
+    background: var(--accent);
+    color: var(--text-on-accent);
+    border-color: var(--accent);
+    min-width: 100px;
+}
+
+.boton-analizar:hover:not(:disabled) {
+    background: var(--accent-hover);
+    border-color: var(--accent-hover);
+}
+
+
+#salida-ia.cargando {
+    color: var(--text-4);
+    font-style: italic;
+}
+
+/*  IA BACKEND CONFIG  */
+
+.ia-backend-config {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--space-2) var(--space-3);
+    margin-top: var(--space-3);
+    padding-top: var(--space-3);
+    border-top: 1px solid var(--border-1);
+}
+
+.ia-backend-label {
+    font-size: var(--fs-xs);
+    color: var(--text-4);
+    font-weight: 500;
+    white-space: nowrap;
+}
+
+.ia-backend-opt {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-1);
+    font-size: var(--fs-xs);
+    color: var(--text-3);
+    cursor: pointer;
+    white-space: nowrap;
+}
+
+.ia-backend-opt input[type="radio"] {
+    accent-color: var(--accent);
+    cursor: pointer;
+}
+
+.ia-ollama-fields {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-2);
+    width: 100%;
+}
+
+.ia-text-input {
+    flex: 1;
+    min-width: 140px;
+    padding: 4px 8px;
+    font-size: var(--fs-xs);
+    font-family: var(--font-mono, monospace);
+    background: var(--surface-1);
+    border: 1px solid var(--border-1);
+    border-radius: var(--radius-sm);
+    color: var(--text-2);
+}
+
+.ia-text-input:focus {
+    outline: 2px solid var(--accent);
+    outline-offset: 1px;
+}
+
+#ia-ollama-url,
+#ia-ollama-model {
+    color: var(--color-placeholder);
+}
+
+.ia-model-input {
+    max-width: 130px;
+    flex: 0 0 auto;
+}
+
+.ia-hf-fields {
+    width: 100%;
+}
+
+.ia-select {
+    width: 100%;
+    padding: 4px 8px;
+    font-size: var(--fs-xs);
+    font-family: var(--font-sans);
+    background: var(--surface-1);
+    border: 1px solid var(--border-1);
+    border-radius: var(--radius-sm);
+    color: var(--text-2);
+    cursor: pointer;
+}
+
+.ia-select:focus {
+    outline: 2px solid var(--accent);
+    outline-offset: 1px;
+}
+
+/*  ZONAS DE IMAGEN  */
+
+#subpanel-citologia {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+}
+
+#subpanel-citologia .subpanel-anim {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+}
+
+#cuerpo-citologia {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+}
+
+#cuerpo-citologia .zonas-imagen {
+    flex-shrink: 0;
+}
+
+.zonas-imagen {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: var(--space-3);
+}
+
+.zona-imagen {
+    position: relative;
+    height: 110px;
+    border: 1.5px dashed var(--border-2);
+    border-radius: var(--radius-md);
+    cursor: pointer;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: border-color var(--dur-fast);
+}
+.zona-imagen:hover {
+    border-color: var(--accent);
+}
+.zona-imagen.con-imagen {
+    border-style: solid;
+    border-color: var(--border-1);
+}
+
+.zona-vacia svg {
+    width: 22px;
+    height: 22px;
+    fill: currentColor;
+}
+
+.zona-vacia {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--space-2);
+    color: var(--color-placeholder);
+    pointer-events: none;
+    font-size: var(--fs-xs);
+}
+
+/*  ZONA MICROSCOPIO  */
+
+.zona-microscopio {
+    position: relative;
+    flex: 1;
+    width: 100%;
+    min-height: 150px;
+    margin-top: var(--space-3);
+    border: 1.5px dashed var(--border-2);
+    border-radius: var(--radius-md);
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: border-color var(--dur-fast);
+    background: var(--surface-1);
+}
+
+.zona-microscopio:hover {
+    border-color: var(--accent);
+}
+
+.micro-vacia {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--space-2);
+    color: var(--color-placeholder);
+    font-size: var(--fs-xs);
+    pointer-events: none;
+}
+
+.micro-video {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+/* control bar */
+.micro-controles {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--space-2) var(--space-3);
+    background: var(--surface-2);
+    border-top: 1px solid var(--border-1);
+    gap: var(--space-2);
+}
+
+.micro-vacia svg {
+    width: 22px;
+    height: 22px;
+    fill: currentColor;
+}
+
+.micro-btn svg {
+    width: 16px;
+    height: 16px;
+    fill: currentColor;
+}
+
+.micro-btn-capturar svg {
+    width: 20px;
+    height: 20px;
+}
+
+.micro-btn {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 2.25rem;
+    height: 2.25rem;
+    border-radius: 50%;
+    color: var(--text-3);
+    background: var(--surface-3);
+    border: 1px solid var(--border-1);
+    flex-shrink: 0;
+    transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
+}
+
+.micro-btn:hover {
+    background: var(--border-1);
+    border-color: var(--border-2);
+    color: var(--text-1);
+}
+
+.micro-btn-capturar {
+    width: 3rem;
+    height: 3rem;
+    background: var(--accent);
+    border-color: var(--accent);
+    color: var(--text-on-accent);
+}
+
+.micro-btn-capturar:hover {
+    background: var(--accent-hover);
+    border-color: var(--accent-hover);
+}
+
+.micro-btn-capturar:disabled {
+    opacity: 0.35;
+    cursor: not-allowed;
+}
+
+.micro-badge {
+    position: absolute;
+    top: -4px;
+    right: -4px;
+    min-width: 16px;
+    height: 16px;
+    padding: 0 3px;
+    border-radius: 8px;
+    background: var(--accent);
+    color: var(--text-on-accent);
+    font-size: 10px;
+    font-weight: 700;
+    font-family: var(--font-sans);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 1.5px solid var(--surface-1);
+}
+
+/* panel-galeria */
+.micro-galeria {
+    position: absolute;
+    bottom: 3.5rem;
+    left: 0;
+    right: 0;
+    background: var(--surface-1);
+    border-top: 1px solid var(--border-1);
+    padding: var(--space-2) var(--space-3);
+    display: flex;
+    gap: var(--space-2);
+    align-items: center;
+}
+
+.micro-galeria-vacia {
+    font-size: var(--fs-xs);
+    color: var(--text-4);
+    font-style: italic;
+}
+
+.micro-thumb {
+    position: relative;
+    width: 52px;
+    height: 52px;
+    border-radius: var(--radius-sm);
+    overflow: hidden;
+    flex-shrink: 0;
+    border: 1px solid var(--border-1);
+    background: var(--surface-2);
+}
+
+.micro-thumb img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+}
+
+.micro-thumb-quitar {
+    position: absolute;
+    top: 2px;
+    right: 2px;
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+    background: rgba(0, 0, 0, 0.55);
+    color: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background var(--dur-fast);
+}
+
+.micro-thumb-quitar:hover {
+    background: rgba(0, 0, 0, 0.82);
+}
+
+.zona-img-preview {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.btn-quitar-zona svg {
+    width: 16px;
+    height: 16px;
+    fill: currentColor;
+}
+
+.btn-quitar-zona {
+    position: absolute;
+    top: var(--space-1);
+    right: var(--space-1);
+    width: 20px;
+    height: 20px;
+    border-radius: var(--radius-sm);
+    border: 1px solid var(--border-1);
+    background: var(--surface-2);
+    color: var(--text-3);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    transition: background var(--dur-fast), color var(--dur-fast);
+}
+.btn-quitar-zona:hover {
+    background: var(--surface-3);
+    color: var(--text-1);
+    border-color: var(--border-2);
+}
+
+/*  PANEL PIE DE ACCIONES  */
+.panel-pie-acciones {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    height: 2.5rem;
+    padding: 0 var(--space-4);
+    padding-bottom: 1rem;
+    background: var(--surface-2);
+    flex-shrink: 0;
+    justify-content: flex-end;
+}
+
+.panel-pie-acciones .boton {
+    padding: 7px 19px;
+}
+
+.panel-pie-acciones .boton-analizar {
+    min-width: 7.5rem;
+}
+
+.boton-papers {
+    background: var(--surface-1);
+    color: var(--text-accent);
+    border-color: var(--accent);
+}
+
+.boton-papers:hover:not(:disabled) {
+    background: var(--surface-2);
+}
+
+/*  THEME TOGGLE  */
+.boton-tema {
+    background: transparent;
+    color: var(--text-2);
+    border: 1px solid var(--border-1);
+    border-radius: var(--radius-sm);
+    padding: 5px 12px;
+    display: inline-flex;
+    align-items: center;
+    min-height: 32px;
+}
+
+.boton-tema:hover {
+    background: var(--surface-2);
+    color: var(--text-1);
+    border-color: var(--border-2);
+}
+
+.icono-sol {
+    display: none;
+    width: 14px;
+    height: 14px;
+    fill: currentColor;
+}
+.icono-luna {
+    display: block;
+    width: 14px;
+    height: 14px;
+    fill: currentColor;
+}
+
+[data-theme="dark"] .icono-sol {
+    display: block;
+}
+[data-theme="dark"] .icono-luna {
+    display: none;
+}
+
+
+
+/*  BOTÓN COLAPSAR FLUJO  */
+.btn-colapsar-flujo {
+    margin-left: auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.875rem;
+    height: 1.875rem;
+    flex-shrink: 0;
+    border: none;
+    background: transparent;
+    color: var(--text-3);
+    cursor: pointer;
+    border-radius: var(--radius-sm, 4px);
+    transition: background 0.15s, color 0.15s;
+}
+
+.btn-colapsar-flujo:hover {
+    background: var(--border-1);
+    color: var(--text-1);
+}
+
+.btn-colapsar-flujo svg {
+    width: 16.25px;
+    height: 16.25px;
+    fill: currentColor;
+}
+
+.btn-colapsar-flujo .icono-colapsar {
+    display: none;
+}
+
+.panel-flujo.collapsed .btn-colapsar-flujo .icono-expandir {
+    display: none;
+}
+
+.panel-flujo.collapsed .btn-colapsar-flujo .icono-colapsar {
+    display: block;
+}
+
+main {
+    transition: grid-template-rows 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+#panel-flujo::after {
+    content: '';
+    display: block;
+    height: 0.5rem;
+    flex-shrink: 0;
+}
+
+/*  PANEL FLUJO DE TRABAJO  */
+.cuerpo-flujo {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: 1.5rem;
+    padding: 0.3rem 20px;
+    overflow: hidden;
+}
+
+.pasos-flujo {
+    list-style: none;
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+}
+
+.pasos-flujo li {
+    flex: 1;
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    justify-content: flex-start;
+    text-align: left;
+    gap: 10px;
+    padding: 0 12px;
+    position: relative;
+}
+
+.pasos-flujo li + li::before {
+    content: "";
+    position: absolute;
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 1px;
+    height: 70%;
+    background: var(--border-1);
+}
+
+.num-paso {
+    width: 28px;
+    height: 28px;
+    fill: var(--accent);
+    flex-shrink: 0;
+    margin-top: 0.1rem;
+}
+
+.pasos-flujo strong {
+    display: block;
+    font-size: var(--fs-xs);
+    color: var(--text-2);
+    font-weight: 600;
+}
+
+.pasos-flujo p {
+    font-size: var(--fs-xs);
+    color: var(--text-3);
+    line-height: var(--lh-snug);
+}
+
+/*  NAV INFERIOR  */
+.nav-inferior {
+    display: none;
+    background: var(--surface-1);
+    border-top: 1px solid var(--border-1);
+    flex-shrink: 0;
+}
+
+.tab-nav {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 0.2rem;
+    color: var(--text-4);
+    font-size: 0.6rem;
+    font-weight: 500;
+    letter-spacing: 0.5px;
+    transition: color var(--dur-fast);
+    padding: 0.4rem 4px 0.3rem;
+    border-top: 2px solid transparent;
+}
+
+.tab-nav:hover {
+    color: var(--text-2);
+}
+
+.tab-nav.activo {
+    color: var(--accent);
+    border-top-color: var(--accent);
+}
+
+.tab-nav svg {
+    width: 20px;
+    height: 20px;
+    flex-shrink: 0;
+    fill: currentColor;
+}
+
+/*  PANEL PACIENTE   */
+
+.panel-cuerpo--paciente {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+    padding: var(--space-3) var(--space-4);
+}
+
+.fila-paciente {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+}
+
+.fila-paciente label {
+    font-size: var(--fs-sm);
+    font-weight: 500;
+    color: var(--text-3);
+    letter-spacing: 0.3px;
+}
+
+.fila-paciente select,
+.fila-paciente input[type="text"],
+.fila-paciente input[type="number"] {
+    height: 36px;
+    padding: 0 var(--space-3);
+    background: var(--surface-input);
+    border: 1px solid var(--border-1);
+    border-radius: var(--radius-sm);
+    color: var(--text-1);
+    font-size: var(--fs-ui);
+    font-family: var(--font-sans);
+    outline: none;
+    width: 100%;
+    transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
+}
+
+.fila-paciente select:focus,
+.fila-paciente input:focus {
+    border-color: var(--border-focus);
+    box-shadow: 0 0 0 3px var(--focus-ring);
+}
+
+#pt-raza::placeholder,
+#pt-edad::placeholder {
+    color: var(--header-text-muted);
+}
+
+#mob-pt-raza::placeholder,
+#mob-pt-edad::placeholder {
+    color: var(--color-placeholder);
+}
+
+.fila-paciente-edad {
+    display: flex;
+    gap: var(--space-2);
+}
+
+.fila-paciente-edad input {
+    flex: 1;
+}
+
+.fila-paciente-edad select {
+    width: 110px;
+    flex-shrink: 0;
+}
+
+/*  EXAMENES SUBTABS BAR  */
+#examenes-subtabs-bar {
+    flex-shrink: 0;
+    display: flex;
+    height: 2.5rem;
+    background: var(--surface-2);
+    border-bottom: 1px solid var(--border-1);
+    overflow-x: auto;
+    scrollbar-width: none;
+}
+
+.tab-examenes {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 var(--space-3);
+    font-size: clamp(13px, 12.6px + 0.09vw, 14px);
+    font-weight: 600;
+    letter-spacing: var(--tracking-wide);
+    text-transform: uppercase;
+    color: var(--text-4);
+    border-bottom: 2px solid transparent;
+    white-space: nowrap;
+    transition: color var(--dur-fast), border-color var(--dur-fast);
+}
+
+.tab-examenes:hover {
+    color: var(--text-2);
+}
+
+.tab-examenes.activo {
+    color: var(--text-3);
+    border-bottom-color: var(--accent);
+}
+
+/*  SOLO DESKTOP */
+@media (min-width: 1101px) {
+    .cabecera-columnas--mobile-only {
+        display: none;
+    }
+
+    .cabecera-col-btns {
+        display: none;
+    }
+
+    #panel-paciente,
+    #examenes-subtabs-bar {
+        display: none;
+    }
+
+    .subpanel > .panel-cabecera,
+    #panel-flujo > .panel-cabecera {
+        cursor: default;
+    }
+
+    .subpanel > .panel-cabecera button,
+    #panel-flujo > .panel-cabecera button {
+        cursor: pointer;
+    }
+
+    #panel-hema .subpanel-anim,
+    #panel-bioquim .subpanel-anim {
+        flex: 1;
+        min-height: 0;
+        display: flex;
+        flex-direction: column;
+    }
+
+    #panel-hema .panel-cuerpo,
+    #panel-bioquim .panel-cuerpo {
+        min-height: 0;
+    }
+}
+
+/*  RESPONSIVE  */
+
+/* Full HD 1920×1080 */
+@media (min-width: 1920px) {
+    main {
+        grid-template-columns: 1fr 1fr 449px 399px;
+    }
+
+    #panel-hema,
+    #panel-bioquim,
+    #panel-imagenes {
+        --fs-xs:   10.9px;
+        --fs-sm:   12.5px;
+        --fs-ui:   13.1px;
+        --fs-base: 13.6px;
+    }
+
+    #panel-hema .panel-cuerpo,
+    #panel-bioquim .panel-cuerpo {
+        padding: 0.4rem 12px;
+        overflow-y: auto;
+    }
+
+    #panel-hema .cabecera-columnas span:nth-child(2),
+    #panel-bioquim .cabecera-columnas span:nth-child(2) {
+        width: calc(4.5rem + 1.5rem);
+    }
+
+    #panel-hema .grupo-campo,
+    #panel-bioquim .grupo-campo {
+        margin-bottom: 6px;
+    }
+
+    #panel-hema .titulo-grupo,
+    #panel-bioquim .titulo-grupo {
+        margin-bottom: 0.5rem;
+        padding-bottom: 0.1rem;
+    }
+
+    #panel-hema .fila-campo,
+    #panel-bioquim .fila-campo {
+        margin-bottom: 0.2rem;
+        gap: 0.4rem;
+    }
+
+    #panel-hema .fila-campo input,
+    #panel-bioquim .fila-campo input {
+        padding: 3px 0.4rem;
+        width: calc(4.5rem + 1.5rem);
+    }
+
+    #panel-hema .fila-campo .unidad,
+    #panel-bioquim .fila-campo .unidad {
+        min-width: 3rem;
+    }
+
+    #panel-bioquim .grupo-campo {
+        margin-bottom: 0.2rem;
+    }
+
+    #panel-bioquim .fila-campo {
+        margin-bottom: 2px;
+    }
+
+    #salida-ia {
+        font-size: var(--fs-sm);
+    }
+
+    .pasos-flujo li {
+        padding: 0 20px;
+    }
+
+    .cuerpo-flujo {
+        margin-top: 0;
+        margin-bottom: 0;
+        padding-top: 0.5rem;
+        padding-bottom: 0rem;
+    }
+}
+
+@media (max-width: 1100px) {
+    header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0.5rem 1rem;
+    }
+
+    #logo {
+        margin-right: 0;
+    }
+
+    .barra-paciente {
+        display: none;
+    }
+
+    .acciones-cabecera {
+        margin-left: 0;
+        align-self: center;
+    }
+
+    .acciones-cabecera .boton {
+        padding: 6px 12px;
+        font-size: var(--fs-sm);
+    }
+
+    #examenes-subtabs-bar {
+        display: flex;
+    }
+
+    #examenes-subtabs-bar[hidden] {
+        display: none;
+    }
+
+    #panel-hema > .panel-cabecera,
+    #panel-bioquim > .panel-cabecera,
+    #panel-uri > .panel-cabecera,
+    #panel-endo > .panel-cabecera {
+        display: none;
+    }
+
+    .cabecera-col-label {
+        display: none;
+    }
+
+    .cabecera-col-btns {
+        display: flex;
+        gap: 4px;
+        margin-left: auto;
+    }
+
+    .cabecera-columnas--mobile-only .btn-limpiar-panel {
+        margin-left: auto;
+    }
+
+    .cabecera-columnas--mobile-only .btn-importar-pdf {
+        margin-left: 4px;
+    }
+
+    footer {
+        padding: 0;
+        flex-direction: column;
+    }
+
+    #aviso {
+        display: none;
+    }
+
+    .btn-adjuntar-mob {
+        display: flex;
+    }
+
+    #aviso-mob {
+        display: block;
+    }
+
+    #creditos-mob {
+        display: flex;
+    }
+
+    #creditos {
+        display: none;
+    }
+
+    .nav-inferior {
+        display: flex;
+        height: 3.5rem;
+        width: 100%;
+        border-top: none;
+        order: -1;
+    }
+
+    main {
+        display: flex;
+        flex-direction: column;
+        background: var(--surface-page);
+        gap: 0;
+        overflow: hidden;
+    }
+
+    .col3-wrapper {
+        display: contents;
+    }
+
+    main > .panel,
+    .col3-wrapper > .panel {
+        display: none;
+    }
+
+    main > .panel.activo,
+    .col3-wrapper > .panel.activo {
+        display: flex;
+        flex: 1;
+        min-height: 0;
+        overflow-y: auto;
+    }
+
+    main > .panel.activo .subpanel-anim,
+    .col3-wrapper > .panel.activo .subpanel-anim {
+        overflow: visible;
+    }
+
+    #panel-resultados {
+        border-left: none;
+        border-top: none;
+        grid-column: unset;
+        min-height: unset;
+    }
+
+    .cuerpo-flujo {
+        align-items: flex-start;
+        overflow-y: auto;
+        padding: 1rem 20px;
+        margin-top: 0;
+    }
+
+    .pasos-flujo {
+        flex-direction: column;
+        gap: 1rem;
+    }
+
+    .pasos-flujo li {
+        flex-direction: row;
+        text-align: left;
+        align-items: flex-start;
+        gap: 14px;
+        padding: 0;
+    }
+
+    .pasos-flujo li + li::before {
+        display: none;
+    }
+
+    .num-paso {
+        width: 1.5rem;
+        height: 1.5rem;
+        flex-shrink: 0;
+        margin-top: 0.1rem;
+    }
+
+    .pasos-flujo strong,
+    .pasos-flujo p {
+        font-size: var(--fs-sm);
+    }
+
+    .seccion-clinica textarea {
+        flex: 1;
+        min-height: 0;
+    }
+
+    .cuerpo-clinica {
+        flex: 1;
+        min-height: 0;
+    }
+
+    .seccion-clinica .cuerpo-clinica {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .btn-colapsar-subpanel,
+    .btn-colapsar-flujo,
+    .btn-colapsar-patrones {
+        display: flex;
+    }
+
+    .pdf-toast {
+        bottom: 5rem;
+    }
+}
+
+/* Indicador de usuario */
+
+.boton-usuario {
+    font-size: var(--fs-sm);
+    font-weight: 500;
+    padding: 5px 12px;
+    min-height: 32px;
+    border: 1px solid var(--border-1);
+    border-radius: var(--radius-sm);
+    background: transparent;
+    color: var(--text-2);
+    cursor: pointer;
+    max-width: 130px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
+}
+
+.boton-usuario:hover {
+    background: var(--surface-2);
+    color: var(--text-1);
+    border-color: var(--border-2);
+}
+
+
+/* Modal overlay  */
+
+.modal-overlay {
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.45);
+    z-index: 100;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity var(--dur-base);
+}
+
+.modal-auth.visible ~ .modal-overlay,
+.modal-overlay:has(+ .modal-auth.visible) {
+    opacity: 1;
+    pointer-events: initial;
+}
+
+.modal-overlay.activo {
+    opacity: 1;
+    pointer-events: initial;
+}
+
+/* Modal*/
+
+.modal-auth {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -44%);
+    z-index: 101;
+    width: min(440px, calc(100vw - 2rem));
+    background: var(--surface-1);
+    border: 1px solid var(--border-1);
+    border-radius: var(--radius-md);
+    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18);
+    padding: var(--space-6);
+    opacity: 0;
+    transition: opacity var(--dur-base), transform var(--dur-base);
+}
+
+.modal-auth.visible {
+    opacity: 1;
+    transform: translate(-50%, -50%);
+}
+
+.modal-cerrar svg {
+    width: 16px;
+    height: 16px;
+    fill: currentColor;
+}
+
+.modal-cerrar {
+    position: absolute;
+    top: var(--space-3);
+    right: var(--space-3);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    border: none;
+    border-radius: var(--radius-sm);
+    background: transparent;
+    color: var(--text-4);
+    cursor: pointer;
+    transition: background var(--dur-fast), color var(--dur-fast);
+}
+
+.modal-cerrar:hover {
+    background: var(--surface-2);
+    color: var(--text-1);
+}
+
+.modal-titulo {
+    font-size: var(--fs-base);
+    font-weight: 600;
+    color: var(--text-1);
+    margin: 0 0 var(--space-4);
+}
+
+/*Tabs del modal */
+
+.modal-tabs {
+    display: flex;
+    gap: 2px;
+    margin-bottom: var(--space-4);
+    border-bottom: 1px solid var(--border-1);
+    padding-bottom: 0;
+}
+
+.modal-tab {
+    flex: 1;
+    padding: var(--space-2) var(--space-3);
+    font-size: var(--fs-sm);
+    font-weight: 500;
+    color: var(--text-4);
+    background: transparent;
+    border: none;
+    border-bottom: 2px solid transparent;
+    margin-bottom: -1px;
+    cursor: pointer;
+    transition: color var(--dur-fast), border-color var(--dur-fast);
+}
+
+.modal-tab:hover {
+    color: var(--text-2);
+}
+
+.modal-tab.activo {
+    color: var(--accent);
+    border-bottom-color: var(--accent);
+}
+
+/* Campos del formulario */
+
+.modal-campo {
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+    margin-bottom: var(--space-3);
+}
+
+.modal-campo label {
+    font-size: var(--fs-sm);
+    font-weight: 500;
+    color: var(--text-2);
+}
+
+.modal-campo input {
+    padding: 8px 10px;
+    border: 1px solid var(--border-1);
+    border-radius: var(--radius-sm);
+    background: var(--surface-input);
+    color: var(--text-1);
+    font-size: var(--fs-sm);
+    font-family: var(--font-sans);
+    transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
+}
+
+.modal-campo input:focus {
+    outline: none;
+    border-color: var(--border-focus);
+    box-shadow: 0 0 0 3px var(--focus-ring);
+}
+
+.modal-campo input.campo-valido {
+    border-color: var(--accent);
+    box-shadow: 0 0 0 3px var(--focus-ring);
+}
+
+.modal-campo input.campo-invalido {
+    border-color: var(--alto);
+    box-shadow: 0 0 0 3px rgba(184, 55, 44, 0.12);
+}
+
+.aviso-legal-texto {
+    font-size: var(--fs-sm);
+    color: var(--text-3);
+    line-height: 1.4;
+    margin: 0;
+}
+
+.aviso-legal-aceptar {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-top: var(--space-2);
+}
+
+.aviso-legal-aceptar label {
+    font-size: var(--fs-sm);
+    font-weight: 500;
+    color: var(--text-2);
+    cursor: pointer;
+}
+
+.aviso-legal-aceptar input[type="checkbox"] {
+    width: 16px;
+    height: 16px;
+    min-width: 16px;
+    flex-shrink: 0;
+    padding: 0;
+    border: 1px solid var(--border-1);
+    border-radius: 3px;
+    accent-color: var(--accent);
+    cursor: pointer;
+}
+
+.modal-fila-doble {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: var(--space-3);
+}
+
+.modal-error {
+    font-size: var(--fs-sm);
+    color: var(--alto);
+    margin: 0 0 var(--space-3);
+    min-height: 1.2em;
+}
+
+.modal-submit {
+    width: 100%;
+    margin-top: var(--space-2);
+    padding: 10px;
+    font-size: var(--fs-sm);
+    font-weight: 600;
+    justify-content: center;
+}
+
+.boton-primario {
+    background: var(--accent);
+    color: var(--text-on-accent);
+    border: none;
+    border-radius: var(--radius-sm);
+    cursor: pointer;
+    transition: background var(--dur-fast);
+}
+
+.boton-primario:hover {
+    background: var(--accent-hover);
+}
+
+.boton-primario:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+}
+
+/* ═══════════════════════════════════════
+   MODAL DE PAPERS
+═══════════════════════════════════════ */
+
+.modal-papers {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -44%);
+    z-index: 101;
+    width: min(720px, calc(100vw - 2rem));
+    max-height: calc(100vh - 4rem);
+    background: var(--surface-1);
+    border: 1px solid var(--border-1);
+    border-radius: var(--radius-md);
+    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18);
+    display: flex;
+    flex-direction: column;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity var(--dur-base), transform var(--dur-base);
+}
+
+.modal-papers.visible {
+    opacity: 1;
+    pointer-events: initial;
+    transform: translate(-50%, -50%);
+}
+
+.modal-papers-cabecera {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: var(--space-3);
+    padding: var(--space-5) var(--space-5) var(--space-3);
+    border-bottom: 1px solid var(--border-1);
+    flex-shrink: 0;
+}
+
+.modal-papers-cabecera .modal-titulo {
+    margin: 0;
+}
+
+.papers-consulta-label {
+    font-size: 0.78rem;
+    color: var(--text-3);
+    margin: 4px 0 0;
+}
+
+.papers-consulta-label span {
+    color: var(--text-accent);
+    font-style: italic;
+}
+
+.papers-busqueda {
+    display: flex;
+    gap: var(--space-2);
+    padding: var(--space-3) var(--space-5);
+    border-bottom: 1px solid var(--border-1);
+}
+
+.papers-busqueda-input {
+    flex: 1;
+    background: var(--surface-input);
+    border: 1px solid var(--border-1);
+    border-radius: var(--radius-sm);
+    color: var(--text-1);
+    font-family: var(--font-sans);
+    font-size: var(--fs-sm);
+    padding: var(--space-2) var(--space-3);
+    outline: none;
+    transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
+}
+
+.papers-busqueda-input:focus {
+    border-color: var(--border-focus);
+    box-shadow: 0 0 0 3px var(--focus-ring);
+}
+
+.papers-busqueda-btn {
+    background: var(--accent);
+    border: none;
+    border-radius: var(--radius-sm);
+    color: var(--text-on-accent);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--space-2) var(--space-3);
+    transition: background var(--dur-fast);
+}
+
+.papers-busqueda-btn:hover {
+    background: var(--accent-hover);
+}
+
+.papers-lista {
+    overflow-y: auto;
+    flex: 1;
+    padding: var(--space-4) var(--space-5);
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-4);
+    scrollbar-width: thin;
+    scrollbar-color: var(--border-2) transparent;
+}
+
+.paper-tarjeta {
+    border: 1px solid var(--border-1);
+    border-radius: var(--radius-sm);
+    padding: var(--space-3) var(--space-4);
+    background: var(--surface-2);
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+
+.paper-meta {
+    display: flex;
+    gap: var(--space-2);
+    align-items: center;
+}
+
+.paper-anio {
+    font-size: 0.75rem;
+    color: var(--text-3);
+    background: var(--surface-3);
+    border-radius: 4px;
+    padding: 1px 6px;
+}
+
+.paper-revista {
+    font-size: 0.75rem;
+    color: var(--text-accent);
+    font-style: italic;
+}
+
+.paper-pdf-badge {
+    font-size: 0.7rem;
+    font-weight: 600;
+    color: var(--on-accent, #fff);
+    background: var(--accent);
+    border-radius: 3px;
+    padding: 1px 5px;
+    text-decoration: none;
+    letter-spacing: 0.03em;
+}
+
+.paper-titulo {
+    font-size: 0.9rem;
+    font-weight: 600;
+    color: var(--text-1);
+    margin: 0;
+    line-height: 1.4;
+}
+
+.paper-titulo a {
+    color: var(--text-accent);
+    text-decoration: none;
+}
+
+.paper-titulo a:hover {
+    text-decoration: underline;
+}
+
+.paper-autores {
+    font-size: 0.78rem;
+    color: var(--text-3);
+    margin: 0;
+}
+
+.paper-resumen {
+    font-size: 0.8rem;
+    color: var(--text-2);
+    margin: 4px 0 0;
+    line-height: 1.55;
+}
+
+.papers-cargando,
+.papers-vacio,
+.papers-error {
+    text-align: center;
+    padding: var(--space-6) 0;
+    color: var(--text-3);
+    font-size: 0.9rem;
+}
+
+.papers-error {
+    color: var(--rojo, #e05);
+}
+
+.papers-paginacion {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 4px;
+    padding: var(--space-3) var(--space-5) var(--space-4);
+    border-top: 1px solid var(--border-1);
+    flex-shrink: 0;
+}
+
+.papers-pag-btn {
+    min-width: 2rem;
+    height: 2rem;
+    padding: 0 var(--space-2);
+    border: 1px solid var(--border-1);
+    border-radius: var(--radius-sm);
+    background: var(--surface-2);
+    color: var(--text-2);
+    font-size: 0.85rem;
+    cursor: pointer;
+    transition: background var(--dur-fast), color var(--dur-fast);
+}
+
+.papers-pag-btn:hover:not(:disabled):not(.activo) {
+    background: var(--surface-3);
+    color: var(--text-1);
+}
+
+.papers-pag-btn.activo {
+    background: var(--accent);
+    color: var(--on-accent, #fff);
+    border-color: var(--accent);
+    font-weight: 600;
+}
+
+.papers-pag-btn:disabled {
+    opacity: 0.35;
+    cursor: not-allowed;
+}