ajustes de visualización

Author: hspencer

data/constel-db.json

@@ -1,6 +1,6 @@
 {
   "version": 1,
-  "updatedAt": "2026-03-24T08:24:24.880Z",
+  "updatedAt": "2026-03-24T09:39:04.032Z",
   "sessionId": "",
   "sources": {
     "src_mn1lgx417b21": {
@@ -7103,6 +7103,28 @@
         "con_mn1oeclkynn7"
       ],
       "createdAt": "2026-03-23T05:32:13.285Z"
+    },
+    "exc_mn4ewhxn2fhf": {
+      "id": "exc_mn4ewhxn2fhf",
+      "sourceId": "src_mn1lgx417b21",
+      "text": "aquí\n  hoy\n  universo",
+      "start": 31528,
+      "end": 31549,
+      "conceptIds": [
+        "con_new_actopoet1"
+      ],
+      "createdAt": "2026-03-24T09:28:19.403Z"
+    },
+    "exc_mn4exavb57x2": {
+      "id": "exc_mn4exavb57x2",
+      "sourceId": "src_mn1lgx417b21",
+      "text": "la poesía     el acto poético      matrimonio de la mar con el dogo      la poesía semejante a aquellos franciscanos joaquinitas que partieron a bautizar a todos los hombres para que el mundo y su historia tuvieran acabamiento para apresurar así el fin del mundo       la poesía como acto parte a celebrar las bodas del lugar y de la fórmula",
+      "start": 33018,
+      "end": 33359,
+      "conceptIds": [
+        "con_new_actopoet1"
+      ],
+      "createdAt": "2026-03-24T09:28:56.903Z"
     }
   },
   "concepts": {
@@ -7355,7 +7377,7 @@
     "con_intro_proeza01": {
       "id": "con_intro_proeza01",
       "label": "la proeza",
-      "themeId": "thm_mn2eh17kwbm8",
+      "themeId": "thm_mn2ekumrwz9z",
       "createdAt": "2026-03-23T12:00:00.000Z"
     },
     "con_intro_vigilia1": {
@@ -7445,7 +7467,7 @@
     "con_new_gratuidad": {
       "id": "con_new_gratuidad",
       "label": "gratuidad",
-      "themeId": null,
+      "themeId": "thm_mn2eh17kwbm8",
       "createdAt": "2026-03-23T12:00:00.000Z"
     },
     "con_mn2e40yygss4": {
@@ -7764,6 +7786,6 @@
     }
   },
   "ui": {
-    "selectedConceptId": null
+    "selectedConceptId": "con_new_gratuidad"
   }
 }

public/css/layout.css

@@ -174,10 +174,18 @@ body {
   transition: opacity 0.15s;
 }
 
+[data-theme="dark"] .marks-toggle {
+  color: var(--ink);
+}
+
 .marks-toggle:hover {
   opacity: 1;
 }
 
+.marks-toggle .eye-glint {
+  fill: var(--bg);
+}
+
 /* ── SVG icon inside buttons ─────────────────────────────────────────── */
 .btn-svg-icon {
   width: 14px;

public/icons/icons_eye-open.svg

@@ -54,7 +54,12 @@ <h1 class="logo">con<span class="section-sign">§</span>tel <span class="version
     <span class="tab-source-title" id="tabSourceTitle">
       <span id="readerTitle"></span>
       <button class="btn-icon marks-toggle" id="marksToggle" title="Mostrar/ocultar marcas">
-        <img src="icons/icons_eye-open.svg" id="marksToggleIcon" alt="marcas" width="18" height="18">
+        <svg id="marksToggleIcon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28" width="18" height="18" fill="currentColor">
+          <path d="M17.7,13.5c0,2-1.6,3.7-3.7,3.7s-3.7-1.6-3.7-3.7,1.6-3.7,3.7-3.7,3.7,1.6,3.7,3.7"/>
+          <path d="M14,10.9c3.9,0,7.6,1.2,10.7,3.2-2.2-3.6-6.1-6.1-10.7-6.1s-8.5,2.4-10.7,6.1c3.1-2,6.7-3.2,10.7-3.2"/>
+          <path d="M21,17.8c-2.2.8-4.5,1.3-7,1.3s-4.8-.5-7-1.3c2,1.4,4.4,2.3,7,2.3s5-.8,7-2.3"/>
+          <path class="eye-glint" d="M16.7,12.3c0,.8-.7,1.5-1.5,1.5s-1.5-.7-1.5-1.5.7-1.5,1.5-1.5,1.5.7,1.5,1.5"/>
+        </svg>
       </button>
     </span>
   </nav>

public/index.html

@@ -509,14 +509,35 @@ function showToast(message) {
   toast.addEventListener("animationend", () => toast.remove());
 }
 
+const SVG_NS = "http://www.w3.org/2000/svg";
+const EYE_OPEN_PATHS = [
+  { d: "M17.7,13.5c0,2-1.6,3.7-3.7,3.7s-3.7-1.6-3.7-3.7,1.6-3.7,3.7-3.7,3.7,1.6,3.7,3.7" },
+  { d: "M14,10.9c3.9,0,7.6,1.2,10.7,3.2-2.2-3.6-6.1-6.1-10.7-6.1s-8.5,2.4-10.7,6.1c3.1-2,6.7-3.2,10.7-3.2" },
+  { d: "M21,17.8c-2.2.8-4.5,1.3-7,1.3s-4.8-.5-7-1.3c2,1.4,4.4,2.3,7,2.3s5-.8,7-2.3" },
+  { d: "M16.7,12.3c0,.8-.7,1.5-1.5,1.5s-1.5-.7-1.5-1.5.7-1.5,1.5-1.5,1.5.7,1.5,1.5", cls: "eye-glint" },
+];
+const EYE_CLOSE_PATHS = [
+  { d: "M14,17c3.9,0,7.6-1.2,10.7-3.2-2.2,3.6-6.1,6.1-10.7,6.1s-8.5-2.4-10.7-6.1c3.1,2,6.7,3.2,10.7,3.2" },
+];
+
+function setSvgPaths(svg, paths) {
+  while (svg.firstChild) svg.removeChild(svg.firstChild);
+  for (const p of paths) {
+    const el = document.createElementNS(SVG_NS, "path");
+    el.setAttribute("d", p.d);
+    if (p.cls) el.setAttribute("class", p.cls);
+    svg.appendChild(el);
+  }
+}
+
 function initMarksToggle() {
   const btn = document.getElementById("marksToggle");
   const icon = document.getElementById("marksToggleIcon");
   if (!btn || !icon) return;
 
   btn.addEventListener("click", () => {
     marksVisible = !marksVisible;
-    icon.src = marksVisible ? "icons/icons_eye-open.svg" : "icons/icons_eye-close.svg";
+    setSvgPaths(icon, marksVisible ? EYE_OPEN_PATHS : EYE_CLOSE_PATHS);
     const readerContent = document.getElementById("readerTextContent");
     if (readerContent) {
       readerContent.classList.toggle("marks-hidden", !marksVisible);