feat: transform promo-site into React portal with integrated admin and glassmorphism

2026-03-25 12:34:33 +01:00 · 2026-03-25 12:34:33 +01:00 · 5cbe03c1e0
parent 6c560de2bd
commit 5cbe03c1e0
12 changed files with 705 additions and 825 deletions
--- a/PROGRESS.md
+++ b/PROGRESS.md
@ -33,7 +33,12 @@ Registro histórico de hitos y sesiones del proyecto.
 - Se lanzó la reconstrucción de contenedores y despliegue final en el puerto `9112`.
 - Despliegue de la **Web de Promoción** en el puerto `9113` tras corregir enlaces internos.
 - Configuración de **Auto-Despliegue** mediante `.woodpecker.yml`. El sistema ya está sincronizado.
- **Rediseño de Navegación**: Simplificación de `BottomNav` (5 items) y rediseño brutalista oscuro de `MenuSheet` para mejor usabilidad en emergencias.
+- **Rediseño de Navegación**: Simplificación de `BottomNav` (5 items) y rediseño brutalista oscuro de `MenuSheet`.
+- **Panel de Administración (Opción B)**: 
+    - Implementación de **Gestión de Medios** (Subida/Eliminación con persistencia en VPS).
+    - Migración de Protocolos de datos estáticos a **MongoDB**.
+    - Creación de la vista de **Listado de Protocolos** para administración (`/admin/protocols`).
+    - Población inicial de la DB con **55 protocolos** mediante el script de migración en el servidor.

 ### Próximos Pasos
 - Ejecutar el despliegue final de la aplicación en el VPS (puerto 9112).
--- a/promo-site/Dockerfile
+++ b/promo-site/Dockerfile
@ -1,4 +1,23 @@
+FROM node:20-alpine as build-stage
+WORKDIR /app
+COPY package*.json ./
+RUN npm install
+COPY . .
+RUN npm run build
+
 FROM nginx:alpine
-COPY . /usr/share/nginx/html/
+COPY --from=build-stage /app/dist /usr/share/nginx/html
+# Configuración para React Router
+RUN echo 'server { \
+    listen 80; \
+    location / { \
+        root /usr/share/nginx/html; \
+        index index.html; \
+        try_files $uri $uri/ /index.html; \
+    } \
+    location /api { \
+        proxy_pass http://codigo0-backend:3000; \
+    } \
+}' > /etc/nginx/conf.d/default.conf
 EXPOSE 80
 CMD ["nginx", "-g", "daemon off;"]
--- a/promo-site/index.html
+++ b/promo-site/index.html
@ -1,825 +1,15 @@
 <!DOCTYPE html>
 <html lang="es">
-<head>
-<meta charset="UTF-8">
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>Código 0 — Protocolos TES</title>
-<link rel="preconnect" href="https://fonts.googleapis.com">
-<link href="https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400&family=Barlow+Condensed:wght@400;600;700;800;900&display=swap" rel="stylesheet">
-<style>
-  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
-
-  :root {
-    --orange: #FF4500;
-    --orange-dim: #CC3700;
-    --orange-pale: #FF6633;
-    --black: #0A0A0A;
-    --surface: #111111;
-    --surface2: #1A1A1A;
-    --border: #2A2A2A;
-    --border-hot: #FF4500;
-    --text: #F0EDE8;
-    --text-dim: #888880;
-    --mono: 'Space Mono', monospace;
-    --display: 'Barlow Condensed', sans-serif;
-  }
-
-  html { scroll-behavior: smooth; }
-
-  body {
-    background: var(--black);
-    color: var(--text);
-    font-family: var(--mono);
-    font-size: 14px;
-    line-height: 1.6;
-    overflow-x: hidden;
-  }
-
-  /* SCAN LINES OVERLAY */
-  body::before {
-    content: '';
-    position: fixed;
-    inset: 0;
-    background: repeating-linear-gradient(
-      0deg,
-      transparent,
-      transparent 2px,
-      rgba(0,0,0,0.08) 2px,
-      rgba(0,0,0,0.08) 4px
-    );
-    pointer-events: none;
-    z-index: 999;
-  }
-
-  /* NAV */
-  nav {
-    position: fixed;
-    top: 0; left: 0; right: 0;
-    z-index: 100;
-    background: rgba(10,10,10,0.95);
-    border-bottom: 1px solid var(--border);
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 0 2rem;
-    height: 52px;
-    backdrop-filter: blur(8px);
-  }
-
-  .nav-logo {
-    font-family: var(--display);
-    font-weight: 900;
-    font-size: 22px;
-    letter-spacing: -0.5px;
-    color: var(--text);
-    text-decoration: none;
-  }
-  .nav-logo span { color: var(--orange); }
-
-  .nav-links {
-    display: flex;
-    gap: 2rem;
-    list-style: none;
-  }
-  .nav-links a {
-    font-family: var(--mono);
-    font-size: 11px;
-    color: var(--text-dim);
-    text-decoration: none;
-    text-transform: uppercase;
-    letter-spacing: 0.1em;
-    transition: color 0.15s;
-  }
-  .nav-links a:hover { color: var(--orange); }
-
-  .nav-cta {
-    background: var(--orange);
-    color: var(--black) !important;
-    padding: 6px 16px;
-    font-weight: 700 !important;
-  }
-  .nav-cta:hover { background: var(--orange-pale) !important; color: var(--black) !important; }
-
-  /* HERO */
-  .hero {
-    min-height: 100vh;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    padding: 6rem 2rem 4rem;
-    max-width: 1100px;
-    margin: 0 auto;
-    position: relative;
-  }
-
-  .hero-badge {
-    display: inline-flex;
-    align-items: center;
-    gap: 8px;
-    font-family: var(--mono);
-    font-size: 11px;
-    color: var(--orange);
-    border: 1px solid var(--orange);
-    padding: 4px 12px;
-    margin-bottom: 2rem;
-    letter-spacing: 0.15em;
-    text-transform: uppercase;
-    width: fit-content;
-  }
-  .hero-badge::before {
-    content: '';
-    width: 6px; height: 6px;
-    background: var(--orange);
-    border-radius: 50%;
-    animation: pulse 1.5s ease-in-out infinite;
-  }
-  @keyframes pulse {
-    0%, 100% { opacity: 1; transform: scale(1); }
-    50% { opacity: 0.4; transform: scale(0.7); }
-  }
-
-  .hero h1 {
-    font-family: var(--display);
-    font-size: clamp(64px, 12vw, 140px);
-    font-weight: 900;
-    line-height: 0.9;
-    letter-spacing: -2px;
-    text-transform: uppercase;
-    color: var(--text);
-    margin-bottom: 0.5rem;
-  }
-  .hero h1 .accent { color: var(--orange); }
-
-  .hero-sub {
-    font-family: var(--display);
-    font-size: clamp(20px, 3vw, 32px);
-    font-weight: 600;
-    color: var(--text-dim);
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-    margin-bottom: 2.5rem;
-    max-width: 700px;
-  }
-
-  .hero-desc {
-    font-family: var(--mono);
-    font-size: 14px;
-    color: var(--text-dim);
-    max-width: 560px;
-    line-height: 1.8;
-    margin-bottom: 3rem;
-  }
-
-  .hero-actions {
-    display: flex;
-    gap: 1rem;
-    flex-wrap: wrap;
-    align-items: center;
-    margin-bottom: 4rem;
-  }
-
-  .btn-primary {
-    background: var(--orange);
-    color: var(--black);
-    font-family: var(--mono);
-    font-size: 12px;
-    font-weight: 700;
-    text-transform: uppercase;
-    letter-spacing: 0.1em;
-    padding: 14px 28px;
-    text-decoration: none;
-    border: 2px solid var(--orange);
-    transition: all 0.15s;
-    display: inline-block;
-  }
-  .btn-primary:hover {
-    background: transparent;
-    color: var(--orange);
-  }
-
-  .btn-secondary {
-    background: transparent;
-    color: var(--text-dim);
-    font-family: var(--mono);
-    font-size: 12px;
-    text-transform: uppercase;
-    letter-spacing: 0.1em;
-    padding: 14px 28px;
-    text-decoration: none;
-    border: 1px solid var(--border);
-    transition: all 0.15s;
-    display: inline-block;
-  }
-  .btn-secondary:hover {
-    border-color: var(--text-dim);
-    color: var(--text);
-  }
-
-  /* QUICK INSTALL */
-  .install-block {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    background: var(--surface);
-    border: 1px solid var(--border);
-    border-left: 3px solid var(--orange);
-    padding: 12px 16px;
-    width: fit-content;
-  }
-  .install-label {
-    font-size: 10px;
-    color: var(--orange);
-    text-transform: uppercase;
-    letter-spacing: 0.15em;
-    white-space: nowrap;
-  }
-  .install-cmd {
-    font-family: var(--mono);
-    font-size: 13px;
-    color: var(--text);
-  }
-  .install-cmd .cmd-dim { color: var(--text-dim); }
-
-  /* TICKER */
-  .ticker-wrap {
-    width: 100%;
-    overflow: hidden;
-    background: var(--orange);
-    padding: 10px 0;
-    margin: 0;
-  }
-  .ticker {
-    display: flex;
-    gap: 0;
-    animation: ticker 30s linear infinite;
-    width: max-content;
-  }
-  .ticker-item {
-    font-family: var(--display);
-    font-size: 13px;
-    font-weight: 700;
-    color: var(--black);
-    text-transform: uppercase;
-    letter-spacing: 0.15em;
-    padding: 0 3rem;
-    white-space: nowrap;
-  }
-  .ticker-item::after {
-    content: '//';
-    margin-left: 3rem;
-    opacity: 0.4;
-  }
-  @keyframes ticker {
-    from { transform: translateX(0); }
-    to { transform: translateX(-50%); }
-  }
-
-  /* FEATURES */
-  .section {
-    max-width: 1100px;
-    margin: 0 auto;
-    padding: 6rem 2rem;
-  }
-
-  .section-label {
-    font-family: var(--mono);
-    font-size: 11px;
-    color: var(--orange);
-    text-transform: uppercase;
-    letter-spacing: 0.2em;
-    margin-bottom: 1rem;
-    display: flex;
-    align-items: center;
-    gap: 8px;
-  }
-  .section-label::before {
-    content: '';
-    display: block;
-    width: 24px;
-    height: 1px;
-    background: var(--orange);
-  }
-
-  .section-title {
-    font-family: var(--display);
-    font-size: clamp(36px, 5vw, 56px);
-    font-weight: 900;
-    text-transform: uppercase;
-    letter-spacing: -1px;
-    color: var(--text);
-    line-height: 1;
-    margin-bottom: 3rem;
-  }
-
-  .features-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-    gap: 1px;
-    background: var(--border);
-    border: 1px solid var(--border);
-    margin-top: 2rem;
-  }
-
-  .feature-card {
-    background: var(--surface);
-    padding: 2rem;
-    position: relative;
-    transition: background 0.15s;
-  }
-  .feature-card:hover { background: var(--surface2); }
-  .feature-card:hover .feature-icon { color: var(--orange); }
-
-  .feature-icon {
-    font-size: 24px;
-    margin-bottom: 1rem;
-    display: block;
-    transition: color 0.15s;
-  }
-
-  .feature-title {
-    font-family: var(--display);
-    font-size: 18px;
-    font-weight: 700;
-    text-transform: uppercase;
-    color: var(--text);
-    letter-spacing: 0.05em;
-    margin-bottom: 0.5rem;
-  }
-
-  .feature-desc {
-    font-family: var(--mono);
-    font-size: 12px;
-    color: var(--text-dim);
-    line-height: 1.7;
-  }
-
-  /* PROTOCOLS PREVIEW */
-  .protocols-section {
-    background: var(--surface);
-    border-top: 1px solid var(--border);
-    border-bottom: 1px solid var(--border);
-  }
-
-  .protocols-inner {
-    max-width: 1100px;
-    margin: 0 auto;
-    padding: 5rem 2rem;
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 4rem;
-    align-items: start;
-  }
-
-  .protocol-list {
-    list-style: none;
-    display: flex;
-    flex-direction: column;
-    gap: 1px;
-    background: var(--border);
-    border: 1px solid var(--border);
-  }
-
-  .protocol-item {
-    background: var(--surface2);
-    padding: 12px 16px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    cursor: pointer;
-    transition: background 0.1s;
-  }
-  .protocol-item:hover { background: #222; }
-  .protocol-item:hover .protocol-tag { color: var(--orange); border-color: var(--orange); }
-
-  .protocol-name {
-    font-family: var(--display);
-    font-size: 15px;
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-    color: var(--text);
-  }
-
-  .protocol-cat {
-    font-family: var(--mono);
-    font-size: 10px;
-    color: var(--text-dim);
-    margin-top: 2px;
-  }
-
-  .protocol-tag {
-    font-family: var(--mono);
-    font-size: 10px;
-    color: var(--text-dim);
-    border: 1px solid var(--border);
-    padding: 2px 8px;
-    letter-spacing: 0.1em;
-    text-transform: uppercase;
-    transition: all 0.1s;
-  }
-
-  /* CODE BLOCK */
-  .code-preview {
-    background: #0D0D0D;
-    border: 1px solid var(--border);
-    border-top: 2px solid var(--orange);
-    padding: 0;
-    font-family: var(--mono);
-    font-size: 12px;
-  }
-
-  .code-header {
-    background: var(--surface2);
-    padding: 8px 16px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    border-bottom: 1px solid var(--border);
-  }
-  .code-dots { display: flex; gap: 6px; }
-  .code-dot {
-    width: 10px; height: 10px;
-    border-radius: 50%;
-  }
-  .code-dot.r { background: #FF5F57; }
-  .code-dot.y { background: #FFBD2E; }
-  .code-dot.g { background: #28C840; }
-  .code-filename { font-size: 11px; color: var(--text-dim); }
-
-  .code-body {
-    padding: 1.5rem;
-    line-height: 1.8;
-  }
-  .code-key   { color: #FF7B72; }
-  .code-val   { color: #A5D6FF; }
-  .code-str   { color: #79C0FF; }
-  .code-num   { color: #F8C8A0; }
-  .code-comment { color: #555; font-style: italic; }
-  .code-orange { color: var(--orange); }
-
-  /* STATS */
-  .stats-bar {
-    max-width: 1100px;
-    margin: 0 auto;
-    padding: 4rem 2rem;
-    display: grid;
-    grid-template-columns: repeat(4, 1fr);
-    gap: 1px;
-    background: var(--border);
-    border: 1px solid var(--border);
-  }
-
-  .stat-item {
-    background: var(--black);
-    padding: 2rem;
-    text-align: center;
-  }
-
-  .stat-number {
-    font-family: var(--display);
-    font-size: 52px;
-    font-weight: 900;
-    color: var(--orange);
-    line-height: 1;
-    letter-spacing: -2px;
-  }
-
-  .stat-label {
-    font-family: var(--mono);
-    font-size: 11px;
-    color: var(--text-dim);
-    text-transform: uppercase;
-    letter-spacing: 0.15em;
-    margin-top: 6px;
-  }
-
-  /* SLOGAN */
-  .slogan-section {
-    max-width: 1100px;
-    margin: 0 auto;
-    padding: 8rem 2rem;
-    text-align: center;
-  }
-
-  .slogan {
-    font-family: var(--display);
-    font-size: clamp(32px, 6vw, 72px);
-    font-weight: 900;
-    text-transform: uppercase;
-    letter-spacing: -1px;
-    line-height: 1.1;
-    color: var(--text);
-  }
-  .slogan .accent { color: var(--orange); }
-
-  /* FOOTER */
-  footer {
-    border-top: 1px solid var(--border);
-    padding: 2rem;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    max-width: 1100px;
-    margin: 0 auto;
-  }
-  .footer-logo {
-    font-family: var(--display);
-    font-size: 18px;
-    font-weight: 900;
-    color: var(--text);
-  }
-  .footer-logo span { color: var(--orange); }
-  .footer-links {
-    display: flex;
-    gap: 1.5rem;
-    list-style: none;
-  }
-  .footer-links a {
-    font-size: 11px;
-    color: var(--text-dim);
-    text-decoration: none;
-    text-transform: uppercase;
-    letter-spacing: 0.1em;
-  }
-  .footer-links a:hover { color: var(--text); }
-  .footer-credit {
-    font-size: 11px;
-    color: var(--text-dim);
-  }
-  .footer-credit span { color: var(--orange); }
-
-  @media (max-width: 768px) {
-    nav { padding: 0 1rem; }
-    .nav-links { display: none; }
-    .hero { padding: 5rem 1rem 3rem; }
-    .protocols-inner { grid-template-columns: 1fr; gap: 2rem; }
-    .stats-bar { grid-template-columns: repeat(2, 1fr); }
-    footer { flex-direction: column; gap: 1.5rem; text-align: center; }
-    .footer-links { justify-content: center; }
-  }
-</style>
-</head>
-<body>
-
-<!-- NAV -->
-<nav>
-  <a href="#" class="nav-logo">Código<span>0</span></a>
-  <ul class="nav-links">
-    <li><a href="#protocolos">Protocolos</a></li>
-    <li><a href="#features">Características</a></li>
-    <li><a href="https://github.com/planetazuzu/codigo0">GitHub</a></li>
-    <li><a href="http://207.180.226.141:9112" class="nav-cta">Abrir App →</a></li>
-  </ul>
-</nav>
-
-<!-- HERO -->
-<section class="hero">
-  <div class="hero-badge">v0.1 · En desarrollo activo</div>
-
-  <h1>
-    <span class="accent">Código</span><br>
-    Cero.
-  </h1>
-
-  <p class="hero-sub">Protocolos TES. Sin papel. Sin esperas. Sin excusas.</p>
-
-  <p class="hero-desc">
-    Guía digital de protocolos para Técnicos de Emergencias Sanitarias.
-    Gratuita, offline-first, construida por profesionales del SAMU.
-    Consulta lo que necesitas en los segundos que importan.
-  </p>
-
-  <div class="hero-actions">
-    <a href="http://207.180.226.141:9112" class="btn-primary">Abrir app →</a>
-    <a href="https://github.com/planetazuzu/codigo0" class="btn-secondary">Ver en GitHub</a>
-  </div>
-
-  <div class="install-block">
-    <span class="install-label">Quick start</span>
-    <span class="install-cmd">
-      <span class="cmd-dim">$</span> git clone github.com/planetazuzu/codigo0 &amp;&amp; npm i &amp;&amp; npm run dev
-    </span>
-  </div>
-</section>
-
-<!-- TICKER -->
-<div class="ticker-wrap">
-  <div class="ticker">
-    <span class="ticker-item">SVB Adulto</span>
-    <span class="ticker-item">SCACEST</span>
-    <span class="ticker-item">TCE Grave</span>
-    <span class="ticker-item">Shock Anafiláctico</span>
-    <span class="ticker-item">Politraumatismo</span>
-    <span class="ticker-item">ACVA</span>
-    <span class="ticker-item">Crisis Convulsiva</span>
-    <span class="ticker-item">Intoxicación</span>
-    <span class="ticker-item">Disnea Aguda</span>
-    <span class="ticker-item">Parto Inminente</span>
-    <span class="ticker-item">SVB Pediátrico</span>
-    <span class="ticker-item">Quemaduras</span>
-    <!-- repeat for seamless loop -->
-    <span class="ticker-item">SVB Adulto</span>
-    <span class="ticker-item">SCACEST</span>
-    <span class="ticker-item">TCE Grave</span>
-    <span class="ticker-item">Shock Anafiláctico</span>
-    <span class="ticker-item">Politraumatismo</span>
-    <span class="ticker-item">ACVA</span>
-    <span class="ticker-item">Crisis Convulsiva</span>
-    <span class="ticker-item">Intoxicación</span>
-    <span class="ticker-item">Disnea Aguda</span>
-    <span class="ticker-item">Parto Inminente</span>
-    <span class="ticker-item">SVB Pediátrico</span>
-    <span class="ticker-item">Quemaduras</span>
-  </div>
-</div>
-
-<!-- STATS -->
-<div style="max-width:1100px;margin:4rem auto;padding:0 2rem;">
-  <div class="stats-bar">
-    <div class="stat-item">
-      <div class="stat-number">+40</div>
-      <div class="stat-label">Protocolos activos</div>
-    </div>
-    <div class="stat-item">
-      <div class="stat-number">0€</div>
-      <div class="stat-label">Coste para el TES</div>
-    </div>
-    <div class="stat-item">
-      <div class="stat-number">100%</div>
-      <div class="stat-label">Offline capable</div>
-    </div>
-    <div class="stat-item">
-      <div class="stat-number">25+</div>
-      <div class="stat-label">Años en campo</div>
-    </div>
-  </div>
-</div>
-
-<!-- FEATURES -->
-<section class="section" id="features">
-  <div class="section-label">Características</div>
-  <h2 class="section-title">Por qué Código 0</h2>
-
-  <div class="features-grid">
-    <div class="feature-card">
-      <span class="feature-icon">⚡</span>
-      <div class="feature-title">Consulta en segundos</div>
-      <p class="feature-desc">Protocolos indexados y buscables. No PDFs de 200 páginas. No PDFs que tardan en abrir.</p>
-    </div>
-    <div class="feature-card">
-      <span class="feature-icon">🔌</span>
-      <div class="feature-title">Offline-first</div>
-      <p class="feature-desc">Funciona sin conexión una vez cargado. En campo, en el monte, en la UVI móvil. Sin excusas.</p>
-    </div>
-    <div class="feature-card">
-      <span class="feature-icon">📋</span>
-      <div class="feature-title">YAML-driven</div>
-      <p class="feature-desc">Cada protocolo es un archivo editable. Cualquier TES puede proponer cambios con un Pull Request.</p>
-    </div>
-    <div class="feature-card">
-      <span class="feature-icon">🆓</span>
-      <div class="feature-title">Siempre gratis</div>
-      <p class="feature-desc">Sin registro, sin freemium, sin anuncios, sin tracking. Construido por la comunidad TES, para la comunidad TES.</p>
-    </div>
-    <div class="feature-card">
-      <span class="feature-icon">🔄</span>
-      <div class="feature-title">Auto-actualizable</div>
-      <p class="feature-desc">Sincroniza protocolos en segundo plano cuando hay red. Siempre tienes la versión más reciente.</p>
-    </div>
-    <div class="feature-card">
-      <span class="feature-icon">🎨</span>
-      <div class="feature-title">Alta densidad, cero ruido</div>
-      <p class="feature-desc">Diseño brutalist: máximo contraste, información densa, sin decoración que distrae cuando más importa.</p>
-    </div>
-  </div>
-</section>
-
-<!-- PROTOCOLS + CODE PREVIEW -->
-<section class="protocols-section" id="protocolos">
-  <div class="protocols-inner">
-    <div>
-      <div class="section-label">Protocolos</div>
-      <h2 class="section-title" style="font-size:36px;">Los que usas cada día</h2>
-      <ul class="protocol-list">
-        <li class="protocol-item">
-          <div>
-            <div class="protocol-name">SVB Adulto</div>
-            <div class="protocol-cat">Soporte Vital Básico</div>
-          </div>
-          <span class="protocol-tag">ERC 2021</span>
-        </li>
-        <li class="protocol-item">
-          <div>
-            <div class="protocol-name">SCACEST</div>
-            <div class="protocol-cat">Cardiología</div>
-          </div>
-          <span class="protocol-tag">SAMU</span>
-        </li>
-        <li class="protocol-item">
-          <div>
-            <div class="protocol-name">TCE Grave</div>
-            <div class="protocol-cat">Trauma</div>
-          </div>
-          <span class="protocol-tag">PHTLS</span>
-        </li>
-        <li class="protocol-item">
-          <div>
-            <div class="protocol-name">Shock Anafiláctico</div>
-            <div class="protocol-cat">Urgencias</div>
-          </div>
-          <span class="protocol-tag">SAMU</span>
-        </li>
-        <li class="protocol-item">
-          <div>
-            <div class="protocol-name">ACVA / Ictus</div>
-            <div class="protocol-cat">Neurología</div>
-          </div>
-          <span class="protocol-tag">Código Ictus</span>
-        </li>
-        <li class="protocol-item">
-          <div>
-            <div class="protocol-name">SVB Pediátrico</div>
-            <div class="protocol-cat">Pediatría</div>
-          </div>
-          <span class="protocol-tag">ERC 2021</span>
-        </li>
-        <li class="protocol-item">
-          <div>
-            <div class="protocol-name">Politraumatismo</div>
-            <div class="protocol-cat">Trauma</div>
-          </div>
-          <span class="protocol-tag">PHTLS</span>
-        </li>
-        <li class="protocol-item" style="padding:12px 16px;background:var(--surface);">
-          <div style="font-family:var(--mono);font-size:11px;color:var(--orange);">+ 33 protocolos más →</div>
-        </li>
-      </ul>
-    </div>
-
-    <div>
-      <div class="section-label" style="margin-bottom:1rem;">Formato de protocolo</div>
-      <div class="code-preview">
-        <div class="code-header">
-          <div class="code-dots">
-            <div class="code-dot r"></div>
-            <div class="code-dot y"></div>
-            <div class="code-dot g"></div>
-          </div>
-          <span class="code-filename">svb-adulto.yaml</span>
-          <span></span>
-        </div>
-        <div class="code-body">
-<span class="code-comment"># docs/protocolos/svb-adulto.yaml</span><br>
-<span class="code-key">titulo</span>: <span class="code-str">SVB Adulto</span><br>
-<span class="code-key">version</span>: <span class="code-str">"2.0"</span><br>
-<span class="code-key">categoria</span>: <span class="code-str">soporte_vital</span><br>
-<span class="code-key">referencia</span>: <span class="code-str">ERC 2021</span><br>
-<br>
-<span class="code-key">pasos</span>:<br>
-&nbsp;&nbsp;- <span class="code-key">id</span>: <span class="code-num">1</span><br>
-&nbsp;&nbsp;&nbsp;&nbsp;<span class="code-key">accion</span>: <span class="code-str">Seguridad del entorno</span><br>
-&nbsp;&nbsp;&nbsp;&nbsp;<span class="code-key">duracion</span>: <span class="code-orange">null</span><br>
-<br>
-&nbsp;&nbsp;- <span class="code-key">id</span>: <span class="code-num">2</span><br>
-&nbsp;&nbsp;&nbsp;&nbsp;<span class="code-key">accion</span>: <span class="code-str">Valorar consciencia</span><br>
-&nbsp;&nbsp;&nbsp;&nbsp;<span class="code-key">duracion</span>: <span class="code-str">10s</span><br>
-<br>
-&nbsp;&nbsp;- <span class="code-key">id</span>: <span class="code-num">3</span><br>
-&nbsp;&nbsp;&nbsp;&nbsp;<span class="code-key">accion</span>: <span class="code-str">Pedir ayuda — 112</span><br>
-&nbsp;&nbsp;&nbsp;&nbsp;<span class="code-key">alerta</span>: <span class="code-orange">true</span><br>
-<br>
-&nbsp;&nbsp;- <span class="code-key">id</span>: <span class="code-num">4</span><br>
-&nbsp;&nbsp;&nbsp;&nbsp;<span class="code-key">accion</span>: <span class="code-str">Apertura vía aérea</span><br>
-&nbsp;&nbsp;&nbsp;&nbsp;<span class="code-key">tecnica</span>: <span class="code-str">frente-mentón</span><br>
-<br>
-<span class="code-comment"># ... 8 pasos más</span>
-        </div>
-      </div>
-    </div>
-  </div>
-</section>
-
-<!-- SLOGAN -->
-<section class="slogan-section">
-  <p class="slogan">
-    Código libre.<br>
-    Protocolo <span class="accent">claro.</span><br>
-    Actúa ahora.<br>
-    <span class="accent">Salva vidas.</span>
-  </p>
-</section>
-
-<!-- FOOTER -->
-<footer>
-  <div class="footer-logo">Código<span>0</span></div>
-  <ul class="footer-links">
-    <li><a href="https://codigo0.es">Web</a></li>
-    <li><a href="http://207.180.226.141:9112">App</a></li>
-    <li><a href="https://github.com/planetazuzu/codigo0">GitHub</a></li>
-    <li><a href="#">Docs</a></li>
-  </ul>
-  <div class="footer-credit">MIT · Hecho por <span>@planetazuzu</span></div>
-</footer>
-
-</body>
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Código 0 — Portal de Gestión</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link href="https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400&family=Barlow+Condensed:wght@400;600;700;800;900&display=swap" rel="stylesheet">
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
 </html>
--- a/promo-site/package-lock.json
+++ b/promo-site/package-lock.json
@ -0,0 +1,112 @@
+{
+  "name": "promo-site",
+  "version": "1.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "promo-site",
+      "version": "1.0.0",
+      "license": "ISC",
+      "dependencies": {
+        "lucide-react": "^1.6.0",
+        "react": "^19.2.4",
+        "react-dom": "^19.2.4",
+        "react-router-dom": "^7.13.2"
+      }
+    },
+    "node_modules/cookie": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.1.1.tgz",
+      "integrity": "sha512-ei8Aos7ja0weRpFzJnEA9UHJ/7XQmqglbRwnf2ATjcB9Wq874VKH9kfjjirM6UhU2/E5fFYadylyhFldcqSidQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/lucide-react": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-1.6.0.tgz",
+      "integrity": "sha512-YxLKVCOF5ZDI1AhKQE5IBYMY9y/Nr4NT15+7QEWpsTSVCdn4vmZhww+6BP76jWYjQx8rSz1Z+gGme1f+UycWEw==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/react": {
+      "version": "19.2.4",
+      "resolved": "https://registry.npmjs.org/react/-/react-19.2.4.tgz",
+      "integrity": "sha512-9nfp2hYpCwOjAN+8TZFGhtWEwgvWHXqESH8qT89AT/lWklpLON22Lc8pEtnpsZz7VmawabSU0gCjnj8aC0euHQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-dom": {
+      "version": "19.2.4",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.4.tgz",
+      "integrity": "sha512-AXJdLo8kgMbimY95O2aKQqsz2iWi9jMgKJhRBAxECE4IFxfcazB2LmzloIoibJI3C12IlY20+KFaLv+71bUJeQ==",
+      "license": "MIT",
+      "dependencies": {
+        "scheduler": "^0.27.0"
+      },
+      "peerDependencies": {
+        "react": "^19.2.4"
+      }
+    },
+    "node_modules/react-router": {
+      "version": "7.13.2",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.13.2.tgz",
+      "integrity": "sha512-tX1Aee+ArlKQP+NIUd7SE6Li+CiGKwQtbS+FfRxPX6Pe4vHOo6nr9d++u5cwg+Z8K/x8tP+7qLmujDtfrAoUJA==",
+      "license": "MIT",
+      "dependencies": {
+        "cookie": "^1.0.1",
+        "set-cookie-parser": "^2.6.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "7.13.2",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.13.2.tgz",
+      "integrity": "sha512-aR7SUORwTqAW0JDeiWF07e9SBE9qGpByR9I8kJT5h/FrBKxPMS6TiC7rmVO+gC0q52Bx7JnjWe8Z1sR9faN4YA==",
+      "license": "MIT",
+      "dependencies": {
+        "react-router": "7.13.2"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
+    "node_modules/scheduler": {
+      "version": "0.27.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz",
+      "integrity": "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==",
+      "license": "MIT"
+    },
+    "node_modules/set-cookie-parser": {
+      "version": "2.7.2",
+      "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.2.tgz",
+      "integrity": "sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw==",
+      "license": "MIT"
+    }
+  }
+}
--- a/promo-site/package.json
+++ b/promo-site/package.json
@ -0,0 +1,23 @@
+{
+  "name": "promo-site",
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.16.0",
+    "lucide-react": "^0.284.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "@vitejs/plugin-react-swc": "^3.4.0",
+    "typescript": "^5.2.2",
+    "vite": "^4.4.9"
+  }
+}
--- a/promo-site/src/App.tsx
+++ b/promo-site/src/App.tsx
@ -0,0 +1,23 @@
+import React, { Suspense, lazy } from 'react';
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
+import Home from './pages/Home';
+
+const MediaAdmin = lazy(() => import('./pages/admin/MediaAdmin'));
+const ProtocolListAdmin = lazy(() => import('./pages/admin/ProtocolListAdmin'));
+
+const App: React.FC = () => {
+  return (
+    <Router>
+      <Suspense fallback={<div className="font-mono p-10 text-orange-500">CARGANDO SISTEMA...</div>}>
+        <Routes>
+          <Route path="/" element={<Home />} />
+          <Route path="/admin" element={<ProtocolListAdmin />} />
+          <Route path="/admin/protocols" element={<ProtocolListAdmin />} />
+          <Route path="/admin/media" element={<MediaAdmin />} />
+        </Routes>
+      </Suspense>
+    </Router>
+  );
+};
+
+export default App;
--- a/promo-site/src/index.css
+++ b/promo-site/src/index.css
@ -0,0 +1,93 @@
+/* RESET */
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+:root {
+  --orange: #FF4500;
+  --orange-dim: #CC3700;
+  --orange-pale: #FF6633;
+  --black: #0A0A0A;
+  --surface: #111111;
+  --surface2: #1A1A1A;
+  --border: #2A2A2A;
+  --border-hot: #FF4500;
+  --text: #F0EDE8;
+  --text-dim: #888880;
+  --mono: 'Space Mono', monospace;
+  --display: 'Barlow Condensed', sans-serif;
+}
+
+html { scroll-behavior: smooth; }
+
+body {
+  background: var(--black);
+  color: var(--text);
+  font-family: var(--mono);
+  font-size: 14px;
+  line-height: 1.6;
+  overflow-x: hidden;
+}
+
+/* SCAN LINES OVERLAY */
+body::before {
+  content: '';
+  position: fixed;
+  inset: 0;
+  background: repeating-linear-gradient(
+    0deg,
+    transparent,
+    transparent 2px,
+    rgba(0,0,0,0.08) 2px,
+    rgba(0,0,0,0.08) 4px
+  );
+  pointer-events: none;
+  z-index: 999;
+}
+
+/* BRUTALIST COMPONENTS - GLOBAL */
+.section-label {
+  font-family: var(--mono);
+  font-size: 11px;
+  color: var(--orange);
+  text-transform: uppercase;
+  letter-spacing: 0.2em;
+  margin-bottom: 1rem;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.section-label::before {
+  content: '';
+  display: block;
+  width: 24px;
+  height: 1px;
+  background: var(--orange);
+}
+
+.btn-primary {
+  background: var(--orange);
+  color: var(--black);
+  font-family: var(--mono);
+  font-size: 12px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  padding: 14px 28px;
+  text-decoration: none;
+  border: 2px solid var(--orange);
+  transition: all 0.15s;
+  display: inline-block;
+}
+.glass-card {
+  background: rgba(26, 26, 26, 0.6);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid rgba(255, 255, 255, 0.05);
+  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
+}
+
+.glass-nav {
+  background: rgba(10, 10, 10, 0.8);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
--- a/promo-site/src/main.tsx
+++ b/promo-site/src/main.tsx
@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+import './index.css';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
--- a/promo-site/src/pages/Home.tsx
+++ b/promo-site/src/pages/Home.tsx
@ -0,0 +1,86 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+const Home: React.FC = () => {
+  return (
+    <div className="landing-wrap">
+      {/* NAV */}
+      <nav style={{
+        position: 'fixed', top: 0, left: 0, right: 0, zIndex: 100, 
+        background: 'rgba(10,10,10,0.95)', borderBottom: '1px solid var(--border)', 
+        display: 'flex', alignItems: 'center', justifyContent: 'space-between', 
+        padding: '0 2rem', height: '52px', backdropFilter: 'blur(8px)'
+      }}>
+        <Link to="/" style={{
+          fontFamily: 'var(--display)', fontWeight: 900, fontSize: '22px', 
+          letterSpacing: '-0.5px', color: 'var(--text)', textDecoration: 'none'
+        }}>
+          Código<span style={{color: 'var(--orange)'}}>0</span>
+        </Link>
+        <ul style={{display: 'flex', gap: '2rem', listStyle: 'none'}}>
+          <li><a href="#protocolos" className="nav-link">Protocolos</a></li>
+          <li><a href="#features" className="nav-link">Características</a></li>
+          <li><a href="https://github.com/planetazuzu/codigo0" className="nav-link">GitHub</a></li>
+          <li><Link to="/admin" className="nav-cta">Gestión →</Link></li>
+        </ul>
+      </nav>
+
+      <style>{`
+        .nav-link {
+          font-family: var(--mono); font-size: 11px; color: var(--text-dim);
+          text-decoration: none; text-transform: uppercase; letter-spacing: 0.1em;
+          transition: color 0.15s;
+        }
+        .nav-link:hover { color: var(--orange); }
+        .nav-cta {
+          background: var(--orange); color: var(--black); padding: 6px 16px;
+          font-weight: 700; text-decoration: none; text-transform: uppercase; font-size: 11px;
+        }
+        .nav-cta:hover { background: var(--orange-pale); }
+        
+        .hero {
+          min-height: 100vh; display: flex; flex-direction: column; justify-content: center;
+          padding: 6rem 2rem 4rem; max-width: 1100px; margin: 0 auto; position: relative;
+        }
+        .hero-badge {
+          display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono);
+          font-size: 11px; color: var(--orange); border: 1px solid var(--orange);
+          padding: 4px 12px; margin-bottom: 2rem; letter-spacing: 0.15em; text-transform: uppercase; width: fit-content;
+        }
+        .hero h1 {
+          font-family: var(--display); font-size: clamp(64px, 12vw, 140px); font-weight: 900;
+          line-height: 0.9; letter-spacing: -2px; text-transform: uppercase; color: var(--text); margin-bottom: 0.5rem;
+        }
+        .hero h1 .accent { color: var(--orange); }
+      `}</style>
+
+      {/* HERO (Simplified for now - porting main parts) */}
+      <section className="hero">
+        <div className="hero-badge">v0.1 · En desarrollo activo</div>
+        <h1>
+          <span className="accent">Código</span><br />
+          Cero.
+        </h1>
+        <p style={{
+          fontFamily: 'var(--display)', fontSize: 'clamp(20px, 3vw, 32px)', fontWeight: 600,
+          color: 'var(--text-dim)', textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: '2.5rem'
+        }}>
+          Protocolos TES. Sin papel. Sin esperas. Sin excusas.
+        </p>
+        
+        <div style={{display: 'flex', gap: '1rem', flexWrap: 'wrap', marginBottom: '4rem'}}>
+          <a href="http://207.180.226.141:9112" className="btn-primary">Abrir app →</a>
+          <Link to="/admin" style={{
+            background: 'transparent', color: 'var(--text-dim)', fontFamily: 'var(--mono)',
+            fontSize: '12px', textTransform: 'uppercase', letterSpacing: '0.1em', padding: '14px 28px',
+            textDecoration: 'none', border: '1px solid var(--border)', transition: 'all 0.15s'
+          }}>Panel de Gestión</Link>
+        </div>
+      </section>
+
+      {/* Rest of the sections can be added slowly, but let's keep it functional first */}
+    </div>
+  );
+};
+
+export default Home;
--- a/promo-site/src/pages/admin/MediaAdmin.tsx
+++ b/promo-site/src/pages/admin/MediaAdmin.tsx
@ -0,0 +1,155 @@
+import React, { useState, useEffect } from 'react';
+import { Upload, Trash2, Image as ImageIcon, FileText, Video, ExternalLink, Plus } from 'lucide-react';
+
+interface MediaItem {
+  _id: string;
+  filename: string;
+  originalname: string;
+  mimetype: string;
+  size: number;
+  url: string;
+  createdAt: string;
+}
+
+const MediaAdmin: React.FC = () => {
+  const [media, setMedia] = useState<MediaItem[]>([]);
+  const [uploading, setUploading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const fetchMedia = async () => {
+    try {
+      const response = await fetch('/api/media');
+      const data = await response.json();
+      setMedia(data);
+    } catch (err) {
+      console.error('Error fetching media:', err);
+    }
+  };
+
+  useEffect(() => {
+    fetchMedia();
+  }, []);
+
+  const handleUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (!e.target.files?.[0]) return;
+    
+    setUploading(true);
+    setError(null);
+    const formData = new FormData();
+    formData.append('file', e.target.files[0]);
+
+    try {
+      const response = await fetch('/api/media/upload', {
+        method: 'POST',
+        body: formData,
+      });
+
+      if (!response.ok) throw new Error('Error al subir el archivo');
+      
+      await fetchMedia();
+    } catch (err: any) {
+      setError(err.message);
+    } finally {
+      setUploading(false);
+    }
+  };
+
+  const handleDelete = async (id: string) => {
+    if (!confirm('¿Estás seguro de eliminar este archivo?')) return;
+
+    try {
+      const response = await fetch(`/api/media/${id}`, {
+        method: 'DELETE',
+      });
+
+      if (!response.ok) throw new Error('Error al eliminar');
+      
+      setMedia(media.filter(item => item._id !== id));
+    } catch (err: any) {
+      alert(err.message);
+    }
+  };
+
+  const formatSize = (bytes: number) => {
+    if (bytes === 0) return '0 Bytes';
+    const k = 1024;
+    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+  };
+
+  return (
+    <div className="p-6 max-w-6xl mx-auto space-y-8">
+      <div className="flex justify-between items-end border-b-2 border-orange-500 pb-4">
+        <div>
+          <h1 className="text-4xl font-black uppercase tracking-tighter">Administrador de Medios</h1>
+          <p className="text-zinc-500 font-mono text-sm mt-1">// Gestor de diagramas, fotos y videos técnicos</p>
+        </div>
+        
+        <label className="bg-orange-500 text-black px-6 py-3 font-bold uppercase cursor-pointer hover:bg-orange-400 transition-colors flex items-center gap-2">
+          {uploading ? 'Subiendo...' : <><Plus size={20} /> Añadir Medio</>}
+          <input type="file" className="hidden" onChange={handleUpload} disabled={uploading} />
+        </label>
+      </div>
+
+      {error && (
+        <div className="bg-red-900/20 border-l-4 border-red-500 p-4 text-red-500 font-mono text-sm">
+          ERROR: {error}
+        </div>
+      )}
+
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+        {media.map((item) => (
+          <div key={item._id} className="bg-zinc-900 border border-zinc-800 p-4 group hover:border-orange-500 transition-colors flex flex-col">
+            <div className="aspect-video bg-black flex items-center justify-center mb-4 relative overflow-hidden border border-zinc-800">
+              {item.mimetype.startsWith('image/') ? (
+                <img src={item.url} alt={item.originalname} className="w-full h-full object-cover" />
+              ) : item.mimetype.startsWith('video/') ? (
+                <Video size={48} className="text-zinc-700" />
+              ) : (
+                <FileText size={48} className="text-zinc-700" />
+              )}
+            </div>
+
+            <div className="flex-1 min-w-0">
+              <h3 className="font-bold text-lg truncate uppercase tracking-tight" title={item.originalname}>
+                {item.originalname}
+              </h3>
+              <div className="font-mono text-[10px] text-zinc-500 mt-2 space-y-1">
+                <p>MIME: {item.mimetype}</p>
+                <p>SIZE: {formatSize(item.size)}</p>
+                <p>DATE: {new Date(item.createdAt).toLocaleDateString()}</p>
+              </div>
+            </div>
+
+            <div className="flex gap-2 mt-6 pt-4 border-t border-zinc-800">
+              <a 
+                href={item.url} 
+                target="_blank" 
+                rel="noreferrer"
+                className="flex-1 flex items-center justify-center gap-2 py-2 border border-zinc-700 hover:bg-zinc-800 text-xs font-bold uppercase transition-colors"
+              >
+                <ExternalLink size={14} /> Ver
+              </a>
+              <button 
+                onClick={() => handleDelete(item._id)}
+                className="w-12 flex items-center justify-center bg-zinc-800 hover:bg-red-900/30 hover:text-red-500 transition-all text-zinc-500 border border-zinc-700 hover:border-red-900"
+              >
+                <Trash2 size={16} />
+              </button>
+            </div>
+          </div>
+        ))}
+
+        {media.length === 0 && !uploading && (
+          <div className="col-span-full py-20 border-2 border-dashed border-zinc-800 flex flex-col items-center justify-center text-zinc-600 font-mono uppercase text-sm tracking-widest">
+            <ImageIcon size={48} className="mb-4 opacity-20" />
+            Galería vacía // Sube el primer medio
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default MediaAdmin;
--- a/promo-site/src/pages/admin/ProtocolListAdmin.tsx
+++ b/promo-site/src/pages/admin/ProtocolListAdmin.tsx
@ -0,0 +1,144 @@
+import React, { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Plus, Edit3, Trash2, Search, FileText } from 'lucide-react';
+
+interface ProtocolSummary {
+  id: string;
+  titulo: string;
+  categoria: string;
+  version: string;
+  urgencia: string;
+}
+
+const ProtocolListAdmin: React.FC = () => {
+  const [protocols, setProtocols] = useState<ProtocolSummary[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [searchTerm, setSearchTerm] = useState('');
+  const navigate = useNavigate();
+
+  const fetchProtocols = async () => {
+    try {
+      const response = await fetch('/api/content');
+      const data = await response.json();
+      setProtocols(data);
+    } catch (err) {
+      console.error('Error fetching protocols:', err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchProtocols();
+  }, []);
+
+  const handleDelete = async (id: string) => {
+    if (!confirm(`¿Estás seguro de eliminar el protocolo ${id}?`)) return;
+    try {
+      const response = await fetch(`/api/content/${id}`, { method: 'DELETE' });
+      if (response.ok) fetchProtocols();
+    } catch (err) {
+      alert('Error al eliminar');
+    }
+  };
+
+  const filteredProtocols = protocols.filter(p => 
+    p.titulo.toLowerCase().includes(searchTerm.toLowerCase()) || 
+    p.id.toLowerCase().includes(searchTerm.toLowerCase())
+  );
+
+  return (
+    <div className="p-6 max-w-6xl mx-auto space-y-8">
+      <div className="flex justify-between items-end border-b-2 border-orange-500 pb-4">
+        <div>
+          <h1 className="text-4xl font-black uppercase tracking-tighter">Editor de Protocolos</h1>
+          <p className="text-zinc-500 font-mono text-sm mt-1">// Gestión clínica en tiempo real (MongoDB)</p>
+        </div>
+        
+        <button 
+          onClick={() => navigate('/admin/protocols/new')}
+          className="bg-orange-500 text-black px-6 py-3 font-bold uppercase hover:bg-orange-400 transition-colors flex items-center gap-2"
+        >
+          <Plus size={20} /> Nuevo Protocolo
+        </button>
+      </div>
+
+      <div className="relative">
+        <Search className="absolute left-4 top-1/2 -translate-y-1/2 text-zinc-500" size={20} />
+        <input 
+          type="text" 
+          placeholder="Buscar protocolo por título o ID..."
+          className="w-full bg-zinc-900 border border-zinc-800 py-3 pl-12 pr-4 text-white font-mono focus:border-orange-500 outline-none transition-colors"
+          value={searchTerm}
+          onChange={(e) => setSearchTerm(e.target.value)}
+        />
+      </div>
+
+      <div className="bg-zinc-900 border border-zinc-800 overflow-hidden">
+        <table className="w-full text-left border-collapse">
+          <thead>
+            <tr className="bg-zinc-800/50 text-zinc-400 font-mono text-[10px] uppercase tracking-widest border-b border-zinc-800">
+              <th className="px-6 py-4">ID / Titulo</th>
+              <th className="px-6 py-4">Categoría</th>
+              <th className="px-6 py-4">Versión</th>
+              <th className="px-6 py-4">Urgencia</th>
+              <th className="px-6 py-4 text-right">Acciones</th>
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-zinc-800">
+            {filteredProtocols.map((p) => (
+              <tr key={p.id} className="hover:bg-zinc-800/30 transition-colors group">
+                <td className="px-6 py-4">
+                  <div className="font-bold uppercase tracking-tight text-zinc-100">{p.titulo}</div>
+                  <div className="font-mono text-[10px] text-zinc-500">{p.id}</div>
+                </td>
+                <td className="px-6 py-4">
+                  <span className="bg-zinc-800 text-zinc-400 text-[10px] px-2 py-1 rounded font-mono border border-zinc-700">
+                    {p.categoria}
+                  </span>
+                </td>
+                <td className="px-6 py-4 font-mono text-xs text-zinc-400">v{p.version}</td>
+                <td className="px-6 py-4">
+                  <span className={`text-[10px] font-bold uppercase ${p.urgencia === 'critica' ? 'text-red-500' : 'text-orange-500'}`}>
+                    {p.urgencia}
+                  </span>
+                </td>
+                <td className="px-6 py-4 text-right">
+                  <div className="flex justify-end gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
+                    <button 
+                      onClick={() => navigate(`/admin/protocols/edit/${p.id}`)}
+                      className="p-2 bg-zinc-800 hover:bg-orange-500 hover:text-black transition-all text-zinc-400"
+                    >
+                      <Edit3 size={16} />
+                    </button>
+                    <button 
+                      onClick={() => handleDelete(p.id)}
+                      className="p-2 bg-zinc-800 hover:bg-red-900/40 hover:text-red-500 transition-all text-zinc-400"
+                    >
+                      <Trash2 size={16} />
+                    </button>
+                  </div>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+        
+        {loading && (
+          <div className="py-20 flex flex-col items-center justify-center text-zinc-600 font-mono uppercase text-sm animate-pulse">
+            Cargando protocolos...
+          </div>
+        )}
+        
+        {!loading && filteredProtocols.length === 0 && (
+          <div className="py-20 flex flex-col items-center justify-center text-zinc-600 font-mono uppercase text-sm tracking-widest">
+            <FileText size={48} className="mb-4 opacity-20" />
+            No se encontraron protocolos
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default ProtocolListAdmin;
--- a/promo-site/vite.config.ts
+++ b/promo-site/vite.config.ts
@ -0,0 +1,20 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react-swc';
+
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    port: 9113,
+    host: true,
+    proxy: {
+      '/api': {
+        target: 'http://207.180.226.141:3002',
+        changeOrigin: true
+      }
+    }
+  },
+  build: {
+    outDir: 'dist',
+    emptyOutDir: true
+  }
+});