humanmap-vas 1.0.27 → 1.0.28

package/humanmap-vas-standalone.js

@@ -1,47 +1,372 @@
 // humanmap-vas-standalone.js — Cabeza + Cuello + Tórax (2 vistas: anterior/posterior)
 (function(){
+  
   const STYLE = `
-    :host { display:block; font:14px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, Noto Sans, sans-serif; color:#111827; }
-    .hm { position: relative; border: var(--hm-border, 1px solid #e5e7eb); border-radius: var(--hm-border-radius, 14px); overflow: hidden; background: var(--hm-background, #fff); }
-    .hm-toolbar { display:grid; grid-template-columns: auto 1fr auto; align-items:center; gap:8px; padding:8px 10px; border-bottom:1px solid #eef2f7; background:#fafafa; }
-    .hm-center { text-align:center; font-weight:600; color:#1f2937; }
-    .hm-toolbar select, .hm-toolbar button { appearance:none; border:1px solid #d1d5db; border-radius:10px; padding:6px 10px; background:#fff; cursor:pointer; font-weight:500; }
-    .hm-toolbar .menu-btn { font-size: 18px; width: 36px; height: 32px; line-height: 1; text-align: center; background: #fff; border: 1px solid #d1d5db; border-radius: 10px; cursor: pointer; transition: background 0.2s; }
-    .hm-toolbar .menu-btn:hover { background: #f3f4f6; }
-    .hm-dropdown { position: absolute; right: 10px; top: 46px; background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.08); display: none; flex-direction: column; z-index: 9999; }
+    :host {
+      display: block;
+      font: 14px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, Noto Sans, sans-serif;
+      color: var(--hm-text-color, #111827);
+    }
+
+    /* ==================== TEMAS ==================== */
+    :host([theme="light"]) {
+      --hm-border: 1px solid #e5e7eb;
+      --hm-border-radius: 14px;
+      --hm-background: #ffffff;
+      --hm-text-color: #111827;
+      --hm-toolbar-bg: #fafafa;
+      --hm-toolbar-border: #e5e7eb;
+      --hm-btn-bg: #ffffff;
+      --hm-btn-hover: #f3f4f6;
+      --hm-zone-fill: rgba(31,41,55,0);
+      --hm-zone-hover: rgba(31,41,55,0.22);
+      --hm-zone-selected: rgba(31,41,55,0.36);
+      --hm-label-color: #0a0a0a;
+    }
+
+    :host([theme="dark"]) {
+      --hm-border: 1px solid #374151;
+      --hm-border-radius: 14px;
+      --hm-background: #1f2937;
+      --hm-text-color: #f3f4f6;
+      --hm-toolbar-bg: #111827;
+      --hm-toolbar-border: #374151;
+      --hm-btn-bg: #374151;
+      --hm-btn-hover: #4b5563;
+      --hm-zone-fill: rgba(255,255,255,0);
+      --hm-zone-hover: rgba(255,255,255,0.1);
+      --hm-zone-selected: rgba(94, 101, 111, 0.9);
+      --hm-label-color: #d1d5db;
+    }
+
+    @media (prefers-color-scheme: dark) {
+      :host(:not([theme])) {
+        --hm-border: 1px solid #374151;
+        --hm-background: #1f2937;
+        --hm-text-color: #f3f4f6;
+        --hm-toolbar-bg: #111827;
+        --hm-toolbar-border: #374151;
+        --hm-btn-bg: #374151;
+        --hm-btn-hover: #4b5563;
+        --hm-zone-fill: rgba(255,255,255,0);
+        --hm-zone-hover: rgba(255,255,255,0.1);
+        --hm-zone-selected: rgba(94, 101, 111, 0.9);
+        --hm-label-color: #d1d5db;
+      }
+    }
+
+    /* ==================== ESTRUCTURA BASE ==================== */
+    .hm {
+      position: relative;
+      border: var(--hm-border);
+      border-radius: var(--hm-border-radius);
+      overflow: hidden;
+      background: var(--hm-background);
+      color: var(--hm-text-color);
+      transition: background 0.4s ease, color 0.4s ease;
+    }
+
+    .hm-toolbar {
+      display: grid;
+      grid-template-columns: auto 1fr auto;
+      align-items: center;
+      gap: 8px;
+      padding: 8px 10px;
+      border-bottom: 1px solid var(--hm-toolbar-border);
+      background: var(--hm-toolbar-bg);
+      transition: background 0.4s ease, color 0.4s ease, border-color 0.4s ease;
+    }
+
+    .hm-center {
+      text-align: center;
+      font-weight: 600;
+      color: var(--hm-text-color);
+    }
+
+    .hm-toolbar select,
+    .hm-toolbar button {
+      appearance: none;
+      border: 1px solid var(--hm-toolbar-border);
+      border-radius: 10px;
+      padding: 6px 10px;
+      background: var(--hm-btn-bg);
+      cursor: pointer;
+      font-weight: 500;
+      color: var(--hm-text-color);
+      transition: background 0.4s ease, color 0.4s ease, border-color 0.4s ease;
+    }
+
+    .hm-toolbar button:hover,
+    .hm-toolbar select:hover {
+      background: var(--hm-btn-hover);
+    }
+
+    .hm-toolbar .menu-btn {
+      font-size: 18px;
+      width: 36px;
+      height: 32px;
+      line-height: 1;
+      text-align: center;
+    }
+
+    .hm-dropdown {
+      position: absolute;
+      right: 10px;
+      top: 46px;
+      background: var(--hm-background);
+      border: 1px solid var(--hm-toolbar-border);
+      border-radius: 8px;
+      box-shadow: 0 4px 12px rgba(0,0,0,0.08);
+      display: none;
+      flex-direction: column;
+      z-index: 9999;
+    }
+
     .hm-dropdown.active { display: flex; }
-    .hm-dropdown button { background: none; border: none; padding: 8px 16px; text-align: left; font-size: 14px; cursor: pointer; transition: background 0.15s; }
-    .hm-dropdown button:hover { background: #f3f4f6; }
-    .hm-canvas-wrap { position: relative; width: var(--hm-width, 100%); height: var(--hm-height, 500px); aspect-ratio: 2 / 3; background: var(--hm-background, #fff); display: flex; align-items: center; justify-content: center; overflow: hidden; }
-    svg.hm-svg { position:absolute; inset:0; width:100%; height:100%; margin: auto; }
-    .zone { fill: rgba(31,41,55,0); transition: fill 120ms ease; cursor: pointer; }
-    .zone:hover { fill: rgba(31,41,55,0.22); }
+
+    .hm-dropdown button {
+      background: none;
+      border: none;
+      padding: 8px 16px;
+      text-align: left;
+      font-size: 14px;
+      cursor: pointer;
+      transition: background 0.15s;
+      color: var(--hm-text-color);
+    }
+
+    .hm-dropdown button:hover {
+      background: var(--hm-btn-hover);
+    }
+
+    /* ==================== LIENZO ==================== */
+    .hm-canvas-wrap {
+      position: relative;
+      width: var(--hm-width, 100%);
+      height: var(--hm-height, 500px);
+      aspect-ratio: 2 / 3;
+      background: var(--hm-background);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      overflow: hidden;
+      transition: background 0.4s ease, color 0.4s ease;
+    }
+
+    svg.hm-svg {
+      position: absolute;
+      inset: 0;
+      width: 100%;
+      height: 100%;
+      margin: auto;
+    }
+
+    /* ==================== ZONAS ==================== */
+    .zone {
+      fill: var(--hm-zone-fill);
+      transition: fill 0.4s ease;
+      cursor: pointer;
+    }
+
+    .zone:hover { fill: var(--hm-zone-hover); }
+
     .zone.readonly { cursor: default; }
-    .zone.readonly:not(.selected):hover { fill: rgba(31,41,55,0); }
-    .zone.selected { fill: rgba(31,41,55,0.36); }
-    .hm-all-label { fill: #111827; font-weight: 700; font-size: 36px; text-anchor: middle; dominant-baseline: middle; }
-    .label { fill:#0a0a0a; font-size:36px; pointer-events: none; user-select: none; text-anchor: middle; dominant-baseline: middle; font-weight:800; }
-    .hm-print-btn { position: absolute; top: 10px; right: 10px; background: rgba(17,24,39,0.85); color: #f9fafb; border: none; border-radius: 8px; cursor: pointer; font-size: 18px; padding: 6px 10px; box-shadow: 0 2px 4px rgba(0,0,0,0.3); transition: opacity 0.25s ease, background 0.2s ease; opacity: 0; pointer-events: none; }
-    .hm-canvas-wrap:hover .hm-print-btn { opacity: 1; pointer-events: auto; }
+
+    .zone.readonly:not(.selected):hover { fill: var(--hm-zone-fill); }
+
+    .zone.selected { fill: var(--hm-zone-selected); }
+
+    /* ==================== LABELS ==================== */
+    .hm-all-label {
+      fill: var(--hm-text-color);
+      font-weight: 700;
+      font-size: 36px;
+      text-anchor: middle;
+      dominant-baseline: middle;
+      transition: fill 0.4s ease;
+    }
+
+    .label {
+      fill: var(--hm-label-color);
+      font-size: 36px;
+      pointer-events: none;
+      user-select: none;
+      text-anchor: middle;
+      dominant-baseline: middle;
+      font-weight: 800;
+      transition: fill 0.4s ease;
+    }
+
+    /* ==================== BOTONES FLOTANTES / MODAL ==================== */
+    .hm-print-btn {
+      position: absolute;
+      top: 10px;
+      right: 10px;
+      background: rgba(17,24,39,0.85);
+      color: #f9fafb;
+      border: none;
+      border-radius: 8px;
+      cursor: pointer;
+      font-size: 18px;
+      padding: 6px 10px;
+      box-shadow: 0 2px 4px rgba(0,0,0,0.3);
+      transition: opacity 0.25s ease, background 0.2s ease;
+      opacity: 0;
+      pointer-events: none;
+    }
+
+    .hm-canvas-wrap:hover .hm-print-btn {
+      opacity: 1;
+      pointer-events: auto;
+    }
+
     .hm-print-btn:hover { background: rgba(37,99,235,0.9); }
-    .hm-zoom-float { position: absolute; bottom: 10px; right: 10px; background: rgba(31,41,55,0.85); color: #fff; border: none; border-radius: 50%; width: 42px; height: 42px; font-size: 20px; line-height: 1; cursor: pointer; box-shadow: 0 3px 8px rgba(0,0,0,0.3); transition: transform 0.2s ease, background 0.2s ease; z-index: 20; }
+
+    .hm-zoom-float {
+      position: absolute;
+      bottom: 10px;
+      right: 10px;
+      background: rgba(31,41,55,0.85);
+      color: #fff;
+      border: none;
+      border-radius: 50%;
+      width: 42px;
+      height: 42px;
+      font-size: 20px;
+      line-height: 1;
+      cursor: pointer;
+      box-shadow: 0 3px 8px rgba(0,0,0,0.3);
+      transition: transform 0.2s ease, background 0.2s ease;
+      z-index: 20;
+    }
+
     .hm-zoom-float:hover { transform: scale(1.08); background: rgba(31,41,55,1); }
-    .hm-zoom-modal { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.85); display: flex; align-items: center; justify-content: center; z-index: 9999; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
+
+    /* ==================== MODAL DE ZOOM ==================== */
+    .hm-zoom-modal {
+      position: fixed;
+      inset: 0;
+      background: rgba(0, 0, 0, 0.85);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 9999;
+      opacity: 0;
+      pointer-events: none;
+      transition: opacity 0.3s ease;
+    }
+
     .hm-zoom-modal.active { opacity: 1; pointer-events: auto; }
-    .hm-zoom-inner { position: relative; width: 95vw; height: 90vh; background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; }
-    .hm-zoom-content { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: #fff; overflow: auto; }
-    .hm-zoom-close { position: absolute; top: 12px; right: 12px; border: none; background: rgba(0, 0, 0, 0.75); color: #fff; border-radius: 50%; width: 42px; height: 42px; font-size: 24px; cursor: pointer; z-index: 10000; line-height: 1; }
-    .hm-zoom-close:hover { background: rgba(0, 0, 0, 0.9); }
-    .hm-zoom-modal svg { width: auto; height: auto; max-width: 100%; max-height: 100%; display: block; transition: transform 0.25s ease; }
-    .hm-zoom-inner { transform: scale(0.95); opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; }
+
+    .hm-zoom-inner {
+      position: relative;
+      width: 95vw;
+      height: 90vh;
+      background: var(--hm-background);
+      border-radius: 10px;
+      overflow: hidden;
+      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transform: scale(0.95);
+      opacity: 0;
+      transition: transform 0.3s ease, opacity 0.3s ease;
+    }
+
     .hm-zoom-modal.active .hm-zoom-inner { transform: scale(1); opacity: 1; }
-    .hm-zoom-hint { position: absolute; bottom: 10px; right: 20px; color: rgba(0,0,0,0.4); font-size: 14px; font-family: system-ui, sans-serif; background: rgba(255,255,255,0.7); padding: 4px 10px; border-radius: 6px; pointer-events: none; user-select: none; transition: opacity 1s ease 2s; opacity: 1; }
-    .hm-loader { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(2px); z-index: 1000; opacity: 0; transition: opacity 0.25s ease; pointer-events: none; }
+
+    .hm-zoom-content {
+      position: relative;
+      width: 100%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: var(--hm-background);
+      overflow: auto;
+    }
+
+    .hm-zoom-close {
+      position: absolute;
+      top: 12px;
+      right: 12px;
+      border: none;
+      background: rgba(0, 0, 0, 0.75);
+      color: #fff;
+      border-radius: 50%;
+      width: 42px;
+      height: 42px;
+      font-size: 24px;
+      cursor: pointer;
+      z-index: 10000;
+      line-height: 1;
+    }
+
+    .hm-zoom-close:hover { background: rgba(0, 0, 0, 0.9); }
+
+    .hm-zoom-modal svg {
+      width: auto;
+      height: auto;
+      max-width: 100%;
+      max-height: 100%;
+      display: block;
+      transition: transform 0.25s ease;
+    }
+
+    .hm-zoom-hint {
+      position: absolute;
+      bottom: 10px;
+      right: 20px;
+      color: rgba(0,0,0,0.4);
+      font-size: 14px;
+      background: rgba(255,255,255,0.7);
+      padding: 4px 10px;
+      border-radius: 6px;
+      pointer-events: none;
+      user-select: none;
+      transition: opacity 1s ease 2s;
+      opacity: 1;
+    }
+
+    /* ==================== LOADER ==================== */
+    .hm-loader {
+      position: absolute;
+      inset: 0;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      background: rgba(255, 255, 255, 0.7);
+      backdrop-filter: blur(2px);
+      z-index: 1000;
+      opacity: 0;
+      transition: opacity 0.25s ease;
+      pointer-events: none;
+    }
+
     .hm-loader.active { opacity: 1; pointer-events: all; }
-    .hm-loader::before { content: ''; width: 42px; height: 42px; border: 3px solid rgba(31,41,55,0.2); border-top-color: #3b82f6; border-radius: 50%; animation: hm-spin 1s linear infinite; }
-    .hm-loader span { margin-top: 10px; font-size: 14px; color: #1f2937; font-weight: 500; letter-spacing: 0.3px; opacity: 0.85; }
-    @keyframes hm-spin { to { transform: rotate(360deg); } }
 
+    .hm-loader::before {
+      content: '';
+      width: 42px;
+      height: 42px;
+      border: 3px solid rgba(31,41,55,0.2);
+      border-top-color: #3b82f6;
+      border-radius: 50%;
+      animation: hm-spin 1s linear infinite;
+    }
+
+    .hm-loader span {
+      margin-top: 10px;
+      font-size: 14px;
+      color: var(--hm-text-color);
+      font-weight: 500;
+      letter-spacing: 0.3px;
+      opacity: 0.85;
+    }
+
+    @keyframes hm-spin { to { transform: rotate(360deg); } }
   `;
 
   // ───────────────────────────────────────────────────────────────────────────
@@ -144,6 +469,8 @@
     constructor(){
       super();
       this.attachShadow({mode:'open'});
+      const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+      this._theme = this.getAttribute('theme') || (prefersDark ? 'dark' : 'light');
       this._view=this.getAttribute('view') || 'head_right';
       this._zones=ZONES;
       this._selected=new Set();
@@ -181,6 +508,8 @@
         thorax_front: this._imgRoot + 'torax_front.svg',
         thorax_back: this._imgRoot + 'torax_back.svg'
       };
+
+      this._applyTheme();
     }
 
     _upgradeProperty(prop) {
@@ -198,6 +527,22 @@
       this._imgRoot = this.getAttribute('img-root') || this._imgRoot;
       this._syncUrl = this.getAttribute('sync-url') || null;
 
+      if (!this.hasAttribute('theme')) {
+        const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+        this.setAttribute('theme', prefersDark ? 'dark' : 'light');
+      }
+
+      this._applyTheme();
+
+      // --- 3️⃣ Escuchar cambios del sistema (modo oscuro/claro del SO) ---
+      this._mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+      this._mediaListener = e => {
+        if (!this.hasAttribute('theme')) {
+          this.setAttribute('theme', e.matches ? 'dark' : 'light');
+        }
+      };
+      this._mediaQuery.addEventListener('change', this._mediaListener);
+
       this._renderShell();
       this._renderCanvas();
 
@@ -224,11 +569,23 @@
       }
     }
 
-    static get observedAttributes() { return ['view', 'img-root', 'read-only', 'sync-url']; }
+    disconnectedCallback() {
+      if (this._mediaQuery && this._mediaListener) {
+        this._mediaQuery.removeEventListener('change', this._mediaListener);
+      }
+    }    
+
+    static get observedAttributes() { return ['view', 'img-root', 'read-only', 'sync-url', 'theme']; }
 
     attributeChangedCallback (name, oldValue, newValue) {
       if (oldValue === newValue) return;
 
+      if (name === 'theme' && oldValue !== newValue) {
+        this._theme = newValue === 'dark' ? 'dark' : 'light';
+        this._applyTheme();
+        return;
+      }
+
       if (name === 'view') {
         this._view = newValue;
         if (this._root) this._renderCanvas();
@@ -340,6 +697,32 @@
       });
     }
 
+    _applyTheme() {
+      const base = this._imgRoot.endsWith('/') ? this._imgRoot : this._imgRoot + '/';
+      const basePath = base + (this._theme === 'dark' ? 'dark/' : 'light/');
+    
+      this._bg = {
+        head_right:  basePath + 'head_right.svg',
+        head_left:   basePath + 'head_left.svg',
+        neck_right:  basePath + 'neck_right.svg',
+        neck_left:   basePath + 'neck_left.svg',
+        thorax_front: basePath + 'torax_front.svg',
+        thorax_back:  basePath + 'torax_back.svg'
+      };
+
+      // Si tienes tus imágenes organizadas por vistas
+      /*Object.keys(this._bg).forEach(k => {
+        this._bg[k] = `${basePath}${k}.svg`;
+      });*/
+    
+      this._root?.classList.toggle('theme-dark',  this._theme === 'dark');
+      this._root?.classList.toggle('theme-light', this._theme === 'light');
+    
+      if (this._root) {
+        this._renderCanvas();
+      }
+    }
+
     get syncUrl() { return this._syncUrl; }
 
     set syncUrl(url) {
@@ -386,8 +769,12 @@
             <select id="picker">${opts}</select>
             <button id="menu" class="menu-btn" title="Más opciones">⋮</button>
             <div id="dropdown" class="hm-dropdown">
-              <button id="export">📤 Exportar zonas (.json)</button>
-              <button id="import">📥 Importar zonas (.json)</button>
+              <button data-action="export">📤 Exportar zonas (.json)</button>
+              <button data-action="import">📥 Importar zonas (.json)</button>
+              <hr style="margin:4px 0;">
+              <div style="padding: 4px 16px; font-weight:600;">Tema</div>
+              <button data-action="theme-light">🌞 Claro</button>
+              <button data-action="theme-dark">🌙 Oscuro</button>
               <input id="fileInput" type="file" accept=".json" style="display:none;">
             </div>
           </div>
@@ -444,8 +831,6 @@
       // Dropdown menú
       this._els.menu = this.shadowRoot.getElementById('menu');
       this._els.dropdown = this.shadowRoot.getElementById('dropdown');
-      this._els.exportBtn = this.shadowRoot.getElementById('export');
-      this._els.importBtn = this.shadowRoot.getElementById('import');
       this._els.fileInput = this.shadowRoot.getElementById('fileInput');
 
       // Mostrar/ocultar menú
@@ -461,25 +846,27 @@
         }
       });
 
-      // Exportar zonas seleccionadas
-      this._els.exportBtn.addEventListener('click', () => {
-        this._els.dropdown.classList.remove('active');
-        const data = JSON.stringify(this.selectedZones, null, 2);
-        const blob = new Blob([data], { type: 'application/json' });
-        const url = URL.createObjectURL(blob);
-        const a = document.createElement('a');
-        a.href = url;
-        a.download = 'zonas_seleccionadas.json';
-        a.click();
-        URL.revokeObjectURL(url);
-        this._showToast('✅ Zonas exportadas correctamente');
-      });
-
-      // Importar zonas desde archivo .json
-      this._els.importBtn.addEventListener('click', () => {
+      this._els.dropdown.addEventListener('click', e => {
+        const action = e.target.dataset.action;
+        if (!action) return;
+      
+        switch (action) {
+          case 'export':
+            this.exportSelectedZones();
+            break;
+          case 'import':
+            this.importZonesFromFile();
+            break;
+          case 'theme-light':
+            this.setAttribute('theme', 'light');
+            break;
+          case 'theme-dark':
+            this.setAttribute('theme', 'dark');
+            break;
+        }
+      
         this._els.dropdown.classList.remove('active');
-        this._els.fileInput.click();
-      });
+      });      
 
       this._els.fileInput.addEventListener('change', e => {
         const file = e.target.files[0];
@@ -661,12 +1048,13 @@
           t.textContent = z.code;
           t.setAttribute('x', (x + w / 2) * layout.vb[2]);
           t.setAttribute('y', (y + h / 2) * layout.vb[3]);
-          t.setAttribute('fill', '#0a0a0a');
+          t.classList.add('label');
           t.setAttribute('font-size', '32');
           t.setAttribute('font-weight', '700');
           t.setAttribute('text-anchor', 'middle');
           t.setAttribute('dominant-baseline', 'middle');
           t.setAttribute('pointer-events', 'none');
+          t.setAttribute('class','label');
           gZones.appendChild(t);
         });
 
@@ -679,7 +1067,7 @@
         t.textContent = v.label;
         t.setAttribute('x', layout.vb[2] / 2);
         t.setAttribute('y', 80);
-        t.setAttribute('class', 'hm-all-label');
+        t.classList.add('hm-all-label');
         g.appendChild(t);
 
 
@@ -726,7 +1114,6 @@
           });
         }
 
-
         g.appendChild(rect);
 
         const t=document.createElementNS('http://www.w3.org/2000/svg','text');
@@ -864,19 +1251,9 @@
       // Ajustar estilos dentro del SVG
       const style = document.createElementNS('http://www.w3.org/2000/svg', 'style');
       style.textContent = `
-        .zone { fill: rgba(31,41,55,0); cursor: default; transition: fill 120ms ease; }
-        .zone.selected { fill: rgba(31,41,55,0.36); }
-        .label { fill: #0a0a0a; font-size: 42px; font-weight: 800;
-                text-anchor: middle; dominant-baseline: middle;
-                pointer-events: none; user-select: none; }
-        .hm-all-label {
-          font-family: system-ui, sans-serif;
-          font-size: 48px;
-          font-weight: 800;
-          fill: #111827;
-          text-anchor: middle;
-          dominant-baseline: middle;
-        }
+        .zone { cursor: default; transition: fill 120ms ease; }
+        .label { font-size: 42px; font-weight: 800; text-anchor: middle; dominant-baseline: middle; pointer-events: none; user-select: none; }
+        .hm-all-label { font-family: system-ui, sans-serif; font-size: 48px; font-weight: 800; text-anchor: middle; dominant-baseline: middle; }
       `;
       clone.insertBefore(style, clone.firstChild);
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "humanmap-vas",
-  "version": "1.0.27",
+  "version": "1.0.28",
   "description": "**HumanMap VAS** es una librería web que permite graficar el cuerpo humano con vistas anatómicas interactivas para identificar zonas según el sistema VAS. Desarrollada como *Web Component standalone*, puede integrarse fácilmente en proyectos **HTML**, **Django**, o **Vue.js**.",
   "main": "humanmap-vas-standalone.js",
   "files": [

package/src/img/dark/head_left.svg

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Capa_1" data-name="Capa 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 595.28 841.89">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #7c7c7c;
+      }
+
+      .cls-1, .cls-2 {
+        stroke-width: 0px;
+      }
+
+      .cls-2 {
+        fill: #828282;
+      }
+    </style>
+  </defs>
+  <path class="cls-1" d="m498.88,734.49c-25.62-42.22-37.2-92.98-31.73-142.12,0,0,.7-5.68.7-5.68l1.09-5.62c.27-1.75.78-3.92,1.25-5.59,0,0,1.5-5.54,1.5-5.54.75-2.63,1.92-5.52,2.77-8.15.67-1.64,2.56-6.2,3.31-7.94,0,0,2.52-5.15,2.52-5.15,5.09-10.2,11.29-19.88,17.25-29.56,10.03-16.06,19.25-32.57,26.57-50.01,29.7-69.45,48.07-150.02,14.87-221.57-37.95-81.21-126.25-134.06-214.82-137.49-71.03-2.81-144.36,24.49-192.23,77.81-1.92,2.09-5.52,6.36-7.28,8.57-7.14,8.68-12.45,18.54-17.36,28.66-15.91,34.28-30.72,81.44-30.69,119.33.06,3.7.44,7.37,1.19,10.88,1.31,6.95,6.1,12.95,9.28,20.22,3.34,7.26,4.08,15.63,2.75,23.49-1.34,7.8-4.84,14.87-8.42,21.76-3.61,6.76-7.47,13.31-11.35,19.84-6.79,11.26-16.67,27.96-23.89,38.82-3.85,6.05-8.17,12.46-7.69,19.78.51,4.92,2,10.59,6.93,12.7,8.6,3.71,19.82,1.37,27.34,8.15,3.13,2.81,5.06,6.76,5.71,10.86,1.32,7.95-4.94,14.9-6.38,22.07-2.03,11.67,10.83,18.04,20.29,20.91,0,0,3.28,1.03,3.28,1.03l-3.05,1.57c-2.48,1.28-4.89,2.63-6.8,4.4-2.84,2.56-4.32,6.51-3.61,10.25,1,3.97,4.23,6.53,7.07,9.53,9.06,8.61,13.78,19.65,9.37,31.92-1.75,5.38-3.7,10.58-3.98,16.22-.2,5.48.86,11.04,3.02,16.17,6.39,15.16,20.16,28.43,36.76,31.16,22.06,2.98,36.4-17.72,65.88-11.9,16.97,3.16,31.41,13.99,42.82,26.46-15.11-16.39-36.76-29.52-59.78-26.11-11.37,1.44-21.32,7.34-32.05,11.03-11.17,4.07-23.23,2.34-33.21-4.06-14.48-9.07-25.92-25.25-25.6-42.84.2-5.8,2.19-11.39,3.9-16.8,2.82-8.18,1.51-16.2-3.53-23.17-3.6-5.36-9.43-8.85-12.53-14.74-2.37-5.09-.49-11.46,3.56-15.15,2.26-2.11,4.86-3.55,7.4-4.89l.23,2.61c-3.69-1.14-7.34-2.53-10.79-4.43-7.1-3.72-13.46-11.13-11.67-19.73,1.61-8.66,9.27-15.87,5.15-24.77-4.92-12.21-20.27-8.1-30.29-12.64-6.06-2.6-8.5-9.46-9.01-15.58-.64-8.23,3.99-15.47,8.12-22.01,2.05-3.21,4.1-6.38,6.09-9.59,9.1-15.15,20.29-33.49,28.6-49.01,7.09-13,11.88-27.5,5.38-41.57-1.48-3.32-3.37-6.51-5.22-9.91-6.17-10.3-6.19-22.79-5.49-34.39,3.38-38.1,14.65-75.25,30.55-109.95,5.71-12.15,12.67-23.9,21.55-34.08,48.7-57.26,125.39-86.91,199.84-83.8,90.46,3.58,180.01,57.56,218.52,140.61,33.37,72.59,14.44,154.37-16.11,224.49-7.47,17.51-16.92,34.18-27.08,50.2-6.02,9.64-12.27,19.11-17.44,29.22,0,0-2.54,5.05-2.54,5.05-.76,1.88-2.66,5.93-3.34,7.78-.91,2.53-2,5.43-2.81,7.98,0,0-1.53,5.43-1.53,5.43-.94,3.32-1.72,7.67-2.42,11.03,0,0-.74,5.61-.74,5.61-5.93,48.88,5.15,99.48,30.02,141.91h0Z"/>
+  <path class="cls-1" d="m286.36,445.9c-7.25-14.31-9.02-31.29-4.37-46.71,5.55-20.62,20.25-38.87,43.73-35.1,16.28,2.98,31.07,14.96,36.71,30.62,5.32,15.65,2.82,32.28.85,48.28-1.88,12-5.15,23.95-10.9,34.71-3.5,6.17-9.24,14.08-13.15,20.03-3.37,4.93-6.72,9.91-10.42,14.64-1.91,2.4-4.02,4.94-6.63,6.75-6.61,4.08-14.53,7.07-22.38,5.99-17.13-3.38-17.68-27.02-16.34-40.72.7-7.93,2.31-15.72,3.94-23.49-2.14,15.39-4.62,31.68-.42,46.82,2.33,8.17,8.11,15.5,17.37,14.25,2.79-.33,5.51-1.04,8.14-2.09,3.4-1.41,6.88-2.96,9.48-5.62,5.12-5.58,9.3-12.6,13.62-18.95,4.86-7.79,11.61-16.64,15.11-25.05,5.45-12.56,7.85-26.08,9.05-39.67.8-7.72,1.38-15.52.53-23.2-1.32-15.67-10.72-28.47-24.64-35.51-30.44-14.85-49.63,11.71-54.03,39.4-1.68,11.69.2,23.71,4.76,34.64h0Z"/>
+  <path class="cls-1" d="m302.02,440.62c-3.29.99-5.58,3.41-3.35,6.66,1.74,2.76,3.57,5.82,4.06,9.2,1.06,6.85-1.79,13.87-5.8,19.2-.4.6-.57,1.11-.53,1.21.4,1.11,2.11,1.96,3.45,2.08,2.78.31,3.43-1.89,4.67-4.34,1.8-4.16,5.28-8.35,9.97-9.52,2.33-.67,5.25-.11,7.18-.74,2.47-.68,4.88-2.4,6.7-4.58,3.7-4.42,5.56-10.44,4.3-16.19-2.01-8.87-8.48-16.86-16.86-20.57-2.96-1.46-5.82-3.21-8.44-5.18-2.55-2.01-5.48-3.61-7.69-6.02,2.57,2.02,5.67,3.16,8.45,4.85,2.82,1.59,5.66,2.99,8.67,4.09,3.09,1.09,6.33,2.72,8.89,4.87,11.48,9.17,16.58,25.05,6.43,37.27-3.44,4.34-8.92,7.27-14.58,6.75-4.36-.04-7,3.41-8.81,7.07-1.05,2.18-3.09,5.81-6.17,6.39-4.67,1.38-12.24-2.78-9.64-8.36,1.04-1.92,2.64-3.44,3.64-5.12,2.39-3.83,4.03-8.37,3.75-12.9-.09-1.5-.4-3-.94-4.45-.74-2.28-2.36-4.43-2.61-6.96-.21-2.91,2.91-4.44,5.27-4.73h0Z"/>
+  <path class="cls-1" d="m313.51,437.94c-6.12-5.61-10.75-12.92-13.51-20.74-1.47-3.88-2.74-8-3-12.38-.99-14.4,10.88-24.58,23.98-27.63,6.61-1.63,14.52.41,19.22,5.57,4.42,4.83,7.55,10.3,10.66,15.98,8.55,16.48,6,32.8-.04,49.56-4.27,11.72-10.92,22.64-19.31,31.77,4.73-6.76,8.85-13.88,12.05-21.37,4.63-11.09,7.94-23.1,8.43-35.11.1-7.88-1.86-15.65-5.48-22.64-1.82-3.49-4.14-6.97-6.32-10.24-2.11-3.1-4.44-6.08-7.77-7.72-9.37-4.72-24.11,2.41-29.21,10.89-4.24,6.78-3.26,15.09-.89,22.52,2.12,7.93,5.92,15.21,11.19,21.52h0Z"/>
+  <path class="cls-2" d="m298.64,402.89c2.76,1.31,5.24,2.98,7.96,4.26,4.55,2.01,9.35,3.16,14.25,4.18-8.27,1.51-16.9-2-22.21-8.43h0Z"/>
+</svg>