diff --git a/deck-frontend/CHANGELOG.md b/deck-frontend/CHANGELOG.md
new file mode 100644
index 0000000..542af4f
--- /dev/null
+++ b/deck-frontend/CHANGELOG.md
@@ -0,0 +1,109 @@
+# DECK Frontend - Changelog
+
+## v4.1 (2026-01-15) - Security & Accessibility Update
+
+### 🔴 Critical Fix
+- **XSS Protection**: Added `Utils.escapeHtml()` function to sanitize all user-generated content before rendering to DOM
+  - Applied in: DetailPanel, GridView, TreeView, GraphView sidebar
+  - Prevents script injection from malicious tag names, descriptions, or refs
+
+### 🟡 Important Fixes
+
+#### Responsive CSS
+Added 3 breakpoints for mobile compatibility:
+```css
+@media (max-width: 1024px) - Tablet adjustments
+@media (max-width: 768px)  - Mobile: hides left-panel, detail-panel fullwidth
+@media (max-width: 480px)  - Small screens: hides graph-sidebar
+```
+
+#### Accessibility (WCAG 2.1)
+- `aria-label` on all interactive elements (inputs, selects, buttons)
+- `aria-pressed` on toggle buttons (SEL, base buttons, view tabs)
+- `aria-expanded` on tree headers
+- `role` attributes: button, group, dialog, navigation, complementary
+- `tabindex="0"` on clickable non-button elements
+- `aria-live="polite"` on dynamic content areas
+
+#### Focus Styles
+```css
+.btn:focus-visible
+.base-btn:focus-visible
+.view-tab:focus-visible
+.group-btn:focus-visible
+.lang-select:focus-visible
+.lib-icon:focus-visible
+.card:focus-visible
+.tree-header:focus-visible
+.tree-item:focus-visible
+.tag-chip:focus-visible
+.detail-close:focus-visible
+.modal-close:focus-visible
+```
+
+#### Memory Leak Fix
+- `GraphView.unmount()` now properly cleans up:
+  - Stops D3 force simulation
+  - Removes SVG element from DOM
+  - Nullifies references
+- Called at start of `render()` to prevent accumulation
+
+#### State Management
+- Changed `State.set()` from `Object.assign()` to spread operator for immutability
+- Prevents mutation bugs with nested Sets (graphFilters)
+
+---
+
+## v4.0 (2026-01-15) - Clean Modular Architecture
+
+### Structure
+- Single HTML file with clear separation markers
+- CSS: lines 30-560 (CSS_START/CSS_END)
+- HTML: lines 560-680 (structure only)
+- JS: lines 680-1614 (JS_START/JS_END)
+
+### Extraction Commands
+```bash
+# Extract CSS (pure, without <style> tags)
+sed -n '/CSS_START/,/CSS_END/{//d;p}' deck.html > styles.css
+
+# Extract JS (pure, without <script> tags)
+sed -n '/JS_START/,/JS_END/{//d;p}' deck.html > app.js
+```
+
+### JavaScript Architecture
+```
+CONFIG (constants)     → API endpoints, schemas, colors
+STATE (reactive)       → Application state management
+UTILS (pure functions) → DOM helpers, escapeHtml, debounce
+API (client)          → PostgREST communication
+FILTER (declarative)  → Search, group, library filtering
+COMPONENTS            → GroupsBar, LibrariesPanel, DetailPanel
+VIEWS                 → GridView, TreeView, GraphView
+APP (controller)      → Main application logic
+```
+
+### CSS Architecture
+- BEM naming convention (.card__name, .btn--active)
+- CSS custom properties for theming
+- 6 organized sections: Variables, Reset, Layout, Components, Views, Utilities
+
+---
+
+## v3.1 (2026-01-15)
+
+### Fixes
+- Added `flex-shrink: 0` to `.lib-icon` to prevent compression
+- Fixed duplicate `$` function names (querySelector vs querySelectorAll)
+- Fixed `i` typo (should be `if`) in GroupsBar.render
+
+---
+
+## v3.0 (2026-01-15)
+
+### Initial Modular Version
+- Reorganized from legacy code
+- Added section markers for extraction
+- Implemented all 9 bases (HST, FLG, ITM, LOC, PLY, MTH, ATC, MAIL, CHAT)
+- D3.js lazy loading for graph view
+- PostgREST API integration with schema headers
diff --git a/deck-frontend/deck-v4.1.html b/deck-frontend/deck-v4.1.html
new file mode 100644
index 0000000..2f5056e
--- /dev/null
+++ b/deck-frontend/deck-v4.1.html
@@ -0,0 +1,1584 @@
+<!DOCTYPE html>
+<html lang="es">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>DECK - TZZR</title>
+  <meta name="description" content="DECK Tag Management System">
+
+<!--
+╔══════════════════════════════════════════════════════════════════════════════╗
+║  DECK FRONTEND v4.1 - Security & Accessibility Update                        ║
+╠══════════════════════════════════════════════════════════════════════════════╣
+║                                                                              ║
+║  CHANGES v4.1:                                                               ║
+║    - XSS protection (escapeHtml utility)                                     ║
+║    - Responsive CSS (mobile breakpoints)                                     ║
+║    - Accessibility (aria-labels, focus-visible)                              ║
+║    - GraphView memory leak fix                                               ║
+║                                                                              ║
+║  EXTRACTION:                                                                 ║
+║    sed -n '/CSS_START/,/CSS_END/{//d;p}' deck.html > styles.css              ║
+║    sed -n '/JS_START/,/JS_END/{//d;p}' deck.html > app.js                    ║
+║                                                                              ║
+╚══════════════════════════════════════════════════════════════════════════════╝
+-->
+
+<!-- ══════════════════════════════════════════════════════════════════════════
+     CSS_START
+     ══════════════════════════════════════════════════════════════════════════ -->
+<style>
+/* =============================================================================
+ * DECK STYLES v4.1
+ * ============================================================================= */
+
+/* -----------------------------------------------------------------------------
+ * 1. VARIABLES
+ * ----------------------------------------------------------------------------- */
+:root {
+  --bg-primary: #0a0a0f;
+  --bg-secondary: #12121a;
+  --bg-card: #1a1a24;
+  --bg-hover: #252535;
+  --border-color: #2a2a3a;
+  --border-radius-sm: 4px;
+  --border-radius-md: 6px;
+  --border-radius-lg: 8px;
+  --border-radius-pill: 16px;
+  --text-primary: #e0e0e0;
+  --text-muted: #888888;
+  --text-accent: #7c8aff;
+  --accent: #7c8aff;
+  --accent-hover: #9aa4ff;
+  --topbar-height: 50px;
+  --toolbar-height: 44px;
+  --left-panel-width: 85px;
+  --detail-panel-width: 360px;
+  --card-width: 176px;
+  --card-img-height: 176px;
+  --transition-fast: 0.15s ease;
+  --transition-normal: 0.3s ease;
+}
+
+/* -----------------------------------------------------------------------------
+ * 2. RESET & BASE
+ * ----------------------------------------------------------------------------- */
+*, *:before, *:after { margin: 0; padding: 0; box-sizing: border-box; }
+html, body { height: 100%; overflow: hidden; }
+body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  font-size: 14px;
+  background: var(--bg-primary);
+  color: var(--text-primary);
+  line-height: 1.4;
+}
+
+::-webkit-scrollbar { width: 10px; height: 10px; }
+::-webkit-scrollbar-track { background: var(--bg-secondary); }
+::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 5px; }
+::-webkit-scrollbar-thumb:hover { background: #444; }
+
+/* -----------------------------------------------------------------------------
+ * 3. LAYOUT
+ * ----------------------------------------------------------------------------- */
+.app { display: flex; flex-direction: column; height: 100vh; }
+
+.topbar {
+  height: var(--topbar-height);
+  background: var(--bg-secondary);
+  border-bottom: 1px solid var(--border-color);
+  display: flex;
+  align-items: center;
+  padding: 0 16px;
+  gap: 12px;
+  flex-shrink: 0;
+  z-index: 20;
+}
+
+.topbar__left, .topbar__right { display: flex; align-items: center; gap: 10px; }
+.topbar__center { flex: 1; display: flex; justify-content: center; gap: 16px; overflow-x: auto; }
+
+.toolbar {
+  height: var(--toolbar-height);
+  background: var(--bg-secondary);
+  border-bottom: 1px solid var(--border-color);
+  display: flex;
+  align-items: center;
+  padding: 0 16px;
+  gap: 12px;
+  flex-shrink: 0;
+}
+
+.toolbar__left { display: flex; align-items: center; gap: 6px; }
+.toolbar__center { flex: 1; display: flex; gap: 6px; overflow-x: auto; padding: 4px 0; }
+.toolbar__right { display: flex; gap: 4px; }
+
+.main-layout { flex: 1; display: flex; overflow: hidden; }
+
+/* -----------------------------------------------------------------------------
+ * 4. COMPONENTS
+ * ----------------------------------------------------------------------------- */
+.logo { font-weight: 700; font-size: 1.2em; color: var(--accent); letter-spacing: 1px; user-select: none; }
+
+.btn {
+  padding: 7px 14px;
+  background: var(--bg-card);
+  border: 1px solid var(--border-color);
+  border-radius: var(--border-radius-md);
+  color: var(--text-muted);
+  cursor: pointer;
+  font-size: 0.8em;
+  font-weight: 500;
+  transition: all var(--transition-fast);
+  white-space: nowrap;
+}
+
+.btn:hover:not(.btn--disabled) { border-color: var(--accent); color: var(--text-primary); }
+.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+.btn--active { background: var(--accent); border-color: var(--accent); color: #fff; }
+.btn--disabled { opacity: 0.5; cursor: not-allowed; }
+.btn--sm { padding: 5px 10px; font-size: 0.75em; }
+
+.base-group { display: flex; gap: 2px; background: var(--bg-card); border-radius: var(--border-radius-md); padding: 3px; }
+
+.base-btn {
+  padding: 6px 12px;
+  background: transparent;
+  border: none;
+  border-radius: var(--border-radius-sm);
+  color: var(--text-muted);
+  cursor: pointer;
+  font-size: 0.75em;
+  font-weight: 600;
+  transition: all var(--transition-fast);
+  white-space: nowrap;
+}
+
+.base-btn:hover { color: var(--text-primary); }
+.base-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
+.base-btn--active { background: var(--accent); color: #fff; }
+
+.view-tab {
+  padding: 6px 16px;
+  background: transparent;
+  border: 1px solid var(--border-color);
+  border-radius: var(--border-radius-md);
+  color: var(--text-muted);
+  cursor: pointer;
+  font-size: 0.85em;
+  transition: all var(--transition-fast);
+}
+
+.view-tab:hover { color: var(--text-primary); }
+.view-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+.view-tab--active { background: var(--accent); border-color: var(--accent); color: #fff; }
+
+.group-btn {
+  padding: 5px 12px;
+  background: var(--bg-card);
+  border: 1px solid var(--border-color);
+  border-radius: var(--border-radius-pill);
+  color: var(--text-muted);
+  cursor: pointer;
+  font-size: 0.75em;
+  white-space: nowrap;
+  transition: all var(--transition-fast);
+}
+
+.group-btn:hover { border-color: var(--accent); color: var(--text-primary); }
+.group-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+.group-btn--active { background: var(--accent); border-color: var(--accent); color: #fff; }
+
+.search-input {
+  width: 280px;
+  padding: 9px 14px;
+  background: var(--bg-card);
+  border: 1px solid var(--border-color);
+  border-radius: var(--border-radius-md);
+  color: var(--text-primary);
+  font-size: 0.9em;
+}
+
+.search-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(124, 138, 255, 0.2); }
+.search-input::placeholder { color: var(--text-muted); }
+
+.lang-select {
+  padding: 5px 8px;
+  background: var(--bg-card);
+  border: 1px solid var(--border-color);
+  border-radius: var(--border-radius-sm);
+  color: var(--text-primary);
+  font-size: 0.8em;
+  cursor: pointer;
+}
+
+.lang-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+
+/* Left Panel */
+.left-panel {
+  width: var(--left-panel-width);
+  background: var(--bg-secondary);
+  border-right: 1px solid var(--border-color);
+  padding: 12px 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  overflow-y: auto;
+  flex-shrink: 0;
+}
+
+.lib-icon {
+  flex-shrink: 0;
+  width: 65px;
+  height: 65px;
+  background: var(--bg-card);
+  border: 2px solid var(--border-color);
+  border-radius: var(--border-radius-lg);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all var(--transition-fast);
+  overflow: hidden;
+}
+
+.lib-icon:hover { border-color: var(--accent); }
+.lib-icon:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+.lib-icon--active { border-color: var(--accent); background: var(--bg-hover); }
+.lib-icon img { width: 42px; height: 42px; object-fit: cover; border-radius: var(--border-radius-sm); }
+
+.lib-icon span {
+  font-size: 0.6em;
+  color: var(--text-muted);
+  text-align: center;
+  margin-top: 2px;
+  max-width: 60px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Center Panel */
+.center-panel { flex: 1; display: flex; flex-direction: column; overflow: hidden; position: relative; min-width: 0; }
+.content-area { flex: 1; overflow: auto; padding: 16px; }
+
+/* Detail Panel */
+.detail-panel {
+  width: 0;
+  background: var(--bg-secondary);
+  border-left: 1px solid var(--border-color);
+  overflow: hidden;
+  transition: width var(--transition-normal);
+  flex-shrink: 0;
+}
+
+.detail-panel--open { width: var(--detail-panel-width); }
+.detail-content { width: var(--detail-panel-width); height: 100%; overflow-y: auto; }
+
+.detail-header {
+  position: relative;
+  width: 100%;
+  height: 200px;
+  background: linear-gradient(145deg, var(--bg-card), var(--bg-primary));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+
+.detail-close {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background: var(--bg-hover);
+  border: none;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  font-size: 20px;
+  cursor: pointer;
+  color: var(--text-primary);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all var(--transition-fast);
+  z-index: 2;
+}
+
+.detail-close:hover { background: var(--accent); color: #fff; }
+.detail-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+.detail-img { width: 150px; height: 150px; object-fit: cover; border-radius: 12px; }
+.detail-placeholder { font-size: 4em; font-weight: 700; color: var(--accent); opacity: 0.4; text-transform: uppercase; }
+.detail-body { padding: 20px; }
+.detail-ref { font-size: 0.9em; color: var(--accent); font-weight: 600; margin-bottom: 4px; }
+
+.detail-mrf {
+  font-size: 0.65em;
+  color: var(--text-muted);
+  font-family: monospace;
+  cursor: pointer;
+  padding: 6px 10px;
+  background: var(--bg-card);
+  border-radius: var(--border-radius-sm);
+  margin-bottom: 12px;
+  word-break: break-all;
+  transition: all var(--transition-fast);
+}
+
+.detail-mrf:hover { color: var(--accent); background: var(--bg-hover); }
+.detail-name { font-size: 1.2em; font-weight: 600; margin-bottom: 8px; }
+.detail-desc { font-size: 0.9em; color: var(--text-muted); line-height: 1.5; margin-bottom: 16px; }
+.detail-section { margin-top: 20px; }
+.detail-section h4 { font-size: 0.8em; color: var(--accent); text-transform: uppercase; margin-bottom: 10px; }
+
+.chip-list { display: flex; flex-wrap: wrap; gap: 6px; }
+
+.tag-chip {
+  padding: 6px 12px;
+  background: var(--bg-card);
+  border: 1px solid var(--border-color);
+  border-radius: var(--border-radius-pill);
+  font-size: 0.8em;
+  color: var(--text-muted);
+  cursor: pointer;
+  transition: all var(--transition-fast);
+}
+
+.tag-chip:hover { border-color: var(--accent); color: var(--text-primary); }
+.tag-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+
+/* Modal */
+.modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.7);
+  display: none;
+  align-items: center;
+  justify-content: center;
+  z-index: 100;
+}
+
+.modal--open { display: flex; }
+
+.modal-content {
+  background: var(--bg-card);
+  border: 1px solid var(--border-color);
+  border-radius: 12px;
+  padding: 24px;
+  max-width: 500px;
+  width: 90%;
+  position: relative;
+}
+
+.modal-close {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  background: none;
+  border: none;
+  font-size: 24px;
+  cursor: pointer;
+  color: var(--text-muted);
+}
+
+.modal-close:hover { color: var(--text-primary); }
+.modal-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+.modal h2 { margin-bottom: 16px; color: var(--accent); }
+.modal code { background: var(--bg-primary); padding: 2px 6px; border-radius: var(--border-radius-sm); font-size: 0.85em; }
+.modal ul { margin: 8px 0 0 20px; line-height: 1.8; }
+
+/* Toast */
+.toast {
+  position: fixed;
+  bottom: 30px;
+  left: 50%;
+  transform: translateX(-50%) translateY(20px);
+  background: var(--accent);
+  color: #fff;
+  padding: 14px 28px;
+  border-radius: 10px;
+  font-size: 0.9em;
+  font-weight: 500;
+  opacity: 0;
+  transition: all var(--transition-normal);
+  z-index: 1000;
+  pointer-events: none;
+}
+
+.toast--show { opacity: 1; transform: translateX(-50%) translateY(0); }
+
+/* -----------------------------------------------------------------------------
+ * 5. VIEWS
+ * ----------------------------------------------------------------------------- */
+
+/* Grid View */
+.content-area--grid { display: flex; flex-wrap: wrap; gap: 16px; align-content: start; }
+
+.card {
+  width: var(--card-width);
+  flex-shrink: 0;
+  background: var(--bg-card);
+  border: 1px solid var(--border-color);
+  border-radius: var(--border-radius-lg);
+  overflow: hidden;
+  cursor: pointer;
+  transition: all var(--transition-fast);
+  position: relative;
+}
+
+.card:hover { border-color: var(--accent); transform: translateY(-2px); }
+.card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+.card--selected { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
+.card__checkbox { position: absolute; top: 8px; left: 8px; z-index: 2; width: 20px; height: 20px; accent-color: var(--accent); }
+.card__img { display: block; width: 100%; height: var(--card-img-height); object-fit: cover; background: var(--bg-hover); }
+
+.card__placeholder {
+  width: 100%;
+  height: var(--card-img-height);
+  background: linear-gradient(135deg, var(--bg-hover), var(--bg-card));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 2.5em;
+  font-weight: 700;
+  color: var(--accent);
+  opacity: 0.6;
+  text-transform: uppercase;
+}
+
+.card__name {
+  padding: 10px;
+  font-size: 0.85em;
+  text-align: center;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Tree View */
+.content-area--tree { display: flex; flex-direction: column; gap: 8px; }
+.tree-group { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--border-radius-lg); overflow: hidden; }
+
+.tree-header {
+  padding: 12px 16px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  cursor: pointer;
+  transition: background var(--transition-fast);
+}
+
+.tree-header:hover { background: var(--bg-hover); }
+.tree-header:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
+.tree-toggle { width: 20px; font-weight: bold; color: var(--accent); text-align: center; user-select: none; }
+.tree-group-name { flex: 1; font-weight: 500; }
+.tree-count { color: var(--text-muted); font-size: 0.85em; }
+.tree-items { display: none; padding: 0 16px 12px; flex-direction: column; gap: 4px; }
+.tree-items--expanded { display: flex; }
+
+.tree-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 12px;
+  border-radius: var(--border-radius-md);
+  cursor: pointer;
+  transition: background var(--transition-fast);
+}
+
+.tree-item:hover { background: var(--bg-hover); }
+.tree-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
+.tree-item__img { width: 32px; height: 32px; object-fit: cover; border-radius: var(--border-radius-sm); flex-shrink: 0; }
+
+.tree-item__placeholder {
+  width: 32px;
+  height: 32px;
+  background: var(--bg-hover);
+  border-radius: var(--border-radius-sm);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 600;
+  font-size: 0.8em;
+  color: var(--accent);
+  flex-shrink: 0;
+}
+
+.tree-item__name { flex: 1; font-size: 0.9em; }
+
+/* Graph View */
+.content-area--graph { position: relative; padding: 0; overflow: hidden; }
+.graph-container { width: 100%; height: 100%; position: relative; }
+.graph-container svg { display: block; width: 100%; height: 100%; }
+
+.graph-sidebar {
+  position: absolute;
+  top: 16px;
+  left: 16px;
+  width: 200px;
+  background: var(--bg-card);
+  border: 1px solid var(--border-color);
+  border-radius: var(--border-radius-lg);
+  padding: 12px;
+  z-index: 10;
+  max-height: calc(100% - 32px);
+  overflow-y: auto;
+}
+
+.graph-section { margin-bottom: 16px; }
+.graph-section:last-child { margin-bottom: 0; }
+.graph-section__title { font-size: 0.75em; font-weight: 600; color: var(--accent); text-transform: uppercase; margin-bottom: 8px; }
+.graph-stat { display: flex; justify-content: space-between; font-size: 0.85em; margin-bottom: 4px; }
+.graph-stat__value { font-weight: 600; color: var(--accent); }
+.graph-checkbox { display: flex; align-items: center; gap: 8px; font-size: 0.8em; margin-bottom: 4px; cursor: pointer; }
+.graph-checkbox input { cursor: pointer; accent-color: var(--accent); }
+.color-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
+.graph-slider { margin-top: 8px; }
+.graph-slider__label { display: flex; justify-content: space-between; font-size: 0.75em; margin-bottom: 4px; }
+.graph-slider__value { color: var(--accent); }
+
+.graph-slider input[type="range"] {
+  width: 100%;
+  height: 4px;
+  background: var(--border-color);
+  border-radius: 2px;
+  -webkit-appearance: none;
+  cursor: pointer;
+}
+
+.graph-slider input[type="range"]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  width: 14px;
+  height: 14px;
+  background: var(--accent);
+  border-radius: 50%;
+  cursor: pointer;
+}
+
+.graph-controls { position: absolute; top: 16px; right: 16px; display: flex; gap: 6px; z-index: 10; }
+
+.graph-legend {
+  position: absolute;
+  bottom: 16px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  gap: 16px;
+  background: var(--bg-card);
+  border: 1px solid var(--border-color);
+  border-radius: 20px;
+  padding: 8px 16px;
+  z-index: 10;
+}
+
+.legend-item { display: flex; align-items: center; gap: 6px; font-size: 0.75em; }
+
+/* -----------------------------------------------------------------------------
+ * 6. UTILITIES
+ * ----------------------------------------------------------------------------- */
+.loading, .empty { display: flex; align-items: center; justify-content: center; padding: 60px; color: var(--text-muted); font-size: 0.9em; }
+.sel-count { font-size: 0.75em; color: var(--accent); margin-left: 6px; }
+.hidden { display: none !important; }
+
+/* -----------------------------------------------------------------------------
+ * 7. RESPONSIVE
+ * ----------------------------------------------------------------------------- */
+@media (max-width: 1024px) {
+  :root {
+    --left-panel-width: 70px;
+    --detail-panel-width: 300px;
+    --card-width: 150px;
+    --card-img-height: 150px;
+  }
+  .lib-icon { width: 55px; height: 55px; }
+  .lib-icon img { width: 36px; height: 36px; }
+  .search-input { width: 200px; }
+  .graph-sidebar { width: 180px; }
+}
+
+@media (max-width: 768px) {
+  :root {
+    --topbar-height: 45px;
+    --toolbar-height: 40px;
+    --card-width: 140px;
+    --card-img-height: 140px;
+  }
+  .left-panel { display: none; }
+  .detail-panel--open { width: 100%; position: absolute; right: 0; top: 0; bottom: 0; z-index: 50; }
+  .search-input { width: 150px; }
+  .topbar__center { gap: 8px; }
+  .base-group { padding: 2px; }
+  .base-btn { padding: 5px 8px; font-size: 0.7em; }
+  .graph-sidebar { width: 160px; font-size: 0.9em; }
+  .graph-legend { padding: 6px 12px; gap: 10px; }
+}
+
+@media (max-width: 480px) {
+  :root {
+    --card-width: 120px;
+    --card-img-height: 120px;
+  }
+  .topbar { padding: 0 8px; gap: 8px; }
+  .toolbar { padding: 0 8px; }
+  .content-area { padding: 8px; }
+  .content-area--grid { gap: 8px; }
+  .search-input { width: 120px; padding: 7px 10px; }
+  .btn { padding: 5px 10px; }
+  .view-tab { padding: 5px 10px; font-size: 0.8em; }
+  .graph-sidebar { display: none; }
+}
+</style>
+<!-- ══════════════════════════════════════════════════════════════════════════
+     CSS_END
+     ══════════════════════════════════════════════════════════════════════════ -->
+</head>
+
+<body>
+<!-- ══════════════════════════════════════════════════════════════════════════
+     HTML STRUCTURE
+     ══════════════════════════════════════════════════════════════════════════ -->
+<div class="app">
+
+  <!-- TOPBAR -->
+  <header class="topbar" role="banner">
+    <div class="topbar__left">
+      <span class="logo">DECK</span>
+      <select id="lang-select" class="lang-select" aria-label="Seleccionar idioma">
+        <option value="es">ES</option>
+        <option value="en">EN</option>
+        <option value="ch">CH</option>
+      </select>
+      <button class="btn" id="btn-api" aria-label="Ver referencia API">API</button>
+    </div>
+
+    <div class="topbar__center" role="navigation" aria-label="Bases de datos">
+      <div class="base-group" data-group="taxonomy" role="group" aria-label="Taxonomía">
+        <button class="base-btn base-btn--active" data-base="hst" aria-pressed="true">HST</button>
+        <button class="base-btn" data-base="flg" aria-pressed="false">FLG</button>
+        <button class="base-btn" data-base="itm" aria-pressed="false">ITM</button>
+        <button class="base-btn" data-base="loc" aria-pressed="false">LOC</button>
+        <button class="base-btn" data-base="ply" aria-pressed="false">PLY</button>
+      </div>
+      <div class="base-group" data-group="registry" role="group" aria-label="Registro">
+        <button class="base-btn" data-base="mth" aria-pressed="false">MTH</button>
+        <button class="base-btn" data-base="atc" aria-pressed="false">ATC</button>
+      </div>
+      <div class="base-group" data-group="comms" role="group" aria-label="Comunicación">
+        <button class="base-btn" data-base="mail" aria-pressed="false">MAIL</button>
+        <button class="base-btn" data-base="chat" aria-pressed="false">CHAT</button>
+      </div>
+    </div>
+
+    <div class="topbar__right">
+      <input type="text" id="search" class="search-input" placeholder="Buscar... (/)" aria-label="Buscar tags">
+    </div>
+  </header>
+
+  <!-- TOOLBAR -->
+  <div class="toolbar" role="toolbar" aria-label="Herramientas">
+    <div class="toolbar__left">
+      <button class="btn" id="btn-sel" aria-label="Modo selección" aria-pressed="false">SEL</button>
+      <button class="btn" id="btn-get" aria-label="Copiar MRFs seleccionados">GET<span class="sel-count hidden" id="sel-count" aria-live="polite"></span></button>
+    </div>
+    <div class="toolbar__center" id="groups-bar" role="group" aria-label="Filtros de grupo"></div>
+    <div class="toolbar__right" role="group" aria-label="Tipo de vista">
+      <button class="view-tab view-tab--active" data-view="grid" aria-pressed="true">Grid</button>
+      <button class="view-tab" data-view="tree" aria-pressed="false">Tree</button>
+      <button class="view-tab" data-view="graph" aria-pressed="false">Graph</button>
+    </div>
+  </div>
+
+  <!-- MAIN LAYOUT -->
+  <div class="main-layout">
+    <aside class="left-panel" id="left-panel" role="complementary" aria-label="Bibliotecas"></aside>
+    <main class="center-panel" role="main">
+      <div class="content-area" id="content-area" aria-live="polite">
+        <div class="loading">Cargando...</div>
+      </div>
+    </main>
+    <aside class="detail-panel" id="detail-panel" role="complementary" aria-label="Detalle del tag">
+      <div class="detail-content" id="detail-content"></div>
+    </aside>
+  </div>
+</div>
+
+<!-- API MODAL -->
+<div class="modal" id="api-modal" role="dialog" aria-labelledby="api-modal-title" aria-modal="true">
+  <div class="modal-content">
+    <button class="modal-close" aria-label="Cerrar modal">&times;</button>
+    <h2 id="api-modal-title">API Reference</h2>
+    <div class="api-info">
+      <p><strong>Base URL:</strong> <code>/api</code></p>
+      <p style="margin-top: 12px;"><strong>Headers:</strong></p>
+      <ul>
+        <li>GET: <code>Accept-Profile: {schema}</code></li>
+        <li>POST: <code>Content-Profile: {schema}</code></li>
+      </ul>
+      <p style="margin-top: 16px;"><strong>Schemas:</strong></p>
+      <ul style="font-size: 0.9em;">
+        <li>HST, FLG → <code>tzzr_core_hst</code></li>
+        <li>ITM, LOC, PLY → <code>tzzr_core_itm_base</code></li>
+        <li>MTH → <code>tzzr_core_produccion</code></li>
+        <li>ATC → <code>tzzr_core_secretaria</code></li>
+        <li>MAIL → <code>mail_manager</code></li>
+        <li>CHAT → <code>context_manager</code></li>
+        <li>Groups, Libraries → <code>public</code></li>
+      </ul>
+    </div>
+  </div>
+</div>
+
+<!-- TOAST -->
+<div class="toast" id="toast" role="status" aria-live="polite"></div>
+
+<!-- ══════════════════════════════════════════════════════════════════════════
+     JS_START
+     ══════════════════════════════════════════════════════════════════════════ -->
+<script>
+/**
+ * DECK Frontend v4.1
+ * Security & Accessibility Update
+ */
+
+// =============================================================================
+// 1. CONFIG
+// =============================================================================
+const CONFIG = {
+  API_BASE: "/api",
+  IMG_BASE: "https://atc.tzzrdeck.me",
+
+  BASES: {
+    hst:  { schema: "tzzr_core_hst",       table: "hst",             hasGroups: true,  hasLibraries: true  },
+    flg:  { schema: "tzzr_core_hst",       table: "flg",             hasGroups: false, hasLibraries: true  },
+    itm:  { schema: "tzzr_core_itm_base",  table: "itm",             hasGroups: false, hasLibraries: true  },
+    loc:  { schema: "tzzr_core_itm_base",  table: "loc",             hasGroups: false, hasLibraries: true  },
+    ply:  { schema: "tzzr_core_itm_base",  table: "ply",             hasGroups: false, hasLibraries: true  },
+    mth:  { schema: "tzzr_core_produccion",table: "mth",             hasGroups: false, hasLibraries: false },
+    atc:  { schema: "tzzr_core_secretaria",table: "atc",             hasGroups: false, hasLibraries: true  },
+    mail: { schema: "mail_manager",        table: "clara_registros", hasGroups: false, hasLibraries: false, orderBy: "timestamp_entrada.desc" },
+    chat: { schema: "context_manager",     table: "messages",        hasGroups: false, hasLibraries: false, orderBy: "created_at.desc" }
+  },
+
+  CATEGORIES: {
+    hst: { name: "Hashtags",  color: "#7c8aff" },
+    spe: { name: "Specs",     color: "#FF9800" },
+    vue: { name: "Values",    color: "#00BCD4" },
+    vsn: { name: "Visions",   color: "#E91E63" },
+    msn: { name: "Missions",  color: "#9C27B0" },
+    flg: { name: "Flags",     color: "#4CAF50" },
+    ply: { name: "Players",   color: "#FF5722" },
+    itm: { name: "Items",     color: "#795548" },
+    loc: { name: "Locations", color: "#009688" }
+  },
+
+  EDGE_TYPES: {
+    relation: "#8BC34A", specialization: "#9C27B0", mirror: "#607D8B",
+    dependency: "#2196F3", sequence: "#4CAF50", composition: "#FF9800",
+    hierarchy: "#E91E63", library: "#00BCD4", contextual: "#FFC107", association: "#795548"
+  },
+
+  GRAPH_DEFAULTS: { nodeSize: 20, linkDist: 80, showImages: true, showLabels: true }
+};
+
+// =============================================================================
+// 2. STATE
+// =============================================================================
+const State = {
+  _data: {
+    base: "hst", view: "grid", lang: "es",
+    search: "", group: "all", library: "all", libraryMembers: new Set(),
+    selectionMode: false, selected: new Set(), selectedTag: null,
+    tags: [], hstTags: [], groups: [], libraries: [], edges: [],
+    graphFilters: { categories: new Set(Object.keys(CONFIG.CATEGORIES)), edgeTypes: new Set(Object.keys(CONFIG.EDGE_TYPES)) },
+    graphSettings: { ...CONFIG.GRAPH_DEFAULTS }
+  },
+
+  get(key) { return key ? this._data[key] : { ...this._data }; },
+  set(updates) { this._data = { ...this._data, ...updates }; },
+
+  resetFilters() {
+    this.set({ group: "all", library: "all", libraryMembers: new Set(), search: "", selected: new Set(), selectionMode: false });
+  }
+};
+
+// =============================================================================
+// 3. UTILS
+// =============================================================================
+const Utils = {
+  $(selector) { return document.querySelector(selector); },
+  $$(selector) { return document.querySelectorAll(selector); },
+
+  // XSS Protection
+  escapeHtml(str) {
+    if (!str) return "";
+    const div = document.createElement("div");
+    div.textContent = str;
+    return div.innerHTML;
+  },
+
+  debounce(fn, delay) {
+    let timer;
+    return (...args) => { clearTimeout(timer); timer = setTimeout(() => fn(...args), delay); };
+  },
+
+  resolveImage(url) {
+    if (!url) return "";
+    if (url.startsWith("http")) return url;
+    return `${CONFIG.IMG_BASE}/${url}`;
+  },
+
+  getName(tag, lang = "es") {
+    if (!tag) return "";
+    return tag[`name_${lang}`] || tag.name_es || tag.name_en || tag.alias || tag.ref || (tag.mrf ? tag.mrf.slice(0, 8) : "");
+  },
+
+  toast(message, duration = 2000) {
+    const el = Utils.$("#toast");
+    el.textContent = message;
+    el.classList.add("toast--show");
+    setTimeout(() => el.classList.remove("toast--show"), duration);
+  },
+
+  async copyToClipboard(text) {
+    try { await navigator.clipboard.writeText(text); return true; }
+    catch {
+      const textarea = document.createElement("textarea");
+      textarea.value = text;
+      textarea.style.cssText = "position:fixed;opacity:0";
+      document.body.appendChild(textarea);
+      textarea.select();
+      const success = document.execCommand("copy");
+      textarea.remove();
+      return success;
+    }
+  },
+
+  getCategory(tag) {
+    const ref = (tag.ref || "").toLowerCase();
+    for (const cat of Object.keys(CONFIG.CATEGORIES)) {
+      if (ref.startsWith(cat)) return cat;
+    }
+    return State.get("base");
+  },
+
+  updateHash() {
+    const { base, view } = State.get();
+    const parts = [base];
+    if (view !== "grid") parts.push(view);
+    window.location.hash = "/" + parts.join("/") + "/";
+  },
+
+  parseHash() {
+    const hash = window.location.hash.replace(/^#\/?/, "").replace(/\/?$/, "");
+    const parts = hash.split("/").filter(Boolean);
+    const result = {};
+    if (parts[0] && CONFIG.BASES[parts[0]]) result.base = parts[0];
+    if (parts[1] && ["grid", "tree", "graph"].includes(parts[1])) result.view = parts[1];
+    return result;
+  }
+};
+
+// =============================================================================
+// 4. API
+// =============================================================================
+const API = {
+  async fetch(endpoint, schema, options = {}) {
+    const headers = {};
+    if (schema) headers[options.method === "POST" ? "Content-Profile" : "Accept-Profile"] = schema;
+    if (options.body) headers["Content-Type"] = "application/json";
+
+    try {
+      const response = await fetch(`${CONFIG.API_BASE}${endpoint}`, {
+        method: options.method || "GET", headers,
+        body: options.body ? JSON.stringify(options.body) : undefined
+      });
+      if (!response.ok) throw new Error(`API Error: ${response.status}`);
+      return response.json();
+    } catch (error) {
+      console.error(`API request failed: ${endpoint}`, error);
+      return options.fallback !== undefined ? options.fallback : [];
+    }
+  },
+
+  getTags(base) {
+    const config = CONFIG.BASES[base];
+    if (!config) return Promise.resolve([]);
+    return this.fetch(`/${config.table}?order=${config.orderBy || "ref.asc"}`, config.schema, { fallback: [] });
+  },
+
+  getHstTags() { return this.fetch("/hst?select=mrf,ref,name_es,name_en,alias", "tzzr_core_hst", { fallback: [] }); },
+  getGroups() { return this.fetch("/api_groups", "public", { fallback: [] }); },
+
+  getLibraries(base) {
+    const config = CONFIG.BASES[base];
+    if (!config?.hasLibraries) return Promise.resolve([]);
+    return this.fetch(`/api_library_list_${base}`, "public", { fallback: [] });
+  },
+
+  async getLibraryMembers(base, libraryMrf) {
+    const config = CONFIG.BASES[base];
+    if (!config) return [];
+    const data = await this.fetch(`/library_${base}?mrf_library=eq.${libraryMrf}`, config.schema, { fallback: [] });
+    return data.map(item => item.mrf_tag || item.mrf_child || item.mrf);
+  },
+
+  getEdges(base) {
+    const config = CONFIG.BASES[base];
+    if (!config) return Promise.resolve([]);
+    return this.fetch(`/graph_${base}`, config.schema, { fallback: [] });
+  },
+
+  getChildren(mrf, base) {
+    const config = CONFIG.BASES[base];
+    if (!config) return Promise.resolve([]);
+    return this.fetch("/rpc/api_children", config.schema, { method: "POST", body: { parent_mrf: mrf }, fallback: [] });
+  },
+
+  getRelated(mrf, base) {
+    const config = CONFIG.BASES[base];
+    if (!config) return Promise.resolve([]);
+    return this.fetch("/rpc/api_related", config.schema, { method: "POST", body: { tag_mrf: mrf }, fallback: [] });
+  }
+};
+
+// =============================================================================
+// 5. FILTER
+// =============================================================================
+const Filter = {
+  apply(tags) {
+    const { search, group, library, libraryMembers, lang } = State.get();
+    const query = search.toLowerCase();
+
+    return tags.filter(tag => {
+      if (library !== "all" && !libraryMembers.has(tag.mrf)) return false;
+      if (group !== "all" && tag.set_hst !== group) return false;
+      if (query) {
+        const name = Utils.getName(tag, lang).toLowerCase();
+        const ref = (tag.ref || "").toLowerCase();
+        const alias = (tag.alias || "").toLowerCase();
+        if (!name.includes(query) && !ref.includes(query) && !alias.includes(query)) return false;
+      }
+      return true;
+    });
+  }
+};
+
+// =============================================================================
+// 6. COMPONENTS
+// =============================================================================
+const GroupsBar = {
+  el: null,
+
+  init() {
+    this.el = Utils.$("#groups-bar");
+    this.el.addEventListener("click", (e) => {
+      const btn = e.target.closest(".group-btn");
+      if (!btn) return;
+      State.set({ group: btn.dataset.group });
+      this.render();
+      App.renderView();
+    });
+  },
+
+  render() {
+    const { base, tags, groups, group: activeGroup, lang } = State.get();
+    const config = CONFIG.BASES[base];
+
+    if (!config?.hasGroups || !groups.length) { this.el.innerHTML = ""; return; }
+
+    const allBtn = `<button class="group-btn ${activeGroup === "all" ? "group-btn--active" : ""}" data-group="all" aria-pressed="${activeGroup === "all"}">Todos (${tags.length})</button>`;
+    const groupBtns = groups.map(g => {
+      const name = Utils.escapeHtml(Utils.getName(g, lang));
+      return `<button class="group-btn ${activeGroup === g.mrf ? "group-btn--active" : ""}" data-group="${Utils.escapeHtml(g.mrf)}" aria-pressed="${activeGroup === g.mrf}">${name} (${g.count || 0})</button>`;
+    }).join("");
+    this.el.innerHTML = allBtn + groupBtns;
+  }
+};
+
+const LibrariesPanel = {
+  el: null,
+
+  init() {
+    this.el = Utils.$("#left-panel");
+    this.el.addEventListener("click", async (e) => {
+      const item = e.target.closest(".lib-icon");
+      if (!item) return;
+
+      const mrf = item.dataset.lib;
+      const base = State.get("base");
+
+      if (mrf === "all") {
+        State.set({ library: "all", libraryMembers: new Set() });
+      } else {
+        const members = await API.getLibraryMembers(base, mrf);
+        State.set({ library: mrf, libraryMembers: new Set(members) });
+      }
+      this.render();
+      App.renderView();
+    });
+  },
+
+  render() {
+    const { base, libraries, library: activeLib, lang } = State.get();
+    const config = CONFIG.BASES[base];
+
+    if (!config?.hasLibraries) {
+      this.el.innerHTML = '<div class="empty" style="font-size:0.7em;padding:20px">—</div>';
+      return;
+    }
+
+    const allIcon = `<div class="lib-icon ${activeLib === "all" ? "lib-icon--active" : ""}" data-lib="all" title="Todas" tabindex="0" role="button" aria-pressed="${activeLib === "all"}"><span>ALL</span></div>`;
+    const libIcons = libraries.map(lib => {
+      const name = Utils.escapeHtml(Utils.getName(lib, lang));
+      const img = Utils.resolveImage(lib.img_thumb_url || lib.icon_url);
+      const mrf = Utils.escapeHtml(lib.mrf);
+      return `<div class="lib-icon ${activeLib === lib.mrf ? "lib-icon--active" : ""}" data-lib="${mrf}" title="${name}" tabindex="0" role="button" aria-pressed="${activeLib === lib.mrf}">${img ? `<img src="${img}" alt="${name}">` : `<span>${name.slice(0, 4)}</span>`}</div>`;
+    }).join("");
+
+    this.el.innerHTML = allIcon + libIcons;
+  }
+};
+
+const DetailPanel = {
+  el: null,
+  contentEl: null,
+
+  init() {
+    this.el = Utils.$("#detail-panel");
+    this.contentEl = Utils.$("#detail-content");
+
+    this.el.addEventListener("click", async (e) => {
+      if (e.target.closest(".detail-close")) { this.close(); return; }
+      if (e.target.closest(".detail-mrf")) {
+        await Utils.copyToClipboard(e.target.textContent.trim());
+        Utils.toast("MRF copiado");
+        return;
+      }
+      const chip = e.target.closest(".tag-chip");
+      if (chip?.dataset.mrf) this.show(chip.dataset.mrf);
+    });
+  },
+
+  async show(mrf) {
+    const { tags, hstTags, lang, base } = State.get();
+    const tag = tags.find(t => t.mrf === mrf) || hstTags.find(t => t.mrf === mrf);
+    if (!tag) { Utils.toast("Tag no encontrado"); return; }
+
+    State.set({ selectedTag: tag });
+    const [children, related] = await Promise.all([API.getChildren(mrf, base), API.getRelated(mrf, base)]);
+
+    const name = Utils.escapeHtml(Utils.getName(tag, lang));
+    const img = Utils.resolveImage(tag.img_thumb_url || tag.img_url);
+    const ref = Utils.escapeHtml(tag.ref || "");
+    const desc = Utils.escapeHtml(tag.txt || tag.alias || "");
+    const safeMrf = Utils.escapeHtml(mrf);
+
+    this.contentEl.innerHTML = `
+      <div class="detail-header">
+        <button class="detail-close" aria-label="Cerrar detalle">&times;</button>
+        ${img ? `<img class="detail-img" src="${img}" alt="${ref}">` : `<div class="detail-placeholder">${ref.slice(0, 2) || "?"}</div>`}
+      </div>
+      <div class="detail-body">
+        <div class="detail-ref">${ref}</div>
+        <div class="detail-mrf" title="Click para copiar" tabindex="0" role="button">${safeMrf}</div>
+        <div class="detail-name">${name}</div>
+        ${desc ? `<div class="detail-desc">${desc}</div>` : ""}
+        ${children.length ? `<div class="detail-section"><h4>Hijos (${children.length})</h4><div class="chip-list">${children.map(c => `<span class="tag-chip" data-mrf="${Utils.escapeHtml(c.mrf)}" tabindex="0" role="button">${Utils.escapeHtml(Utils.getName(c, lang))}</span>`).join("")}</div></div>` : ""}
+        ${related.length ? `<div class="detail-section"><h4>Relacionados (${related.length})</h4><div class="chip-list">${related.map(r => `<span class="tag-chip" data-mrf="${Utils.escapeHtml(r.mrf)}" title="${Utils.escapeHtml(r.edge_type || "")}" tabindex="0" role="button">${Utils.escapeHtml(Utils.getName(r, lang))}</span>`).join("")}</div></div>` : ""}
+      </div>
+    `;
+    this.el.classList.add("detail-panel--open");
+  },
+
+  close() {
+    this.el.classList.remove("detail-panel--open");
+    State.set({ selectedTag: null });
+  }
+};
+
+// =============================================================================
+// 7. VIEWS
+// =============================================================================
+const GridView = {
+  render(tags) {
+    const area = Utils.$("#content-area");
+    area.className = "content-area content-area--grid";
+
+    if (!tags.length) { area.innerHTML = '<div class="empty">Sin resultados</div>'; return; }
+
+    const { lang, selectionMode, selected } = State.get();
+    area.innerHTML = tags.map(tag => {
+      const name = Utils.escapeHtml(Utils.getName(tag, lang));
+      const img = Utils.resolveImage(tag.img_thumb_url);
+      const ref = Utils.escapeHtml(tag.ref || "");
+      const mrf = Utils.escapeHtml(tag.mrf);
+      const isSelected = selected.has(tag.mrf);
+      return `
+        <div class="card ${isSelected ? "card--selected" : ""}" data-mrf="${mrf}" tabindex="0" role="button" aria-pressed="${isSelected}">
+          ${selectionMode ? `<input type="checkbox" class="card__checkbox" ${isSelected ? "checked" : ""} aria-label="Seleccionar ${name}">` : ""}
+          ${img ? `<img class="card__img" src="${img}" alt="${name}" loading="lazy">` : `<div class="card__placeholder">${ref.slice(0, 2) || "?"}</div>`}
+          <div class="card__name">${name}</div>
+        </div>
+      `;
+    }).join("");
+  }
+};
+
+const TreeView = {
+  render(tags) {
+    const area = Utils.$("#content-area");
+    area.className = "content-area content-area--tree";
+
+    if (!tags.length) { area.innerHTML = '<div class="empty">Sin resultados</div>'; return; }
+
+    const { lang, hstTags } = State.get();
+    const grouped = {};
+    tags.forEach(tag => {
+      const key = tag.set_hst || "_ungrouped";
+      if (!grouped[key]) grouped[key] = [];
+      grouped[key].push(tag);
+    });
+
+    const groupNames = {};
+    hstTags.forEach(h => { groupNames[h.mrf] = Utils.getName(h, lang); });
+
+    area.innerHTML = Object.entries(grouped).map(([key, items]) => {
+      const groupName = Utils.escapeHtml(groupNames[key] || key);
+      return `
+        <div class="tree-group">
+          <div class="tree-header" tabindex="0" role="button" aria-expanded="false">
+            <span class="tree-toggle" aria-hidden="true">+</span>
+            <span class="tree-group-name">${groupName}</span>
+            <span class="tree-count">${items.length}</span>
+          </div>
+          <div class="tree-items" role="group">
+            ${items.map(tag => {
+              const name = Utils.escapeHtml(Utils.getName(tag, lang));
+              const img = Utils.resolveImage(tag.img_thumb_url);
+              const ref = Utils.escapeHtml(tag.ref || "");
+              const mrf = Utils.escapeHtml(tag.mrf);
+              return `
+                <div class="tree-item" data-mrf="${mrf}" tabindex="0" role="button">
+                  ${img ? `<img class="tree-item__img" src="${img}" alt="${name}">` : `<div class="tree-item__placeholder">${ref.slice(0, 1) || "?"}</div>`}
+                  <span class="tree-item__name">${name}</span>
+                </div>
+              `;
+            }).join("")}
+          </div>
+        </div>
+      `;
+    }).join("");
+
+    area.querySelectorAll(".tree-header").forEach(header => {
+      header.onclick = header.onkeydown = (e) => {
+        if (e.type === "keydown" && e.key !== "Enter" && e.key !== " ") return;
+        if (e.type === "keydown") e.preventDefault();
+        const items = header.nextElementSibling;
+        const toggle = header.querySelector(".tree-toggle");
+        const isExpanded = items.classList.toggle("tree-items--expanded");
+        toggle.textContent = isExpanded ? "−" : "+";
+        header.setAttribute("aria-expanded", isExpanded);
+      };
+    });
+  }
+};
+
+const GraphView = {
+  svg: null,
+  simulation: null,
+  zoom: null,
+  d3Loaded: false,
+
+  async render(tags) {
+    const area = Utils.$("#content-area");
+    area.className = "content-area content-area--graph";
+
+    // Clean up previous simulation
+    this.unmount();
+
+    if (!tags.length) { area.innerHTML = '<div class="empty">Sin resultados</div>'; return; }
+
+    if (!this.d3Loaded && typeof d3 === "undefined") {
+      area.innerHTML = '<div class="loading">Cargando visualización...</div>';
+      await this.loadD3();
+    }
+
+    const { graphFilters, graphSettings, edges, lang } = State.get();
+
+    const nodeMap = new Map();
+    tags.forEach(tag => {
+      const cat = Utils.getCategory(tag);
+      if (graphFilters.categories.has(cat)) {
+        nodeMap.set(tag.mrf, {
+          id: tag.mrf, ref: tag.ref || "",
+          name: Utils.getName(tag, lang),
+          img: Utils.resolveImage(tag.img_thumb_url),
+          category: cat, color: CONFIG.CATEGORIES[cat]?.color || "#7c8aff"
+        });
+      }
+    });
+
+    const links = edges
+      .filter(e => nodeMap.has(e.mrf_a) && nodeMap.has(e.mrf_b) && graphFilters.edgeTypes.has(e.edge_type))
+      .map(e => ({ source: e.mrf_a, target: e.mrf_b, type: e.edge_type, weight: e.weight || 1, color: CONFIG.EDGE_TYPES[e.edge_type] || "#666" }));
+
+    const nodes = Array.from(nodeMap.values());
+
+    area.innerHTML = '<div class="graph-container"></div>';
+    const container = area.querySelector(".graph-container");
+
+    this.renderSVG(container, nodes, links);
+    this.renderSidebar(container, nodes.length, links.length);
+    this.renderControls(container);
+    this.renderLegend(container);
+  },
+
+  async loadD3() {
+    return new Promise((resolve, reject) => {
+      const script = document.createElement("script");
+      script.src = "https://d3js.org/d3.v7.min.js";
+      script.onload = () => { this.d3Loaded = true; resolve(); };
+      script.onerror = reject;
+      document.head.appendChild(script);
+    });
+  },
+
+  renderSVG(container, nodes, links) {
+    const { graphSettings } = State.get();
+    const width = container.clientWidth || 800;
+    const height = container.clientHeight || 600;
+
+    this.svg = d3.select(container).append("svg").attr("width", width).attr("height", height).attr("role", "img").attr("aria-label", "Grafo de relaciones");
+    const g = this.svg.append("g");
+
+    this.zoom = d3.zoom().scaleExtent([0.1, 4]).on("zoom", (e) => g.attr("transform", e.transform));
+    this.svg.call(this.zoom);
+
+    const hasLinks = links.length > 0;
+    this.simulation = d3.forceSimulation(nodes)
+      .force("link", d3.forceLink(links).id(d => d.id).distance(graphSettings.linkDist))
+      .force("charge", d3.forceManyBody().strength(hasLinks ? -150 : -30))
+      .force("center", d3.forceCenter(width / 2, height / 2))
+      .force("collision", d3.forceCollide().radius(graphSettings.nodeSize + 5));
+
+    if (!hasLinks) {
+      this.simulation.force("radial", d3.forceRadial(Math.min(width, height) / 3, width / 2, height / 2).strength(0.1));
+    }
+
+    const link = g.append("g").selectAll("line").data(links).join("line")
+      .attr("stroke", d => d.color).attr("stroke-width", d => Math.max(1.5, Math.sqrt(d.weight)));
+
+    const node = g.append("g").selectAll("g").data(nodes).join("g").call(this.createDrag());
+    node.append("circle").attr("r", graphSettings.nodeSize).attr("fill", d => d.color).attr("stroke", "#fff").attr("stroke-width", 2);
+
+    if (graphSettings.showImages) {
+      node.each(function(d) {
+        if (d.img) {
+          d3.select(this).append("image")
+            .attr("xlink:href", d.img)
+            .attr("x", -graphSettings.nodeSize).attr("y", -graphSettings.nodeSize)
+            .attr("width", graphSettings.nodeSize * 2).attr("height", graphSettings.nodeSize * 2)
+            .attr("clip-path", `circle(${graphSettings.nodeSize}px)`);
+        }
+      });
+    }
+
+    if (graphSettings.showLabels) {
+      node.append("text").text(d => d.name.slice(0, 12))
+        .attr("dy", graphSettings.nodeSize + 14).attr("text-anchor", "middle")
+        .attr("fill", "#e0e0e0").attr("font-size", "10px");
+    }
+
+    node.on("click", (e, d) => { e.stopPropagation(); DetailPanel.show(d.id); });
+
+    this.simulation.on("tick", () => {
+      link.attr("x1", d => d.source.x).attr("y1", d => d.source.y).attr("x2", d => d.target.x).attr("y2", d => d.target.y);
+      node.attr("transform", d => `translate(${d.x},${d.y})`);
+    });
+  },
+
+  createDrag() {
+    const sim = this.simulation;
+    return d3.drag()
+      .on("start", (e, d) => { if (!e.active) sim.alphaTarget(0.3).restart(); d.fx = d.x; d.fy = d.y; })
+      .on("drag", (e, d) => { d.fx = e.x; d.fy = e.y; })
+      .on("end", (e, d) => { if (!e.active) sim.alphaTarget(0); d.fx = null; d.fy = null; });
+  },
+
+  renderSidebar(container, nodeCount, edgeCount) {
+    const { graphFilters, graphSettings } = State.get();
+    const sidebar = document.createElement("div");
+    sidebar.className = "graph-sidebar";
+    sidebar.innerHTML = `
+      <div class="graph-section">
+        <div class="graph-section__title">Stats</div>
+        <div class="graph-stat"><span>Nodos</span><span class="graph-stat__value">${nodeCount}</span></div>
+        <div class="graph-stat"><span>Edges</span><span class="graph-stat__value">${edgeCount}</span></div>
+      </div>
+      <div class="graph-section">
+        <div class="graph-section__title">Categorías</div>
+        ${Object.entries(CONFIG.CATEGORIES).map(([key, val]) => `<label class="graph-checkbox"><input type="checkbox" data-category="${key}" ${graphFilters.categories.has(key) ? "checked" : ""}><span class="color-dot" style="background:${val.color}"></span>${Utils.escapeHtml(val.name)}</label>`).join("")}
+      </div>
+      <div class="graph-section">
+        <div class="graph-section__title">Relaciones</div>
+        ${Object.entries(CONFIG.EDGE_TYPES).map(([key, color]) => `<label class="graph-checkbox"><input type="checkbox" data-edge="${key}" ${graphFilters.edgeTypes.has(key) ? "checked" : ""}><span class="color-dot" style="background:${color}"></span>${Utils.escapeHtml(key)}</label>`).join("")}
+      </div>
+      <div class="graph-section">
+        <div class="graph-section__title">Visual</div>
+        <label class="graph-checkbox"><input type="checkbox" id="gs-images" ${graphSettings.showImages ? "checked" : ""}>Imágenes</label>
+        <label class="graph-checkbox"><input type="checkbox" id="gs-labels" ${graphSettings.showLabels ? "checked" : ""}>Etiquetas</label>
+        <div class="graph-slider">
+          <div class="graph-slider__label"><span>Nodo</span><span class="graph-slider__value" id="gs-size-val">${graphSettings.nodeSize}px</span></div>
+          <input type="range" id="gs-size" min="10" max="60" value="${graphSettings.nodeSize}" aria-label="Tamaño de nodo">
+        </div>
+        <div class="graph-slider">
+          <div class="graph-slider__label"><span>Distancia</span><span class="graph-slider__value" id="gs-dist-val">${graphSettings.linkDist}px</span></div>
+          <input type="range" id="gs-dist" min="30" max="200" value="${graphSettings.linkDist}" aria-label="Distancia entre nodos">
+        </div>
+      </div>
+    `;
+    container.appendChild(sidebar);
+    this.bindSidebarEvents(sidebar);
+  },
+
+  bindSidebarEvents(sidebar) {
+    const { graphFilters, graphSettings } = State.get();
+
+    sidebar.querySelectorAll("[data-category]").forEach(cb => {
+      cb.onchange = () => {
+        const cats = new Set(graphFilters.categories);
+        cb.checked ? cats.add(cb.dataset.category) : cats.delete(cb.dataset.category);
+        State.set({ graphFilters: { ...graphFilters, categories: cats } });
+        App.renderView();
+      };
+    });
+
+    sidebar.querySelectorAll("[data-edge]").forEach(cb => {
+      cb.onchange = () => {
+        const edges = new Set(graphFilters.edgeTypes);
+        cb.checked ? edges.add(cb.dataset.edge) : edges.delete(cb.dataset.edge);
+        State.set({ graphFilters: { ...graphFilters, edgeTypes: edges } });
+        App.renderView();
+      };
+    });
+
+    sidebar.querySelector("#gs-images").onchange = (e) => { State.set({ graphSettings: { ...graphSettings, showImages: e.target.checked } }); App.renderView(); };
+    sidebar.querySelector("#gs-labels").onchange = (e) => { State.set({ graphSettings: { ...graphSettings, showLabels: e.target.checked } }); App.renderView(); };
+
+    const sizeSlider = sidebar.querySelector("#gs-size");
+    sizeSlider.oninput = (e) => { sidebar.querySelector("#gs-size-val").textContent = e.target.value + "px"; };
+    sizeSlider.onchange = (e) => { State.set({ graphSettings: { ...graphSettings, nodeSize: parseInt(e.target.value) } }); App.renderView(); };
+
+    const distSlider = sidebar.querySelector("#gs-dist");
+    distSlider.oninput = (e) => { sidebar.querySelector("#gs-dist-val").textContent = e.target.value + "px"; };
+    distSlider.onchange = (e) => { State.set({ graphSettings: { ...graphSettings, linkDist: parseInt(e.target.value) } }); App.renderView(); };
+  },
+
+  renderControls(container) {
+    const controls = document.createElement("div");
+    controls.className = "graph-controls";
+    controls.innerHTML = `<button class="btn btn--sm" id="graph-fit" aria-label="Ajustar vista">Ajustar</button><button class="btn btn--sm" id="graph-zin" aria-label="Acercar">+</button><button class="btn btn--sm" id="graph-zout" aria-label="Alejar">−</button>`;
+    container.appendChild(controls);
+
+    controls.querySelector("#graph-fit").onclick = () => { this.svg.transition().duration(500).call(this.zoom.transform, d3.zoomIdentity); };
+    controls.querySelector("#graph-zin").onclick = () => { this.svg.transition().duration(300).call(this.zoom.scaleBy, 1.5); };
+    controls.querySelector("#graph-zout").onclick = () => { this.svg.transition().duration(300).call(this.zoom.scaleBy, 0.67); };
+  },
+
+  renderLegend(container) {
+    const { graphFilters } = State.get();
+    const legend = document.createElement("div");
+    legend.className = "graph-legend";
+    legend.setAttribute("role", "legend");
+    legend.innerHTML = Array.from(graphFilters.categories).map(cat => `<div class="legend-item"><span class="color-dot" style="background:${CONFIG.CATEGORIES[cat]?.color || "#7c8aff"}"></span><span>${Utils.escapeHtml(CONFIG.CATEGORIES[cat]?.name || cat)}</span></div>`).join("");
+    container.appendChild(legend);
+  },
+
+  unmount() {
+    if (this.simulation) { this.simulation.stop(); this.simulation = null; }
+    if (this.svg) { this.svg.remove(); this.svg = null; }
+    this.zoom = null;
+  }
+};
+
+// =============================================================================
+// 8. APP
+// =============================================================================
+const App = {
+  async init() {
+    const hashState = Utils.parseHash();
+    if (hashState.base) State.set({ base: hashState.base });
+    if (hashState.view) State.set({ view: hashState.view });
+
+    GroupsBar.init();
+    LibrariesPanel.init();
+    DetailPanel.init();
+    this.bindEvents();
+
+    await this.loadData(State.get("base"));
+    this.renderView();
+    this.updateBaseButtons();
+    this.updateViewTabs();
+  },
+
+  bindEvents() {
+    Utils.$$(".base-btn").forEach(btn => { btn.onclick = () => this.changeBase(btn.dataset.base); });
+    Utils.$$(".view-tab").forEach(tab => { tab.onclick = () => this.changeView(tab.dataset.view); });
+
+    Utils.$("#lang-select").onchange = (e) => {
+      State.set({ lang: e.target.value });
+      this.renderView();
+      const selectedTag = State.get("selectedTag");
+      if (selectedTag) DetailPanel.show(selectedTag.mrf);
+    };
+
+    const searchInput = Utils.$("#search");
+    searchInput.oninput = Utils.debounce(() => { State.set({ search: searchInput.value }); this.renderView(); }, 200);
+
+    Utils.$("#btn-sel").onclick = () => {
+      const currentMode = State.get("selectionMode");
+      State.set({ selectionMode: !currentMode });
+      if (!State.get("selectionMode")) State.set({ selected: new Set() });
+      const btn = Utils.$("#btn-sel");
+      btn.classList.toggle("btn--active", State.get("selectionMode"));
+      btn.setAttribute("aria-pressed", State.get("selectionMode"));
+      this.updateSelectionCount();
+      this.renderView();
+    };
+
+    Utils.$("#btn-get").onclick = async () => {
+      const selected = State.get("selected");
+      if (!selected.size) { Utils.toast("No hay seleccionados"); return; }
+      await Utils.copyToClipboard([...selected].join("\n"));
+      Utils.toast(`Copiados ${selected.size} MRFs`);
+    };
+
+    Utils.$("#btn-api").onclick = () => { Utils.$("#api-modal").classList.add("modal--open"); };
+    Utils.$(".modal-close").onclick = () => { Utils.$("#api-modal").classList.remove("modal--open"); };
+    Utils.$("#api-modal").onclick = (e) => { if (e.target.id === "api-modal") Utils.$("#api-modal").classList.remove("modal--open"); };
+
+    Utils.$("#content-area").onclick = (e) => {
+      const item = e.target.closest(".card, .tree-item");
+      if (!item) return;
+      const mrf = item.dataset.mrf;
+      if (!mrf) return;
+
+      const { selectionMode, selected } = State.get();
+      if (selectionMode) {
+        const newSelected = new Set(selected);
+        newSelected.has(mrf) ? newSelected.delete(mrf) : newSelected.add(mrf);
+        State.set({ selected: newSelected });
+        this.updateSelectionCount();
+        this.renderView();
+      } else {
+        DetailPanel.show(mrf);
+      }
+    };
+
+    document.onkeydown = (e) => {
+      if (e.key === "Escape") {
+        DetailPanel.close();
+        Utils.$("#api-modal").classList.remove("modal--open");
+        if (State.get("selectionMode")) {
+          State.set({ selectionMode: false, selected: new Set() });
+          Utils.$("#btn-sel").classList.remove("btn--active");
+          Utils.$("#btn-sel").setAttribute("aria-pressed", "false");
+          this.updateSelectionCount();
+          this.renderView();
+        }
+      }
+      if (e.key === "/" && e.target.tagName !== "INPUT") { e.preventDefault(); Utils.$("#search").focus(); }
+    };
+
+    window.onhashchange = () => {
+      const hashState = Utils.parseHash();
+      if (hashState.base && hashState.base !== State.get("base")) this.changeBase(hashState.base);
+      if (hashState.view && hashState.view !== State.get("view")) this.changeView(hashState.view);
+    };
+  },
+
+  async loadData(base) {
+    Utils.$("#content-area").innerHTML = '<div class="loading">Cargando...</div>';
+    try {
+      const [tags, hstTags, groups, libraries, edges] = await Promise.all([
+        API.getTags(base), API.getHstTags(), API.getGroups(), API.getLibraries(base), API.getEdges(base)
+      ]);
+      State.set({ tags, hstTags, groups, libraries, edges });
+      GroupsBar.render();
+      LibrariesPanel.render();
+    } catch (error) {
+      console.error("Failed to load data:", error);
+      Utils.$("#content-area").innerHTML = '<div class="empty">Error cargando datos</div>';
+    }
+  },
+
+  async changeBase(base) {
+    State.set({ base });
+    State.resetFilters();
+    State.set({ edges: [] });
+    Utils.$("#search").value = "";
+    this.updateBaseButtons();
+    DetailPanel.close();
+    GraphView.unmount();
+    Utils.updateHash();
+    await this.loadData(base);
+    this.renderView();
+  },
+
+  changeView(view) {
+    GraphView.unmount();
+    State.set({ view });
+    this.updateViewTabs();
+    DetailPanel.close();
+    Utils.updateHash();
+    this.renderView();
+  },
+
+  renderView() {
+    const { view, tags } = State.get();
+    const filtered = Filter.apply(tags);
+    switch (view) {
+      case "grid": GridView.render(filtered); break;
+      case "tree": TreeView.render(filtered); break;
+      case "graph": GraphView.render(filtered); break;
+    }
+  },
+
+  updateBaseButtons() {
+    const base = State.get("base");
+    Utils.$$(".base-btn").forEach(btn => {
+      const isActive = btn.dataset.base === base;
+      btn.classList.toggle("base-btn--active", isActive);
+      btn.setAttribute("aria-pressed", isActive);
+    });
+  },
+
+  updateViewTabs() {
+    const view = State.get("view");
+    Utils.$$(".view-tab").forEach(tab => {
+      const isActive = tab.dataset.view === view;
+      tab.classList.toggle("view-tab--active", isActive);
+      tab.setAttribute("aria-pressed", isActive);
+    });
+  },
+
+  updateSelectionCount() {
+    const count = State.get("selected").size;
+    const el = Utils.$("#sel-count");
+    if (count > 0) { el.textContent = `(${count})`; el.classList.remove("hidden"); }
+    else { el.classList.add("hidden"); }
+  }
+};
+
+document.addEventListener("DOMContentLoaded", () => App.init());
+</script>
+<!-- ══════════════════════════════════════════════════════════════════════════
+     JS_END
+     ══════════════════════════════════════════════════════════════════════════ -->
+
+</body>
+</html>
\ No newline at end of file
