@saulwade/swl-ses 2.6.1 → 2.8.0

package/habilidades/ci-cd-pipelines/SKILL.md

@@ -1,7 +1,7 @@
 ---
 name: ci-cd-pipelines
 description: CI/CD con GitHub Actions y GitLab CI. Stages de lint, test, build, deploy. Caching, artifacts, matrix builds, secrets management, deployment strategies, monorepos y quality gates.
-version: "1.0.0"
+version: "1.0.2"
 herramientasPermitidas: [Read, Bash]
 exclusiones:
   - "No cargar para Kubernetes Deployments o Helm releases — para Kubernetes cargar `kubernetes-orquestacion`."
@@ -155,3 +155,7 @@ Para template de GitHub Actions reutilizable, ver [recursos/github-actions-templ
 **Secrets definidos en GitHub Actions no están disponibles en workflows de forks en PRs externas**: los workflows disparados por un PR de un fork (contribuidor externo) no tienen acceso a los secrets del repositorio por seguridad. Causa: prevención de exfiltración de secrets a forks maliciosos. Fix: usar el evento `pull_request_target` con cuidado para acceder a secrets en PRs de forks, pero solo para jobs que no ejecutan código del PR — los jobs de lint/test pueden correr sin secrets; los de deploy sí necesitan el evento `push` al branch base.
 
 **`docker/build-push-action` con `cache-from: type=gha` puede hacer el build más lento si el cache es muy grande**: el cache de GitHub Actions (10GB límite) se llena con layers de Docker — si se usan imágenes base grandes y muchos stages, el cache puede alcanzar el límite y las layers más antiguas se evictan, causando rebuilds completos. Causa: el cache de GHA tiene límite de 10GB por repositorio. Fix: usar `cache-from: type=registry,ref=ghcr.io/org/app:cache` con un registro de contenedores para cache ilimitado, o usar `mode=min` en el cache para solo guardar las layers finales en lugar de todas las intermedias.
+
+**Un script que monitorea `gh pr checks`/`gh run list` canalizando su `--json` a `jq` externo puede fallar en silencio para siempre si `jq` no está instalado** [CONFIRMADO x2 — SIGM 2026-06-21 y 2026-07-18]: en Windows con Git Bash, `jq` frecuentemente NO está en el PATH (`which jq` → not found). Un loop de polling tipo `s=$(gh pr checks N --json ... 2>/dev/null); cur=$(echo "$s" | jq -r '...' 2>/dev/null)` con stderr suprimido en ambos comandos nunca produce error visible: `cur` queda siempre vacío, la condición de salida (`jq -e '...'`) siempre falla, y el loop de polling corre indefinidamente sin emitir NINGÚN evento — 0 bytes de output, indistinguible de "todavía no hay novedades". Causa: dos supresiones de error (`2>/dev/null`) apiladas ocultan que el binario no existe. Fix confirmado: usar el flag `--jq` PROPIO de `gh` (`gh pr checks N --json name,bucket --jq '.[] | select(...)'`) — es JSON processor vendored dentro del propio binario `gh`, no depende de `jq` externo, y acepta la misma sintaxis de filtro. Antes de confiar en que un monitor de CI sigue "esperando sin novedad", verificar con `TaskOutput(block:false)` que el output acumulado no sea 0 KB tras varios minutos — 0 KB sostenido es señal de este bug, no de que aún no hay nada que reportar.
+
+**Suprimir un fingerprint específico de `gitleaks` en `.gitleaks.toml` bajo `[allowlist] fingerprints = [...]` no funciona en gitleaks ≥8.25** [CONFIRMADO, SIGM 2026-07-19]: desde esa versión gitleaks migró de `[allowlist]` (tabla singular) a `[[allowlists]]` (array de tablas), y el campo `fingerprints` NO existe en NINGUNA de las dos variantes del TOML — solo soporta `paths`/`regexes`/`commits`/`stopwords`/`condition`/`regexTarget`. Un `fingerprints = [...]` agregado al TOML se ignora en silencio (sin error de parseo, sin warning) y el hallazgo sigue reportándose sin cambio. Fix real: los fingerprints se suprimen en un archivo SEPARADO `.gitleaksignore` en la raíz del repo (una línea por fingerprint, texto EXACTO tal como lo imprime `gitleaks detect` en su campo `Fingerprint:`). Verificar el fix localmente ANTES de reintentar en CI: descargar el mismo binario/tag que usa el workflow (`curl -sSL -o gitleaks.zip https://github.com/gitleaks/gitleaks/releases/download/v<TAG>/gitleaks_<TAG>_windows_x64.zip` en Windows, o el tarball `linux_x64` si se prueba en WSL/Linux) y correr `gitleaks detect --source . --no-git --redact -v --config .gitleaks.toml` — el finding suprimido debe desaparecer del output antes de pushear, ahorrando una ronda completa de CI.

package/habilidades/css-moderno/SKILL.md

@@ -1,7 +1,7 @@
 ---
 name: css-moderno
 description: CSS moderno 2024+. Cubre Container Queries, CSS Layers (@layer), Nesting nativo, Custom Properties avanzadas, funciones min/max/clamp/color-mix, propiedades lógicas (block/inline), View Transitions API, animaciones performantes solo-compositor, dark mode patterns y anti-patrones críticos.
-version: "1.1.0"
+version: "1.1.1"
 herramientasPermitidas: [Read, Grep]
 exclusiones:
   - "No cargar para Tailwind CSS (clases utilitarias, @theme, cva, responsive) — para Tailwind cargar `tailwind-experto`."
@@ -166,3 +166,9 @@ Para ejemplos completos de Container Queries, CSS Layers, Nesting, Custom Proper
 **`clamp()` con `vw` en la función intermedia no escala correctamente en pantallas muy anchas si no se acota con `max()`**: `font-size: clamp(1rem, 2vw, 2rem)` en un monitor de 2560px da `2vw = 51.2px`, que es mayor que el máximo de `2rem = 32px` — el clamp lo atrapa pero el cálculo puede ser confuso al depurar. Causa: el valor de `vw` crece sin límite. Fix: entender que `clamp(min, preferido, max)` garantiza que el resultado siempre está entre min y max — el valor preferido puede ser cualquier expresión, incluso mayor que max, y el clamp simplemente retorna max en ese caso. Verificar los tres valores en los tamaños de viewport objetivo.
 
 **`var(--token)` NO resuelve cuando el valor lo consume JavaScript pintando a `<canvas>`**: las librerías que renderizan a canvas (Chart.js, OpenLayers, three.js/WebGL, o `ctx.fillStyle`/`strokeStyle`/`ctx.font` directos) NO reciben el contexto CSS del documento → el color sale negro o invisible **sin error en consola**. Causa: el canvas es un buffer de píxeles fuera del árbol CSS; la cascada y `getComputedStyle` no aplican al contexto 2D/WebGL — `var()` queda como string literal que el motor de canvas no interpreta. La frontera es: un color es `var(--x)` SOLO si lo consume CSS (`.css`/`.module.scss` o `style={{}}` sobre HTML); si lo consume JS pintando a canvas, debe ser hex/rgb concreto. Fix: pasar hex/rgb literal a esos objetos, con comentario anti-recurrencia (`// canvas: NO resuelve var()`). Si el color debe ser theme-aware, resolverlo primero en JS — `getComputedStyle(document.documentElement).getPropertyValue('--color-x').trim()` — y pasar el valor ya resuelto al canvas, re-leyéndolo al cambiar de tema.
+
+**El atributo HTML `hidden` NO oculta un elemento con `display:flex/grid`** [CONFIRMADO x4]: togglear el atributo `hidden` sobre un elemento con `.clase{display:flex}` no lo oculta, **sin error en consola**. Causa: la regla de user-agent `[hidden]{display:none}` tiene menor especificidad que cualquier regla de clase con `display` explícito → la clase gana en la cascada y el elemento sigue visible. Fix: para todo elemento colapsable con `display` distinto de `block`, agregar una regla explícita `.clase[hidden]{display:none}`. Aplica a acordeones, drawers, toggles, tabs — cualquier patrón que dependa del atributo `hidden` para colapsar. Evidencia: 4 instancias en una sola sesión (proyecto convertidor-md, 2026-07-20).
+
+**Items flex/grid-column bajo un contenedor `max-height` + `overflow` se COMPRIMEN y recortan en vez de scrollear**: en `display:flex;flex-direction:column;max-height:N;overflow-y:auto`, los hijos con `flex-shrink:1` (default) se encogen cuando el contenido excede la altura — y si tienen `overflow:hidden`, su contenido se corta — en lugar de que el contenedor haga scroll. Causa: `flex-shrink:1` autoriza al algoritmo flex a reducir los ítems para caber en el contenedor acotado, antes de recurrir al scroll. Fix: `flex-shrink:0` (o `flex:none`) en los hijos que deben conservar su altura natural; entonces el contenedor scrollea correctamente. Síntoma típico: encabezados de acordeón "recortados a rebanadas" cuando uno se expande.
+
+**Redefinir un nombre de clase ya usado re-estiliza el componente original en silencio**: dos reglas con el mismo selector de clase (`.chip {…}` … `.chip {…}`) en la misma hoja mezclan propiedades por cascada — la segunda definición altera el primer componente sin error. Causa: CSS no tiene scoping por defecto; el nombre de clase es global a la hoja. Fix: antes de reusar un nombre de clase para un componente nuevo, `grep` la hoja de estilos; namespacea la clase del componente nuevo (p. ej. `.grp-chip` en vez de reusar `.cfdi-chip`).

package/habilidades/diagrama-arquitectura/assets/template.html

@@ -1,276 +1,276 @@
-<!DOCTYPE html>
-<html lang="es">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>[NOMBRE DEL PROYECTO] — Diagrama de Arquitectura</title>
-  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
-  <style>
-    * {
-      margin: 0;
-      padding: 0;
-      box-sizing: border-box;
-    }
-
-    body {
-      font-family: 'JetBrains Mono', monospace;
-      background: #020617;
-      min-height: 100vh;
-      padding: 2rem;
-      color: white;
-    }
-
-    .container {
-      max-width: 1200px;
-      margin: 0 auto;
-    }
-
-    .header {
-      margin-bottom: 2rem;
-    }
-
-    .header-row {
-      display: flex;
-      align-items: center;
-      gap: 1rem;
-      margin-bottom: 0.5rem;
-    }
-
-    .pulse-dot {
-      width: 12px;
-      height: 12px;
-      background: #22d3ee;
-      border-radius: 50%;
-      animation: pulse 2s infinite;
-    }
-
-    @keyframes pulse {
-      0%, 100% { opacity: 1; }
-      50% { opacity: 0.5; }
-    }
-
-    h1 {
-      font-size: 1.5rem;
-      font-weight: 700;
-      letter-spacing: -0.025em;
-    }
-
-    .subtitle {
-      color: #94a3b8;
-      font-size: 0.875rem;
-      margin-left: 1.75rem;
-    }
-
-    .diagram-container {
-      background: rgba(15, 23, 42, 0.5);
-      border-radius: 1rem;
-      border: 1px solid #1e293b;
-      padding: 1.5rem;
-      overflow-x: auto;
-    }
-
-    svg {
-      width: 100%;
-      min-width: 900px;
-      display: block;
-    }
-
-    .cards {
-      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-      gap: 1rem;
-      margin-top: 2rem;
-    }
-
-    .card {
-      background: rgba(15, 23, 42, 0.5);
-      border-radius: 0.75rem;
-      border: 1px solid #1e293b;
-      padding: 1.25rem;
-    }
-
-    .card-header {
-      display: flex;
-      align-items: center;
-      gap: 0.5rem;
-      margin-bottom: 0.75rem;
-    }
-
-    .card-dot {
-      width: 8px;
-      height: 8px;
-      border-radius: 50%;
-    }
-
-    .card-dot.cyan { background: #22d3ee; }
-    .card-dot.emerald { background: #34d399; }
-    .card-dot.violet { background: #a78bfa; }
-    .card-dot.amber { background: #fbbf24; }
-    .card-dot.rose { background: #fb7185; }
-
-    .card h3 {
-      font-size: 0.875rem;
-      font-weight: 600;
-    }
-
-    .card ul {
-      list-style: none;
-      color: #94a3b8;
-      font-size: 0.75rem;
-    }
-
-    .card li {
-      margin-bottom: 0.375rem;
-    }
-
-    .footer {
-      text-align: center;
-      margin-top: 1.5rem;
-      color: #475569;
-      font-size: 0.75rem;
-    }
-  </style>
-</head>
-<body>
-  <div class="container">
-    <!-- Encabezado -->
-    <div class="header">
-      <div class="header-row">
-        <div class="pulse-dot"></div>
-        <h1>[NOMBRE DEL PROYECTO] — Arquitectura</h1>
-      </div>
-      <p class="subtitle">[Descripción del subtítulo]</p>
-    </div>
-
-    <!-- Diagrama principal -->
-    <div class="diagram-container">
-      <svg viewBox="0 0 1000 680">
-        <!-- Definiciones -->
-        <defs>
-          <marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
-            <polygon points="0 0, 10 3.5, 0 7" fill="#64748b" />
-          </marker>
-          <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
-            <path d="M 40 0 L 0 0 0 40" fill="none" stroke="#1e293b" stroke-width="0.5"/>
-          </pattern>
-        </defs>
-
-        <!-- Grilla de fondo -->
-        <rect width="100%" height="100%" fill="url(#grid)" />
-
-        <!-- ===============================================================
-             COMPONENTES — Copiar y personalizar estos patrones
-             =============================================================== -->
-
-        <!-- Componente externo/genérico -->
-        <rect x="30" y="280" width="100" height="50" rx="6" fill="rgba(30, 41, 59, 0.5)" stroke="#94a3b8" stroke-width="1.5"/>
-        <text x="80" y="300" fill="white" font-size="11" font-weight="600" text-anchor="middle">Usuarios</text>
-        <text x="80" y="316" fill="#94a3b8" font-size="9" text-anchor="middle">Navegador/Móvil</text>
-
-        <!-- Componente de seguridad -->
-        <rect x="30" y="80" width="100" height="60" rx="6" fill="rgba(136, 19, 55, 0.4)" stroke="#fb7185" stroke-width="1.5"/>
-        <text x="80" y="105" fill="white" font-size="11" font-weight="600" text-anchor="middle">Auth Provider</text>
-        <text x="80" y="121" fill="#94a3b8" font-size="9" text-anchor="middle">OAuth 2.0</text>
-
-        <!-- Límite de región/cloud -->
-        <rect x="160" y="40" width="820" height="620" rx="12" fill="rgba(251, 191, 36, 0.05)" stroke="#fbbf24" stroke-width="1" stroke-dasharray="8,4"/>
-        <text x="172" y="58" fill="#fbbf24" font-size="10" font-weight="600">Región Cloud</text>
-
-        <!-- Servicio cloud -->
-        <rect x="200" y="280" width="110" height="50" rx="6" fill="rgba(120, 53, 15, 0.3)" stroke="#fbbf24" stroke-width="1.5"/>
-        <text x="255" y="300" fill="white" font-size="11" font-weight="600" text-anchor="middle">CDN</text>
-        <text x="255" y="316" fill="#94a3b8" font-size="9" text-anchor="middle">CloudFront</text>
-
-        <!-- Backend -->
-        <rect x="510" y="280" width="110" height="50" rx="6" fill="rgba(6, 78, 59, 0.4)" stroke="#34d399" stroke-width="1.5"/>
-        <text x="565" y="300" fill="white" font-size="11" font-weight="600" text-anchor="middle">API Server</text>
-        <text x="565" y="316" fill="#94a3b8" font-size="9" text-anchor="middle">FastAPI :8000</text>
-
-        <!-- Base de datos -->
-        <rect x="700" y="280" width="120" height="50" rx="6" fill="rgba(76, 29, 149, 0.4)" stroke="#a78bfa" stroke-width="1.5"/>
-        <text x="760" y="300" fill="white" font-size="11" font-weight="600" text-anchor="middle">Base de datos</text>
-        <text x="760" y="316" fill="#94a3b8" font-size="9" text-anchor="middle">PostgreSQL</text>
-
-        <!-- Frontend -->
-        <rect x="200" y="520" width="200" height="110" rx="8" fill="rgba(8, 51, 68, 0.4)" stroke="#22d3ee" stroke-width="1.5"/>
-        <text x="300" y="545" fill="white" font-size="12" font-weight="600" text-anchor="middle">Frontend</text>
-        <text x="300" y="565" fill="#94a3b8" font-size="9" text-anchor="middle">React + TypeScript</text>
-
-        <!-- ===============================================================
-             FLECHAS
-             =============================================================== -->
-        <line x1="130" y1="305" x2="198" y2="305" stroke="#22d3ee" stroke-width="1.5" marker-end="url(#arrowhead)"/>
-        <text x="164" y="299" fill="#94a3b8" font-size="9" text-anchor="middle">HTTPS</text>
-
-        <line x1="310" y1="305" x2="508" y2="305" stroke="#34d399" stroke-width="1.5" marker-end="url(#arrowhead)"/>
-        <line x1="620" y1="305" x2="698" y2="305" stroke="#a78bfa" stroke-width="1.5" marker-end="url(#arrowhead)"/>
-        <text x="655" y="299" fill="#94a3b8" font-size="9">TLS</text>
-
-        <!-- ===============================================================
-             LEYENDA
-             =============================================================== -->
-        <text x="720" y="70" fill="white" font-size="10" font-weight="600">Leyenda</text>
-
-        <rect x="720" y="82" width="16" height="10" rx="2" fill="rgba(8, 51, 68, 0.4)" stroke="#22d3ee" stroke-width="1"/>
-        <text x="742" y="90" fill="#94a3b8" font-size="8">Frontend</text>
-
-        <rect x="720" y="98" width="16" height="10" rx="2" fill="rgba(6, 78, 59, 0.4)" stroke="#34d399" stroke-width="1"/>
-        <text x="742" y="106" fill="#94a3b8" font-size="8">Backend</text>
-
-        <rect x="720" y="114" width="16" height="10" rx="2" fill="rgba(120, 53, 15, 0.3)" stroke="#fbbf24" stroke-width="1"/>
-        <text x="742" y="122" fill="#94a3b8" font-size="8">Servicio Cloud</text>
-
-        <rect x="720" y="130" width="16" height="10" rx="2" fill="rgba(76, 29, 149, 0.4)" stroke="#a78bfa" stroke-width="1"/>
-        <text x="742" y="138" fill="#94a3b8" font-size="8">Base de datos</text>
-
-        <rect x="720" y="146" width="16" height="10" rx="2" fill="rgba(136, 19, 55, 0.4)" stroke="#fb7185" stroke-width="1"/>
-        <text x="742" y="154" fill="#94a3b8" font-size="8">Seguridad</text>
-      </svg>
-    </div>
-
-    <!-- Tarjetas informativas -->
-    <div class="cards">
-      <div class="card">
-        <div class="card-header">
-          <div class="card-dot rose"></div>
-          <h3>Seguridad</h3>
-        </div>
-        <ul>
-          <li>- Autenticación OAuth 2.0</li>
-          <li>- TLS en tránsito</li>
-          <li>- Cifrado en reposo</li>
-        </ul>
-      </div>
-
-      <div class="card">
-        <div class="card-header">
-          <div class="card-dot amber"></div>
-          <h3>Infraestructura</h3>
-        </div>
-        <ul>
-          <li>- CDN para activos estáticos</li>
-          <li>- Auto-scaling horizontal</li>
-          <li>- Monitoreo centralizado</li>
-        </ul>
-      </div>
-
-      <div class="card">
-        <div class="card-header">
-          <div class="card-dot violet"></div>
-          <h3>Datos</h3>
-        </div>
-        <ul>
-          <li>- PostgreSQL principal</li>
-          <li>- Backups automatizados</li>
-          <li>- Réplica de lectura</li>
-        </ul>
-      </div>
-    </div>
-
-    <!-- Pie -->
-    <p class="footer">
-      [Nombre del proyecto] — Generado con swl-ses
-    </p>
-  </div>
-</body>
-</html>
+<!DOCTYPE html>
+<html lang="es">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>[NOMBRE DEL PROYECTO] — Diagrama de Arquitectura</title>
+  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    body {
+      font-family: 'JetBrains Mono', monospace;
+      background: #020617;
+      min-height: 100vh;
+      padding: 2rem;
+      color: white;
+    }
+
+    .container {
+      max-width: 1200px;
+      margin: 0 auto;
+    }
+
+    .header {
+      margin-bottom: 2rem;
+    }
+
+    .header-row {
+      display: flex;
+      align-items: center;
+      gap: 1rem;
+      margin-bottom: 0.5rem;
+    }
+
+    .pulse-dot {
+      width: 12px;
+      height: 12px;
+      background: #22d3ee;
+      border-radius: 50%;
+      animation: pulse 2s infinite;
+    }
+
+    @keyframes pulse {
+      0%, 100% { opacity: 1; }
+      50% { opacity: 0.5; }
+    }
+
+    h1 {
+      font-size: 1.5rem;
+      font-weight: 700;
+      letter-spacing: -0.025em;
+    }
+
+    .subtitle {
+      color: #94a3b8;
+      font-size: 0.875rem;
+      margin-left: 1.75rem;
+    }
+
+    .diagram-container {
+      background: rgba(15, 23, 42, 0.5);
+      border-radius: 1rem;
+      border: 1px solid #1e293b;
+      padding: 1.5rem;
+      overflow-x: auto;
+    }
+
+    svg {
+      width: 100%;
+      min-width: 900px;
+      display: block;
+    }
+
+    .cards {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+      gap: 1rem;
+      margin-top: 2rem;
+    }
+
+    .card {
+      background: rgba(15, 23, 42, 0.5);
+      border-radius: 0.75rem;
+      border: 1px solid #1e293b;
+      padding: 1.25rem;
+    }
+
+    .card-header {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      margin-bottom: 0.75rem;
+    }
+
+    .card-dot {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+    }
+
+    .card-dot.cyan { background: #22d3ee; }
+    .card-dot.emerald { background: #34d399; }
+    .card-dot.violet { background: #a78bfa; }
+    .card-dot.amber { background: #fbbf24; }
+    .card-dot.rose { background: #fb7185; }
+
+    .card h3 {
+      font-size: 0.875rem;
+      font-weight: 600;
+    }
+
+    .card ul {
+      list-style: none;
+      color: #94a3b8;
+      font-size: 0.75rem;
+    }
+
+    .card li {
+      margin-bottom: 0.375rem;
+    }
+
+    .footer {
+      text-align: center;
+      margin-top: 1.5rem;
+      color: #475569;
+      font-size: 0.75rem;
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <!-- Encabezado -->
+    <div class="header">
+      <div class="header-row">
+        <div class="pulse-dot"></div>
+        <h1>[NOMBRE DEL PROYECTO] — Arquitectura</h1>
+      </div>
+      <p class="subtitle">[Descripción del subtítulo]</p>
+    </div>
+
+    <!-- Diagrama principal -->
+    <div class="diagram-container">
+      <svg viewBox="0 0 1000 680">
+        <!-- Definiciones -->
+        <defs>
+          <marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
+            <polygon points="0 0, 10 3.5, 0 7" fill="#64748b" />
+          </marker>
+          <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
+            <path d="M 40 0 L 0 0 0 40" fill="none" stroke="#1e293b" stroke-width="0.5"/>
+          </pattern>
+        </defs>
+
+        <!-- Grilla de fondo -->
+        <rect width="100%" height="100%" fill="url(#grid)" />
+
+        <!-- ===============================================================
+             COMPONENTES — Copiar y personalizar estos patrones
+             =============================================================== -->
+
+        <!-- Componente externo/genérico -->
+        <rect x="30" y="280" width="100" height="50" rx="6" fill="rgba(30, 41, 59, 0.5)" stroke="#94a3b8" stroke-width="1.5"/>
+        <text x="80" y="300" fill="white" font-size="11" font-weight="600" text-anchor="middle">Usuarios</text>
+        <text x="80" y="316" fill="#94a3b8" font-size="9" text-anchor="middle">Navegador/Móvil</text>
+
+        <!-- Componente de seguridad -->
+        <rect x="30" y="80" width="100" height="60" rx="6" fill="rgba(136, 19, 55, 0.4)" stroke="#fb7185" stroke-width="1.5"/>
+        <text x="80" y="105" fill="white" font-size="11" font-weight="600" text-anchor="middle">Auth Provider</text>
+        <text x="80" y="121" fill="#94a3b8" font-size="9" text-anchor="middle">OAuth 2.0</text>
+
+        <!-- Límite de región/cloud -->
+        <rect x="160" y="40" width="820" height="620" rx="12" fill="rgba(251, 191, 36, 0.05)" stroke="#fbbf24" stroke-width="1" stroke-dasharray="8,4"/>
+        <text x="172" y="58" fill="#fbbf24" font-size="10" font-weight="600">Región Cloud</text>
+
+        <!-- Servicio cloud -->
+        <rect x="200" y="280" width="110" height="50" rx="6" fill="rgba(120, 53, 15, 0.3)" stroke="#fbbf24" stroke-width="1.5"/>
+        <text x="255" y="300" fill="white" font-size="11" font-weight="600" text-anchor="middle">CDN</text>
+        <text x="255" y="316" fill="#94a3b8" font-size="9" text-anchor="middle">CloudFront</text>
+
+        <!-- Backend -->
+        <rect x="510" y="280" width="110" height="50" rx="6" fill="rgba(6, 78, 59, 0.4)" stroke="#34d399" stroke-width="1.5"/>
+        <text x="565" y="300" fill="white" font-size="11" font-weight="600" text-anchor="middle">API Server</text>
+        <text x="565" y="316" fill="#94a3b8" font-size="9" text-anchor="middle">FastAPI :8000</text>
+
+        <!-- Base de datos -->
+        <rect x="700" y="280" width="120" height="50" rx="6" fill="rgba(76, 29, 149, 0.4)" stroke="#a78bfa" stroke-width="1.5"/>
+        <text x="760" y="300" fill="white" font-size="11" font-weight="600" text-anchor="middle">Base de datos</text>
+        <text x="760" y="316" fill="#94a3b8" font-size="9" text-anchor="middle">PostgreSQL</text>
+
+        <!-- Frontend -->
+        <rect x="200" y="520" width="200" height="110" rx="8" fill="rgba(8, 51, 68, 0.4)" stroke="#22d3ee" stroke-width="1.5"/>
+        <text x="300" y="545" fill="white" font-size="12" font-weight="600" text-anchor="middle">Frontend</text>
+        <text x="300" y="565" fill="#94a3b8" font-size="9" text-anchor="middle">React + TypeScript</text>
+
+        <!-- ===============================================================
+             FLECHAS
+             =============================================================== -->
+        <line x1="130" y1="305" x2="198" y2="305" stroke="#22d3ee" stroke-width="1.5" marker-end="url(#arrowhead)"/>
+        <text x="164" y="299" fill="#94a3b8" font-size="9" text-anchor="middle">HTTPS</text>
+
+        <line x1="310" y1="305" x2="508" y2="305" stroke="#34d399" stroke-width="1.5" marker-end="url(#arrowhead)"/>
+        <line x1="620" y1="305" x2="698" y2="305" stroke="#a78bfa" stroke-width="1.5" marker-end="url(#arrowhead)"/>
+        <text x="655" y="299" fill="#94a3b8" font-size="9">TLS</text>
+
+        <!-- ===============================================================
+             LEYENDA
+             =============================================================== -->
+        <text x="720" y="70" fill="white" font-size="10" font-weight="600">Leyenda</text>
+
+        <rect x="720" y="82" width="16" height="10" rx="2" fill="rgba(8, 51, 68, 0.4)" stroke="#22d3ee" stroke-width="1"/>
+        <text x="742" y="90" fill="#94a3b8" font-size="8">Frontend</text>
+
+        <rect x="720" y="98" width="16" height="10" rx="2" fill="rgba(6, 78, 59, 0.4)" stroke="#34d399" stroke-width="1"/>
+        <text x="742" y="106" fill="#94a3b8" font-size="8">Backend</text>
+
+        <rect x="720" y="114" width="16" height="10" rx="2" fill="rgba(120, 53, 15, 0.3)" stroke="#fbbf24" stroke-width="1"/>
+        <text x="742" y="122" fill="#94a3b8" font-size="8">Servicio Cloud</text>
+
+        <rect x="720" y="130" width="16" height="10" rx="2" fill="rgba(76, 29, 149, 0.4)" stroke="#a78bfa" stroke-width="1"/>
+        <text x="742" y="138" fill="#94a3b8" font-size="8">Base de datos</text>
+
+        <rect x="720" y="146" width="16" height="10" rx="2" fill="rgba(136, 19, 55, 0.4)" stroke="#fb7185" stroke-width="1"/>
+        <text x="742" y="154" fill="#94a3b8" font-size="8">Seguridad</text>
+      </svg>
+    </div>
+
+    <!-- Tarjetas informativas -->
+    <div class="cards">
+      <div class="card">
+        <div class="card-header">
+          <div class="card-dot rose"></div>
+          <h3>Seguridad</h3>
+        </div>
+        <ul>
+          <li>- Autenticación OAuth 2.0</li>
+          <li>- TLS en tránsito</li>
+          <li>- Cifrado en reposo</li>
+        </ul>
+      </div>
+
+      <div class="card">
+        <div class="card-header">
+          <div class="card-dot amber"></div>
+          <h3>Infraestructura</h3>
+        </div>
+        <ul>
+          <li>- CDN para activos estáticos</li>
+          <li>- Auto-scaling horizontal</li>
+          <li>- Monitoreo centralizado</li>
+        </ul>
+      </div>
+
+      <div class="card">
+        <div class="card-header">
+          <div class="card-dot violet"></div>
+          <h3>Datos</h3>
+        </div>
+        <ul>
+          <li>- PostgreSQL principal</li>
+          <li>- Backups automatizados</li>
+          <li>- Réplica de lectura</li>
+        </ul>
+      </div>
+    </div>
+
+    <!-- Pie -->
+    <p class="footer">
+      [Nombre del proyecto] — Generado con swl-ses
+    </p>
+  </div>
+</body>
+</html>