Edición 03 / Biblioteca editorial
Un artículo que se lee con calma. Un informe que se puede comprobar. Un prototipo que invita a probar.
98 recetas · 9 capítulos · 11 papeles
Cada ejemplo incluye HTML completo, dependencias, criterio de uso y límites. Las cifras y publicaciones de demostración están identificadas como ejemplos.
Capítulo 02 / 09
Portada, archivo, autoría y siguientes lecturas.
Componente / Archivo de publicaciones
Artículos de ejemplo sobre cómo investigar, explicar y construir.
3 publicaciones disponibles.
Diseño ·
El recorrido desde una hipótesis hasta una propuesta que se puede probar.
Equipo editorial · Estudio de ejemplo
Investigación ·
Separar el dato observado, el supuesto y la siguiente pregunta.
Equipo editorial · Ensayo de ejemplo
Producto ·
Una interfaz local con estados explícitos y varios anchos de lectura.
Equipo editorial · Guía de ejemplo
No encontramos publicaciones. Borra la búsqueda o elige otro tema.
Use and limits: Filter a short local publication archive by text/topic with editorial.js. Matching ignores accents and supports reset. It is not CMS search, server pagination or an index of thousands of records. Without JavaScript all entries remain visible. Replace example destinations with real links and do not invent dates or reading times.
Dependencias: packages/core/styles/fonts.css, packages/core/styles/artifact.css, packages/core/components/interface.js, packages/core/components/audio.js, packages/core/components/controls.js, packages/core/components/editorial-pieces.js, packages/core/components/reader.js, packages/core/components/editorial.js
<section class="pieza ancho" id="archivo-ejemplo" data-archivo>
<h3>El cuaderno abierto</h3><p>Artículos de ejemplo sobre cómo investigar, explicar y construir.</p>
<form class="editorial-controles" role="search" aria-label="Buscar publicaciones locales">
<label>Buscar<input type="search" name="buscar" placeholder="Título o descripción"></label>
<label>Tema<select name="tema"><option value="">Todos los temas</option><option>Diseño</option><option>Investigación</option><option>Producto</option></select></label>
<button type="reset">Limpiar filtros</button>
</form><p data-archivo-estado role="status">3 publicaciones disponibles.</p>
<div class="publicaciones" data-publicaciones>
<article data-publicacion data-publicacion-tema="Diseño"><p class="ceja">Diseño · <time datetime="2026-09-14">14 sep 2026</time></p><h4><a href="examples/generated/report.html#resumen">Una revisión antes de confirmar</a></h4><p data-extracto>El recorrido desde una hipótesis hasta una propuesta que se puede probar.</p><p class="procedencia" data-meta>Equipo editorial · Estudio de ejemplo</p></article>
<article data-publicacion data-publicacion-tema="Investigación"><p class="ceja">Investigación · <time datetime="2026-09-12">12 sep 2026</time></p><h4><a href="examples/generated/report.html#evidencia">Lo que una cifra todavía no demuestra</a></h4><p data-extracto>Separar el dato observado, el supuesto y la siguiente pregunta.</p><p class="procedencia" data-meta>Equipo editorial · Ensayo de ejemplo</p></article>
<article data-publicacion data-publicacion-tema="Producto"><p class="ceja">Producto · <time datetime="2026-09-10">10 sep 2026</time></p><h4><a href="examples/generated/report.html#prototipo">Probar antes de publicar</a></h4><p data-extracto>Una interfaz local con estados explícitos y varios anchos de lectura.</p><p class="procedencia" data-meta>Equipo editorial · Guía de ejemplo</p></article>
</div><p data-archivo-vacio hidden>No encontramos publicaciones. Borra la búsqueda o elige otro tema.</p>
</section>Componente / Ficha de autor
Use and limits: Close an article with author identity and relevant context. Static HTML does not verify identity or contributions. Decorative initials repeat the visible name; an optional photograph needs an embedded data URI and appropriate alternative text.
Dependencias: packages/core/styles/fonts.css, packages/core/styles/artifact.css, packages/core/components/interface.js, packages/core/components/audio.js, packages/core/components/controls.js, packages/core/components/editorial-pieces.js, packages/core/components/reader.js
<aside class="pieza autor-editorial" id="autor-ejemplo" aria-labelledby="autor-nombre">
<span class="autor-inicial" aria-hidden="true">t</span><div><p class="ceja">Acerca de esta edición</p><h3 id="autor-nombre">Equipo editorial</h3><p>Investigación, producto y documentación. Esta identidad ilustra la ficha; reemplázala por la autoría real del artículo.</p><a href="examples/generated/report.html">Leer el estudio completo →</a></div>
</aside>Componente / Lecturas relacionadas
Use and limits: Suggest deliberately selected next readings with specific reasons and real destinations. No automatic recommendation or personalization. Do not hide primary navigation here.
Dependencias: packages/core/styles/fonts.css, packages/core/styles/artifact.css, packages/core/components/interface.js, packages/core/components/audio.js, packages/core/components/controls.js, packages/core/components/editorial-pieces.js, packages/core/components/reader.js
<nav class="pieza" id="relacionados-ejemplo" aria-labelledby="relacionados-titulo"><h3 id="relacionados-titulo">Seguir el hilo</h3><ol class="lecturas-relacionadas"><li><span class="ceja">01 · Evidencia</span><a href="examples/generated/report.html#evidencia">Qué sabemos y qué falta medir</a><p>Los supuestos que sostienen la propuesta.</p></li><li><span class="ceja">02 · Práctica</span><a href="examples/generated/report.html#prototipo">Recorrer el prototipo</a><p>Explorar los estados de una tarea.</p></li></ol></nav>Componente / Familia de cards
Lectura / 01
Una tarjeta editorial con título, extracto y destino concreto.
Ensayo de ejemplo · Investigación
Indicador / 02
12 de 20
60 % · cifras ficticias para mostrar cobertura, no progreso en tiempo real.
Proyecto / 03
Propuesta por validar
Use and limits: Group distinct entities such as articles, metrics or projects in a responsive grid. Link through an explicit title/action. Do not use one card per paragraph or conceal a comparison better served by a table. Values/states need sources; avoid overlapping clicks, fixed heights and truncation. Prototype embedding belongs to the prototype recipe and its trusted-local-content restrictions.
Dependencias: packages/core/styles/fonts.css, packages/core/styles/artifact.css, packages/core/components/interface.js, packages/core/components/audio.js, packages/core/components/controls.js, packages/core/components/editorial-pieces.js, packages/core/components/reader.js
<section class="pieza ancho" id="cards-ejemplo"><h3>Tarjetas con un propósito</h3><div class="cards-editoriales">
<article class="card-editorial"><p class="ceja">Lectura / 01</p><h4><a href="examples/generated/report.html#evidencia">De la hipótesis a la evidencia</a></h4><p>Una tarjeta editorial con título, extracto y destino concreto.</p><p class="procedencia">Ensayo de ejemplo · Investigación</p></article>
<article class="card-editorial card-dato"><p class="ceja">Indicador / 02</p><h4>Sesiones revisadas</h4><p class="card-valor">12 <span>de 20</span></p><meter min="0" max="20" value="12" aria-label="12 de 20 sesiones revisadas">60 %</meter><p class="procedencia">60 % · cifras ficticias para mostrar cobertura, no progreso en tiempo real.</p></article>
<article class="card-editorial"><p class="ceja">Proyecto / 03</p><h4>Confirmar con contexto</h4><p><span class="pildora p-medio">Propuesta por validar</span></p><dl><dt>Siguiente paso</dt><dd>Observar una tarea completa.</dd></dl><a href="examples/generated/report.html#prototipo">Probar el prototipo →</a></article>
</div></section>Componente / Cards delineadas
Lecturas de ejemplo para volver sobre una idea.
La pregunta, la evidencia disponible y la decisión que sigue.
ENSAYO · 8 min · ejemploQué podemos afirmar con los datos y qué necesita otra prueba.
INVESTIGACIÓN · 6 min · ejemploUna propuesta local con estados, dispositivo y contexto.
PROTOTIPO · 4 min · ejemploUna calculadora pequeña para discutir capacidad sin inventar certezas.
REPORTE · 5 min · ejemploUna conclusión que conserve la pregunta y sus límites.
CUADERNO · 3 min · ejemploCómo cerrar un informe dejando una prueba concreta por hacer.
MÉTODO · 5 min · ejemploEl hover tiene una señal breve sólo si activas Sonidos en Apariencia. Sin sonido también se ve la selección.
Use and limits: Use a publication/document grid with shared outlines, subtle surface and short hover shadow. Each card is one real keyboard-accessible link; do not nest buttons inside it. Preserve full titles/excerpts without fixed-height clipping. Optional data-audio-hover requires actual pointer motion and unlocked sound, never focus, loading or scrolling. The original embedded hover sample respects master volume and rate limiting. Mobile requires no hover or sound to understand the link.
Dependencias: packages/core/styles/fonts.css, packages/core/styles/artifact.css, packages/core/components/interface.js, packages/core/components/audio.js, packages/core/components/controls.js, packages/core/components/editorial-pieces.js, packages/core/components/reader.js
<section class="ancho" id="cards-trazadas-ejemplo">
<h3>Escrito recientemente</h3><p>Lecturas de ejemplo para volver sobre una idea.</p>
<div class="cards-trazadas cards-abiertas marco-difuso">
<a href="examples/generated/report.html#resumen" data-audio-hover><h4>Una revisión antes de confirmar</h4><p>La pregunta, la evidencia disponible y la decisión que sigue.</p><span class="procedencia">ENSAYO · 8 min · ejemplo</span></a>
<a href="examples/generated/report.html#evidencia" data-audio-hover><h4>La escala también cuenta una historia</h4><p>Qué podemos afirmar con los datos y qué necesita otra prueba.</p><span class="procedencia">INVESTIGACIÓN · 6 min · ejemplo</span></a>
<a href="examples/generated/report.html#prototipo" data-audio-hover><h4>Del documento a una experiencia que se puede probar</h4><p>Una propuesta local con estados, dispositivo y contexto.</p><span class="procedencia">PROTOTIPO · 4 min · ejemplo</span></a>
<a href="examples/generated/report.html#siguientes" data-audio-hover><h4>Hacer visibles los supuestos</h4><p>Una calculadora pequeña para discutir capacidad sin inventar certezas.</p><span class="procedencia">REPORTE · 5 min · ejemplo</span></a>
<a href="examples/generated/report.html#resumen" data-audio-hover><h4>Lo que una buena nota deja claro</h4><p>Una conclusión que conserve la pregunta y sus límites.</p><span class="procedencia">CUADERNO · 3 min · ejemplo</span></a>
<a href="examples/generated/report.html#siguientes" data-audio-hover><h4>La siguiente pregunta también importa</h4><p>Cómo cerrar un informe dejando una prueba concreta por hacer.</p><span class="procedencia">MÉTODO · 5 min · ejemplo</span></a>
</div>
<p class="procedencia">El hover tiene una señal breve sólo si activas Sonidos en Apariencia. Sin sonido también se ve la selección.</p>
</section>Componente / Estantería editorial
Cuaderno de campo · Edición ilustrativa · 2026
Una colección de preguntas para registrar el contexto de una cifra antes de compararla. Lo guardamos para preparar la siguiente investigación.
Ensayo · Edición ilustrativa · 2026
Sobre decisiones que hacen una interfaz más clara. Nos interesa porque una pantalla puede crecer sin que la tarea se vuelva más fácil.
Entrevistas · Edición ilustrativa · 2026
Una referencia para separar lo que sabemos de lo que suponemos. Cada lectura conserva la razón para volver a ella.
Use and limits: Curate books, documents or resources with title, status and a reason to keep them. Example covers are original CSS illustrations with fictional titles. Authorized replacements need embedded data images and alternative text. No fabricated commercial links or remote cover downloads. The visible title repeats any cover information. Mobile stacks each row with a 120 px cover; no automatic animation.
Dependencias: packages/core/styles/fonts.css, packages/core/styles/artifact.css, packages/core/components/interface.js, packages/core/components/audio.js, packages/core/components/controls.js, packages/core/components/editorial-pieces.js, packages/core/components/reader.js
<section class="ancho marco-difuso" id="estanteria-ejemplo" aria-label="Lecturas guardadas">
<ul class="estanteria">
<li><div class="estante-portada" aria-hidden="true"><small>CUADERNO / 01</small><span>Observar antes de medir</span><small>ESTUDIO EDITORIAL</small></div><div><span class="estante-estado">Por leer</span><h3>Observar antes de medir</h3><p class="procedencia">Cuaderno de campo · Edición ilustrativa · 2026</p><p>Una colección de preguntas para registrar el contexto de una cifra antes de compararla. Lo guardamos para preparar la siguiente investigación.</p><p><a href="examples/generated/report.html#evidencia">Ver el ejemplo de evidencia →</a></p></div></li>
<li><div class="estante-portada" aria-hidden="true"><small>CUADERNO / 02</small><span>El oficio de quitar</span><small>NOTAS DE PRODUCTO</small></div><div><span class="estante-estado">En lectura</span><h3>El oficio de quitar</h3><p class="procedencia">Ensayo · Edición ilustrativa · 2026</p><p>Sobre decisiones que hacen una interfaz más clara. Nos interesa porque una pantalla puede crecer sin que la tarea se vuelva más fácil.</p><p><a href="examples/generated/report.html#prototipo">Recorrer la propuesta →</a></p></div></li>
<li><div class="estante-portada" aria-hidden="true"><small>CUADERNO / 03</small><span>Volver a preguntar</span><small>CONVERSACIONES</small></div><div><span class="estante-estado">Consultado</span><h3>Volver a preguntar</h3><p class="procedencia">Entrevistas · Edición ilustrativa · 2026</p><p>Una referencia para separar lo que sabemos de lo que suponemos. Cada lectura conserva la razón para volver a ella.</p><p><a href="examples/generated/report.html#siguientes">Leer las preguntas pendientes →</a></p></div></li>
</ul>
</section>Componente / Invitación editorial
Una lectura, una pregunta o una idea que merezca entrar en la siguiente versión.
Use and limits: End a reading with a concrete invitation and a static halftone treatment. invitation.js copies up to 1000 nonempty characters plus document title and block reference; clipboard denial selects text and explains manual copy. It does not submit, store or synchronize messages. init/get/destroy supports mounting. Without JavaScript it is a writing surface, not a working send form. The decorative pattern is not a chart or paper-grain setting.
Dependencias: packages/core/styles/fonts.css, packages/core/styles/artifact.css, packages/core/components/interface.js, packages/core/components/audio.js, packages/core/components/controls.js, packages/core/components/editorial-pieces.js, packages/core/components/reader.js, packages/core/components/invitation.js
<section class="ancho marco-difuso" id="invitacion-ejemplo">
<div class="invitacion" data-invitacion id="invitacion-idea">
<div><h3>¿Qué sumarías?</h3><p>Una lectura, una pregunta o una idea que merezca entrar en la siguiente versión.</p></div>
<form aria-label="Preparar una recomendación"><label for="invitacion-texto">Tu idea</label><textarea id="invitacion-texto" name="idea" maxlength="1000" required placeholder="Un título, un enlace o una nota…" aria-describedby="invitacion-estado"></textarea><button type="button" data-invitacion-copiar>Copiar mi idea ↗</button><p role="status" id="invitacion-estado">Borrador local; copia antes de cerrar.</p></form>
</div>
</section>Componente / Footer editorial
Uso: cierra con la identidad y los enlaces de quien escribe. Las dos columnas se apilan en móvil; las descripciones de enlaces se difuminan solo con puntero fino y se revelan también con foco de teclado. La atribución a Margen queda separada.
El generador ofrece la misma pieza mediante footer: {author, note, links: [{label, href, detail}], platform}. No añadas un segundo pie manual cuando uses esa opción. Se aceptan HTTPS sin credenciales y correo mailto:. No se inventan redes, licencias, estadísticas ni autoría: los enlaces de esta muestra usan example.com como marcadores para sustituir. El pie sigue al contenido y conserva la identidad del documento.
Es opcional: omite footer para no añadir ningún pie. platform vale false por defecto. En una presentación, compón una diapositiva de cierre si la necesitas; el generador no inserta un pie de artículo.
Dependencias: packages/core/styles/fonts.css, packages/core/styles/artifact.css, packages/core/components/interface.js, packages/core/components/audio.js, packages/core/components/controls.js, packages/core/components/editorial-pieces.js, packages/core/components/reader.js
<footer class="ancho pie pie-documento" id="pie-editorial-ejemplo">
<div class="pie-autoria">
<p class="pie-autor">Tu nombre o el de tu equipo</p>
<p class="pie-nota">Ejemplo de cierre editorial. El nombre, los enlaces y esta nota pertenecen a quien escribe el documento.</p>
<nav class="pie-enlaces" aria-label="Enlaces del cuaderno de ejemplo">
<span class="pie-enlace"><a href="https://example.com" rel="noopener noreferrer">Tu sitio</a><span class="pie-detalle">Enlace de ejemplo · personalízalo</span></span>
<span class="pie-enlace"><a href="mailto:autor@example.com" rel="noopener noreferrer">Contacto</a><span class="pie-detalle">Dirección de ejemplo · personalízala</span></span>
</nav>
</div>
</footer>Componente / Actividad con contexto editorial
Actividad de ejemplo / ocho semanas
Cada cuadrado representa una semana. La intensidad indica cuántas acciones se registraron; no mide calidad ni productividad.
Ver la referencia editorial ↗Los conteos completos están en la tabla.
| Semana | Acciones |
|---|---|
| 1–7 junio | 0 |
| 8–14 junio | 2 |
| 15–21 junio | 3 |
| 22–28 junio | 5 |
| 29 junio–5 julio | 1 |
| 6–12 julio | 7 |
| 13–19 julio | 4 |
| 20–26 julio | 8 |
Use and limits: Introduce recent activity with contextual counts derived from the source table. 1–52 periods, integer counts 0–1000000. Equal cell size represents equal periods; intensity represents count, not area or productivity. Zero has its own legend sample; positive bins derive from the observed maximum. Hover, focus and click expose detail. data-actividad-tabla points to a sibling table outside the frame: copy both blocks and update IDs together. The table prints in full; missing targets show an error. No GitHub feed.
Dependencias: packages/core/styles/fonts.css, packages/core/styles/artifact.css, packages/core/components/interface.js, packages/core/components/audio.js, packages/core/components/controls.js, packages/core/components/editorial-pieces.js, packages/core/components/reader.js
<section class="pieza amplio actividad-editorial" id="actividad-editorial-ejemplo" data-actividad data-actividad-tabla="actividad-editorial-datos">
<div><p class="ceja">Actividad de ejemplo / ocho semanas</p><h3>Pequeños avances,<br>una historia visible.</h3><p>Cada cuadrado representa una semana. La intensidad indica cuántas acciones se registraron; no mide calidad ni productividad.</p><a class="enlace-icono" href="https://www.cmrg.me/now">Ver la referencia editorial ↗</a></div>
<div><div class="actividad-mosaico" data-actividad-mapa role="group" aria-label="Acciones por semana"></div><div class="actividad-escala" data-actividad-escala aria-label="Escala de acciones"></div><p data-actividad-estado role="status">Los conteos completos están en la tabla.</p></div>
</section>
<details class="actividad-datos" id="actividad-editorial-datos"><summary>Datos ilustrativos completos</summary><div class="tabla-caja" tabindex="0" role="region" aria-label="Actividad semanal, desplazable"><table><caption>Acciones de ejemplo, no actividad real de GitHub</caption><thead><tr><th scope="col">Semana</th><th scope="col">Acciones</th></tr></thead><tbody>
<tr><th scope="row">1–7 junio</th><td data-valor="0">0</td></tr><tr><th scope="row">8–14 junio</th><td data-valor="2">2</td></tr><tr><th scope="row">15–21 junio</th><td data-valor="3">3</td></tr><tr><th scope="row">22–28 junio</th><td data-valor="5">5</td></tr><tr><th scope="row">29 junio–5 julio</th><td data-valor="1">1</td></tr><tr><th scope="row">6–12 julio</th><td data-valor="7">7</td></tr><tr><th scope="row">13–19 julio</th><td data-valor="4">4</td></tr><tr><th scope="row">20–26 julio</th><td data-valor="8">8</td></tr>
</tbody></table></div></details>Componente / Galería deslizable
Desliza para recorrer las cuatro ilustraciones.
Use and limits: Show embedded photos/captures with native horizontal scrolling via trackpad, touch or focused keyboard arrows. The photographic variant has no internal heading, controls or autoplay; short captions overlay a full-image gradient, subtle outline and shadow. Pointer drag uses grab/capture; touch stays native. Superellipse(1.6) corners use 28 px with an 18 px circular fallback. Position announcements enhance rather than replace native scrolling. Use data images and alt text; fixtures are illustrations, not the user's photos. Cover crops may hide edges; use contain for evidence requiring the full image. Long explanations belong outside. No zoom/360 viewer. Reduced motion also disables legacy smooth controls. init/get/destroy preserves content.
Dependencias: packages/core/styles/fonts.css, packages/core/styles/artifact.css, packages/core/components/interface.js, packages/core/components/audio.js, packages/core/components/controls.js, packages/core/components/editorial-pieces.js, packages/core/components/reader.js
<section class="pieza amplio galeria-fotografica" id="galeria-ejemplo" data-galeria><div class="galeria-pista" data-galeria-pista tabindex="0" role="region" aria-label="Galería de cuatro ilustraciones, desplazable horizontalmente">
<figure><img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2MDAgNDAwIj48cmVjdCB3aWR0aD0iNjAwIiBoZWlnaHQ9IjQwMCIgZmlsbD0iIzI2M2IzNyIvPjxjaXJjbGUgY3g9IjEzMCIgY3k9IjEwMCIgcj0iNjIiIGZpbGw9IiNkOGI5ODgiLz48cGF0aCBkPSJNMCAzMzAgMTYwIDE0MCAzMTAgMzAwIDQ1NSAxMzAgNjAwIDI3MFY0MDBIMFoiIGZpbGw9IiNhY2MzYTQiLz48cGF0aCBkPSJNMCAzNzUgMTgwIDMwMCAzNDAgMzcwIDUwMCAyNjUgNjAwIDMxMFY0MDBIMFoiIGZpbGw9IiMyNjNiMzciIG9wYWNpdHk9Ii42Ii8+PC9zdmc+" alt="Relieve: ilustración geométrica de paisaje" width="600" height="400" loading="lazy"><figcaption>Relieve · ilustración, 2026</figcaption></figure>
<figure><img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2MDAgNDAwIj48cmVjdCB3aWR0aD0iNjAwIiBoZWlnaHQ9IjQwMCIgZmlsbD0iIzIwMzU0NyIvPjxjaXJjbGUgY3g9IjIxMCIgY3k9IjEwMCIgcj0iNjIiIGZpbGw9IiNlZWQzYTUiLz48cGF0aCBkPSJNMCAzMzAgMTYwIDE0MCAzMTAgMzAwIDQ1NSAxMzAgNjAwIDI3MFY0MDBIMFoiIGZpbGw9IiM4MGE2YWIiLz48cGF0aCBkPSJNMCAzNzUgMTgwIDMwMCAzNDAgMzcwIDUwMCAyNjUgNjAwIDMxMFY0MDBIMFoiIGZpbGw9IiMyMDM1NDciIG9wYWNpdHk9Ii42Ii8+PC9zdmc+" alt="Horizonte: ilustración geométrica de paisaje" width="600" height="400" loading="lazy"><figcaption>Horizonte · ilustración, 2026</figcaption></figure>
<figure><img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2MDAgNDAwIj48cmVjdCB3aWR0aD0iNjAwIiBoZWlnaHQ9IjQwMCIgZmlsbD0iIzM5MzQ0MyIvPjxjaXJjbGUgY3g9IjI5MCIgY3k9IjEwMCIgcj0iNjIiIGZpbGw9IiNlYWQ4YmQiLz48cGF0aCBkPSJNMCAzMzAgMTYwIDE0MCAzMTAgMzAwIDQ1NSAxMzAgNjAwIDI3MFY0MDBIMFoiIGZpbGw9IiNhZTk3YTciLz48cGF0aCBkPSJNMCAzNzUgMTgwIDMwMCAzNDAgMzcwIDUwMCAyNjUgNjAwIDMxMFY0MDBIMFoiIGZpbGw9IiMzOTM0NDMiIG9wYWNpdHk9Ii42Ii8+PC9zdmc+" alt="Ciudad: ilustración geométrica de paisaje" width="600" height="400" loading="lazy"><figcaption>Ciudad · ilustración, 2026</figcaption></figure>
<figure><img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2MDAgNDAwIj48cmVjdCB3aWR0aD0iNjAwIiBoZWlnaHQ9IjQwMCIgZmlsbD0iIzQ0MzkyZCIvPjxjaXJjbGUgY3g9IjM3MCIgY3k9IjEwMCIgcj0iNjIiIGZpbGw9IiNlMGM5YTQiLz48cGF0aCBkPSJNMCAzMzAgMTYwIDE0MCAzMTAgMzAwIDQ1NSAxMzAgNjAwIDI3MFY0MDBIMFoiIGZpbGw9IiNiOWFkODgiLz48cGF0aCBkPSJNMCAzNzUgMTgwIDMwMCAzNDAgMzcwIDUwMCAyNjUgNjAwIDMxMFY0MDBIMFoiIGZpbGw9IiM0NDM5MmQiIG9wYWNpdHk9Ii42Ii8+PC9zdmc+" alt="Sendero: ilustración geométrica de paisaje" width="600" height="400" loading="lazy"><figcaption>Sendero · ilustración, 2026</figcaption></figure>
</div><p class="sr-only" data-galeria-estado role="status">Desliza para recorrer las cuatro ilustraciones.</p></section>Componente / Publicación de X
Cuatro trimestres seguidos de crecimiento en suscripciones. Lo que más movió la aguja no fue el precio: fue acortar el registro de seis pasos a dos.
Use and limits: A static editorial card for a post on X: author, handle, date, text, source and an optional data: image. It never loads widgets.js or an X iframe, so it works offline and inside the portal sandbox. Set data-embed-user (1–15 letters, digits or _) and data-embed-status (digits); the runtime rebuilds the link as https://x.com/<user>/status/<id> and ignores the author's href. Write text as escaped HTML or build the card with MargenEmbeds.card({name,user,status,text,date,media,synthetic}), which uses DOM text only. An invented post must carry data-embed-synthetic: the runtime then removes any link and labels it «Ejemplo sintético»; use an impossible handle so it cannot match a real account. Never present metrics or verification you did not check. Without JavaScript, offline or in print the card, its text and the source link remain; nothing pretends to play. No remote thumbnails or provider scripts: a poster may only be a data: image. Runtime: packages/core/components/embeds.js (MargenEmbeds.init/get/destroy), styles packages/core/styles/embeds.css.
Dependencias: packages/core/styles/fonts.css, packages/core/styles/artifact.css, packages/core/components/interface.js, packages/core/components/audio.js, packages/core/components/controls.js, packages/core/components/editorial-pieces.js, packages/core/components/reader.js, packages/core/components/embeds.js
<figure class="embed embed-x" id="x-ejemplo" data-embed="x" data-embed-synthetic>
<header class="embed-cabecera"><p class="embed-autor"><strong>Laura Méndez</strong><span class="embed-handle">@autora.ejemplo</span></p><span class="embed-proveedor">X</span></header>
<blockquote class="embed-texto"><p>Cuatro trimestres seguidos de crecimiento en suscripciones. Lo que más movió la aguja no fue el precio: fue acortar el registro de seis pasos a dos.</p></blockquote>
<img class="embed-media" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2MDAgMzAwIj48cmVjdCB3aWR0aD0iNjAwIiBoZWlnaHQ9IjMwMCIgZmlsbD0iI2Y2ZjBlYiIvPjxnIGZpbGw9IiNhMTNmMTkiPjxyZWN0IHg9IjcwIiB5PSIxNzAiIHdpZHRoPSI3MCIgaGVpZ2h0PSI5MCIvPjxyZWN0IHg9IjE5MCIgeT0iMTMwIiB3aWR0aD0iNzAiIGhlaWdodD0iMTMwIi8+PHJlY3QgeD0iMzEwIiB5PSI5NSIgd2lkdGg9IjcwIiBoZWlnaHQ9IjE2NSIvPjxyZWN0IHg9IjQzMCIgeT0iNjAiIHdpZHRoPSI3MCIgaGVpZ2h0PSIyMDAiLz48L2c+PHBhdGggZD0iTTUwIDI2MEg1NTAiIHN0cm9rZT0iIzUxNDczZSIgc3Ryb2tlLXdpZHRoPSIyIi8+PC9zdmc+" alt="Gráfico de barras ilustrativo: cuatro barras que crecen de izquierda a derecha." width="600" height="300">
<figcaption class="embed-pie"><span class="embed-sintetico">Ejemplo sintético</span><time datetime="2026-10-20">20 oct 2026</time><span>Sin publicación original: autora, texto y gráfico son ilustrativos.</span></figcaption>
</figure>Componente / Video de YouTube
Use and limits: A card with title, channel and a permanent «Abrir en YouTube» link; the player only loads after the reader clicks «Cargar video». Only data-embed-id (11 characters A-Z a-z 0-9 _ -) is read; the link and the player URL are rebuilt from it. The player is youtube-nocookie.com/embed/<id> with autoplay=1&mute=1 after the click (sound is the player's own control), referrerpolicy="strict-origin" and a sandbox limited to scripts, same-origin of the provider, popups and presentation. Inside the Margen portal the document only sends provider + ID and the portal opens its own dialog; as a standalone HTTPS page the player mounts in the card; opened as a local file:// YouTube rejects the page (error 153), so only the link is offered. If the player gives no sign of life in 8 s the card says so; an iframe load is not treated as playback. Restricted, private or embedding-disabled videos only open at the source. The «Al cargarlo…» notice (data-embed-notice) starts hidden and appears only with the load button. Without JavaScript, offline or in print the card, its text and the source link remain; nothing pretends to play. No remote thumbnails or provider scripts: a poster may only be a data: image. Runtime: packages/core/components/embeds.js (MargenEmbeds.init/get/destroy), styles packages/core/styles/embeds.css.
Dependencias: packages/core/styles/fonts.css, packages/core/styles/artifact.css, packages/core/components/interface.js, packages/core/components/audio.js, packages/core/components/controls.js, packages/core/components/editorial-pieces.js, packages/core/components/reader.js, packages/core/components/embeds.js
<figure class="embed embed-video embed-youtube" id="youtube-ejemplo" data-embed="youtube" data-embed-id="M7lc1UVf-VE">
<div class="embed-lienzo" data-embed-stage></div>
<figcaption>
<p class="embed-meta"><span class="embed-proveedor">YouTube</span> · YouTube Developers Live: Embedded Web Player Customization · Google for Developers</p>
<p class="embed-acciones"><button type="button" data-embed-load hidden>Cargar video</button><a data-embed-source href="https://www.youtube.com/watch?v=M7lc1UVf-VE">Abrir en YouTube</a></p>
<p class="embed-aviso" data-embed-notice hidden>Al cargarlo, tu navegador se conecta con YouTube. Empieza sin sonido.</p>
<p class="embed-aviso" data-embed-status role="status"></p>
</figcaption>
</figure>Componente / Publicación de Instagram
Use and limits: A card with a permanent «Abrir en Instagram» link; the post only loads after «Cargar publicación». Set data-embed-kind to p or reel and data-embed-id to the shortcode (5–40 characters). The frame is www.instagram.com/<p|reel>/<code>/embed/ without rd/rp and with referrerpolicy="no-referrer"; Instagram's embed.js is never loaded, and only its MEASURE height messages from that exact frame and origin are read (bounded). Initial height 640 px. Inside the portal the post opens in a portal dialog; standalone or as a local file it mounts in the card. Stories, private, inactive or age-restricted accounts and posts with embedding disabled only open at the source. Caption and author are written by the author (or proposed from oEmbed while authoring, as plain text); provider HTML is never inserted. The «Al cargarlo…» notice (data-embed-notice) starts hidden and appears only with the load button. Without JavaScript, offline or in print the card, its text and the source link remain; nothing pretends to play. No remote thumbnails or provider scripts: a poster may only be a data: image. Runtime: packages/core/components/embeds.js (MargenEmbeds.init/get/destroy), styles packages/core/styles/embeds.css.
Dependencias: packages/core/styles/fonts.css, packages/core/styles/artifact.css, packages/core/components/interface.js, packages/core/components/audio.js, packages/core/components/controls.js, packages/core/components/editorial-pieces.js, packages/core/components/reader.js, packages/core/components/embeds.js
<figure class="embed embed-video embed-instagram" id="instagram-ejemplo" data-embed="instagram" data-embed-id="fA9uwTtkSN" data-embed-kind="p">
<div class="embed-lienzo" data-embed-stage></div>
<figcaption>
<p class="embed-meta"><span class="embed-proveedor">Instagram</span> · Publicación pública usada como ejemplo en la documentación de Instagram oEmbed</p>
<p class="embed-acciones"><button type="button" data-embed-load hidden>Cargar publicación</button><a data-embed-source href="https://www.instagram.com/p/fA9uwTtkSN/">Abrir en Instagram</a></p>
<p class="embed-aviso" data-embed-notice hidden>Al cargarla, tu navegador se conecta con Instagram.</p>
<p class="embed-aviso" data-embed-status role="status"></p>
</figcaption>
</figure>Componente / Encabezado con fecha
Publicado · Actualizado
Fechas ilustrativas para explorar la jerarquía entre título, metadatos y entrada de un artículo.
Uso: conserva fechas explícitas con <time datetime>, tipografía monoespaciada y una entrada breve. En un documento completo, el generador crea el título principal y esta fila con date: "AAAA-MM-DD" o date: {published, updated}. También se admite date por página. Esta muestra usa h3 para convivir con el título del catálogo; no dupliques el h1 del documento. Las fechas de ejemplo no son datos de una publicación real.
Dependencias: packages/core/styles/fonts.css, packages/core/styles/artifact.css, packages/core/components/interface.js, packages/core/components/audio.js, packages/core/components/controls.js, packages/core/components/editorial-pieces.js, packages/core/components/reader.js
<header class="cabecera" id="encabezado-fecha-ejemplo">
<h3>Un lugar para leer con calma</h3>
<p class="cabecera-fecha">Publicado <time datetime="2026-10-01">1 oct 2026</time> · Actualizado <time datetime="2026-10-22">22 oct 2026</time></p>
<p class="bajada">Fechas ilustrativas para explorar la jerarquía entre título, metadatos y entrada de un artículo.</p>
</header>Capítulo 03 / 09
Anotaciones, fuentes, definiciones y cambios editoriales.
Componente / Nota manuscrita
de doce frentes, siete están en producción. el cuello de botella ya no es construir: es decidir.
Use and limits: Use a short secondary observation revealed when seen. data-mano=fuente reveals the embedded Reenie Beanie glyphs, with 375 ms character reveals staggered to match the approved pencil sample (about 2.18–3.03 s). Entry triggers once at 30% visibility; replay remains available. Keep complete equivalent text for selection, assistive reading and review. Leaving the viewport, hiding the tab or reduced motion completes the text and cancels sound. data-escritura-sonora requests the original recording after a real audio-unlocking gesture; do not loop, normalize or stretch it. No RAF. The older empty data-mano SVG alphabet remains compatible (lowercase, 240 characters, words up to 160 px). Prefer fuente for new notes. NotaMano.init/get/destroy preserves original nodes.
Dependencias: packages/core/styles/fonts.css, packages/core/styles/artifact.css, packages/core/components/interface.js, packages/core/components/audio.js, packages/core/components/controls.js, packages/core/components/editorial-pieces.js, packages/core/components/reader.js, packages/core/components/handwriting.js
<div class="gesto-escrito">
<p class="manuscrita" data-mano="fuente" data-escritura-sonora id="nota-decision">de doce frentes, siete están en producción. el cuello de botella ya no es construir: es decidir.</p>
<button class="gesto-repetir" type="button" data-mano-repetir="nota-decision" data-audio="escritura" aria-label="Volver a escribir la nota" title="Volver a escribir la nota"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 10a9 9 0 1 1 2 8M3 4v6h6"/></svg></button>
</div>Componente / Ficha de artículo
Una propuesta para separar lo observado de lo supuesto al escribir un informe.
Use and limits: Present author, date and editorial status without a large cover. Fields are optional metadata, not controls. Do not invent reading time, credentials or peer review. No automatic SEO or social cards.
Dependencias: packages/core/styles/fonts.css, packages/core/styles/artifact.css, packages/core/components/interface.js, packages/core/components/audio.js, packages/core/components/controls.js, packages/core/components/editorial-pieces.js, packages/core/components/reader.js
<div class="pieza" id="articulo-ejemplo">
<h3>El contexto antes de empezar</h3>
<dl class="ficha-articulo">
<div><dt>Autoría</dt><dd>Equipo editorial</dd></div>
<div><dt>Publicado</dt><dd><time datetime="2026-09-14">14 sep 2026</time></dd></div>
<div><dt>Tipo de pieza</dt><dd>Ensayo con ejemplos</dd></div>
<div><dt>Revisión</dt><dd>Primera edición</dd></div>
</dl>
<p>Una propuesta para separar lo observado de lo supuesto al escribir un informe.</p>
</div>Componente / Referencias con regreso
Una afirmación debe permitir volver a su origen [1]. Cuando una cifra es ilustrativa, debe decirlo [2].
Use and limits: Keep lengthy citations and clarifications outside the paragraph with links back. Works without JavaScript. Use unique note/return IDs; repeated citations need distinct return links. Real sources require author, title, date and a verifiable destination. Keep references and calls in the same chapter. This is not automatic bibliography management.
Dependencias: packages/core/styles/fonts.css, packages/core/styles/artifact.css, packages/core/components/interface.js, packages/core/components/audio.js, packages/core/components/controls.js, packages/core/components/editorial-pieces.js, packages/core/components/reader.js
<div class="pieza" id="referencias-ejemplo">
<h3>La evidencia queda a un paso</h3>
<p>Una afirmación debe permitir volver a su origen
<a id="llamada-fuente-1" href="#fuente-1" aria-label="Consultar referencia 1">[1]</a>.
Cuando una cifra es ilustrativa, debe decirlo
<a id="llamada-fuente-2" href="#fuente-2" aria-label="Consultar referencia 2">[2]</a>.</p>
<ol class="nota-referencias" aria-label="Referencias del ejemplo">
<li id="fuente-1" tabindex="-1">Nota metodológica del ejemplo: acompañar cada afirmación con su procedencia.
<a href="#llamada-fuente-1" aria-label="Volver a la llamada de referencia 1">Volver al texto ↑</a></li>
<li id="fuente-2" tabindex="-1">Los ejemplos de esta biblioteca no representan datos de producción.
<a href="#llamada-fuente-2" aria-label="Volver a la llamada de referencia 2">Volver al texto ↑</a></li>
</ol>
</div>Componente / Glosario editorial
Use and limits: Define report-specific vocabulary in visible text. Definitions are editorial, not hover-only help, automatic search or translation.
Dependencias: packages/core/styles/fonts.css, packages/core/styles/artifact.css, packages/core/components/interface.js, packages/core/components/audio.js, packages/core/components/controls.js, packages/core/components/editorial-pieces.js, packages/core/components/reader.js
<div class="pieza" id="glosario-ejemplo">
<h3>Palabras que conviene acordar</h3>
<dl class="nota-glosario">
<div><dt><dfn>Observación</dfn></dt><dd>Lo que se registró directamente, con su contexto y procedencia.</dd></div>
<div><dt><dfn>Hipótesis</dfn></dt><dd>Explicación provisional que puede contrastarse con evidencia.</dd></div>
<div><dt><dfn>Prototipo</dfn></dt><dd>Representación parcial de una solución para explorar una pregunta.</dd></div>
</dl>
</div>Componente / Metodología desplegable
El ejemplo compara la duración declarada de una tarea bajo dos supuestos.
Use and limits: Disclose methodological detail after stating the main limitation in normal text. Do not hide conditions that change the conclusion. Native details works without JavaScript; reader expands and restores it for print. The component neither executes nor verifies the method.
Dependencias: packages/core/styles/fonts.css, packages/core/styles/artifact.css, packages/core/components/interface.js, packages/core/components/audio.js, packages/core/components/controls.js, packages/core/components/editorial-pieces.js, packages/core/components/reader.js
<div class="pieza" id="metodologia-ejemplo">
<h3>Cómo leer esta evidencia</h3>
<p>El ejemplo compara la duración declarada de una tarea bajo dos supuestos.</p>
<details class="metodologia">
<summary>Consultar método, supuestos y exclusiones</summary>
<dl class="nota-glosario">
<div><dt>Unidad</dt><dd>Minutos por operación; volumen mensual constante.</dd></div>
<div><dt>Supuesto</dt><dd>Las tareas comparadas tienen el mismo alcance.</dd></div>
<div><dt>Exclusión</dt><dd>No incluye capacitación, espera ni fallos de otros sistemas.</dd></div>
<div><dt>Límite</dt><dd>El resultado estima capacidad, no demuestra ahorro realizado.</dd></div>
</dl>
</details>
</div>Componente / Historial de revisiones
Historial ficticio para mostrar el formato; no describe commits del repositorio.
· v0.2 · Equipo editorial
El cálculo ahora distingue capacidad estimada de ahorro realizado.
· v0.1 · Equipo editorial
Hipótesis, prototipo y preguntas por observar.
Use and limits: Record material changes and corrections using real dates and owners. This is an editorial history, not automatic version control, an audit log or a signature. A build timestamp is not a publication date.
Dependencias: packages/core/styles/fonts.css, packages/core/styles/artifact.css, packages/core/components/interface.js, packages/core/components/audio.js, packages/core/components/controls.js, packages/core/components/editorial-pieces.js, packages/core/components/reader.js
<section class="pieza" id="revisiones-ejemplo"><h3>Qué cambió en el documento</h3><p class="procedencia">Historial ficticio para mostrar el formato; no describe commits del repositorio.</p><ol class="revisiones-editoriales"><li><p class="ceja"><time datetime="2026-09-14">14 sep 2026</time> · v0.2 · Equipo editorial</p><h4>Se explican las exclusiones</h4><p>El cálculo ahora distingue capacidad estimada de ahorro realizado.</p></li><li><p class="ceja"><time datetime="2026-09-12">12 sep 2026</time> · v0.1 · Equipo editorial</p><h4>Primera propuesta</h4><p>Hipótesis, prototipo y preguntas por observar.</p></li></ol></section>Componente / Apuntes manuscritos al margen
La evidencia sirve cuando nos ayuda a decidir mejor. Un reporte puede dejar una pregunta breve al margen sin interrumpir el argumento.
Antes de agregar otra gráfica, prueba a quitar lo que sobra. La anotación acompaña al párrafo; el subrayado se dibuja cuando aparece.
Corrección ilustrativa: cinco días tres días. Conserva visible el cambio y explica su motivo.
Use and limits: Place a brief secondary question beside the claim it qualifies. Left/right variants use reserved grid space; reading order keeps the argument first. Below 1000 px notes follow the paragraph. Replay floats on the bracket with no reserved height, appearing on hover/focus and remaining available on touch. Handwriting, underline and del[data-subrayar=tachado] start once at 30% visibility; leaving completes the gesture and stops audio. Reentry does not auto-repeat. Keep complete equivalent text and correction semantics. Use brief one-line underlines and approved handwriting/audio; no essential conditions or long prose in the margin.
Dependencias: packages/core/styles/fonts.css, packages/core/styles/artifact.css, packages/core/components/interface.js, packages/core/components/audio.js, packages/core/components/controls.js, packages/core/components/editorial-pieces.js, packages/core/components/reader.js, packages/core/components/handwriting.js
<div class="apuntes ancho" id="apuntes-ejemplo">
<section class="apunte izquierda">
<div class="apunte-cuerpo"><h3>Una decisión necesita contexto.</h3><p>La evidencia sirve cuando nos ayuda a <span data-subrayar="referencia">decidir mejor</span>. Un reporte puede dejar una pregunta breve al margen sin interrumpir el argumento.</p></div>
<aside class="apunte-nota" aria-label="Apunte a la izquierda"><p class="manuscrita" data-mano="fuente" data-escritura-sonora id="apunte-izquierdo">menos ruido, más criterio.</p><button class="gesto-repetir" type="button" data-mano-repetir="apunte-izquierdo" data-audio="escritura" aria-label="Repetir apunte izquierdo" title="Repetir apunte izquierdo"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 10a9 9 0 1 1 2 8M3 4v6h6"/></svg></button></aside>
</section>
<section class="apunte">
<div class="apunte-cuerpo"><h3>Explicar también es editar.</h3><p>Antes de agregar otra gráfica, prueba a <span data-subrayar="referencia">quitar lo que sobra</span>. La anotación acompaña al párrafo; el subrayado se dibuja cuando aparece.</p><p>Corrección ilustrativa: <del data-subrayar="tachado">cinco días</del> <ins>tres días</ins>. Conserva visible el cambio y explica su motivo.</p></div>
<aside class="apunte-nota" aria-label="Apunte a la derecha"><p class="manuscrita" data-mano="fuente" data-escritura-sonora id="apunte-derecho">¿se entiende sin explicarlo?</p><button class="gesto-repetir" type="button" data-mano-repetir="apunte-derecho" data-audio="escritura" aria-label="Repetir apunte derecho" title="Repetir apunte derecho"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 10a9 9 0 1 1 2 8M3 4v6h6"/></svg></button></aside>
</section>
</div>Componente / Listas de estado
Instantánea ilustrativa ·
Use and limits: Show a dated snapshot of completed and pending work. Symbols, text and strike-through distinguish status; color is supplementary. It is not an editable task manager or checkbox list. Do not derive percentages from qualitative states. Update date and content together.
Dependencias: packages/core/styles/fonts.css, packages/core/styles/artifact.css, packages/core/components/interface.js, packages/core/components/audio.js, packages/core/components/controls.js, packages/core/components/editorial-pieces.js, packages/core/components/reader.js
<section id="lista-estados-ejemplo">
<h3>En qué estamos</h3><p class="procedencia">Instantánea ilustrativa · <time datetime="2026-09-14">14 sep 2026</time></p>
<ul class="lista-estados" aria-label="Estado de los frentes">
<li class="hecho"><span class="estado-signo" aria-hidden="true">[x]</span><span class="estado-texto"><span class="sr-only">Completado: </span>Definir la pregunta del informe</span></li>
<li><span class="estado-signo" aria-hidden="true">[-]</span><span class="estado-texto"><span class="sr-only">En curso: </span>Contrastar las cifras con su fuente</span></li>
<li><span class="estado-signo" aria-hidden="true">[ ]</span><span class="estado-texto"><span class="sr-only">Pendiente: </span>Probar la propuesta con lectores</span></li>
<li><span class="estado-signo" aria-hidden="true">[ ]</span><span class="estado-texto"><span class="sr-only">Pendiente: </span>Publicar lo que cambió y por qué</span></li>
</ul>
</section>Componente / Lista de proyectos
Elegir indicadores que respondan a la decisión del equipo y explicitar qué queda fuera.
Recorrer el prototipo con una tarea concreta antes de añadir otra pantalla.
Acordar una fecha y una señal para retomar la decisión con evidencia nueva.
Use and limits: Describe parallel projects or research directions with a short title and paragraph. Use a table when comparing common attributes. Numbering must not imply priority unless an order is real. Preserve complete names and real destinations.
Dependencias: packages/core/styles/fonts.css, packages/core/styles/artifact.css, packages/core/components/interface.js, packages/core/components/audio.js, packages/core/components/controls.js, packages/core/components/editorial-pieces.js, packages/core/components/reader.js
<section id="lista-proyectos-ejemplo"><h3>Tres preguntas abiertas</h3>
<ul class="lista-proyectos">
<li><h4>Qué vale la pena medir</h4><p>Elegir indicadores que respondan a la decisión del equipo y explicitar qué queda fuera.</p></li>
<li><h4>Cómo se entiende la propuesta</h4><p>Recorrer el prototipo con una tarea concreta antes de añadir otra pantalla.</p></li>
<li><h4>Cuándo volver a revisar</h4><p>Acordar una fecha y una señal para retomar la decisión con evidencia nueva.</p></li>
</ul>
</section>Componente / Conversación en el artículo
Use and limits: Use a dialogue to explain an idea, with explicit participants and natural reading order. The fixture is fictional, not a quote. Real quotations need provenance. No connected chat, simulated typing, presence or fabricated replies.
Dependencias: packages/core/styles/fonts.css, packages/core/styles/artifact.css, packages/core/components/interface.js, packages/core/components/audio.js, packages/core/components/controls.js, packages/core/components/editorial-pieces.js, packages/core/components/reader.js
<section id="conversacion-ejemplo"><h3>Aclarar la pregunta</h3>
<ol class="conversacion" aria-label="Diálogo ilustrativo">
<li><strong>Investigación</strong>¿Qué queremos aprender con este informe?</li>
<li class="respuesta"><strong>Producto</strong>Si la propuesta ayuda a decidir con menos dudas.</li>
<li><strong>Investigación</strong>Entonces necesitamos observar una decisión, además de contar clics.</li>
<li class="respuesta"><strong>Producto</strong>Dejemos esa pregunta al comienzo.</li>
</ol>
</section>Componente / Enlaces con icono
Consulta el artículo de referencia antes de interpretar data-lineas. Para una ruta local, scripts/validate.py nombra exactamente qué ejecutar.
Use and limits: Add a small decorative SVG beside a complete source/repository/file link label. Icons do not replace the name or promise a different action. No external logo fetch. Allow long URLs/paths to wrap. Multiline code belongs in a code block, not an inline chip.
Dependencias: packages/core/styles/fonts.css, packages/core/styles/artifact.css, packages/core/components/interface.js, packages/core/components/audio.js, packages/core/components/controls.js, packages/core/components/editorial-pieces.js, packages/core/components/reader.js
<section class="pieza" id="enlaces-icono-ejemplo"><h3>Una referencia en medio del argumento.</h3><p>Consulta <a class="enlace-icono" href="https://www.cmrg.me/blog/react-19-part-2-the-code"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true"><path d="M8 4H4v16h16v-4M13 3h8v8M21 3 10 14"/></svg>el artículo de referencia</a> antes de interpretar <code class="codigo-en-linea">data-lineas</code>. Para una ruta local, <code class="codigo-en-linea">scripts/validate.py</code> nombra exactamente qué ejecutar.</p></section>Componente / Avisos con icono animado
Use and limits: Mark brief caution or context with a corner icon that reserves its own space. editorial-pieces.js adds two 1000 ms pulses on entry and optional replay on hover/focus. Motion stops when hidden, outside view, reduced or destroyed. No RAF or sound. Static notices must not use role=alert; meaning does not depend on animation. Existing notice variants remain compatible.
Dependencias: packages/core/styles/fonts.css, packages/core/styles/artifact.css, packages/core/components/interface.js, packages/core/components/audio.js, packages/core/components/controls.js, packages/core/components/editorial-pieces.js, packages/core/components/reader.js
<div class="pieza" id="avisos-animados-ejemplo">
<aside class="aviso aviso-esquina mal" data-aviso-animado aria-labelledby="aviso-cuidado-titulo"><span class="num" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true"><path d="M12 4v10M12 17v2"/></svg></span><div><p class="titulo" id="aviso-cuidado-titulo">Cuidado</p><p>Estos conteos son ilustrativos. Antes de tomar una decisión, reemplázalos por una fuente verificable.</p></div></aside>
<aside class="aviso aviso-esquina" data-aviso-animado aria-labelledby="aviso-nota-titulo"><span class="num" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true"><path d="M7 3h11v16H7zM4 6v16h11"/></svg></span><div><p class="titulo" id="aviso-nota-titulo">Nota</p><p>Los comentarios de revisión se conservan mientras esta pestaña permanezca abierta. Copia el prompt antes de recargar.</p></div></aside>
</div>Componente / Relato visual por pasos
| Paso | Horas | Lectura |
|---|---|---|
| Investigar | 60 | La mayor parte del tiempo se dedicó a comprender el problema. |
| Construir | 25 | La implementación parte de lo aprendido durante la investigación. |
| Revisar | 15 | La revisión reserva tiempo para contrastar el resultado con la pregunta. |
Use and limits: Connect a narrative to one shared figure with 2–8 rows: name, nonnegative magnitude and explanation, each text up to 100 characters. Desktop scroll selects a step; controls allow explicit selection. Mobile restores normal flow and written values. Shared zero-based scale, no data mutation or scroll hijacking. Without JavaScript retain the table. IntersectionObserver is cleaned up; no animation loop. Source data stays in one table (or the image zone list). Declare data-unidad (1–40 characters); numeric magnitude is limited to 10^12. Views round to eight significant digits while source values remain. Load evidence.js; NotaEvidencia.init/get/destroy owns lifecycle. Destroy before changing the source. No network or external libraries; data remains if enhancement fails.
Dependencias: packages/core/styles/fonts.css, packages/core/styles/artifact.css, packages/core/components/interface.js, packages/core/components/audio.js, packages/core/components/controls.js, packages/core/components/editorial-pieces.js, packages/core/components/reader.js, packages/core/components/chart-core.js, packages/core/components/evidence.js
<figure class="amplio" id="evidencia-relato" data-evidencia="relato" data-unidad="horas">
<div class="tabla-caja densa" role="region" tabindex="0" aria-label="Cien horas de trabajo, datos desplazables">
<table data-evidencia-datos><caption>Cien horas de trabajo</caption><thead><tr><th scope="col">Paso</th><th scope="col">Horas</th><th scope="col">Lectura</th></tr></thead><tbody>
<tr><th scope="row">Investigar</th><td data-valor="60">60</td><td>La mayor parte del tiempo se dedicó a comprender el problema.</td></tr>
<tr><th scope="row">Construir</th><td data-valor="25">25</td><td>La implementación parte de lo aprendido durante la investigación.</td></tr>
<tr><th scope="row">Revisar</th><td data-valor="15">15</td><td>La revisión reserva tiempo para contrastar el resultado con la pregunta.</td></tr>
</tbody></table>
</div>
<figcaption>Datos ilustrativos: distribución de 100 horas, no productividad medida.</figcaption>
</figure>Componente / Reacciones de lectura
¿Cómo te dejó esta lectura?
Se guardan solo en este navegador. No hay conteos compartidos.
Uso y límites: tres respuestas personales con teclado, foco y estado aria-pressed. No representan actividad ni conteos de otras personas. Se conservan por documento en el navegador cuando el almacenamiento está disponible; en el lector aislado duran mientras la página esté abierta, y la pieza lo indica. El generador puede añadirlas al pie con reactions: true. Evita duplicarlas. Para comentarios compartidos y contexto que otros agentes puedan leer, usa el sistema de comentarios del documento.
Dependencias: packages/core/styles/fonts.css, packages/core/styles/artifact.css, packages/core/components/interface.js, packages/core/components/audio.js, packages/core/components/controls.js, packages/core/components/editorial-pieces.js, packages/core/components/reader.js
<div class="reacciones" id="reacciones-ejemplo" data-reacciones="ejemplo" role="group" aria-labelledby="reacciones-ejemplo-titulo">
<p class="ceja" id="reacciones-ejemplo-titulo">¿Cómo te dejó esta lectura?</p>
<div class="reacciones-botones">
<button type="button" data-reaccion="util" aria-pressed="false"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 11v9H4v-9h3Zm0 0 4-7a2 2 0 0 1 2 2v3h5a2 2 0 0 1 2 2.3l-1.2 6A2 2 0 0 1 16.8 19H7"/></svg><span>Útil</span></button>
<button type="button" data-reaccion="volver" aria-pressed="false"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 4h12v16l-6-4-6 4V4Z"/></svg><span>Para volver</span></button>
<button type="button" data-reaccion="pensar" aria-pressed="false"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 18h6M10 21h4M12 3a6 6 0 0 0-3.5 10.9c.6.4 1 1.1 1 1.8V16h5v-.3c0-.7.4-1.4 1-1.8A6 6 0 0 0 12 3Z"/></svg><span>Me hizo pensar</span></button>
</div>
<p class="reacciones-nota">Se guardan solo en este navegador. No hay conteos compartidos.</p>
</div>Capítulo 04 / 09
Afirmaciones, compensaciones, riesgos y escenarios explícitos.
Componente / Ficha de decisión
Use and limits: Record a decision's reasoning and conditions for revisiting it. Status, owner and date are editorial facts supplied by the author. This is not an urgent alert, approval workflow, signature or automatic audit trail.
Dependencias: packages/core/styles/fonts.css, packages/core/styles/artifact.css, packages/core/components/interface.js, packages/core/components/audio.js, packages/core/components/controls.js, packages/core/components/editorial-pieces.js, packages/core/components/reader.js
<aside class="pieza ficha-decision" id="decision-ejemplo" aria-labelledby="decision-titulo">
<p class="ceja">Decisión 02 · ejemplo</p>
<h3 id="decision-titulo">Una revisión al final del registro</h3>
<p>Validar la información en un único paso antes de enviarla.</p>
<dl>
<div><dt>Por qué</dt><dd>Permite detectar omisiones sin pedir a la persona que repita datos.</dd></div>
<div><dt>Alternativa considerada</dt><dd>Confirmar cada campo por separado; interrumpe la tarea con demasiada frecuencia.</dd></div>
<div><dt>Qué falta comprobar</dt><dd>Que se detecten los errores antes del envío en una prueba de uso.</dd></div>
<div><dt>Cuándo revisarla</dt><dd>Si la revisión final se omite o no ayuda a corregir los errores.</dd></div>
</dl>
</aside>Componente / Cronología anotada
Se registran las dudas al completar un formulario.
Se reúnen los campos en dos pasos y se añade una revisión final.
Se prepara una prueba con tareas, criterios de éxito y observaciones.
Cronología ilustrativa; no representa una prueba realizada.
Use and limits: Order events and explain what changed. Dates stack above their event on mobile. Spacing does not encode elapsed time or establish causality; use duration charts when duration matters.
Dependencias: packages/core/styles/fonts.css, packages/core/styles/artifact.css, packages/core/components/interface.js, packages/core/components/audio.js, packages/core/components/controls.js, packages/core/components/editorial-pieces.js, packages/core/components/reader.js
<div class="pieza" id="cronologia-ejemplo">
<h3>De la observación a la prueba</h3>
<ol class="cronologia">
<li><time datetime="2026-09-01">01 sep 2026</time><div><h4>Observar</h4><p>Se registran las dudas al completar un formulario.</p></div></li>
<li><time datetime="2026-09-04">04 sep 2026</time><div><h4>Prototipar</h4><p>Se reúnen los campos en dos pasos y se añade una revisión final.</p></div></li>
<li><time datetime="2026-09-14">14 sep 2026</time><div><h4>Contrastar</h4><p>Se prepara una prueba con tareas, criterios de éxito y observaciones.</p></div></li>
</ol>
<p class="procedencia">Cronología ilustrativa; no representa una prueba realizada.</p>
</div>Componente / Conciliación de registros
| Canal | Esperadas | Observadas | Diferencia | Explicación |
|---|---|---|---|---|
| Web | 120 | 118 | −2 | Dos operaciones siguen en revisión. |
| App | 80 | 80 | 0 | Conteos coincidentes. |
| Asistido | 30 | 33 | +3 | Tres registros pendientes de clasificar. |
| Total | 230 | 231 | 1 | El saldo neto no compensa las diferencias por canal. |
Use and limits: Compare expected/observed counts while retaining each row's explanation. Exactly five columns, up to 60 rows, nonnegative integer counts up to 10^9. Missing observed counts make the total incomplete with no net balance. This does not join IDs, detect duplicates or demonstrate financial reconciliation. Explanations are supplied, not inferred.
Dependencias: packages/core/styles/fonts.css, packages/core/styles/artifact.css, packages/core/components/interface.js, packages/core/components/audio.js, packages/core/components/controls.js, packages/core/components/editorial-pieces.js, packages/core/components/reader.js, packages/core/components/chart-core.js, packages/core/components/reports.js
<figure class="pieza amplio" id="conciliacion-ejemplo" data-reporte="conciliacion">
<h3>Una diferencia necesita explicación</h3>
<div class="tabla-caja densa" tabindex="0" role="region" aria-label="Conciliación de operaciones, desplazable">
<table class="tabla-calculo"><caption>Operaciones esperadas y observadas · ejemplo</caption>
<thead><tr><th scope="col">Canal</th><th scope="col">Esperadas</th><th scope="col">Observadas</th><th scope="col">Diferencia</th><th scope="col">Explicación</th></tr></thead>
<tbody>
<tr><th scope="row">Web</th><td data-valor="120">120</td><td data-valor="118">118</td><td>−2</td><td>Dos operaciones siguen en revisión.</td></tr>
<tr><th scope="row">App</th><td data-valor="80">80</td><td data-valor="80">80</td><td>0</td><td>Conteos coincidentes.</td></tr>
<tr><th scope="row">Asistido</th><td data-valor="30">30</td><td data-valor="33">33</td><td>+3</td><td>Tres registros pendientes de clasificar.</td></tr>
</tbody>
<tfoot><tr><th scope="row">Total</th><td>230</td><td>231</td><td>1</td><td>El saldo neto no compensa las diferencias por canal.</td></tr></tfoot>
</table>
</div>
<figcaption>Datos ilustrativos. Diferencia = observado − esperado; una diferencia cero no prueba igualdad de los registros individuales.</figcaption>
</figure>Componente / Calculadora de escenarios
Explora capacidad mensual con un volumen fijo. Los valores iniciales son ilustrativos.
1.200 × (8 − 5) ÷ 60 = 60 h/mes. Es capacidad estimada, no ahorro monetario ni una predicción.
Use and limits: Explore a linear capacity model with explicit reversible assumptions. Nonnegative minutes, at most one day per operation and one million operations per month; integer volume and time in tenths. Longer after-times show additional hours. Missing/out-of-range inputs invalidate output instead of retaining a stale result. No forecasting, valuation or data submission; without JavaScript the initial calculation remains.
Dependencias: packages/core/styles/fonts.css, packages/core/styles/artifact.css, packages/core/components/interface.js, packages/core/components/audio.js, packages/core/components/controls.js, packages/core/components/editorial-pieces.js, packages/core/components/reader.js, packages/core/components/chart-core.js, packages/core/components/reports.js
<div class="pieza ancho" id="escenario-ejemplo" data-reporte="escenario">
<h3>¿Qué cambia si la tarea toma menos tiempo?</h3>
<p>Explora capacidad mensual con un volumen fijo. Los valores iniciales son ilustrativos.</p>
<form class="escenario-form" aria-label="Supuestos de capacidad mensual">
<label>Operaciones al mes<input name="volumen" type="number" min="0" max="1000000" step="1" value="1200" required></label>
<label>Antes, minutos por operación<input name="antes" type="number" min="0" max="1440" step="0.1" value="8" required></label>
<label>Después, minutos por operación<input name="despues" type="number" min="0" max="1440" step="0.1" value="5" required></label>
<button type="reset">Restablecer supuestos</button>
</form>
<div class="escenario-resultados">
<output data-resultado aria-live="polite">60 h/mes liberadas</output>
<p data-formula>1.200 × (8 − 5) ÷ 60 = 60 h/mes. Es capacidad estimada, no ahorro monetario ni una predicción.</p>
</div>
</div>Componente / Ficha de hallazgo
Use and limits: Separate an observed finding, supporting evidence and implication. Use verified data, sources and limits; label hypotheses before presenting them. Static HTML with no hidden state. Avoid repeating this card for every paragraph.
Dependencias: packages/core/styles/fonts.css, packages/core/styles/artifact.css, packages/core/components/interface.js, packages/core/components/audio.js, packages/core/components/controls.js, packages/core/components/editorial-pieces.js, packages/core/components/reader.js
<aside class="pieza hallazgo" id="hallazgo-ejemplo" aria-labelledby="hallazgo-titulo">
<p class="ceja">Ficha 01 · hipótesis pendiente</p>
<h3 id="hallazgo-titulo">Revisar todo antes de confirmar</h3>
<dl>
<div><dt>Afirmación</dt><dd>Un resumen final podría facilitar la revisión de los datos antes del envío.</dd></div>
<div><dt>Evidencia disponible</dt><dd>Existe un prototipo navegable. Todavía no hay sesiones observadas que prueben la hipótesis.</dd></div>
<div><dt>Límite</dt><dd>La existencia del prototipo no acredita usabilidad ni ahorro de tiempo.</dd></div>
<div><dt>Siguiente prueba</dt><dd>Observar tareas comparables y registrar duración, errores y correcciones sin cambiar el alcance.</dd></div>
</dl>
</aside>Componente / Matriz de criterios
| Criterio | Resumen final | Revisión por paso | Cómo comprobarlo |
|---|---|---|---|
| Ver todo en contexto | Reúne los campos | Los reparte entre pantallas | Observar errores detectados |
| Editar cerca del dato | Requiere acceso desde el resumen | Edición dentro de cada paso | Contar pasos de corrección |
| Tiempo total | Pendiente de medir | Pendiente de medir | Misma tarea, alcance comparable |
Use and limits: Compare alternatives against explicit evidence-based criteria. Missing observations remain pending. Do not invent weights, scores or winners, or turn ordinal labels into numerical precision.
Dependencias: packages/core/styles/fonts.css, packages/core/styles/artifact.css, packages/core/components/interface.js, packages/core/components/audio.js, packages/core/components/controls.js, packages/core/components/editorial-pieces.js, packages/core/components/reader.js
<figure class="pieza amplio" id="criterios-ejemplo"><h3>Comparar sin esconder el criterio</h3><div class="tabla-caja" tabindex="0" role="region" aria-label="Matriz de criterios, desplazable"><table class="matriz-criterios"><caption>Opciones de revisión · comparación conceptual</caption><thead><tr><th scope="col">Criterio</th><th scope="col">Resumen final</th><th scope="col">Revisión por paso</th><th scope="col">Cómo comprobarlo</th></tr></thead><tbody><tr><th scope="row">Ver todo en contexto</th><td>Reúne los campos</td><td>Los reparte entre pantallas</td><td>Observar errores detectados</td></tr><tr><th scope="row">Editar cerca del dato</th><td>Requiere acceso desde el resumen</td><td>Edición dentro de cada paso</td><td>Contar pasos de corrección</td></tr><tr><th scope="row">Tiempo total</th><td>Pendiente de medir</td><td>Pendiente de medir</td><td>Misma tarea, alcance comparable</td></tr></tbody></table></div><figcaption>No hay puntuación agregada: las compensaciones y los datos faltantes quedan visibles.</figcaption></figure>Componente / Registro de riesgos
| Causa y consecuencia | Responsable propuesto | Mitigación | Señal para revisar |
|---|---|---|---|
| Un resumen incompleto permite confirmar un dato incorrecto | Diseño de producto | Mostrar todos los campos críticos y su edición | Correcciones posteriores a confirmar |
| Un fallo de guardado parece un envío exitoso | Ingeniería | Confirmar sólo tras respuesta válida y ofrecer reintento | Discrepancia entre interfaz y registro |
Use and limits: Describe cause, impact, owner, mitigation and observable warning signals. No automatic probability/severity estimates or multiplication of ordinal scales. The component neither assigns real work nor replaces operational tracking.
Dependencias: packages/core/styles/fonts.css, packages/core/styles/artifact.css, packages/core/components/interface.js, packages/core/components/audio.js, packages/core/components/controls.js, packages/core/components/editorial-pieces.js, packages/core/components/reader.js
<figure class="pieza amplio" id="riesgos-ejemplo"><h3>Lo que podría salir mal</h3><div class="tabla-caja" tabindex="0" role="region" aria-label="Registro de riesgos, desplazable"><table><caption>Riesgos ilustrativos de un flujo de confirmación</caption><thead><tr><th scope="col">Causa y consecuencia</th><th scope="col">Responsable propuesto</th><th scope="col">Mitigación</th><th scope="col">Señal para revisar</th></tr></thead><tbody><tr><th scope="row">Un resumen incompleto permite confirmar un dato incorrecto</th><td>Diseño de producto</td><td>Mostrar todos los campos críticos y su edición</td><td>Correcciones posteriores a confirmar</td></tr><tr><th scope="row">Un fallo de guardado parece un envío exitoso</th><td>Ingeniería</td><td>Confirmar sólo tras respuesta válida y ofrecer reintento</td><td>Discrepancia entre interfaz y registro</td></tr></tbody></table></div><figcaption>Ejemplo sin probabilidades estimadas. Asigna personas y señales verificables en el proyecto real.</figcaption></figure>Componente / Cronología vertical
Proyecto ficticio · hitos de ejemplo, del más reciente al más antiguo.
· etapa actual
Observar dónde se pierde el contexto y qué hace falta para decidir con confianza.
Dar forma a las preguntas y mantener visibles las limitaciones de cada alternativa.
Definir el problema, su evidencia disponible y la siguiente observación necesaria.
Use and limits: Present actual milestones with date, title and explanation on one axis. Distinguish the current point with words and color. Vertical spacing is editorial, not proportional time. The line fades from accent to secondary ink at the end; evidence and older entries remain fully legible. Use duration/time charts when elapsed time matters.
Dependencias: packages/core/styles/fonts.css, packages/core/styles/artifact.css, packages/core/components/interface.js, packages/core/components/audio.js, packages/core/components/controls.js, packages/core/components/editorial-pieces.js, packages/core/components/reader.js
<section class="pieza" id="trayectoria-ejemplo"><h3>La trayectoria de una idea.</h3><p class="procedencia">Proyecto ficticio · hitos de ejemplo, del más reciente al más antiguo.</p><ol class="cronologia cronologia-vertical">
<li class="actual"><h3>Una prueba con lectores</h3><p class="periodo"><time datetime="2026-09">Septiembre de 2026</time> · etapa actual</p><p>Observar dónde se pierde el contexto y qué hace falta para decidir con confianza.</p></li>
<li><h3>Un prototipo que se puede recorrer</h3><p class="periodo"><time datetime="2026-08">Agosto de 2026</time></p><p>Dar forma a las preguntas y mantener visibles las limitaciones de cada alternativa.</p></li>
<li><h3>Las primeras preguntas</h3><p class="periodo"><time datetime="2026-07">Julio de 2026</time></p><p>Definir el problema, su evidencia disponible y la siguiente observación necesaria.</p></li>
</ol></section>Componente / Ficha de entrega e hitos
Pedido de ejemplo / DEMO-018
Vehículo LFT-021 · Bogotá → Medellín. Estado ilustrativo: en tránsito.
18 pedidos asociados al vehículo. La cantidad pertenece al corte de ejemplo.
· último evento conocido
El movimiento en el mapa no confirma recepción ni prueba de entrega.
Sin hora confirmada. No se fabrica una estimación a partir de la animación.
Registrar fecha, receptor y prueba autorizada de entrega cuando existan. No se incluyen firmas ni fotos ficticias como si fueran evidencia real.
Use and limits: Explain a delivery's last known event and missing evidence. Use real zoned timestamps and stable IDs; unknown receipt/signature/time remains pending. Static HTML does not track, upload files or store signatures. A nearby vehicle is not proof of delivery. Keep a few milestones and one current status.
Dependencias: packages/core/styles/fonts.css, packages/core/styles/artifact.css, packages/core/components/interface.js, packages/core/components/audio.js, packages/core/components/controls.js, packages/core/components/editorial-pieces.js, packages/core/components/reader.js
<section class="pieza" id="ficha-entrega-ejemplo">
<p class="ceja">Pedido de ejemplo / DEMO-018</p><h3>Estar cerca no es haber entregado.</h3>
<p>Vehículo LFT-021 · Bogotá → Medellín. Estado ilustrativo: en tránsito.</p>
<ol class="cronologia cronologia-vertical">
<li><h3>Recogida confirmada</h3><p class="periodo"><time datetime="2026-09-15T06:30:00-05:00">06:30 COT</time></p><p>18 pedidos asociados al vehículo. La cantidad pertenece al corte de ejemplo.</p></li>
<li class="actual"><h3>En tránsito</h3><p class="periodo"><time datetime="2026-09-15T08:00:00-05:00">08:00 COT</time> · último evento conocido</p><p>El movimiento en el mapa no confirma recepción ni prueba de entrega.</p></li>
<li><h3>Recepción pendiente</h3><p>Sin hora confirmada. No se fabrica una estimación a partir de la animación.</p></li>
<li><h3>Evidencia pendiente</h3><p>Registrar fecha, receptor y prueba autorizada de entrega cuando existan. No se incluyen firmas ni fotos ficticias como si fueran evidencia real.</p></li>
</ol>
</section>Componente / Sensibilidad de escenarios
Resultado base: 100 millones COP.
| Supuesto | Escenario A | Resultado A | Escenario B | Resultado B |
|---|---|---|---|---|
| Volumen | −10 % | 91 | +10 % | 109 |
| Precio | −5 % | 92 | +5 % | 108 |
| Combustible | −10 % | 106 | +10 % | 94 |
Use and limits: Compare assumption changes against one visible baseline with declared A/B outcomes. 1–16 rows sorted by absolute B−A range; A need not be the smaller outcome. Shapes distinguish extremes and selection exposes absolute change. No financial modeling, probabilities, interpolation or combined effects. Reset changes inspection, not source data. Source data stays in one table (or the image zone list). Declare data-unidad (1–40 characters); numeric magnitude is limited to 10^12. Views round to eight significant digits while source values remain. Load evidence.js; NotaEvidencia.init/get/destroy owns lifecycle. Destroy before changing the source. No network or external libraries; data remains if enhancement fails.
Dependencias: packages/core/styles/fonts.css, packages/core/styles/artifact.css, packages/core/components/interface.js, packages/core/components/audio.js, packages/core/components/controls.js, packages/core/components/editorial-pieces.js, packages/core/components/reader.js, packages/core/components/chart-core.js, packages/core/components/evidence.js
<figure class="amplio" id="evidencia-sensibilidad" data-evidencia="sensibilidad" data-unidad="millones COP">
<p>Resultado base: <strong data-evidencia-base data-valor="100">100</strong> millones COP.</p>
<div class="tabla-caja densa" role="region" tabindex="0" aria-label="Resultado ante cambios de un supuesto, datos desplazables">
<table data-evidencia-datos><caption>Resultado ante cambios de un supuesto</caption><thead><tr><th scope="col">Supuesto</th><th scope="col">Escenario A</th><th scope="col">Resultado A</th><th scope="col">Escenario B</th><th scope="col">Resultado B</th></tr></thead><tbody>
<tr><th scope="row">Volumen</th><td>−10 %</td><td data-valor="91">91</td><td>+10 %</td><td data-valor="109">109</td></tr>
<tr><th scope="row">Precio</th><td>−5 %</td><td data-valor="92">92</td><td>+5 %</td><td data-valor="108">108</td></tr>
<tr><th scope="row">Combustible</th><td>−10 %</td><td data-valor="106">106</td><td>+10 %</td><td data-valor="94">94</td></tr>
</tbody></table>
</div>
<figcaption>Escenarios ilustrativos independientes. No son una proyección financiera ni combinan efectos.</figcaption>
</figure>Componente / Gantt editorial
| ID | Tarea | Inicio | Fin | Responsable | Estado | Depende de |
|---|---|---|---|---|---|---|
| A | Diagnóstico | 2026-09-01 | 2026-09-03 | Operación | Completada | — |
| B | Ensayo | 2026-09-03 | 2026-09-08 | Producto | En curso | A |
| C | Revisión | 2026-09-08 | 2026-09-10 | Diseño | Plan | B |
| D | Evidencia | 2026-09-03 | 2026-09-06 | Operación | Completada | A |
| E | Decisión | 2026-09-10 | 2026-09-10 | Equipo | Plan | C, D |
Use and limits: Show 1–24 tasks with actual dates, owners and finish-to-start dependencies. Unique ASCII IDs up to 12 characters; valid ISO dates over at most ten years. Comma-separated dependency IDs or an em dash for none. Reject cycles, absent IDs and dependencies ending after their successor starts. Explicit text/symbol status, never inferred from today. Duration is elapsed time, not inclusive working days. No holiday calendar, critical-path calculation or scheduler. Source data stays in one table (or the image zone list). Declare data-unidad (1–40 characters); numeric magnitude is limited to 10^12. Views round to eight significant digits while source values remain. Load evidence.js; NotaEvidencia.init/get/destroy owns lifecycle. Destroy before changing the source. No network or external libraries; data remains if enhancement fails.
Dependencias: packages/core/styles/fonts.css, packages/core/styles/artifact.css, packages/core/components/interface.js, packages/core/components/audio.js, packages/core/components/controls.js, packages/core/components/editorial-pieces.js, packages/core/components/reader.js, packages/core/components/chart-core.js, packages/core/components/evidence.js
<figure class="amplio" id="evidencia-gantt" data-evidencia="gantt" data-unidad="días">
<div class="tabla-caja densa" role="region" tabindex="0" aria-label="Hoja de ruta de una revisión, datos desplazables">
<table data-evidencia-datos><caption>Hoja de ruta de una revisión</caption><thead><tr><th scope="col">ID</th><th scope="col">Tarea</th><th scope="col">Inicio</th><th scope="col">Fin</th><th scope="col">Responsable</th><th scope="col">Estado</th><th scope="col">Depende de</th></tr></thead><tbody>
<tr><th scope="row">A</th><td>Diagnóstico</td><td>2026-09-01</td><td>2026-09-03</td><td>Operación</td><td>Completada</td><td>—</td></tr>
<tr><th scope="row">B</th><td>Ensayo</td><td>2026-09-03</td><td>2026-09-08</td><td>Producto</td><td>En curso</td><td>A</td></tr>
<tr><th scope="row">C</th><td>Revisión</td><td>2026-09-08</td><td>2026-09-10</td><td>Diseño</td><td>Plan</td><td>B</td></tr>
<tr><th scope="row">D</th><td>Evidencia</td><td>2026-09-03</td><td>2026-09-06</td><td>Operación</td><td>Completada</td><td>A</td></tr>
<tr><th scope="row">E</th><td>Decisión</td><td>2026-09-10</td><td>2026-09-10</td><td>Equipo</td><td>Plan</td><td>C, D</td></tr>
</tbody></table>
</div>
<figcaption>Calendario ficticio. Fechas UTC. Las barras representan intervalos inicio→fin; igualdad indica un hito.</figcaption>
</figure>Componente / Ficha de sesión y continuación
Sesión de ejemplo · pendiente de continuar
Objetivo: identificar la evidencia necesaria antes de recomendar una prueba.
Pregunta inicial, restricciones conocidas, versiones producidas, decisiones abiertas y referencia real de la conversación cuando exista. Esta ficha no abre ni importa sesiones.
Use and limits: Resume work using its actual objective, outputs and next step. Supply known document, version, quote, source, audience and state; explicitly mark unknowns. Semantic reading and keyboard disclosures reflow on mobile. Synthetic examples are not a portal session entity or conversation import. Reference real sessions only when available.
Dependencias: packages/core/styles/fonts.css, packages/core/styles/artifact.css, packages/core/components/interface.js, packages/core/components/audio.js, packages/core/components/controls.js, packages/core/components/editorial-pieces.js, packages/core/components/reader.js
<section class="pieza ancho" id="session-brief-example"><p class="ceja">Sesión de ejemplo · pendiente de continuar</p><h3>Evaluar el alcance del piloto</h3><p>Objetivo: identificar la evidencia necesaria antes de recomendar una prueba.</p><dl class="datos"><div><dt>Agente / dispositivo</dt><dd>Codex · equipo de ejemplo</dd></div><div><dt>Origen</dt><dd>No conectado · muestra sintética</dd></div><div><dt>Resultado</dt><dd>Borrador del informe · versión 2</dd></div><div><dt>Siguiente paso</dt><dd>Validar la fuente del supuesto de demanda</dd></div></dl><details><summary>Qué conservar para retomar</summary><p>Pregunta inicial, restricciones conocidas, versiones producidas, decisiones abiertas y referencia real de la conversación cuando exista. Esta ficha no abre ni importa sesiones.</p></details></section>Componente / Paquete de contexto para agentes
Contexto de ejemplo · preparado, no enviado
«¿Cuál es la fuente de la demanda prevista?»
Documento: Informe del piloto. Versión: v2 (ejemplo).
Cita comentada: “La demanda prevista permite iniciar un piloto”.
Comentario: verificar la fuente de la demanda.
Objetivo: separar datos observados de supuestos. Si falta evidencia, indicarlo.
Entrega: proponer una revisión; no marcar el comentario como resuelto.
Origen: sin sesión conectada; no inventar una referencia.Copiar no entrega el paquete a un agente. Sustituye los datos ilustrativos antes de usarlo.
Use and limits: Review and copy a task with quote, version, audience and objective. Supply verified provenance and explicit unknowns. Copying local text neither sends a message nor resumes an agent. Exclude private information inappropriate for the recipient. Preserve semantic reading, keyboard disclosures and mobile flow.
Dependencias: packages/core/styles/fonts.css, packages/core/styles/artifact.css, packages/core/components/interface.js, packages/core/components/audio.js, packages/core/components/controls.js, packages/core/components/editorial-pieces.js, packages/core/components/reader.js, packages/core/components/code.js
<section class="pieza ancho" id="context-bundle-example"><p class="ceja">Contexto de ejemplo · preparado, no enviado</p><h3>Verificar un supuesto antes de editar</h3><dl class="datos"><div><dt>Documento / versión</dt><dd>Informe del piloto · v2 ilustrativa</dd></div><div><dt>Audiencia</dt><dd>Creador y agente elegido</dd></div><div><dt>Incluido</dt><dd>Comentario, cita y objetivo del cambio</dd></div><div><dt>Excluido</dt><dd>Notas privadas no seleccionadas e historial completo</dd></div></dl><blockquote>«¿Cuál es la fuente de la demanda prevista?»</blockquote><div class="codigo codigo-editorial"><div class="cab"><span>Instrucción revisable</span><button type="button" data-copiar="context-bundle-prompt" aria-label="Copiar contexto de ejemplo">Copiar</button><span class="copia-estado" role="status"></span></div><pre tabindex="0" aria-label="Contexto de ejemplo"><code id="context-bundle-prompt">Documento: Informe del piloto. Versión: v2 (ejemplo).
Cita comentada: “La demanda prevista permite iniciar un piloto”.
Comentario: verificar la fuente de la demanda.
Objetivo: separar datos observados de supuestos. Si falta evidencia, indicarlo.
Entrega: proponer una revisión; no marcar el comentario como resuelto.
Origen: sin sesión conectada; no inventar una referencia.</code></pre></div><p class="procedencia">Copiar no entrega el paquete a un agente. Sustituye los datos ilustrativos antes de usarlo.</p></section>Componente / Registro de afirmaciones y evidencia
| Afirmación | Estado | Fuente y alcance | Qué falta |
|---|---|---|---|
| Existe demanda suficiente | Hipótesis | Sin fuente adjunta | Definir ventana, unidad y denominador |
| La interfaz permite revisar el informe | Propuesta verificable | Prototipo ilustrativo, no prueba de usuarios | Observar la tarea y registrar errores |
| La revisión reduce retrabajo | Pendiente de medir | No se infiere desde actividad | Establecer comparación y criterio de éxito |
Use and limits: Contrast claims with evidence and identify gaps before deciding. Supply real source/version/quote and explicit unknowns. No automatic confidence score or source verification. Preserve semantic headers, local table scrolling and accessible copyable text.
Dependencias: packages/core/styles/fonts.css, packages/core/styles/artifact.css, packages/core/components/interface.js, packages/core/components/audio.js, packages/core/components/controls.js, packages/core/components/editorial-pieces.js, packages/core/components/reader.js
<figure class="ancho" id="evidence-ledger-example"><div class="tabla-caja" tabindex="0" role="region" aria-label="Registro de evidencia, tabla desplazable"><table><caption>Afirmaciones del piloto · ejemplo sin datos de negocio</caption><thead><tr><th scope="col">Afirmación</th><th scope="col">Estado</th><th scope="col">Fuente y alcance</th><th scope="col">Qué falta</th></tr></thead><tbody><tr><th scope="row">Existe demanda suficiente</th><td>Hipótesis</td><td>Sin fuente adjunta</td><td>Definir ventana, unidad y denominador</td></tr><tr><th scope="row">La interfaz permite revisar el informe</th><td>Propuesta verificable</td><td>Prototipo ilustrativo, no prueba de usuarios</td><td>Observar la tarea y registrar errores</td></tr><tr><th scope="row">La revisión reduce retrabajo</th><td>Pendiente de medir</td><td>No se infiere desde actividad</td><td>Establecer comparación y criterio de éxito</td></tr></tbody></table></div><figcaption>Distingue evidencia, interpretación y vacío. No asigna porcentajes de confianza inventados.</figcaption></figure>Componente / Comparación editorial entre versiones
Revisión editorial · ejemplo
Antes · v2 ilustrativa
La demanda permite iniciar el piloto.
Problema: presenta una conclusión sin fuente.
Propuesta · v3 ilustrativa
El piloto depende de validar la demanda prevista. Todavía falta una fuente con período y denominador.
El cambio aclara el límite; no fabrica evidencia.
Motivo: comentario sobre el supuesto. Estado: propuesta, no aceptada. Una comparación real debe enlazar versiones inmutables y conservar la cita original.
Use and limits: Explain a manual editorial correction and its reason without hiding uncertainty. Use real source versions and quotes; examples are synthetic. Not an automatic diff or version-control engine. Keep Before/Proposal labels clear on mobile and retain keyboard-readable/copyable text.
Dependencias: packages/core/styles/fonts.css, packages/core/styles/artifact.css, packages/core/components/interface.js, packages/core/components/audio.js, packages/core/components/controls.js, packages/core/components/editorial-pieces.js, packages/core/components/reader.js
<section class="pieza ancho" id="version-comparison-example"><p class="ceja">Revisión editorial · ejemplo</p><h3>De una afirmación a un supuesto explícito</h3><div class="cards-trazadas cards-abiertas"><article><p class="ceja">Antes · v2 ilustrativa</p><blockquote>La demanda permite iniciar el piloto.</blockquote><p>Problema: presenta una conclusión sin fuente.</p></article><article><p class="ceja">Propuesta · v3 ilustrativa</p><blockquote>El piloto depende de validar la demanda prevista. Todavía falta una fuente con período y denominador.</blockquote><p>El cambio aclara el límite; no fabrica evidencia.</p></article></div><details><summary>Revisión y trazabilidad</summary><p>Motivo: comentario sobre el supuesto. Estado: propuesta, no aceptada. Una comparación real debe enlazar versiones inmutables y conservar la cita original.</p></details></section>Capítulo 05 / 09
Valores alcanzables, fuentes visibles y alternativas en tabla.
Componente / Barras
| Actividad | Horas |
|---|---|
| Investigar | 60 h |
| Construir | 25 h |
| Revisar | 15 h |
| Ajuste de registro | −10 h |
Use and limits: Compare magnitudes in one unit. Zero stays in the domain; negatives and up to four grouped series are supported. Up to 500 rows; for many categories prefer a sortable table. The drawing uses the measured width with 12 px text; below 480 px each category label moves above its bars. This is not a stacked or normalized percentage chart: use the column chart for real totals.
Bar charts measure their container, wrap category labels and redraw when a hidden chapter opens or the viewport changes. Numeric labels, the tip (pointer, keyboard and touch), CSV/SVG export and the original table remain available; no horizontal scroll is needed at 320 px. The layout keeps a shared zero baseline for positive and negative values.
Dependencias: packages/core/styles/fonts.css, packages/core/styles/artifact.css, packages/core/components/interface.js, packages/core/components/audio.js, packages/core/components/controls.js, packages/core/components/editorial-pieces.js, packages/core/components/reader.js, packages/core/components/chart-core.js, packages/core/components/charts.js
<figure class="ancho" id="barras-ejemplo" data-grafica="barras" data-unidad="Horas">
<details open><summary>Ver los datos de balance de horas</summary>
<div class="tabla-caja" tabindex="0" role="region" aria-label="Balance de horas, tabla desplazable">
<table><caption>Balance de horas</caption>
<thead><tr><th scope="col">Actividad</th><th scope="col">Horas</th></tr></thead>
<tbody><tr><th scope="row">Investigar</th><td data-valor="60">60 h</td></tr>
<tr><th scope="row">Construir</th><td data-valor="25">25 h</td></tr>
<tr><th scope="row">Revisar</th><td data-valor="15">15 h</td></tr>
<tr><th scope="row">Ajuste de registro</th><td data-valor="-10">−10 h</td></tr></tbody>
</table>
</div>
</details>
<figcaption>Datos ilustrativos; corte 13-sep-2026.</figcaption>
</figure>Componente / Columnas agrupadas o apiladas
| Trimestre | Web | App | Aliados |
|---|---|---|---|
| T1 2026 | 420 | 310 | 95 |
| T2 2026 | 465 | 380 | 120 |
| T3 2026 | 440 | 455 | 160 |
| T4 2026 | 390 | 520 | Sin dato |
Use and limits: Compare amounts across ordered categories (periods, stages) in one unit. Grouped by default; data-apilado="si" stacks series when their sum is a real total (counts, money, hours), never for ratios or percentages. Stacking rejects negative values. Up to eight series and 40 categories; long category names are abbreviated in the axis and stay complete in the tip and table. A missing cell is drawn as a flat mark and its column total is reported as incomplete, not as zero. Needs chart-core.js before charts.js. For many categories or long names prefer horizontal bars.
Dependencias: packages/core/styles/fonts.css, packages/core/styles/artifact.css, packages/core/components/interface.js, packages/core/components/audio.js, packages/core/components/controls.js, packages/core/components/editorial-pieces.js, packages/core/components/reader.js, packages/core/components/chart-core.js, packages/core/components/charts.js
<figure class="ancho" id="columnas-ejemplo" data-grafica="columnas" data-apilado="si" data-unidad="pedidos">
<details open><summary>Ver los datos de pedidos por canal</summary>
<div class="tabla-caja" tabindex="0" role="region" aria-label="Pedidos por canal y trimestre, tabla desplazable">
<table><caption>Pedidos por canal y trimestre</caption>
<thead><tr><th scope="col">Trimestre</th><th scope="col">Web</th><th scope="col">App</th><th scope="col">Aliados</th></tr></thead>
<tbody><tr><th scope="row">T1 2026</th><td data-valor="420">420</td><td data-valor="310">310</td><td data-valor="95">95</td></tr>
<tr><th scope="row">T2 2026</th><td data-valor="465">465</td><td data-valor="380">380</td><td data-valor="120">120</td></tr>
<tr><th scope="row">T3 2026</th><td data-valor="440">440</td><td data-valor="455">455</td><td data-valor="160">160</td></tr>
<tr><th scope="row">T4 2026</th><td data-valor="390">390</td><td data-valor="520">520</td><td data-valor="">Sin dato</td></tr></tbody>
</table>
</div>
</details>
<figcaption>Datos ilustrativos, pedidos contados por canal; no son cifras de ninguna empresa. T4 no informa aliados: su total queda incompleto, no se completa con cero.</figcaption>
</figure>Componente / Antes y después
| Zona | Antes | Después |
|---|---|---|
| Norte | 58 min | 44 min |
| Centro | 41 min | 38 min |
| Sur | 66 min | 49 min |
| Occidente | 47 min | 52 min |
| Aeropuerto | 35 min | Sin dato |
Use and limits: Show the change of one measure between two moments for up to 30 rows: label, before, after, in the same unit. The axis does not need zero because position, not length, carries the value. The change column shows the absolute difference; the tip adds the percentage, which is undefined when the base is zero. Circle = before, square = after; series can be isolated from the legend. A missing value is named, never drawn at zero. Needs chart-core.js before charts.js. Do not use for more than two moments: use lines.
Dependencias: packages/core/styles/fonts.css, packages/core/styles/artifact.css, packages/core/components/interface.js, packages/core/components/audio.js, packages/core/components/controls.js, packages/core/components/editorial-pieces.js, packages/core/components/reader.js, packages/core/components/chart-core.js, packages/core/components/charts.js
<figure class="ancho" id="cambio-ejemplo" data-grafica="cambio" data-unidad="minutos">
<details open><summary>Ver los datos de tiempo de entrega por zona</summary>
<div class="tabla-caja" tabindex="0" role="region" aria-label="Tiempo de entrega antes y después, tabla desplazable">
<table><caption>Tiempo mediano de entrega antes y después de reordenar rutas</caption>
<thead><tr><th scope="col">Zona</th><th scope="col">Antes</th><th scope="col">Después</th></tr></thead>
<tbody><tr><th scope="row">Norte</th><td data-valor="58">58 min</td><td data-valor="44">44 min</td></tr>
<tr><th scope="row">Centro</th><td data-valor="41">41 min</td><td data-valor="38">38 min</td></tr>
<tr><th scope="row">Sur</th><td data-valor="66">66 min</td><td data-valor="49">49 min</td></tr>
<tr><th scope="row">Occidente</th><td data-valor="47">47 min</td><td data-valor="52">52 min</td></tr>
<tr><th scope="row">Aeropuerto</th><td data-valor="35">35 min</td><td data-valor="">Sin dato</td></tr></tbody>
</table>
</div>
</details>
<figcaption>Datos ilustrativos: mediana de dos semanas antes y dos después del cambio, misma definición de entrega. La diferencia no prueba causalidad.</figcaption>
</figure>Componente / Avance frente a meta
| Sede | Logrado | Meta | Bajo hasta | Aceptable hasta | Escala hasta |
|---|---|---|---|---|---|
| Bogotá | 128 | 150 | 90 | 140 | 180 |
| Medellín | 96 | 90 | 60 | 85 | 120 |
| Cali | 41 | 70 | 40 | 65 | 90 |
Use and limits: Compare an achieved value with its target for up to 12 rows sharing one unit: label, value, target and up to three increasing qualitative thresholds (for example low, acceptable, scale). Values and targets may be negative; the axis extends below zero. Thresholds stay non-negative. Bands are declared by the author and are not derived from data. The tip states value, target and the share of the target per row; shares are never summed or averaged. A target of zero makes the share undefined. Needs chart-core.js before charts.js. Prefer a table when rows use different units.
Dependencias: packages/core/styles/fonts.css, packages/core/styles/artifact.css, packages/core/components/interface.js, packages/core/components/audio.js, packages/core/components/controls.js, packages/core/components/editorial-pieces.js, packages/core/components/reader.js, packages/core/components/chart-core.js, packages/core/components/charts.js
<figure class="ancho" id="meta-ejemplo" data-grafica="meta" data-unidad="clientes">
<details open><summary>Ver los datos de clientes nuevos frente a la meta</summary>
<div class="tabla-caja" tabindex="0" role="region" aria-label="Clientes nuevos frente a la meta, tabla desplazable">
<table><caption>Clientes nuevos del trimestre frente a la meta</caption>
<thead><tr><th scope="col">Sede</th><th scope="col">Logrado</th><th scope="col">Meta</th><th scope="col">Bajo hasta</th><th scope="col">Aceptable hasta</th><th scope="col">Escala hasta</th></tr></thead>
<tbody><tr><th scope="row">Bogotá</th><td data-valor="128">128</td><td data-valor="150">150</td><td data-valor="90">90</td><td data-valor="140">140</td><td data-valor="180">180</td></tr>
<tr><th scope="row">Medellín</th><td data-valor="96">96</td><td data-valor="90">90</td><td data-valor="60">60</td><td data-valor="85">85</td><td data-valor="120">120</td></tr>
<tr><th scope="row">Cali</th><td data-valor="41">41</td><td data-valor="70">70</td><td data-valor="40">40</td><td data-valor="65">65</td><td data-valor="90">90</td></tr></tbody>
</table>
</div>
</details>
<figcaption>Datos ilustrativos. La barra es lo logrado; la marca vertical, la meta; las bandas, umbrales cualitativos declarados por el equipo. Cada fila es una sede: los porcentajes de avance no se suman ni promedian.</figcaption>
</figure>Componente / Líneas
| Etapa | Equipo A | Equipo B |
|---|---|---|
| Entrada | 12 h | 16 h |
| Revisión | 8 h | 11 h |
| Validación | Sin dato | 9 h |
| Cierre | 6 h | 7 h |
Use and limits: Follow an ordered sequence of comparable categories. X positions are equally spaced, not dated intervals. Missing values break the line instead of becoming zero. Y covers the observed domain and need not start at zero. Up to four series; line styles and legend numbers distinguish them. No smoothing or inferred confidence intervals. Use time-series for irregular dates.
Dependencias: packages/core/styles/fonts.css, packages/core/styles/artifact.css, packages/core/components/interface.js, packages/core/components/audio.js, packages/core/components/controls.js, packages/core/components/editorial-pieces.js, packages/core/components/reader.js, packages/core/components/chart-core.js, packages/core/components/charts.js
<figure class="ancho" id="lineas-ejemplo" data-grafica="lineas" data-unidad="Horas">
<details open><summary>Ver los datos de tiempo de resolución</summary>
<div class="tabla-caja" tabindex="0" role="region" aria-label="Tiempo de resolución, tabla desplazable">
<table><caption>Tiempo de resolución</caption>
<thead><tr><th scope="col">Etapa</th><th scope="col">Equipo A</th><th scope="col">Equipo B</th></tr></thead>
<tbody><tr><th scope="row">Entrada</th><td data-valor="12">12 h</td><td data-valor="16">16 h</td></tr>
<tr><th scope="row">Revisión</th><td data-valor="8">8 h</td><td data-valor="11">11 h</td></tr>
<tr><th scope="row">Validación</th><td data-valor="">Sin dato</td><td data-valor="9">9 h</td></tr>
<tr><th scope="row">Cierre</th><td data-valor="6">6 h</td><td data-valor="7">7 h</td></tr></tbody>
</table>
</div>
</details>
<figcaption>Datos ilustrativos; corte 13-sep-2026.</figcaption>
</figure>Componente / Serie temporal
| Día UTC | Solicitudes |
|---|---|
| 80 solicitudes | |
| 100 solicitudes | |
| 90 solicitudes | |
| 120 solicitudes |
Use and limits: Compare dated observations with UTC millisecond positions. Dates must be valid, unique, increasing ISO days. Absolute change is current minus previous; relative change divides by the absolute previous value. A zero baseline makes percentage change undefined; missing values prevent comparison. Name the compared records. No aggregation, timezone repair, causal inference or automatic judgment that an increase is good.
Dependencias: packages/core/styles/fonts.css, packages/core/styles/artifact.css, packages/core/components/interface.js, packages/core/components/audio.js, packages/core/components/controls.js, packages/core/components/editorial-pieces.js, packages/core/components/reader.js, packages/core/components/chart-core.js, packages/core/components/charts.js
<figure class="ancho" id="temporal-ejemplo" data-grafica="temporal" data-unidad="Solicitudes">
<details open><summary>Ver los datos de solicitudes por día</summary>
<div class="tabla-caja" tabindex="0" role="region" aria-label="Solicitudes por día, tabla desplazable">
<table><caption>Solicitudes por día</caption>
<thead><tr><th scope="col">Día UTC</th><th scope="col">Solicitudes</th></tr></thead>
<tbody><tr><th scope="row"><time datetime="2026-09-01">1 sep</time></th><td data-valor="80">80 solicitudes</td></tr>
<tr><th scope="row"><time datetime="2026-09-03">3 sep</time></th><td data-valor="100">100 solicitudes</td></tr>
<tr><th scope="row"><time datetime="2026-09-08">8 sep</time></th><td data-valor="90">90 solicitudes</td></tr>
<tr><th scope="row"><time datetime="2026-09-13">13 sep</time></th><td data-valor="120">120 solicitudes</td></tr></tbody>
</table>
</div>
</details>
<figcaption>Ejemplo: conteos diarios independientes. Último registro frente al registro anterior (13 sep frente a 8 sep), no totales de ventanas de distinta duración.</figcaption>
</figure>Componente / Dispersión
| Muestra | Carga (solicitudes/s) | Latencia (ms) |
|---|---|---|
| A | 10 | 80 ms |
| B | 20 | 95 ms |
| C | 35 | 140 ms |
| D | 50 | 170 ms |
| E | 65 | 165 ms |
Use and limits: Explore paired numeric X/Y observations with explicit units. Both coordinates must be finite; up to 500 points. Coincident points overlap but remain distinct in the source table. No regression, jitter, uncertainty estimation or causal inference.
Dependencias: packages/core/styles/fonts.css, packages/core/styles/artifact.css, packages/core/components/interface.js, packages/core/components/audio.js, packages/core/components/controls.js, packages/core/components/editorial-pieces.js, packages/core/components/reader.js, packages/core/components/chart-core.js, packages/core/components/charts.js
<figure class="ancho" id="dispersion-ejemplo" data-grafica="dispersion" >
<details open><summary>Ver los datos de carga y latencia</summary>
<div class="tabla-caja" tabindex="0" role="region" aria-label="Carga y latencia, tabla desplazable">
<table><caption>Carga y latencia</caption>
<thead><tr><th scope="col">Muestra</th><th scope="col">Carga (solicitudes/s)</th><th scope="col">Latencia (ms)</th></tr></thead>
<tbody><tr><th scope="row">A</th><td data-valor="10">10</td><td data-valor="80">80 ms</td></tr>
<tr><th scope="row">B</th><td data-valor="20">20</td><td data-valor="95">95 ms</td></tr>
<tr><th scope="row">C</th><td data-valor="35">35</td><td data-valor="140">140 ms</td></tr>
<tr><th scope="row">D</th><td data-valor="50">50</td><td data-valor="170">170 ms</td></tr>
<tr><th scope="row">E</th><td data-valor="65">65</td><td data-valor="165">165 ms</td></tr></tbody>
</table>
</div>
</details>
<figcaption>Datos ilustrativos; corte 13-sep-2026.</figcaption>
</figure>Componente / Distribución
| Duración (min) | Sesiones | Sesiones/min |
|---|---|---|
| 0 a menos de 10 min | 5 | 0,5 |
| 10 a menos de 20 min | 15 | 1,5 |
| 20 a 40 min (incluido) | 10 | 0,5 |
<a id="recetas-calor"></a>
Use and limits: Show continuous-variable frequencies in explicit increasing, non-overlapping bins. Frequencies are nonnegative integers. Density is frequency divided by bin width; with unequal widths, area represents count. Declare boundary inclusion in the table. The module does not bin raw samples or estimate a probability curve.
Dependencias: packages/core/styles/fonts.css, packages/core/styles/artifact.css, packages/core/components/interface.js, packages/core/components/audio.js, packages/core/components/controls.js, packages/core/components/editorial-pieces.js, packages/core/components/reader.js, packages/core/components/chart-core.js, packages/core/components/charts.js
<figure class="ancho" id="distribucion-ejemplo" data-grafica="distribucion">
<details open><summary>Ver los datos de duración</summary>
<div class="tabla-caja" tabindex="0" role="region" aria-label="Distribución de duración, tabla desplazable">
<table><caption>Duración de 30 sesiones</caption>
<thead><tr><th scope="col">Duración (min)</th><th scope="col">Sesiones</th><th scope="col">Sesiones/min</th></tr></thead>
<tbody>
<tr><th scope="row" data-desde="0" data-hasta="10">0 a menos de 10 min</th><td data-valor="5">5</td><td data-valor="">0,5</td></tr>
<tr><th scope="row" data-desde="10" data-hasta="20">10 a menos de 20 min</th><td data-valor="15">15</td><td data-valor="">1,5</td></tr>
<tr><th scope="row" data-desde="20" data-hasta="40">20 a 40 min (incluido)</th><td data-valor="10">10</td><td data-valor="">0,5</td></tr>
</tbody>
</table>
</div>
</details>
<figcaption>Ejemplo de 30 sesiones. Altura = frecuencia / ancho del intervalo; el área representa la frecuencia. El último intervalo tiene el doble de ancho.</figcaption>
</figure>Componente / Mapa de calor
| Actividad | Lun | Mar | Mié | Jue | Vie |
|---|---|---|---|---|---|
| Investigar | 0 min | 30 min | 60 min | 90 min | 120 min |
| Construir | 150 min | 120 min | 90 min | Sin dato | 30 min |
| Revisar | 10 min | 20 min | 40 min | 80 min | 110 min |
<a id="recetas-tablas"></a>
Use and limits: Compare intensity across two discrete dimensions. SVG matrix with row and column axes at the measured width; the coloured table stays as the accessible mode. data-umbrales declares 3–6 increasing boundaries (2–5 levels), with the maximum included in the final level; without it, boundaries are data quantiles and the legend says so. data-centro makes a diverging scale around a declared midpoint. Out-of-domain data produces an error while preserving the source table, never silent saturation. Missing cells are hatched and labelled «Sin dato ≠ 0». Up to 31×31 cells without page scroll: values print inside cells only when they fit, otherwise the tip (arrows move by row and column) gives them. Each cell retains its value; no hidden row-specific scales or gradient encoding.
Dependencias: packages/core/styles/fonts.css, packages/core/styles/artifact.css, packages/core/components/interface.js, packages/core/components/audio.js, packages/core/components/controls.js, packages/core/components/editorial-pieces.js, packages/core/components/reader.js, packages/core/components/chart-core.js, packages/core/components/charts.js
<figure class="ancho" id="calor-ejemplo" data-grafica="calor" data-umbrales="0,30,60,90,120,150" data-unidad="Minutos">
<details open><summary>Ver los datos de tiempo por actividad y día</summary>
<div class="tabla-caja" tabindex="0" role="region" aria-label="Tiempo por actividad y día, tabla desplazable">
<table><caption>Tiempo por actividad y día</caption>
<thead><tr><th scope="col">Actividad</th><th scope="col">Lun</th><th scope="col">Mar</th><th scope="col">Mié</th><th scope="col">Jue</th><th scope="col">Vie</th></tr></thead>
<tbody><tr><th scope="row">Investigar</th><td data-valor="0">0 min</td><td data-valor="30">30 min</td><td data-valor="60">60 min</td><td data-valor="90">90 min</td><td data-valor="120">120 min</td></tr>
<tr><th scope="row">Construir</th><td data-valor="150">150 min</td><td data-valor="120">120 min</td><td data-valor="90">90 min</td><td data-valor="">Sin dato</td><td data-valor="30">30 min</td></tr>
<tr><th scope="row">Revisar</th><td data-valor="10">10 min</td><td data-valor="20">20 min</td><td data-valor="40">40 min</td><td data-valor="80">80 min</td><td data-valor="110">110 min</td></tr></tbody>
</table>
</div>
</details>
<figcaption>Ejemplo ilustrativo, minutos por día. Límites de clase: [0,30), [30,60), [60,90), [90,120), [120,150]. Ausencia distinta de cero.</figcaption>
</figure>Componente / Cascada de cantidades
Horas disponibles, ajustes y trabajo añadido. Cada tramo empieza donde termina el anterior.
| Concepto | Cambio (h) | Acumulado (h) |
|---|---|---|
| Capacidad inicial | +120 | 120 |
| Mantenimiento | −30 | 90 |
| Apoyo adicional | +20 | 110 |
| Revisión | −15 | 95 |
| Resultado | Horas netas | 95 |
Use and limits: Explain a total through positive and negative contributions in one unit. Three columns, 1–60 rows, finite values and running totals within ±10^9. The first row is a change from zero; no intermediate subtotals or resets. The module calculates the third column rather than reading it as input. Zero and every cumulative extreme stay in the domain. Keep the visible table; the drawing uses the measured width and moves labels above bars below 480 px. Do not add rates, percentages or different currencies.
Dependencias: packages/core/styles/fonts.css, packages/core/styles/artifact.css, packages/core/components/interface.js, packages/core/components/audio.js, packages/core/components/controls.js, packages/core/components/editorial-pieces.js, packages/core/components/reader.js, packages/core/components/chart-core.js, packages/core/components/reports.js
<figure class="pieza ancho" id="cascada-ejemplo" data-reporte="cascada">
<h3>Cómo se llega al resultado</h3>
<p>Horas disponibles, ajustes y trabajo añadido. Cada tramo empieza donde termina el anterior.</p>
<div class="tabla-caja" tabindex="0" role="region" aria-label="Balance de capacidad en horas, desplazable">
<table><caption>Balance ilustrativo · eje X en horas</caption>
<thead><tr><th scope="col">Concepto</th><th scope="col">Cambio (h)</th><th scope="col">Acumulado (h)</th></tr></thead>
<tbody>
<tr><th scope="row">Capacidad inicial</th><td data-valor="120">+120</td><td>120</td></tr>
<tr><th scope="row">Mantenimiento</th><td data-valor="-30">−30</td><td>90</td></tr>
<tr><th scope="row">Apoyo adicional</th><td data-valor="20">+20</td><td>110</td></tr>
<tr><th scope="row">Revisión</th><td data-valor="-15">−15</td><td>95</td></tr>
</tbody>
<tfoot><tr><th scope="row">Resultado</th><td>Horas netas</td><td>95</td></tr></tfoot>
</table>
</div>
<figcaption>Ejemplo: 120 − 30 + 20 − 15 = 95 h. Signos y tabla distinguen aumentos y reducciones sin depender del color.</figcaption>
</figure>Componente / Pequeños múltiples
Solicitudes por semana. Los tres paneles comparten el eje Y; el eje X corresponde al orden de la tabla.
| Período | Bogotá | Medellín | Cali |
|---|---|---|---|
| 1 · Semana 1 | 40 | 20 | 30 |
| 2 · Semana 2 | 60 | 30 | Sin dato |
| 3 · Semana 3 | 50 | 35 | 40 |
| 4 · Semana 4 | 80 | 40 | 45 |
Use and limits: Compare up to four groups without overlapping their lines. Use the same 2–60 equally spaced periods for every group; irregular dates are unsupported. Finite values up to ±10^9, with missing distinct from zero. Panels draw at their measured width and share one 1-2-5 axis; the first and last period names label the horizontal axis. An empty series has an explicit 0–1 auxiliary domain and no invented points.
Dependencias: packages/core/styles/fonts.css, packages/core/styles/artifact.css, packages/core/components/interface.js, packages/core/components/audio.js, packages/core/components/controls.js, packages/core/components/editorial-pieces.js, packages/core/components/reader.js, packages/core/components/chart-core.js, packages/core/components/reports.js
<figure class="pieza amplio" id="multiples-ejemplo" data-reporte="multiples">
<h3>La misma pregunta en tres sedes</h3>
<p>Solicitudes por semana. Los tres paneles comparten el eje Y; el eje X corresponde al orden de la tabla.</p>
<div class="tabla-caja" tabindex="0" role="region" aria-label="Solicitudes por sede y semana, desplazable">
<table><caption>Solicitudes semanales · ejemplo · eje Y en solicitudes</caption>
<thead><tr><th scope="col">Período</th><th scope="col">Bogotá</th><th scope="col">Medellín</th><th scope="col">Cali</th></tr></thead>
<tbody>
<tr><th scope="row">1 · Semana 1</th><td data-valor="40">40</td><td data-valor="20">20</td><td data-valor="30">30</td></tr>
<tr><th scope="row">2 · Semana 2</th><td data-valor="60">60</td><td data-valor="30">30</td><td data-valor="">Sin dato</td></tr>
<tr><th scope="row">3 · Semana 3</th><td data-valor="50">50</td><td data-valor="35">35</td><td data-valor="40">40</td></tr>
<tr><th scope="row">4 · Semana 4</th><td data-valor="80">80</td><td data-valor="40">40</td><td data-valor="45">45</td></tr>
</tbody>
</table>
</div>
<figcaption>Datos ilustrativos. Escala común de 0 a 80; sin dato corta el trazo. La pendiente no demuestra causalidad.</figcaption>
</figure>Componente / Calendario de actividad
| Fecha UTC | Conciliaciones |
|---|---|
| 2026-05-25 | 0 |
| 2026-05-26 | 7 |
| 2026-05-27 | 14 |
| 2026-05-28 | 21 |
| 2026-05-29 | 3 |
| 2026-05-30 | 0 |
| 2026-05-31 | 0 |
| 2026-06-01 | 2 |
| 2026-06-02 | 9 |
| 2026-06-03 | 16 |
| 2026-06-04 | 23 |
| 2026-06-05 | 5 |
| 2026-06-06 | 0 |
| 2026-06-07 | 0 |
| 2026-06-08 | 4 |
| 2026-06-09 | 11 |
| 2026-06-10 | 18 |
| 2026-06-11 | 0 |
| 2026-06-12 | 7 |
| 2026-06-13 | 0 |
| 2026-06-14 | 0 |
| 2026-06-15 | 6 |
| 2026-06-16 | 13 |
| 2026-06-17 | 20 |
| 2026-06-18 | 2 |
| 2026-06-19 | 9 |
| 2026-06-20 | 0 |
| 2026-06-21 | 0 |
| 2026-06-22 | 8 |
| 2026-06-23 | 15 |
| 2026-06-24 | 22 |
| 2026-06-27 | 0 |
| 2026-06-28 | 0 |
| 2026-06-29 | 10 |
| 2026-06-30 | 17 |
| 2026-07-01 | 24 |
| 2026-07-02 | 6 |
| 2026-07-03 | 13 |
| 2026-07-04 | 0 |
| 2026-07-05 | 0 |
| 2026-07-06 | 12 |
| 2026-07-07 | 19 |
| 2026-07-08 | 1 |
| 2026-07-09 | 8 |
| 2026-07-10 | 15 |
| 2026-07-11 | 0 |
| 2026-07-12 | 0 |
| 2026-07-13 | 14 |
| 2026-07-14 | 21 |
| 2026-07-15 | 3 |
| 2026-07-16 | 10 |
| 2026-07-17 | 17 |
| 2026-07-18 | 0 |
| 2026-07-19 | 0 |
| 2026-07-20 | 16 |
| 2026-07-21 | 23 |
| 2026-07-22 | 5 |
| 2026-07-23 | 12 |
| 2026-07-24 | 19 |
| 2026-07-25 | 0 |
| 2026-07-26 | 0 |
| 2026-07-27 | 18 |
| 2026-07-28 | 0 |
| 2026-07-29 | 7 |
| 2026-07-30 | 14 |
| 2026-07-31 | 21 |
| 2026-08-01 | 0 |
| 2026-08-02 | 0 |
| 2026-08-03 | 20 |
| 2026-08-04 | 2 |
| 2026-08-05 | 9 |
| 2026-08-06 | 16 |
| 2026-08-07 | 23 |
| 2026-08-08 | 0 |
| 2026-08-09 | 0 |
| 2026-08-10 | 22 |
| 2026-08-11 | 4 |
| 2026-08-12 | 11 |
| 2026-08-14 | 0 |
| 2026-08-15 | 0 |
| 2026-08-16 | 0 |
| 2026-08-17 | 24 |
| 2026-08-18 | 6 |
| 2026-08-19 | 13 |
| 2026-08-20 | 20 |
| 2026-08-21 | 2 |
| 2026-08-22 | 0 |
| 2026-08-23 | 0 |
| 2026-08-24 | 1 |
| 2026-08-25 | 8 |
| 2026-08-26 | 15 |
| 2026-08-27 | 22 |
| 2026-08-28 | 4 |
| 2026-08-29 | 0 |
| 2026-08-30 | 0 |
| 2026-08-31 | 3 |
| 2026-09-01 | 10 |
| 2026-09-02 | 17 |
| 2026-09-03 | 24 |
| 2026-09-04 | 6 |
| 2026-09-05 | 0 |
| 2026-09-06 | 0 |
| 2026-09-07 | 5 |
| 2026-09-08 | 12 |
| 2026-09-09 | 19 |
| 2026-09-10 | 1 |
| 2026-09-11 | 8 |
| 2026-09-12 | 0 |
| 2026-09-13 | 0 |
Use and limits: Show continuity and gaps in daily activity. analytics.js accepts 1–366 unique UTC ISO dates over at most 366 consecutive days, with nonnegative integer counts. Missing rows use a diagonal rather than implied zero. Weeks start Monday; thresholds derive from the observed maximum, not percentiles. A selector exposes every day's values. No GitHub connection or productivity inference.
Dependencias: packages/core/styles/fonts.css, packages/core/styles/artifact.css, packages/core/components/interface.js, packages/core/components/audio.js, packages/core/components/controls.js, packages/core/components/editorial-pieces.js, packages/core/components/reader.js, packages/core/components/chart-core.js, packages/core/components/analytics.js
<figure class="ancho" id="analitica-calendario" data-analitica="calendario" data-unidad="conciliaciones">
<details><summary>Consultar los 109 días registrados</summary>
<div class="tabla-caja" tabindex="0" role="region" aria-label="Datos de Calendario de actividad, desplazables">
<table><caption>Calendario de actividad</caption>
<thead><tr><th scope="col">Fecha UTC</th><th scope="col">Conciliaciones</th></tr></thead>
<tbody>
<tr><th scope="row">2026-05-25</th><td data-valor="0">0</td></tr>
<tr><th scope="row">2026-05-26</th><td data-valor="7">7</td></tr>
<tr><th scope="row">2026-05-27</th><td data-valor="14">14</td></tr>
<tr><th scope="row">2026-05-28</th><td data-valor="21">21</td></tr>
<tr><th scope="row">2026-05-29</th><td data-valor="3">3</td></tr>
<tr><th scope="row">2026-05-30</th><td data-valor="0">0</td></tr>
<tr><th scope="row">2026-05-31</th><td data-valor="0">0</td></tr>
<tr><th scope="row">2026-06-01</th><td data-valor="2">2</td></tr>
<tr><th scope="row">2026-06-02</th><td data-valor="9">9</td></tr>
<tr><th scope="row">2026-06-03</th><td data-valor="16">16</td></tr>
<tr><th scope="row">2026-06-04</th><td data-valor="23">23</td></tr>
<tr><th scope="row">2026-06-05</th><td data-valor="5">5</td></tr>
<tr><th scope="row">2026-06-06</th><td data-valor="0">0</td></tr>
<tr><th scope="row">2026-06-07</th><td data-valor="0">0</td></tr>
<tr><th scope="row">2026-06-08</th><td data-valor="4">4</td></tr>
<tr><th scope="row">2026-06-09</th><td data-valor="11">11</td></tr>
<tr><th scope="row">2026-06-10</th><td data-valor="18">18</td></tr>
<tr><th scope="row">2026-06-11</th><td data-valor="0">0</td></tr>
<tr><th scope="row">2026-06-12</th><td data-valor="7">7</td></tr>
<tr><th scope="row">2026-06-13</th><td data-valor="0">0</td></tr>
<tr><th scope="row">2026-06-14</th><td data-valor="0">0</td></tr>
<tr><th scope="row">2026-06-15</th><td data-valor="6">6</td></tr>
<tr><th scope="row">2026-06-16</th><td data-valor="13">13</td></tr>
<tr><th scope="row">2026-06-17</th><td data-valor="20">20</td></tr>
<tr><th scope="row">2026-06-18</th><td data-valor="2">2</td></tr>
<tr><th scope="row">2026-06-19</th><td data-valor="9">9</td></tr>
<tr><th scope="row">2026-06-20</th><td data-valor="0">0</td></tr>
<tr><th scope="row">2026-06-21</th><td data-valor="0">0</td></tr>
<tr><th scope="row">2026-06-22</th><td data-valor="8">8</td></tr>
<tr><th scope="row">2026-06-23</th><td data-valor="15">15</td></tr>
<tr><th scope="row">2026-06-24</th><td data-valor="22">22</td></tr>
<tr><th scope="row">2026-06-27</th><td data-valor="0">0</td></tr>
<tr><th scope="row">2026-06-28</th><td data-valor="0">0</td></tr>
<tr><th scope="row">2026-06-29</th><td data-valor="10">10</td></tr>
<tr><th scope="row">2026-06-30</th><td data-valor="17">17</td></tr>
<tr><th scope="row">2026-07-01</th><td data-valor="24">24</td></tr>
<tr><th scope="row">2026-07-02</th><td data-valor="6">6</td></tr>
<tr><th scope="row">2026-07-03</th><td data-valor="13">13</td></tr>
<tr><th scope="row">2026-07-04</th><td data-valor="0">0</td></tr>
<tr><th scope="row">2026-07-05</th><td data-valor="0">0</td></tr>
<tr><th scope="row">2026-07-06</th><td data-valor="12">12</td></tr>
<tr><th scope="row">2026-07-07</th><td data-valor="19">19</td></tr>
<tr><th scope="row">2026-07-08</th><td data-valor="1">1</td></tr>
<tr><th scope="row">2026-07-09</th><td data-valor="8">8</td></tr>
<tr><th scope="row">2026-07-10</th><td data-valor="15">15</td></tr>
<tr><th scope="row">2026-07-11</th><td data-valor="0">0</td></tr>
<tr><th scope="row">2026-07-12</th><td data-valor="0">0</td></tr>
<tr><th scope="row">2026-07-13</th><td data-valor="14">14</td></tr>
<tr><th scope="row">2026-07-14</th><td data-valor="21">21</td></tr>
<tr><th scope="row">2026-07-15</th><td data-valor="3">3</td></tr>
<tr><th scope="row">2026-07-16</th><td data-valor="10">10</td></tr>
<tr><th scope="row">2026-07-17</th><td data-valor="17">17</td></tr>
<tr><th scope="row">2026-07-18</th><td data-valor="0">0</td></tr>
<tr><th scope="row">2026-07-19</th><td data-valor="0">0</td></tr>
<tr><th scope="row">2026-07-20</th><td data-valor="16">16</td></tr>
<tr><th scope="row">2026-07-21</th><td data-valor="23">23</td></tr>
<tr><th scope="row">2026-07-22</th><td data-valor="5">5</td></tr>
<tr><th scope="row">2026-07-23</th><td data-valor="12">12</td></tr>
<tr><th scope="row">2026-07-24</th><td data-valor="19">19</td></tr>
<tr><th scope="row">2026-07-25</th><td data-valor="0">0</td></tr>
<tr><th scope="row">2026-07-26</th><td data-valor="0">0</td></tr>
<tr><th scope="row">2026-07-27</th><td data-valor="18">18</td></tr>
<tr><th scope="row">2026-07-28</th><td data-valor="0">0</td></tr>
<tr><th scope="row">2026-07-29</th><td data-valor="7">7</td></tr>
<tr><th scope="row">2026-07-30</th><td data-valor="14">14</td></tr>
<tr><th scope="row">2026-07-31</th><td data-valor="21">21</td></tr>
<tr><th scope="row">2026-08-01</th><td data-valor="0">0</td></tr>
<tr><th scope="row">2026-08-02</th><td data-valor="0">0</td></tr>
<tr><th scope="row">2026-08-03</th><td data-valor="20">20</td></tr>
<tr><th scope="row">2026-08-04</th><td data-valor="2">2</td></tr>
<tr><th scope="row">2026-08-05</th><td data-valor="9">9</td></tr>
<tr><th scope="row">2026-08-06</th><td data-valor="16">16</td></tr>
<tr><th scope="row">2026-08-07</th><td data-valor="23">23</td></tr>
<tr><th scope="row">2026-08-08</th><td data-valor="0">0</td></tr>
<tr><th scope="row">2026-08-09</th><td data-valor="0">0</td></tr>
<tr><th scope="row">2026-08-10</th><td data-valor="22">22</td></tr>
<tr><th scope="row">2026-08-11</th><td data-valor="4">4</td></tr>
<tr><th scope="row">2026-08-12</th><td data-valor="11">11</td></tr>
<tr><th scope="row">2026-08-14</th><td data-valor="0">0</td></tr>
<tr><th scope="row">2026-08-15</th><td data-valor="0">0</td></tr>
<tr><th scope="row">2026-08-16</th><td data-valor="0">0</td></tr>
<tr><th scope="row">2026-08-17</th><td data-valor="24">24</td></tr>
<tr><th scope="row">2026-08-18</th><td data-valor="6">6</td></tr>
<tr><th scope="row">2026-08-19</th><td data-valor="13">13</td></tr>
<tr><th scope="row">2026-08-20</th><td data-valor="20">20</td></tr>
<tr><th scope="row">2026-08-21</th><td data-valor="2">2</td></tr>
<tr><th scope="row">2026-08-22</th><td data-valor="0">0</td></tr>
<tr><th scope="row">2026-08-23</th><td data-valor="0">0</td></tr>
<tr><th scope="row">2026-08-24</th><td data-valor="1">1</td></tr>
<tr><th scope="row">2026-08-25</th><td data-valor="8">8</td></tr>
<tr><th scope="row">2026-08-26</th><td data-valor="15">15</td></tr>
<tr><th scope="row">2026-08-27</th><td data-valor="22">22</td></tr>
<tr><th scope="row">2026-08-28</th><td data-valor="4">4</td></tr>
<tr><th scope="row">2026-08-29</th><td data-valor="0">0</td></tr>
<tr><th scope="row">2026-08-30</th><td data-valor="0">0</td></tr>
<tr><th scope="row">2026-08-31</th><td data-valor="3">3</td></tr>
<tr><th scope="row">2026-09-01</th><td data-valor="10">10</td></tr>
<tr><th scope="row">2026-09-02</th><td data-valor="17">17</td></tr>
<tr><th scope="row">2026-09-03</th><td data-valor="24">24</td></tr>
<tr><th scope="row">2026-09-04</th><td data-valor="6">6</td></tr>
<tr><th scope="row">2026-09-05</th><td data-valor="0">0</td></tr>
<tr><th scope="row">2026-09-06</th><td data-valor="0">0</td></tr>
<tr><th scope="row">2026-09-07</th><td data-valor="5">5</td></tr>
<tr><th scope="row">2026-09-08</th><td data-valor="12">12</td></tr>
<tr><th scope="row">2026-09-09</th><td data-valor="19">19</td></tr>
<tr><th scope="row">2026-09-10</th><td data-valor="1">1</td></tr>
<tr><th scope="row">2026-09-11</th><td data-valor="8">8</td></tr>
<tr><th scope="row">2026-09-12</th><td data-valor="0">0</td></tr>
<tr><th scope="row">2026-09-13</th><td data-valor="0">0</td></tr>
</tbody>
</table>
</div>
</details>
<figcaption>Datos ficticios, 25 may–13 sep 2026. Intensidad diaria, cero distinto de ausencia.</figcaption>
</figure>Componente / Torta y donut
| Destino | Millones COP |
|---|---|
| Operación | 48 |
| Reserva | 24 |
| Tecnología | 18 |
| Comisiones | 10 |
Use and limits: Show parts of a positive whole with 1–8 unique nonnegative categories. Zero remains in legend/table without an invented sector. Percentages use the row total, not an external denominator. No negatives or double counting. Eight theme colours plus texture patterns keep slices distinct without colour; names and values remain authoritative. Prefer bars for close comparisons or many categories.
Dependencias: packages/core/styles/fonts.css, packages/core/styles/artifact.css, packages/core/components/interface.js, packages/core/components/audio.js, packages/core/components/controls.js, packages/core/components/editorial-pieces.js, packages/core/components/reader.js, packages/core/components/chart-core.js, packages/core/components/analytics.js
<figure class="ancho" id="analitica-torta" data-analitica="torta" data-unidad="millones COP">
<div class="tabla-caja" tabindex="0" role="region" aria-label="Datos de Torta y donut de composición, desplazables">
<table><caption>Torta y donut de composición</caption>
<thead><tr><th scope="col">Destino</th><th scope="col">Millones COP</th></tr></thead>
<tbody>
<tr><th scope="row">Operación</th><td data-valor="48">48</td></tr>
<tr><th scope="row">Reserva</th><td data-valor="24">24</td></tr>
<tr><th scope="row">Tecnología</th><td data-valor="18">18</td></tr>
<tr><th scope="row">Comisiones</th><td data-valor="10">10</td></tr>
</tbody>
</table>
</div>
<figcaption>Distribución ficticia de 100 millones COP. El botón cambia torta ↔ donut sin cambiar cifras.</figcaption>
</figure>Componente / Áreas apiladas
| Fecha UTC | Servicios | Suscripciones | Comisiones |
|---|---|---|---|
| 2026-04-01 | 24 | 12 | 4 |
| 2026-05-01 | 28 | 16 | 6 |
| 2026-06-01 | 26 | 20 | 7 |
| 2026-07-01 | 35 | 24 | 9 |
| 2026-08-01 | 40 | 28 | 12 |
Use and limits: Show a total and its composition over time. Exactly three additive series in one unit, 2–60 unique ISO dates and nonnegative values. Real date spacing and linear segments connect observations without creating transactions or missing-day data. No mixed currencies. An all-zero total has an explicit auxiliary 0–1 domain. Use lines/small multiples for precise comparison of middle bands.
Dependencias: packages/core/styles/fonts.css, packages/core/styles/artifact.css, packages/core/components/interface.js, packages/core/components/audio.js, packages/core/components/controls.js, packages/core/components/editorial-pieces.js, packages/core/components/reader.js, packages/core/components/chart-core.js, packages/core/components/analytics.js
<figure class="ancho" id="analitica-areas" data-analitica="areas" data-unidad="millones COP">
<div class="tabla-caja" tabindex="0" role="region" aria-label="Datos de Áreas apiladas de ingresos, desplazables">
<table><caption>Áreas apiladas de ingresos</caption>
<thead><tr><th scope="col">Fecha UTC</th><th scope="col">Servicios</th><th scope="col">Suscripciones</th><th scope="col">Comisiones</th></tr></thead>
<tbody>
<tr><th scope="row">2026-04-01</th><td data-valor="24">24</td><td data-valor="12">12</td><td data-valor="4">4</td></tr>
<tr><th scope="row">2026-05-01</th><td data-valor="28">28</td><td data-valor="16">16</td><td data-valor="6">6</td></tr>
<tr><th scope="row">2026-06-01</th><td data-valor="26">26</td><td data-valor="20">20</td><td data-valor="7">7</td></tr>
<tr><th scope="row">2026-07-01</th><td data-valor="35">35</td><td data-valor="24">24</td><td data-valor="9">9</td></tr>
<tr><th scope="row">2026-08-01</th><td data-valor="40">40</td><td data-valor="28">28</td><td data-valor="12">12</td></tr>
</tbody>
</table>
</div>
<figcaption>Ingresos ficticios en millones COP; cada banda suma al total. No representan utilidades.</figcaption>
</figure>Componente / Caja y bigotes
| Zona | Mínimo | Q1 | Mediana | Q3 | Máximo |
|---|---|---|---|---|---|
| Norte | 20 | 32 | 40 | 55 | 90 |
| Centro | 15 | 25 | 32 | 45 | 72 |
| Sur | 25 | 42 | 55 | 68 | 110 |
Use and limits: Compare dispersion and median using five ordered statistics per group. Up to 24 groups, same units and calculation method. Does not derive quartiles from raw samples or identify outliers. Constant groups receive a domain expanded by one on each side. Use distribution for bin counts.
Dependencias: packages/core/styles/fonts.css, packages/core/styles/artifact.css, packages/core/components/interface.js, packages/core/components/audio.js, packages/core/components/controls.js, packages/core/components/editorial-pieces.js, packages/core/components/reader.js, packages/core/components/chart-core.js, packages/core/components/analytics.js
<figure class="ancho" id="analitica-caja" data-analitica="caja" data-unidad="minutos">
<div class="tabla-caja densa" tabindex="0" role="region" aria-label="Datos de Caja y bigotes de entrega, desplazables">
<table><caption>Caja y bigotes de entrega</caption>
<thead><tr><th scope="col">Zona</th><th scope="col">Mínimo</th><th scope="col">Q1</th><th scope="col">Mediana</th><th scope="col">Q3</th><th scope="col">Máximo</th></tr></thead>
<tbody>
<tr><th scope="row">Norte</th><td data-valor="20">20</td><td data-valor="32">32</td><td data-valor="40">40</td><td data-valor="55">55</td><td data-valor="90">90</td></tr>
<tr><th scope="row">Centro</th><td data-valor="15">15</td><td data-valor="25">25</td><td data-valor="32">32</td><td data-valor="45">45</td><td data-valor="72">72</td></tr>
<tr><th scope="row">Sur</th><td data-valor="25">25</td><td data-valor="42">42</td><td data-valor="55">55</td><td data-valor="68">68</td><td data-valor="110">110</td></tr>
</tbody>
</table>
</div>
<figcaption>Resumen ficticio de tiempos de entrega. Bigotes = mínimo y máximo, no 1,5 IQR.</figcaption>
</figure>Componente / Velas OHLC
| Fecha UTC | Apertura | Máximo | Mínimo | Cierre |
|---|---|---|---|---|
| 2026-09-07 | 100 | 112 | 96 | 108 |
| 2026-09-08 | 108 | 115 | 101 | 103 |
| 2026-09-09 | 103 | 111 | 99 | 109 |
| 2026-09-10 | 109 | 118 | 106 | 115 |
| 2026-09-11 | 115 | 119 | 108 | 111 |
Use and limits: Show open, high, low and close for 1–60 unique ISO dates in one unit. Low must not exceed open/close, which must not exceed high. Real temporal positions; constant data uses an auxiliary ±10% or ±1 domain. No market feed or technical indicators. Do not use for undefined opening/closing balances.
Dependencias: packages/core/styles/fonts.css, packages/core/styles/artifact.css, packages/core/components/interface.js, packages/core/components/audio.js, packages/core/components/controls.js, packages/core/components/editorial-pieces.js, packages/core/components/reader.js, packages/core/components/chart-core.js, packages/core/components/analytics.js
<figure class="ancho" id="analitica-velas" data-analitica="velas" data-unidad="índice base 100">
<div class="tabla-caja densa" tabindex="0" role="region" aria-label="Datos de Velas financieras OHLC, desplazables">
<table><caption>Velas financieras OHLC</caption>
<thead><tr><th scope="col">Fecha UTC</th><th scope="col">Apertura</th><th scope="col">Máximo</th><th scope="col">Mínimo</th><th scope="col">Cierre</th></tr></thead>
<tbody>
<tr><th scope="row">2026-09-07</th><td data-valor="100">100</td><td data-valor="112">112</td><td data-valor="96">96</td><td data-valor="108">108</td></tr>
<tr><th scope="row">2026-09-08</th><td data-valor="108">108</td><td data-valor="115">115</td><td data-valor="101">101</td><td data-valor="103">103</td></tr>
<tr><th scope="row">2026-09-09</th><td data-valor="103">103</td><td data-valor="111">111</td><td data-valor="99">99</td><td data-valor="109">109</td></tr>
<tr><th scope="row">2026-09-10</th><td data-valor="109">109</td><td data-valor="118">118</td><td data-valor="106">106</td><td data-valor="115">115</td></tr>
<tr><th scope="row">2026-09-11</th><td data-valor="115">115</td><td data-valor="119">119</td><td data-valor="108">108</td><td data-valor="111">111</td></tr>
</tbody>
</table>
</div>
<figcaption>Serie sintética, no cotización de un activo. Hueca = sube o no cambia; rellena = baja.</figcaption>
</figure>Componente / Mapa de rutas
| Conexión | Lat. origen | Lon. origen | Lat. destino | Lon. destino | Viajes |
|---|---|---|---|---|---|
| Bogotá → Medellín | 4.711 | -74.072 | 6.244 | -75.582 | 80 |
| Bogotá → Cali | 4.711 | -74.072 | 3.452 | -76.532 | 50 |
| Bogotá → Barranquilla | 4.711 | -74.072 | 10.969 | -74.781 | 30 |
Use and limits: Compare up to 24 corridors with a shared linear width scale and nonnegative trip counts. Load geography before analytics. Colombia view is latitude −5…14, longitude −80…−66, with equirectangular projection and schematic curves. Zero trips draws no route. No roads, provider routing, geodesic distances, driver guidance or ETA.
Dependencias: packages/core/styles/fonts.css, packages/core/styles/artifact.css, packages/core/components/interface.js, packages/core/components/audio.js, packages/core/components/controls.js, packages/core/components/editorial-pieces.js, packages/core/components/reader.js, packages/core/components/geography.js, packages/core/components/chart-core.js, packages/core/components/analytics.js
<figure class="ancho" id="analitica-mapa-rutas" data-analitica="rutas" data-unidad="viajes">
<div class="tabla-caja densa" tabindex="0" role="region" aria-label="Datos de Mapa de rutas y volumen, desplazables">
<table><caption>Mapa de rutas y volumen</caption>
<thead><tr><th scope="col">Conexión</th><th scope="col">Lat. origen</th><th scope="col">Lon. origen</th><th scope="col">Lat. destino</th><th scope="col">Lon. destino</th><th scope="col">Viajes</th></tr></thead>
<tbody>
<tr><th scope="row">Bogotá → Medellín</th><td data-valor="4.711">4.711</td><td data-valor="-74.072">-74.072</td><td data-valor="6.244">6.244</td><td data-valor="-75.582">-75.582</td><td data-valor="80">80</td></tr>
<tr><th scope="row">Bogotá → Cali</th><td data-valor="4.711">4.711</td><td data-valor="-74.072">-74.072</td><td data-valor="3.452">3.452</td><td data-valor="-76.532">-76.532</td><td data-valor="50">50</td></tr>
<tr><th scope="row">Bogotá → Barranquilla</th><td data-valor="4.711">4.711</td><td data-valor="-74.072">-74.072</td><td data-valor="10.969">10.969</td><td data-valor="-74.781">-74.781</td><td data-valor="30">30</td></tr>
</tbody>
</table>
</div>
<figcaption>Datos ficticios de logística; no son operaciones de Liftit. Ubicaciones urbanas aproximadas. Contorno: <a href="https://www.naturalearthdata.com/about/terms-of-use/">Natural Earth</a>, dominio público, escala 1:110m.</figcaption>
</figure>Componente / Mapa de volumen
| Sede | Latitud | Longitud | Entregas |
|---|---|---|---|
| Bogotá | 4.711 | -74.072 | 240 |
| Medellín | 6.244 | -75.582 | 180 |
| Cali | 3.452 | -76.532 | 120 |
| Barranquilla | 10.969 | -74.781 | 60 |
Use and limits: Compare absolute values at up to 24 Colombian locations. Area, not radius, encodes volume; radius is proportional to the square root of the ratio to the maximum. Zero has zero area. No clustering, territorial coverage or choropleth. Overlap remains accessible through selector/table. Rates need explicit denominators.
Dependencias: packages/core/styles/fonts.css, packages/core/styles/artifact.css, packages/core/components/interface.js, packages/core/components/audio.js, packages/core/components/controls.js, packages/core/components/editorial-pieces.js, packages/core/components/reader.js, packages/core/components/geography.js, packages/core/components/chart-core.js, packages/core/components/analytics.js
<figure class="ancho" id="analitica-mapa-burbujas" data-analitica="burbujas" data-unidad="entregas">
<div class="tabla-caja" tabindex="0" role="region" aria-label="Datos de Mapa de volumen por sede, desplazables">
<table><caption>Mapa de volumen por sede</caption>
<thead><tr><th scope="col">Sede</th><th scope="col">Latitud</th><th scope="col">Longitud</th><th scope="col">Entregas</th></tr></thead>
<tbody>
<tr><th scope="row">Bogotá</th><td data-valor="4.711">4.711</td><td data-valor="-74.072">-74.072</td><td data-valor="240">240</td></tr>
<tr><th scope="row">Medellín</th><td data-valor="6.244">6.244</td><td data-valor="-75.582">-75.582</td><td data-valor="180">180</td></tr>
<tr><th scope="row">Cali</th><td data-valor="3.452">3.452</td><td data-valor="-76.532">-76.532</td><td data-valor="120">120</td></tr>
<tr><th scope="row">Barranquilla</th><td data-valor="10.969">10.969</td><td data-valor="-74.781">-74.781</td><td data-valor="60">60</td></tr>
</tbody>
</table>
</div>
<figcaption>Datos ficticios de logística; no son operaciones de Liftit. Ubicaciones urbanas aproximadas. Contorno: <a href="https://www.naturalearthdata.com/about/terms-of-use/">Natural Earth</a>, dominio público, escala 1:110m.</figcaption>
</figure>Componente / Attention map de áreas
| Actividad | Horas |
|---|---|
| Investigar | 125Entrevistas y revisión de fuentes durante cuatro semanas ficticias. |
| Construir | 34 |
| Conversar | 20 |
| Documentar | 12 |
| Revisar | 8 |
| Planear | 6 |
| Administrar | 4 |
| Otros | 3 |
Use and limits: Partition a positive total across 1–40 unique categories with finite nonnegative values up to 10^9. Squarified treemap (Bruls et al.) at the measured width, 380 px tall (320 px below 640 px, laid out in rows); every area is exactly proportional to its value. Labels follow the cmrg.me home map: serif 18 px name and 11.5 px mono value, abbreviated by available area (full, short, minimal or none) and never outside their cell. When the smallest tail would be too small to see or focus, it is grouped into one «Otros (n)» cell whose area is the exact sum and whose tip lists every member; the buttons, status and table still expose each category. Zero stays in controls/table with no area. Arrow keys move between cells, Enter pins the tip, Escape closes it; touch pins on tap. data-formato="duration_min" (or duration, duration_h) shows durations; data-atencion-modo="particion" keeps the previous binary layout. Needs chart-core.js. No productivity measurement or app connection; prefer bars for precise rankings.
Dependencias: packages/core/styles/fonts.css, packages/core/styles/artifact.css, packages/core/components/interface.js, packages/core/components/audio.js, packages/core/components/controls.js, packages/core/components/editorial-pieces.js, packages/core/components/reader.js, packages/core/components/chart-core.js, packages/core/components/attention-map.js
<figure class="ancho" id="atencion-ejemplo" data-atencion data-unidad="horas">
<div class="tabla-caja" tabindex="0" role="region" aria-label="Datos del attention map, desplazables">
<table><caption>Dónde se fue la atención</caption><thead><tr><th scope="col">Actividad</th><th scope="col">Horas</th></tr></thead><tbody>
<tr><th scope="row">Investigar</th><td data-valor="125">125<small data-contexto>Entrevistas y revisión de fuentes durante cuatro semanas ficticias.</small></td></tr>
<tr><th scope="row">Construir</th><td data-valor="34">34</td></tr>
<tr><th scope="row">Conversar</th><td data-valor="20">20</td></tr>
<tr><th scope="row">Documentar</th><td data-valor="12">12</td></tr>
<tr><th scope="row">Revisar</th><td data-valor="8">8</td></tr>
<tr><th scope="row">Planear</th><td data-valor="6">6</td></tr>
<tr><th scope="row">Administrar</th><td data-valor="4">4</td></tr>
<tr><th scope="row">Otros</th><td data-valor="3">3</td></tr>
</tbody></table>
</div>
<figcaption>212 horas ficticias. El área representa la proporción del total; no es un registro real de actividad. Selecciona una celda o una categoría para consultar su valor.</figcaption>
</figure>Componente / Flujos Sankey
| Origen | Destino | Millones COP |
|---|---|---|
| Carga urbana | Operación | 65 |
| Carga urbana | Soporte | 10 |
| Carga urbana | Margen | 15 |
| Última milla | Operación | 20 |
| Última milla | Soporte | 5 |
| Última milla | Margen | 5 |
Use and limits: Compare nonnegative flows with a common thickness scale. Two columns only, 1–24 connections, at most eight nodes per column and positive total. Nodes derive from connections; zero has no thickness. No intermediate stages, cycles, negative values, mixed currencies or crossing optimization. Use the table when dense. Conceptual reference: https://github.com/d3/d3-sankey ; the implementation is local and does not load D3. Source data stays in one table (or the image zone list). Declare data-unidad (1–40 characters); numeric magnitude is limited to 10^12. Views round to eight significant digits while source values remain. Load evidence.js; NotaEvidencia.init/get/destroy owns lifecycle. Destroy before changing the source. No network or external libraries; data remains if enhancement fails.
Dependencias: packages/core/styles/fonts.css, packages/core/styles/artifact.css, packages/core/components/interface.js, packages/core/components/audio.js, packages/core/components/controls.js, packages/core/components/editorial-pieces.js, packages/core/components/reader.js, packages/core/components/chart-core.js, packages/core/components/evidence.js
<figure class="amplio" id="evidencia-sankey" data-evidencia="sankey" data-unidad="millones COP">
<div class="tabla-caja densa" role="region" tabindex="0" aria-label="Destino de ingresos de ejemplo, datos desplazables">
<table data-evidencia-datos><caption>Destino de ingresos de ejemplo</caption><thead><tr><th scope="col">Origen</th><th scope="col">Destino</th><th scope="col">Millones COP</th></tr></thead><tbody>
<tr><th scope="row">Carga urbana</th><td>Operación</td><td data-valor="65">65</td></tr>
<tr><th scope="row">Carga urbana</th><td>Soporte</td><td data-valor="10">10</td></tr>
<tr><th scope="row">Carga urbana</th><td>Margen</td><td data-valor="15">15</td></tr>
<tr><th scope="row">Última milla</th><td>Operación</td><td data-valor="20">20</td></tr>
<tr><th scope="row">Última milla</th><td>Soporte</td><td data-valor="5">5</td></tr>
<tr><th scope="row">Última milla</th><td>Margen</td><td data-valor="5">5</td></tr>
</tbody></table>
</div>
<figcaption>Datos ficticios, total 120 millones COP. No representan estados financieros de Liftit o Tikin.</figcaption>
</figure>Componente / Cohortes de recurrencia
| Cohorte | Base | Mes 0 | Mes 1 | Mes 2 | Mes 3 |
|---|---|---|---|---|---|
| Marzo | 120 | 120 | 96 | 84 | 72 |
| Abril | 100 | 100 | 83 | 70 | Pendiente de observar |
| Mayo | 80 | 80 | 60 | Pendiente de observar | Pendiente de observar |
| Junio | 60 | 60 | Pendiente de observar | Pendiente de observar | Pendiente de observar |
Use and limits: Compare recurrence using 1–20 cohorts and 1–12 periods with labels up to 24 characters. Positive integer bases; integer counts between zero and base. Pending cells (data-estado=pendiente) must trail each row and are not zero. Exact count/base/percentage remain visible. Five intensity ranges: [0,20), [20,40), [40,60), [60,80), [80,100]%. No event-to-cohort calculation or incompatible period comparisons. Source data stays in one table (or the image zone list). Declare data-unidad (1–40 characters); numeric magnitude is limited to 10^12. Views round to eight significant digits while source values remain. Load evidence.js; NotaEvidencia.init/get/destroy owns lifecycle. Destroy before changing the source. No network or external libraries; data remains if enhancement fails.
Dependencias: packages/core/styles/fonts.css, packages/core/styles/artifact.css, packages/core/components/interface.js, packages/core/components/audio.js, packages/core/components/controls.js, packages/core/components/editorial-pieces.js, packages/core/components/reader.js, packages/core/components/chart-core.js, packages/core/components/evidence.js
<figure class="amplio" id="evidencia-cohortes" data-evidencia="cohortes" data-unidad="clientes">
<div class="tabla-caja densa" role="region" tabindex="0" aria-label="Clientes activos por cohorte, datos desplazables">
<table data-evidencia-datos><caption>Clientes activos por cohorte</caption><thead><tr><th scope="col">Cohorte</th><th scope="col">Base</th><th scope="col">Mes 0</th><th scope="col">Mes 1</th><th scope="col">Mes 2</th><th scope="col">Mes 3</th></tr></thead><tbody>
<tr><th scope="row">Marzo</th><td data-valor="120">120</td><td data-valor="120">120</td><td data-valor="96">96</td><td data-valor="84">84</td><td data-valor="72">72</td></tr>
<tr><th scope="row">Abril</th><td data-valor="100">100</td><td data-valor="100">100</td><td data-valor="83">83</td><td data-valor="70">70</td><td data-estado="pendiente">Pendiente de observar</td></tr>
<tr><th scope="row">Mayo</th><td data-valor="80">80</td><td data-valor="80">80</td><td data-valor="60">60</td><td data-estado="pendiente">Pendiente de observar</td><td data-estado="pendiente">Pendiente de observar</td></tr>
<tr><th scope="row">Junio</th><td data-valor="60">60</td><td data-valor="60">60</td><td data-estado="pendiente">Pendiente de observar</td><td data-estado="pendiente">Pendiente de observar</td><td data-estado="pendiente">Pendiente de observar</td></tr>
</tbody></table>
</div>
<figcaption>Datos ficticios. Corte: 30 junio 2026. Cada celda cuenta personas activas ese mes; pueden regresar.</figcaption>
</figure>Componente / Embudo explicado
| Etapa | Pedidos | Definición |
|---|---|---|
| Solicitudes | 1000 | Pedidos de una misma cohorte de ejemplo. |
| Validadas | 800 | Solicitudes con datos completos. |
| Programadas | 500 | Solicitudes validadas con programación. |
| Completadas | 450 | Programadas con recepción registrada. |
Use and limits: Show counts, conversion and drop-off for the same population across 2–12 stages. Non-increasing nonnegative integer counts with a positive first stage. Conversion from a zero stage is undefined. No mixed populations, reentry or causal claims about loss. Bars start at zero and detail names the denominator. Source data stays in one table (or the image zone list). Declare data-unidad (1–40 characters); numeric magnitude is limited to 10^12. Views round to eight significant digits while source values remain. Load evidence.js; NotaEvidencia.init/get/destroy owns lifecycle. Destroy before changing the source. No network or external libraries; data remains if enhancement fails.
Dependencias: packages/core/styles/fonts.css, packages/core/styles/artifact.css, packages/core/components/interface.js, packages/core/components/audio.js, packages/core/components/controls.js, packages/core/components/editorial-pieces.js, packages/core/components/reader.js, packages/core/components/chart-core.js, packages/core/components/evidence.js
<figure class="amplio" id="evidencia-embudo" data-evidencia="embudo" data-unidad="pedidos">
<div class="tabla-caja densa" role="region" tabindex="0" aria-label="Del pedido a la entrega, datos desplazables">
<table data-evidencia-datos><caption>Del pedido a la entrega</caption><thead><tr><th scope="col">Etapa</th><th scope="col">Pedidos</th><th scope="col">Definición</th></tr></thead><tbody>
<tr><th scope="row">Solicitudes</th><td data-valor="1000">1000</td><td>Pedidos de una misma cohorte de ejemplo.</td></tr>
<tr><th scope="row">Validadas</th><td data-valor="800">800</td><td>Solicitudes con datos completos.</td></tr>
<tr><th scope="row">Programadas</th><td data-valor="500">500</td><td>Solicitudes validadas con programación.</td></tr>
<tr><th scope="row">Completadas</th><td data-valor="450">450</td><td>Programadas con recepción registrada.</td></tr>
</tbody></table>
</div>
<figcaption>Datos ilustrativos: misma cohorte y ventana de seguimiento para las cuatro etapas.</figcaption>
</figure>Componente / Rangos de incertidumbre
Los límites son escenarios declarados por el equipo de ejemplo. No hay un nivel de confianza ni una probabilidad asignada.
| Fecha | Inferior | Central | Superior |
|---|---|---|---|
| 2026-10-01 | 80 | 100 | 125 |
| 2026-11-01 | 85 | 112 | 145 |
| 2026-12-01 | 90 | 120 | 160 |
| 2027-01-01 | 100 | 132 | 180 |
Use and limits: Show a central trajectory with explicit lower/upper values across 2–48 strictly increasing ISO dates. All values finite and lower ≤ central ≤ upper. A visible data-evidencia-metodo explanation is required. The domain covers actual extremes; zero is not mandatory for a series. No inferred confidence, imputation or invented scenarios. Line/dash style supplements band color. Source data stays in one table (or the image zone list). Declare data-unidad (1–40 characters); numeric magnitude is limited to 10^12. Views round to eight significant digits while source values remain. Load evidence.js; NotaEvidencia.init/get/destroy owns lifecycle. Destroy before changing the source. No network or external libraries; data remains if enhancement fails.
Dependencias: packages/core/styles/fonts.css, packages/core/styles/artifact.css, packages/core/components/interface.js, packages/core/components/audio.js, packages/core/components/controls.js, packages/core/components/editorial-pieces.js, packages/core/components/reader.js, packages/core/components/chart-core.js, packages/core/components/evidence.js
<figure class="amplio" id="evidencia-incertidumbre" data-evidencia="incertidumbre" data-unidad="pedidos">
<p data-evidencia-metodo>Los límites son escenarios declarados por el equipo de ejemplo. No hay un nivel de confianza ni una probabilidad asignada.</p>
<div class="tabla-caja densa" role="region" tabindex="0" aria-label="Escenarios de demanda, datos desplazables">
<table data-evidencia-datos><caption>Escenarios de demanda</caption><thead><tr><th scope="col">Fecha</th><th scope="col">Inferior</th><th scope="col">Central</th><th scope="col">Superior</th></tr></thead><tbody>
<tr><th scope="row">2026-10-01</th><td data-valor="80">80</td><td data-valor="100">100</td><td data-valor="125">125</td></tr>
<tr><th scope="row">2026-11-01</th><td data-valor="85">85</td><td data-valor="112">112</td><td data-valor="145">145</td></tr>
<tr><th scope="row">2026-12-01</th><td data-valor="90">90</td><td data-valor="120">120</td><td data-valor="160">160</td></tr>
<tr><th scope="row">2027-01-01</th><td data-valor="100">100</td><td data-valor="132">132</td><td data-valor="180">180</td></tr>
</tbody></table>
</div>
<figcaption>Datos ficticios de escenarios; no constituyen previsión de Liftit ni intervalo estadístico.</figcaption>
</figure>Componente / Mapa de relaciones explorable
Relaciones de ejemplo · datos sintéticos
Empieza en una pieza, sigue una conexión y vuelve atrás. Buscar encuentra piezas incluso fuera de la vecindad visible. Los filtros cambian el alcance, no la fuente.
| Nombre | Tipo | Contexto |
|---|---|---|
| Piloto Horizonte | Proyecto | Determinar si existe evidencia suficiente para una prueba acotada. |
| Evaluar capacidad | Sesión | Conversación sintética; sin historial importado ni agente conectado. |
| Informe de capacidad · v2 | Artefacto | Borrador ilustrativo con un supuesto de demanda pendiente de validar. |
| Registro de restricciones | Artefacto | Ejemplo de fuente relacionada; no contiene métricas de negocio reales. |
| Alcance del piloto | Decisión | Propuesta condicionada a comprobar el supuesto. No hay aprobación registrada. |
| Verificar la demanda | Revisión | Comentario ilustrativo sobre la fuente de una afirmación. |
| Relación | Razón / fuente | Estado |
|---|---|---|
| contiene | El objetivo de esta sesión pertenece al piloto de ejemplo. | Declarada |
| produjo | El informe representa el resultado declarado de la sesión sintética. | Declarada |
| informa | La propuesta cita el informe; citarlo no demuestra que el supuesto sea válido. | Declarada |
| cuestiona | El comentario solicita la fuente de la demanda en la versión 2. | Declarada |
| podría informar | Propuesta manual de conexión por una restricción compartida. Falta revisión. | Sugerida |
Use and limits: Explore a declared local graph with node/edge tables, unique node IDs, type/context and directed links with reason and declared/suggested status. Both endpoints must exist. Search includes nodes beyond the current neighborhood; one/two-hop scope includes incoming/outgoing edges. Filters, history, zoom, fit, inspector and equivalent tables remain keyboard-accessible. Fit can shrink text; 100% restores it. Up to 100 nodes/250 edges, deterministic type-based layout. No AI inference, confidence scores, force simulation, persistent project editing or portal/session connection. Filter permissions before generating HTML; hidden browser nodes are not private. BottifactRelationships.init/get/destroy preserves source tables; invalid input does not mount a partial graph.
Dependencias: packages/core/styles/fonts.css, packages/core/styles/artifact.css, packages/core/components/interface.js, packages/core/components/audio.js, packages/core/components/controls.js, packages/core/components/editorial-pieces.js, packages/core/components/reader.js, packages/core/components/relationship-map.js
<section class="pieza amplio" id="relationship-map-example" data-relationship-map>
<p class="ceja">Relaciones de ejemplo · datos sintéticos</p><h3>Del proyecto a la decisión</h3><p>Empieza en una pieza, sigue una conexión y vuelve atrás. Buscar encuentra piezas incluso fuera de la vecindad visible. Los filtros cambian el alcance, no la fuente.</p>
<details><summary>Fuente completa y alternativa sin JavaScript</summary>
<div class="tabla-caja" tabindex="0" role="region" aria-label="Piezas del mapa"><table data-map-nodes><caption>Piezas de ejemplo</caption><thead><tr><th scope="col">Nombre</th><th scope="col">Tipo</th><th scope="col">Contexto</th></tr></thead><tbody>
<tr data-node="project"><th scope="row">Piloto Horizonte</th><td>Proyecto</td><td>Determinar si existe evidencia suficiente para una prueba acotada.</td></tr>
<tr data-node="session"><th scope="row">Evaluar capacidad</th><td>Sesión</td><td>Conversación sintética; sin historial importado ni agente conectado.</td></tr>
<tr data-node="report"><th scope="row">Informe de capacidad · v2</th><td>Artefacto</td><td>Borrador ilustrativo con un supuesto de demanda pendiente de validar.</td></tr>
<tr data-node="source"><th scope="row">Registro de restricciones</th><td>Artefacto</td><td>Ejemplo de fuente relacionada; no contiene métricas de negocio reales.</td></tr>
<tr data-node="decision"><th scope="row">Alcance del piloto</th><td>Decisión</td><td>Propuesta condicionada a comprobar el supuesto. No hay aprobación registrada.</td></tr>
<tr data-node="review"><th scope="row">Verificar la demanda</th><td>Revisión</td><td>Comentario ilustrativo sobre la fuente de una afirmación.</td></tr>
</tbody></table></div>
<div class="tabla-caja" tabindex="0" role="region" aria-label="Relaciones del mapa"><table data-map-edges><caption>Relaciones declaradas y sugeridas del ejemplo</caption><thead><tr><th scope="col">Relación</th><th scope="col">Razón / fuente</th><th scope="col">Estado</th></tr></thead><tbody>
<tr data-source="project" data-target="session"><th scope="row">contiene</th><td>El objetivo de esta sesión pertenece al piloto de ejemplo.</td><td>Declarada</td></tr>
<tr data-source="session" data-target="report"><th scope="row">produjo</th><td>El informe representa el resultado declarado de la sesión sintética.</td><td>Declarada</td></tr>
<tr data-source="report" data-target="decision"><th scope="row">informa</th><td>La propuesta cita el informe; citarlo no demuestra que el supuesto sea válido.</td><td>Declarada</td></tr>
<tr data-source="review" data-target="report"><th scope="row">cuestiona</th><td>El comentario solicita la fuente de la demanda en la versión 2.</td><td>Declarada</td></tr>
<tr data-source="source" data-target="decision"><th scope="row">podría informar</th><td>Propuesta manual de conexión por una restricción compartida. Falta revisión.</td><td>Sugerida</td></tr>
</tbody></table></div></details></section>Componente / Diagrama a mano · flujos legibles
Escribe la pregunta que este documento debe resolver.
Ordena la evidencia y deja visibles las dudas.
Comparte la versión y recoge los cambios propuestos.
Ejemplo ilustrativo: cada flecha tiene una intención.
When: Explain a short directed flow in an Excalidraw-like hand-drawn style. Use two or three stages per diagram. Separate an overview, a history example and an agent handoff when each answers a different question. This is a native Margen recipe, not the Excalidraw editor or its file format.
Source: Copy source.json from this recipe. Schema margen-sketch/1 requires a unique diagram id, title, two or three nodes with stable id, title, body, and exactly one transitions label between each consecutive pair. note is optional. Node order is the directed reading order. Each node may include icon: person, team, server, database, cloud, document, payment, store, approval or agent. These original SVG symbols are decorative; always name the entity in the visible title. Omit the field when no symbol helps. Unknown icons and arbitrary SVG are rejected. Labels are plain text, never HTML. Preserve the JSON outside the published HTML for later revisions.
``bash python3 scripts/sketch_diagram.py --source /path/flow.json --output /path/flow.html `
Insert the generated figure as a sibling of .prosa, then compose the complete document with scripts/create_artifact.py. Give every figure a unique ID. Styles are included in the canonical artifact.css by scripts/build.py; no extra runtime or remote assets are needed. Do not paste a screenshot of the figure.
Reading and accessibility: Real HTML text and an ordered list carry the meaning; decorative SVG borders/arrows are hidden from assistive technology. Connections name their destination in reading order. The same DOM reflows vertically below an 820px figure width. Labels retain their CSS font sizes and text wraps instead of scaling or clipping. Light/dark colors follow the current theme. There are no animations or keyboard-only interactions; all content is available without JavaScript. Print uses the vertical flow. No color encodes a required distinction.
Limits: This first recipe supports linear flows, not branching architectures, free-positioned canvas editing, numerical charts, Excalidraw import/export, or real-time collaboration. Split larger processes, or select relationship-map` for an explorable graph. The block editor conservatively preserves this figure as an opaque component; it does not yet expose editable diagram nodes in its slash menu. The source generator fails closed on invalid schema, duplicate IDs, missing transitions and oversize content. Always inspect the actual standalone artifact on desktop and mobile, in light and dark mode. Drawing paths alone do not prove legibility or accessibility conformance.
Dependencias: packages/core/styles/fonts.css, packages/core/styles/artifact.css, packages/core/components/interface.js, packages/core/components/audio.js, packages/core/components/controls.js, packages/core/components/editorial-pieces.js, packages/core/components/reader.js
<figure class="pieza amplio sketch-diagram" id="sketch-example" data-sketch-diagram="1" aria-labelledby="sketch-example-caption">
<figcaption id="sketch-example-caption">De una idea a una revisión compartida</figcaption>
<ol class="sketch-flow">
<li class="sketch-step" id="sketch-example-idea"><div class="sketch-node">
<svg class="sketch-outline" viewBox="0 0 300 200" preserveAspectRatio="none" aria-hidden="true" focusable="false"><path d="M8 7 Q146 2 292 8 Q298 89 292 192 Q158 197 7 191 Q3 97 8 7Z"/><path class="sketch-echo" d="M10 10 Q164 6 290 10 L289 190 Q150 193 11 188 Q7 102 10 10Z"/></svg>
<div class="sketch-meta"><span class="sketch-number">01</span><svg class="sketch-symbol" viewBox="0 0 64 64" aria-hidden="true" focusable="false"><path d="M24 18 C23 5 43 5 42 18 C43 31 23 31 24 18 M14 55 C13 31 51 31 51 55 M23 47 L22 56 M42 46 L43 56"/></svg></div><strong class="sketch-title">Una idea</strong><p class="sketch-body">Escribe la pregunta que este documento debe resolver.</p></div>
<div class="sketch-connection"><svg class="sketch-arrow" viewBox="0 0 64 40" aria-hidden="true" focusable="false"><path d="M4 22 Q27 12 58 19 M46 8 L59 19 L47 30"/></svg><span>desarrollar<span class="sr-only"> → Un borrador</span></span></div>
</li>
<li class="sketch-step" id="sketch-example-draft"><div class="sketch-node">
<svg class="sketch-outline" viewBox="0 0 300 200" preserveAspectRatio="none" aria-hidden="true" focusable="false"><path d="M7 8 Q158 3 291 6 Q297 98 293 191 Q152 196 8 193 Q3 91 7 8Z"/><path class="sketch-echo" d="M10 10 Q164 6 290 10 L289 190 Q150 193 11 188 Q7 102 10 10Z"/></svg>
<div class="sketch-meta"><span class="sketch-number">02</span><svg class="sketch-symbol" viewBox="0 0 64 64" aria-hidden="true" focusable="false"><path d="M15 6 Q31 5 39 7 L51 20 L50 57 Q33 58 14 56 Z M39 7 L39 21 L51 20 M23 31 L42 30 M23 40 L42 40 M23 49 L36 48"/></svg></div><strong class="sketch-title">Un borrador</strong><p class="sketch-body">Ordena la evidencia y deja visibles las dudas.</p></div>
<div class="sketch-connection"><svg class="sketch-arrow" viewBox="0 0 64 40" aria-hidden="true" focusable="false"><path d="M4 22 Q27 12 58 19 M46 8 L59 19 L47 30"/></svg><span>compartir<span class="sr-only"> → Una revisión</span></span></div>
</li>
<li class="sketch-step" id="sketch-example-review"><div class="sketch-node">
<svg class="sketch-outline" viewBox="0 0 300 200" preserveAspectRatio="none" aria-hidden="true" focusable="false"><path d="M8 7 Q146 2 292 8 Q298 89 292 192 Q158 197 7 191 Q3 97 8 7Z"/><path class="sketch-echo" d="M10 10 Q164 6 290 10 L289 190 Q150 193 11 188 Q7 102 10 10Z"/></svg>
<div class="sketch-meta"><span class="sketch-number">03</span><svg class="sketch-symbol" viewBox="0 0 64 64" aria-hidden="true" focusable="false"><path d="M24 19 C23 6 41 6 40 19 C40 31 24 31 24 19 M17 56 C15 33 49 33 47 56 M10 18 C3 17 3 31 11 31 M5 52 C1 36 13 33 18 38 M53 18 C61 18 61 31 53 31 M47 38 C56 32 64 39 59 52"/></svg></div><strong class="sketch-title">Una revisión</strong><p class="sketch-body">Comparte la versión y recoge los cambios propuestos.</p></div>
</li>
</ol>
<p class="sketch-note">Ejemplo ilustrativo: cada flecha tiene una intención.</p>
</figure>Capítulo 06 / 09
Comparación, totales, series y densidad sin cortar información.
Componente / Tabla densa
| Brecha | Responsable | Estado | Inicio | Revisión | Evidencia esperada |
|---|---|---|---|---|---|
| Fuente sin fecha de corte | Equipo de datos | Pendiente | Registro con fecha y criterio de inclusión. | ||
| Definición de unidad | Equipo de análisis | En revisión | Diccionario con unidad y denominador. |
Use and limits: Use for five or more columns. .tabla-caja table starts at 34rem; .densa raises the local minimum to 58rem. Preserve a focusable, named local scroller instead of compressing cells or making the entire page scroll horizontally. Inspect actual long values at 320/390 px. Do not apply nowrap to every cell.
Dependencias: packages/core/styles/fonts.css, packages/core/styles/artifact.css, packages/core/components/interface.js, packages/core/components/audio.js, packages/core/components/controls.js, packages/core/components/editorial-pieces.js, packages/core/components/reader.js
<figure class="amplio">
<div class="tabla-caja densa" tabindex="0" role="region" aria-label="Brechas, desplazable">
<table><caption>Seguimiento ilustrativo de brechas</caption>
<thead><tr><th scope="col">Brecha</th><th scope="col">Responsable</th><th scope="col">Estado</th><th scope="col">Inicio</th><th scope="col">Revisión</th><th scope="col">Evidencia esperada</th></tr></thead>
<tbody><tr><th scope="row">Fuente sin fecha de corte</th><td>Equipo de datos</td><td>Pendiente</td><td><time datetime="2026-09-13">13-sep-2026</time></td><td><time datetime="2026-09-18">18-sep-2026</time></td><td>Registro con fecha y criterio de inclusión.</td></tr>
<tr><th scope="row">Definición de unidad</th><td>Equipo de análisis</td><td>En revisión</td><td><time datetime="2026-09-12">12-sep-2026</time></td><td><time datetime="2026-09-16">16-sep-2026</time></td><td>Diccionario con unidad y denominador.</td></tr></tbody>
</table>
</div>
<figcaption>Ejemplo de seis columnas; desplaza la tabla para consultar la última.</figcaption>
</figure>Componente / Comparación
| Criterio | Registro A · elegido | Registro B |
|---|---|---|
| Fecha de corte | 13-sep-2026 | 10-sep-2026 |
| Trazabilidad | ✓ Identificador por movimiento | ≈ Resumen por día |
| Límite | Falta una sede | Faltan tres días |
Use and limits: Compare shared properties across a few alternatives. State the decision explicitly instead of relying on color. .elegida marks cells; it does not calculate a winner. Add .densa for five or more columns. The first column is not automatically sticky, preserving mobile comparison space.
Dependencias: packages/core/styles/fonts.css, packages/core/styles/artifact.css, packages/core/components/interface.js, packages/core/components/audio.js, packages/core/components/controls.js, packages/core/components/editorial-pieces.js, packages/core/components/reader.js, packages/core/components/tables.js
<figure class="amplio">
<div class="tabla-caja" tabindex="0" role="region" aria-label="Comparación de fuentes, desplazable">
<table class="tabla-comparacion"><caption>Fuentes candidatas · ejemplo</caption>
<thead><tr><th scope="col">Criterio</th><th scope="col" class="elegida">Registro A · elegido</th><th scope="col">Registro B</th></tr></thead>
<tbody>
<tr><th scope="row">Fecha de corte</th><td class="elegida">13-sep-2026</td><td>10-sep-2026</td></tr>
<tr><th scope="row">Trazabilidad</th><td class="elegida">✓ Identificador por movimiento</td><td>≈ Resumen por día</td></tr>
<tr><th scope="row">Límite</th><td class="elegida">Falta una sede</td><td>Faltan tres días</td></tr>
</tbody>
</table>
</div>
<figcaption>Datos ilustrativos. «Elegido» expresa la decisión, no una puntuación automática.</figcaption>
</figure>Componente / Totales y ordenación
| Investigar | 60 h |
|---|---|
| Construir | 25 h |
| Revisar | 15 h |
| Total de horas registradas | 100 h |
Use and limits: Show records with a genuinely additive total. The author supplies the total; do not sum percentages, rates or averages. One tbody, no merged cells or subtotal rows inside it. data-tabla enables sorting; numeric cells need data-valor. Missing values remain last in both directions, ties retain order and tfoot stays fixed. This simple recipe has no filtering or paging.
Dependencias: packages/core/styles/fonts.css, packages/core/styles/artifact.css, packages/core/components/interface.js, packages/core/components/audio.js, packages/core/components/controls.js, packages/core/components/editorial-pieces.js, packages/core/components/reader.js, packages/core/components/tables.js
<figure class="ancho">
<div class="tabla-caja" tabindex="0" role="region" aria-label="Horas por actividad, tabla ordenable y desplazable">
<table class="tabla-totales" data-tabla><caption>Horas registradas · ejemplo</caption>
<thead><tr><th scope="col"><button type="button" data-ordenar="texto">Actividad</button></th><th scope="col"><button type="button" data-ordenar="numero">Horas</button></th></tr></thead>
<tbody>
<tr><th scope="row">Investigar</th><td class="numero" data-valor="60">60 h</td></tr>
<tr><th scope="row">Construir</th><td class="numero" data-valor="25">25 h</td></tr>
<tr><th scope="row">Revisar</th><td class="numero" data-valor="15">15 h</td></tr>
</tbody>
<tfoot><tr><th scope="row">Total de horas registradas</th><td class="numero">100 h</td></tr></tfoot>
</table>
</div>
<figcaption>Ejemplo: 60 + 25 + 15 = 100 h. Los botones ordenan sólo las filas de datos; el total permanece al pie.</figcaption>
</figure>Componente / Tabla con serie
| Canal | Serie L / M / X / J, dominio común 0–120 | Último día |
|---|---|---|
| Web | 80, 100, 90, 120 | 120 |
| App | 40, sin dato, 70, 60 | 60 |
<a id="recetas-sonido"></a>
Use and limits: Add a trend without separating it from its record. Keep all values in text; the SVG is redundant and aria-hidden. X is equally spaced and all rows must use the same periods. Declare shared data-min/data-max; out-of-range points are rejected. No per-row autoscaling or irregular-time encoding. Text remains when rendering fails.
Dependencias: packages/core/styles/fonts.css, packages/core/styles/artifact.css, packages/core/components/interface.js, packages/core/components/audio.js, packages/core/components/controls.js, packages/core/components/editorial-pieces.js, packages/core/components/reader.js, packages/core/components/tables.js
<figure class="ancho">
<div class="tabla-caja" tabindex="0" role="region" aria-label="Serie semanal de solicitudes, desplazable">
<table data-tabla data-min="0" data-max="120"><caption>Solicitudes de lunes a jueves · ejemplo</caption>
<thead><tr><th scope="col">Canal</th><th scope="col">Serie L / M / X / J, dominio común 0–120</th><th scope="col">Último día</th></tr></thead>
<tbody>
<tr><th scope="row">Web</th><td data-sparkline><span class="sparkline-datos"><span data-valor="80">80</span>, <span data-valor="100">100</span>, <span data-valor="90">90</span>, <span data-valor="120">120</span></span></td><td class="numero">120</td></tr>
<tr><th scope="row">App</th><td data-sparkline><span class="sparkline-datos"><span data-valor="40">40</span>, <span data-valor="">sin dato</span>, <span data-valor="70">70</span>, <span data-valor="60">60</span></span></td><td class="numero">60</td></tr>
</tbody>
</table>
</div>
<figcaption>Valores ilustrativos. Misma escala Y en ambas filas. El dato ausente corta la línea y todos los valores permanecen escritos.</figcaption>
</figure>Componente / Tabla interactiva
Seis registros ficticios. Ordena por encabezado, filtra y agrupa sin perder el detalle.
6 registros de ejemplo.
| Sesión de diseño | Producto | En revisión | 120.000 |
|---|---|---|---|
| Prueba de lectura | Investigación | Confirmado | 80.000 |
| Revisión móvil | Producto | Confirmado | 60.000 |
| Entrevista inicial | Investigación | En revisión | 95.000 |
| Control de calidad | Ingeniería | Confirmado | 140.000 |
| Ajuste de interfaz | Ingeniería | En revisión | 75.000 |
Use and limits: Explore 1–16 columns and up to 2000 local rows. Load table-model before data-explorer and include controls.js. Search stays visible; Filters, Display, Views and More form one action group. Table/Cards changes presentation while preserving source cells and IDs; auto uses cards at 640 px or below. Use stable table/row/cell identifiers for review anchors. Text, finite numbers (data-valor, header data-tipo=numero) and ISO dates (data-tipo=fecha) are supported. State/total column indexes are zero-based and default to 2/3; declare the additive unit and never mix currencies. Facets, AND/OR conditions, empty values, numeric/date ranges, chips, multi-sort, grouping, visibility, density and local saved views share one query model. Incomplete ranges match nothing. Paging offers 10/25/50/100 rows; totals cover all filtered rows while group counters cover the page. Selection persists across pages; selection export includes selected rows outside the filter using visible columns, otherwise exports the filtered set. CSV neutralizes formulas. Printing restores the complete source. No editing, virtualization or remote fetching. NotaExplorador.init/get/destroy, .visible, .selected and .exportCSV() preserve original data. The detail action exposes all fields with keyboard access. Fixed columns and widths are open-table adjustments; saved views retain query/grouping/visibility/density/presentation. See docs/mobile-and-tables.md. React uses its native adapter; standalone does not download React/TanStack. The administrator queries the authorized server collection with progressive scrolling.
### Review and presentation update
The reader dock exposes Appearance, one writing action, counted Comments, and Share. Privacy is selected inside the composer; existing thread types stay immutable. The count includes open threads visible to the current reader, including their own private notes, and excludes replies/resolved threads. Nearby pins group by position and open every contained thread. Share owns link/access and creator management; there is no generic More dock.
Record explorers support Table, List, Cards and Board. List reduces per-record spacing; Board groups the existing rows by the selected field (preferring a categorical status/team field initially). The portable board shows the current filtered page, with per-lane counts explicitly scoped to that page. React uses its supplied filtered dataset. Both preserve source records and selection. This is a read-only presentation, not drag-and-drop state editing or an inferred workflow. Saved portable views include presentation. Horizontal scrolling stays local to the board; print returns to a table.
Dependencias: packages/core/styles/fonts.css, packages/core/styles/artifact.css, packages/core/components/interface.js, packages/core/components/audio.js, packages/core/components/controls.js, packages/core/components/editorial-pieces.js, packages/core/components/reader.js, packages/core/components/table-model.js, packages/core/components/data-explorer.js
<section class="pieza amplio" id="explorador-ejemplo" data-explorador>
<h3>Explorar el registro</h3><p>Seis registros ficticios. Ordena por encabezado, filtra y agrupa sin perder el detalle.</p>
<form class="tabla-herramientas" aria-label="Explorar registros">
<label class="tabla-busqueda"><span class="control-etiqueta">Buscar registros</span><svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true"><circle cx="10" cy="10" r="6"/><path d="m15 15 5 5"/></svg><input type="search" name="buscar" placeholder="Buscar registros…"></label>
<details class="control-menu"><summary>Filtros <span data-filtros-cuenta></span>⌄</summary><div class="control-panel" tabindex="0" role="region" aria-label="Filtros de registros"><label>Estado<select name="estado"><option value="">Todos los estados</option><option>En revisión</option><option>Confirmado</option></select></label><button type="reset">Limpiar filtros</button></div></details>
<details class="control-menu"><summary>Agrupar ⌄</summary><div class="control-panel" tabindex="0" role="region" aria-label="Agrupar registros"><label>Agrupar por<select name="grupo"><option value="">Sin grupos</option><option value="1">Equipo</option><option value="2">Estado</option></select></label></div></details>
<details class="control-menu"><summary>Columnas ⌄</summary><div class="control-panel" tabindex="0" role="region" aria-label="Columnas visibles"><label><input type="checkbox" data-columna="1" checked> Equipo</label><label><input type="checkbox" data-columna="2" checked> Estado</label><label><input type="checkbox" data-columna="3" checked> Importe COP</label></div></details>
</form>
<p data-explorador-estado role="status">6 registros de ejemplo.</p><div class="tabla-caja" tabindex="0" role="region" aria-label="Registros ordenables y agrupables, desplazables"><table><caption>Movimientos ilustrativos · importes en COP</caption><thead><tr><th scope="col"><details class="control-menu tabla-orden"><summary>Nombre <span data-indicador-orden aria-hidden="true">↕</span></summary><div class="control-panel" tabindex="0" role="region" aria-label="Ordenar por Nombre"><button type="button" data-orden-col="0" data-direccion="1" data-cerrar-menu>↑ Ascendente</button><button type="button" data-orden-col="0" data-direccion="-1" data-cerrar-menu>↓ Descendente</button><button type="button" data-orden-col="0" data-direccion="0" data-cerrar-menu>Restablecer orden</button></div></details></th><th scope="col"><details class="control-menu tabla-orden"><summary>Equipo <span data-indicador-orden aria-hidden="true">↕</span></summary><div class="control-panel" tabindex="0" role="region" aria-label="Ordenar por Equipo"><button type="button" data-orden-col="1" data-direccion="1" data-cerrar-menu>↑ Ascendente</button><button type="button" data-orden-col="1" data-direccion="-1" data-cerrar-menu>↓ Descendente</button><button type="button" data-orden-col="1" data-direccion="0" data-cerrar-menu>Restablecer orden</button></div></details></th><th scope="col"><details class="control-menu tabla-orden"><summary>Estado <span data-indicador-orden aria-hidden="true">↕</span></summary><div class="control-panel" tabindex="0" role="region" aria-label="Ordenar por Estado"><button type="button" data-orden-col="2" data-direccion="1" data-cerrar-menu>↑ Ascendente</button><button type="button" data-orden-col="2" data-direccion="-1" data-cerrar-menu>↓ Descendente</button><button type="button" data-orden-col="2" data-direccion="0" data-cerrar-menu>Restablecer orden</button></div></details></th><th scope="col"><details class="control-menu tabla-orden"><summary>Importe COP <span data-indicador-orden aria-hidden="true">↕</span></summary><div class="control-panel" tabindex="0" role="region" aria-label="Ordenar por Importe COP"><button type="button" data-orden-col="3" data-direccion="1" data-cerrar-menu>↑ Ascendente</button><button type="button" data-orden-col="3" data-direccion="-1" data-cerrar-menu>↓ Descendente</button><button type="button" data-orden-col="3" data-direccion="0" data-cerrar-menu>Restablecer orden</button></div></details></th></tr></thead><tbody>
<tr><th scope="row">Sesión de diseño</th><td>Producto</td><td>En revisión</td><td data-valor="120000">120.000</td></tr>
<tr><th scope="row">Prueba de lectura</th><td>Investigación</td><td>Confirmado</td><td data-valor="80000">80.000</td></tr>
<tr><th scope="row">Revisión móvil</th><td>Producto</td><td>Confirmado</td><td data-valor="60000">60.000</td></tr>
<tr><th scope="row">Entrevista inicial</th><td>Investigación</td><td>En revisión</td><td data-valor="95000">95.000</td></tr>
<tr><th scope="row">Control de calidad</th><td>Ingeniería</td><td>Confirmado</td><td data-valor="140000">140.000</td></tr>
<tr><th scope="row">Ajuste de interfaz</th><td>Ingeniería</td><td>En revisión</td><td data-valor="75000">75.000</td></tr>
</tbody></table></div></section>Componente / Cola de despacho y novedades
Tres vehículos ficticios del corte. Filtra Con novedad, agrupa por ciudad y ordena los pedidos para revisar a quién contactar.
3 vehículos de ejemplo.
| LFT-021 | Medellín | En ruta | 18 |
|---|---|---|---|
| LFT-034 | Cali | Con novedad | 12 |
| LFT-056 | Barranquilla | En ruta | 9 |
Use and limits: Filter operational exceptions, group by city and sort orders using the shared data explorer. data-unidad=pedidos declares the total; legacy financial examples default to COP. This is a static snapshot, not updated by fleet playback. Keep units and explicit status text. Explorer limits, mobile cards, selection and export semantics apply; no dispatch or assignment actions are executed.
Dependencias: packages/core/styles/fonts.css, packages/core/styles/artifact.css, packages/core/components/interface.js, packages/core/components/audio.js, packages/core/components/controls.js, packages/core/components/editorial-pieces.js, packages/core/components/reader.js, packages/core/components/data-explorer.js
<section class="pieza amplio" id="cola-novedades-ejemplo" data-explorador data-unidad="pedidos">
<h3>Despacho y novedades</h3><p>Tres vehículos ficticios del corte. Filtra Con novedad, agrupa por ciudad y ordena los pedidos para revisar a quién contactar.</p>
<form class="tabla-herramientas" aria-label="Explorar registros">
<label class="tabla-busqueda"><span class="control-etiqueta">Buscar registros</span><svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true"><circle cx="10" cy="10" r="6"/><path d="m15 15 5 5"/></svg><input type="search" name="buscar" placeholder="Buscar registros…"></label>
<details class="control-menu"><summary>Filtros <span data-filtros-cuenta></span>⌄</summary><div class="control-panel" tabindex="0" role="region" aria-label="Filtros de registros"><label>Estado<select name="estado"><option value="">Todos los estados</option><option>Con novedad</option><option>En ruta</option></select></label><button type="reset">Limpiar filtros</button></div></details>
<details class="control-menu"><summary>Agrupar ⌄</summary><div class="control-panel" tabindex="0" role="region" aria-label="Agrupar registros"><label>Agrupar por<select name="grupo"><option value="">Sin grupos</option><option value="1">Ciudad</option><option value="2">Estado</option></select></label></div></details>
<details class="control-menu"><summary>Columnas ⌄</summary><div class="control-panel" tabindex="0" role="region" aria-label="Columnas visibles"><label><input type="checkbox" data-columna="1" checked> Ciudad</label><label><input type="checkbox" data-columna="2" checked> Estado</label><label><input type="checkbox" data-columna="3" checked> Pedidos</label></div></details>
</form>
<p data-explorador-estado role="status">3 vehículos de ejemplo.</p><div class="tabla-caja" tabindex="0" role="region" aria-label="Registros ordenables y agrupables, desplazables"><table><caption>Vehículos de ejemplo · pedidos asociados al corte</caption><thead><tr><th scope="col"><details class="control-menu tabla-orden"><summary>Vehículo <span data-indicador-orden aria-hidden="true">↕</span></summary><div class="control-panel" tabindex="0" role="region" aria-label="Ordenar por Vehículo"><button type="button" data-orden-col="0" data-direccion="1" data-cerrar-menu>↑ Ascendente</button><button type="button" data-orden-col="0" data-direccion="-1" data-cerrar-menu>↓ Descendente</button><button type="button" data-orden-col="0" data-direccion="0" data-cerrar-menu>Restablecer orden</button></div></details></th><th scope="col"><details class="control-menu tabla-orden"><summary>Ciudad <span data-indicador-orden aria-hidden="true">↕</span></summary><div class="control-panel" tabindex="0" role="region" aria-label="Ordenar por Ciudad"><button type="button" data-orden-col="1" data-direccion="1" data-cerrar-menu>↑ Ascendente</button><button type="button" data-orden-col="1" data-direccion="-1" data-cerrar-menu>↓ Descendente</button><button type="button" data-orden-col="1" data-direccion="0" data-cerrar-menu>Restablecer orden</button></div></details></th><th scope="col"><details class="control-menu tabla-orden"><summary>Estado <span data-indicador-orden aria-hidden="true">↕</span></summary><div class="control-panel" tabindex="0" role="region" aria-label="Ordenar por Estado"><button type="button" data-orden-col="2" data-direccion="1" data-cerrar-menu>↑ Ascendente</button><button type="button" data-orden-col="2" data-direccion="-1" data-cerrar-menu>↓ Descendente</button><button type="button" data-orden-col="2" data-direccion="0" data-cerrar-menu>Restablecer orden</button></div></details></th><th scope="col"><details class="control-menu tabla-orden"><summary>Pedidos <span data-indicador-orden aria-hidden="true">↕</span></summary><div class="control-panel" tabindex="0" role="region" aria-label="Ordenar por Pedidos"><button type="button" data-orden-col="3" data-direccion="1" data-cerrar-menu>↑ Ascendente</button><button type="button" data-orden-col="3" data-direccion="-1" data-cerrar-menu>↓ Descendente</button><button type="button" data-orden-col="3" data-direccion="0" data-cerrar-menu>Restablecer orden</button></div></details></th></tr></thead><tbody><tr><th scope="row">LFT-021</th><td>Medellín</td><td>En ruta</td><td data-valor="18">18</td></tr><tr><th scope="row">LFT-034</th><td>Cali</td><td>Con novedad</td><td data-valor="12">12</td></tr><tr><th scope="row">LFT-056</th><td>Barranquilla</td><td>En ruta</td><td data-valor="9">9</td></tr></tbody></table></div></section>Componente / Bandeja de revisión contextual
Revisión de ejemplo
Comentario compartido · abierto
«La demanda permite iniciar un piloto»
Informe · v2 · sección Supuestos. La cita sigue pendiente de comprobar.
Una fuente verificable y una versión revisada. Exportar el comentario no lo resuelve.
Nota privada · ejemplo
Comparar el escenario conservador antes de recomendar.
Una interfaz debe filtrar esta nota por permisos antes de renderizarla. Ocultarla con CSS no la hace privada.
Muestra estática. Los hilos reales se crean desde los comentarios flotantes; esta receta no sincroniza ni administra permisos.
Use and limits: Demonstrate shared comments and personal notes with their distinct context. This is a sample composition, not a connected manager. Use verified references and filter permissions server-side before creating HTML. Preserve mobile reading and keyboard disclosure; do not expose private notes in a public example.
Dependencias: packages/core/styles/fonts.css, packages/core/styles/artifact.css, packages/core/components/interface.js, packages/core/components/audio.js, packages/core/components/controls.js, packages/core/components/editorial-pieces.js, packages/core/components/reader.js
<section class="pieza ancho" id="review-queue-example"><p class="ceja">Revisión de ejemplo</p><h3>Dos pendientes, contextos diferentes</h3><div class="cards-trazadas cards-abiertas"><article><p class="ceja">Comentario compartido · abierto</p><h4>Validar la fuente de demanda</h4><blockquote>«La demanda permite iniciar un piloto»</blockquote><p>Informe · v2 · sección Supuestos. La cita sigue pendiente de comprobar.</p><details><summary>Qué se necesita para resolver</summary><p>Una fuente verificable y una versión revisada. Exportar el comentario no lo resuelve.</p></details></article><article><p class="ceja">Nota privada · ejemplo</p><h4>Preparar una pregunta para el agente</h4><p>Comparar el escenario conservador antes de recomendar.</p><details><summary>Audiencia del contexto</summary><p>Una interfaz debe filtrar esta nota por permisos antes de renderizarla. Ocultarla con CSS no la hace privada.</p></details></article></div><p class="procedencia">Muestra estática. Los hilos reales se crean desde los comentarios flotantes; esta receta no sincroniza ni administra permisos.</p></section>Capítulo 07 / 09
Interfaz local, estados, vistas alternativas y explicaciones.
Componente / Antes y después
No se pudo completar la acción.
La persona debe adivinar qué falta.
Añade la fecha del registro para continuar.
El mensaje identifica el campo que necesita atención.
Use and limits: Explain an editorial correction or interface/content revision with del/ins semantics. It does not compute diffs or compare screenshots with a slider. Use comparison for alternatives without a temporal relationship.
Dependencias: packages/core/styles/fonts.css, packages/core/styles/artifact.css, packages/core/components/interface.js, packages/core/components/audio.js, packages/core/components/controls.js, packages/core/components/editorial-pieces.js, packages/core/components/reader.js
<figure class="pieza ancho" id="antes-despues-ejemplo">
<h3>Un cambio que se puede leer</h3>
<div class="antes-despues">
<div><h4>Antes · mensaje genérico</h4><p><del>No se pudo completar la acción.</del></p><p>La persona debe adivinar qué falta.</p></div>
<div class="despues"><h4>Después · siguiente paso concreto</h4><p><ins>Añade la fecha del registro para continuar.</ins></p><p>El mensaje identifica el campo que necesita atención.</p></div>
</div>
<figcaption>Ejemplo de redacción. Las dos versiones permanecen completas; en móvil se leen una después de otra.</figcaption>
</figure>Componente / Visor de prototipos
Explora los estados vacío, revisión y confirmado de un registro ilustrativo.
Vista inicial: 390 px CSS.
Tu HTML se muestra sólo en este navegador. Reiniciar recupera la muestra original.
Todavía no hay registros en este ejemplo.
La sesión de revisión aparece en el ejemplo con su fecha y duración.
Use and limits: Preview trusted declarative component states at 320, 390, 768, 1024 px or available width. Named icon controls choose device, aspect, rotation and fit; report CSS dimensions and visual scale. Uses Shadow DOM and @container, not a remote iframe or hardware emulator; @media(width) measures the outer window. No scripts, inline event handlers, submissions or arbitrary remote resources. loadHTML accepts up to 100000 characters of trusted local HTML/CSS with raster data images, rejecting scripts, iframes, external URLs and CSS imports. This is not a sanitizer for hostile content. NotaVisores.get().setWidth(), setAspect(auto|9/16|4/3|16/9|1/1), reset() and destroy() preserve the textual/print alternative. Fit can shrink text; use 100% to judge readability.
Dependencias: packages/core/styles/fonts.css, packages/core/styles/artifact.css, packages/core/components/interface.js, packages/core/components/audio.js, packages/core/components/controls.js, packages/core/components/editorial-pieces.js, packages/core/components/reader.js, packages/core/components/prototype.js
<figure class="pieza amplio" id="visor-ejemplo" data-visor data-visor-editor>
<h3>Una interfaz, varios tamaños</h3>
<p>Explora los estados vacío, revisión y confirmado de un registro ilustrativo.</p>
<div class="visor-herramientas visor-iconos" role="group" aria-label="Vista del prototipo"><div class="visor-dispositivos" role="group" aria-label="Dispositivo"><button type="button" class="nota-icono" data-ancho-visor="390" aria-pressed="true" aria-label="Móvil · 390 px" title="Móvil · 390 px"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="6" y="2" width="12" height="20" rx="2"/><path d="M10 18h4"/></svg></button><button type="button" class="nota-icono" data-ancho-visor="768" aria-pressed="false" aria-label="Tablet · 768 px" title="Tablet · 768 px"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="2" width="18" height="20" rx="2"/><path d="M10 18h4"/></svg></button><button type="button" class="nota-icono" data-ancho-visor="1024" aria-pressed="false" aria-label="Escritorio · 1024 px" title="Escritorio · 1024 px"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M12 17v4M7 21h10"/></svg></button></div><details class="control-menu visor-opciones"><summary class="nota-icono" aria-label="Proporción y otros tamaños" title="Proporción y otros tamaños"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="2" y="5" width="20" height="14" rx="2"/><path d="m8 15 8-6"/></svg></summary><div class="control-panel" tabindex="0" role="region" aria-label="Proporción y tamaños del prototipo"><label class="visor-proporcion"><span class="control-etiqueta">Proporción del marco</span><select data-proporcion-visor aria-label="Proporción del marco"><option value="auto">Altura libre</option><option value="9/16">9:16</option><option value="4/3">4:3</option><option value="16/9">16:9</option><option value="1/1">1:1</option></select></label><button type="button" data-ancho-visor="320" data-cerrar-menu aria-pressed="false">Móvil pequeño · 320 px</button><button type="button" data-ancho-visor="auto" data-cerrar-menu aria-pressed="false">Ancho disponible</button></div></details><button type="button" class="nota-icono" data-girar-visor aria-pressed="false" aria-label="Rotar marco" title="Rotar marco"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="6" y="5" width="9" height="14" rx="1"/><path d="M18 4a8 8 0 0 1 3 6m0-6v6h-5"/></svg></button><button type="button" class="nota-icono" data-ajustar-visor aria-pressed="false" aria-label="Ajustar al espacio" title="Ajustar al espacio"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 3H3v5m13-5h5v5M3 16v5h5m13-5v5h-5M8 8h8v8H8z"/></svg></button><button type="button" class="nota-icono" data-reiniciar-visor aria-label="Reiniciar prototipo" title="Reiniciar prototipo"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 10a9 9 0 1 1 2 8M3 4v6h6"/></svg></button></div>
<p data-visor-estado role="status">Vista inicial: 390 px CSS.</p>
<div class="visor-caja" tabindex="0" role="region" aria-label="Prototipo interactivo, desplazable horizontalmente"></div>
<details class="visor-importar"><summary>Embeber mi HTML</summary><label>HTML y CSS locales<textarea data-html-visor rows="8" spellcheck="false" placeholder="Pega aquí un fragmento HTML sin scripts ni recursos externos"></textarea></label><button type="button" data-cargar-html>Cargar en el visor</button><p data-importar-estado role="status">Tu HTML se muestra sólo en este navegador. Reiniciar recupera la muestra original.</p></details>
<template data-prototipo>
<style>
.demo { padding: 24px; min-width: 0; }
.demo nav { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 20px; border-bottom: 1px solid var(--pieza-linea); }
.demo button { min-height: 44px; padding: 8px 12px; color: var(--pieza-tinta); background: var(--pieza-papel); border: 1px solid var(--pieza-linea); border-radius: 4px; font: inherit; cursor: pointer; }
.demo button[aria-pressed='true'] { background: var(--pieza-suave); border-color: var(--pieza-acento); }
.demo h2 { font: 400 32px/1.15 var(--serif); margin: 0 0 16px; }
.demo p { margin: 0 0 18px; overflow-wrap: anywhere; }
.demo .contexto { margin-top: 24px; font-size: 14px; color: var(--pieza-secundaria); }
.demo article { padding-top: 28px; }
.demo dl { margin: 0 0 20px; display: grid; gap: 12px; }
.demo dt { font-size: 13px; color: var(--pieza-secundaria); }
.demo dd { margin: 0; }
.demo .estado { padding: 16px; border: 1px dashed var(--pieza-linea); }
@container (min-width: 600px) {
.demo article { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(0,1fr); gap: 32px; }
.demo .contexto { margin-top: 0; padding-top: 4px; }
}
</style>
<div class="demo">
<nav aria-label="Estados del prototipo">
<button type="button" data-demo-ir="vacio" aria-pressed="true">Vacío</button>
<button type="button" data-demo-ir="revision" aria-pressed="false">Revisión</button>
<button type="button" data-demo-ir="confirmado" aria-pressed="false">Confirmado</button>
</nav>
<article data-demo-pagina="vacio">
<div><h2>Tu primer registro</h2><p>Todavía no hay registros en este ejemplo.</p><button type="button" data-demo-ir="revision">Crear borrador de ejemplo</button></div>
<aside class="contexto"><p>Empieza con un nombre, una fecha y una explicación del movimiento.</p><p class="estado">Estado: sin registros</p></aside>
</article>
<article data-demo-pagina="revision" hidden>
<div><h2>Revisa antes de confirmar</h2><dl><div><dt>Nombre</dt><dd>Sesión de revisión</dd></div><div><dt>Fecha</dt><dd>14 de septiembre de 2026</dd></div><div><dt>Duración</dt><dd>30 minutos</dd></div></dl><button type="button" data-demo-ir="confirmado">Confirmar ejemplo</button></div>
<aside class="contexto"><p>Comprueba los datos del borrador. Este prototipo usa un registro fijo para explorar la interacción.</p><p class="estado">Estado: pendiente de confirmar</p></aside>
</article>
<article data-demo-pagina="confirmado" hidden>
<div><h2>Registro confirmado</h2><p>La sesión de revisión aparece en el ejemplo con su fecha y duración.</p><button type="button" data-demo-ir="vacio">Volver al inicio</button></div>
<aside class="contexto"><p class="estado">Estado: confirmado en el prototipo</p><p>No se envió ni se guardó información.</p></aside>
</article>
</div>
</template>
<div class="visor-fuente"><h4>Estados del ejemplo</h4><ol><li>Vacío: crear un borrador de ejemplo.</li><li>Revisión: sesión del 14-sep-2026, 30 minutos, pendiente de confirmar.</li><li>Confirmado: resultado ilustrativo; no se envían datos.</li></ol></div>
<figcaption>Vista interactiva local. El ancho conserva píxeles CSS reales; en una pantalla pequeña se desplaza la región completa.</figcaption>
</figure>Componente / Pestañas de una pieza
Un resumen antes de confirmar podría reducir las correcciones posteriores.
Esta es una hipótesis de diseño, no un resultado medido.
Tiempo hasta confirmar, correcciones posteriores y errores detectados antes del envío.
Comparar tareas del mismo alcance y conservar los registros de cada sesión.
Una mejora en velocidad no demuestra menor tasa de error ni ahorro económico.
El ejemplo no contiene observaciones de personas reales.
Use and limits: Switch short alternative views of one question. Load tabs after reader. Arrows/Home/End move focus; native Enter/Space and clicks activate. Keep one active tab, named panels, matching unique IDs and source order. Do not hide mandatory steps or essential warnings. No fetching, URL synchronization, persistence or nested instances. All sections remain visible without JavaScript and in print. init/get/destroy preserves original content.
Dependencias: packages/core/styles/fonts.css, packages/core/styles/artifact.css, packages/core/components/interface.js, packages/core/components/audio.js, packages/core/components/controls.js, packages/core/components/editorial-pieces.js, packages/core/components/reader.js, packages/core/components/tabs.js
<div class="pieza pestanas" id="pestanas-ejemplo" data-pestanas>
<h3>La afirmación, sus datos y su límite</h3>
<div class="pestanas-caja" tabindex="0" role="region" aria-label="Vistas de la evidencia, desplazables">
<div class="pestanas-nav" data-tabs-nav aria-label="Vistas de la evidencia">
<button type="button" id="tab-hallazgo" data-tab="panel-hallazgo">Hallazgo</button>
<button type="button" id="tab-datos" data-tab="panel-datos">Evidencia</button>
<button type="button" id="tab-limites" data-tab="panel-limites">Límites</button>
</div>
</div>
<section id="panel-hallazgo" data-tab-panel><h4>Una hipótesis para probar</h4><p>Un resumen antes de confirmar podría reducir las correcciones posteriores.</p><p>Esta es una hipótesis de diseño, no un resultado medido.</p></section>
<section id="panel-datos" data-tab-panel><h4>Qué necesitamos observar</h4><p>Tiempo hasta confirmar, correcciones posteriores y errores detectados antes del envío.</p><p>Comparar tareas del mismo alcance y conservar los registros de cada sesión.</p></section>
<section id="panel-limites" data-tab-panel><h4>Qué no se puede concluir</h4><p>Una mejora en velocidad no demuestra menor tasa de error ni ahorro económico.</p><p>El ejemplo no contiene observaciones de personas reales.</p></section>
</div>Componente / Diagrama anotado
Use and limits: Explain numbered parts of a flow or embedded capture without relying on hover. Keep note numbering aligned with drawing order. Wide diagrams retain scale with local scrolling. No attention measurement or click tracking.
Dependencias: packages/core/styles/fonts.css, packages/core/styles/artifact.css, packages/core/components/interface.js, packages/core/components/audio.js, packages/core/components/controls.js, packages/core/components/editorial-pieces.js, packages/core/components/reader.js
<figure class="pieza ancho" id="anotaciones-ejemplo">
<h3>Tres momentos de una confirmación</h3><div class="diagrama-caja" tabindex="0" role="region" aria-label="Flujo anotado de 720 píxeles, desplazable">
<svg class="plano-anotado" viewBox="0 0 720 210" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="anotaciones-titulo anotaciones-desc"><title id="anotaciones-titulo">Crear, revisar y confirmar</title><desc id="anotaciones-desc">Uno: crear borrador. Dos: revisar datos. Tres: confirmar. Las tres notas siguientes explican cada paso.</desc><g fill="none" stroke="currentColor"><rect x="10" y="45" width="200" height="110" rx="6"/><rect x="260" y="45" width="200" height="110" rx="6"/><rect x="510" y="45" width="200" height="110" rx="6"/><path d="M210 100h45m-9-7 9 7-9 7M460 100h45m-9-7 9 7-9 7"/></g><g text-anchor="middle" fill="currentColor"><text x="110" y="85">01</text><text x="110" y="120">Crear borrador</text><text x="360" y="85">02</text><text x="360" y="120">Revisar datos</text><text x="610" y="85">03</text><text x="610" y="120">Confirmar</text></g></svg></div>
<ol class="notas-anotadas"><li><strong>Crear.</strong> Los datos permanecen editables; todavía no hay envío.</li><li><strong>Revisar.</strong> Se presenta fecha, duración y nombre en un resumen.</li><li><strong>Confirmar.</strong> La interfaz debe explicar qué se guardó y ofrecer un siguiente paso.</li></ol><figcaption>Flujo conceptual; las distancias no representan tiempo ni cantidad. Las notas contienen toda la explicación del dibujo.</figcaption>
</figure>Componente / Evidencia ampliable
Use and limits: Inspect one embedded data image with 1–12 numbered zones. Percentage data-x/data-y coordinates range 0–100; labels up to 100 characters. Zoom/fit supports 100–400%, local two-axis scrolling and keyboard/selector access. Overlapping zones remain accessible in the list. Place markers beside evidence. This does not increase image resolution or perform OCR. Author annotations are separate from reader comments; print preserves the original. Source data stays in one table (or the image zone list). Declare data-unidad (1–40 characters); numeric magnitude is limited to 10^12. Views round to eight significant digits while source values remain. Load evidence.js; NotaEvidencia.init/get/destroy owns lifecycle. Destroy before changing the source. No network or external libraries; data remains if enhancement fails.
Dependencias: packages/core/styles/fonts.css, packages/core/styles/artifact.css, packages/core/components/interface.js, packages/core/components/audio.js, packages/core/components/controls.js, packages/core/components/editorial-pieces.js, packages/core/components/reader.js, packages/core/components/chart-core.js, packages/core/components/evidence.js
<figure class="amplio" id="evidencia-imagen" data-evidencia="imagen">
<h3>Revisar una evidencia en detalle</h3>
<div data-evidencia-imagen><img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAwIiBoZWlnaHQ9IjcyMCIgdmlld0JveD0iMCAwIDEyMDAgNzIwIj48cmVjdCB3aWR0aD0iMTIwMCIgaGVpZ2h0PSI3MjAiIGZpbGw9IiNmYWY1ZWQiLz48ZyBmaWxsPSIjMjgyYjM2IiBmb250LWZhbWlseT0ic2Fucy1zZXJpZiI+PHRleHQgeD0iNzIiIHk9IjkwIiBmb250LXNpemU9IjM4Ij5SZWdpc3RybyBkZSB1bmEgcmV2aXNpw7NuPC90ZXh0Pjx0ZXh0IHg9IjcyIiB5PSIxMzYiIGZvbnQtc2l6ZT0iMjIiPklMVVNUUkFDScOTTiDCtyBOTyBFUyBVTkEgRkFDVFVSQSBOSSBVTiBSRUdJU1RSTyBSRUFMPC90ZXh0PjxwYXRoIGQ9Ik03MiAxNzJIMTEyOE03MiA1MDBIMTEyOCIgc3Ryb2tlPSIjOWE4YzdkIi8+PHRleHQgeD0iNzIiIHk9IjIzMCIgZm9udC1zaXplPSIyNCI+RG9jdW1lbnRvPC90ZXh0Pjx0ZXh0IHg9IjY2MCIgeT0iMjMwIiBmb250LXNpemU9IjI0Ij5SRVYtMDQyIMK3IDE1IHNlcHRpZW1icmUgMjAyNjwvdGV4dD48dGV4dCB4PSI3MiIgeT0iMzA2IiBmb250LXNpemU9IjI0Ij5FbnRyZWdhcyByZXZpc2FkYXM8L3RleHQ+PHRleHQgeD0iOTcwIiB5PSIzMDYiIGZvbnQtc2l6ZT0iMzIiPjI0PC90ZXh0Pjx0ZXh0IHg9IjcyIiB5PSIzODIiIGZvbnQtc2l6ZT0iMjQiPlBlbmRpZW50ZXMgZGUgZXZpZGVuY2lhPC90ZXh0Pjx0ZXh0IHg9Ijk3MCIgeT0iMzgyIiBmb250LXNpemU9IjMyIj4zPC90ZXh0Pjx0ZXh0IHg9IjcyIiB5PSI1NzIiIGZvbnQtc2l6ZT0iMjQiPlNpZ3VpZW50ZSBwYXNvPC90ZXh0Pjx0ZXh0IHg9IjcyIiB5PSI2MjAiIGZvbnQtc2l6ZT0iMjgiPlJldmlzYXIgbG9zIHRyZXMgc29wb3J0ZXMgYW50ZXMgZGUgY2VycmFyLjwvdGV4dD48L2c+PC9zdmc+" width="1200" height="720" alt="Ilustración de REV-042: 24 entregas revisadas, tres pendientes de evidencia. Se propone revisar soportes antes de cerrar."></div>
<ol data-evidencia-zonas>
<li data-x="92" data-y="26">Fecha y referencia: REV-042, 15 septiembre 2026.</li>
<li data-x="91" data-y="52">Tres entregas todavía requieren evidencia.</li>
<li data-x="89" data-y="86">Siguiente acción: revisar los tres soportes antes de cerrar.</li>
</ol>
<figcaption>Ilustración creada para esta receta; reemplazar por una captura o imagen autorizada.</figcaption>
</figure>Capítulo 08 / 09
Geografía, composiciones con Three y sonido optativo.
Componente / Sonido optativo
<a id="recetas-escritura"></a>
Use and limits: The standard base loads audio.js before reader and uses the approved embedded cmrg.me recordings. It starts enabled by preference but requires a real interaction to unlock Web Audio; mute and volume are remembered. Click .9, hover .4, pencil .6 and positive/negative .8 are multiplied by initial master volume .65. Hover playback rate is .9; pencil pitch/duration stay original, without loops or normalization. No runtime downloads. Only explicitly marked interactions produce sound; theme changes, focus and generic scrolling remain silent. Hiding the tab pauses/cancels voices. Inspect NotaAudio.enabled, activeVoices, plays and samples; disable() stops voices. Provenance is in reference-audio/PROVENANCE.md and tests/evidence/sounds-cmrg.json. The older independent sound.js channel starts muted, does not persist preference, and stops when hidden. Its 60 ms sine signals are a legacy fallback, not the reference recording. A digital gain does not establish physical loudness. init/get/destroy clean up contexts and listeners.
Dependencias: packages/core/styles/fonts.css, packages/core/styles/artifact.css, packages/core/components/interface.js, packages/core/components/audio.js, packages/core/components/controls.js, packages/core/components/editorial-pieces.js, packages/core/components/reader.js, packages/core/components/sound.js
<aside class="nota-sonido" data-canal-sonido aria-labelledby="sonido-titulo">
<h3 id="sonido-titulo">Una señal breve.</h3>
<p>Activa el sonido y prueba una señal. Cada acción también se describe en texto.</p>
<div><button type="button" data-audio-activar aria-pressed="false">Activar sonido</button></div>
<div>
<button type="button" data-audio="accion" data-mensaje="Ejemplo de acción seleccionada.">Acción</button>
<button type="button" data-audio="confirmacion" data-mensaje="Ejemplo de confirmación completada.">Confirmación</button>
<button type="button" data-audio="atencion" data-mensaje="Ejemplo: revisa el dato antes de continuar.">Atención</button>
</div>
<p role="status" aria-live="polite">Sonido apagado.</p>
</aside>Componente / Three.js · XYZ
| Prueba | Carga (req/s) | Latencia (ms) | Memoria (MB) |
|---|---|---|---|
| A | 10 | 80 | 100 |
| B | 20 | 95 | 120 |
| C | 35 | 140 | 150 |
| D | 50 | 170 | 210 |
Use and limits: Use a third dimension only when it adds a meaningful spatial relationship. One pinned Three.js inclusion can serve all scenes/globes. Load scene.js once. Accepts 1–100 finite complete XYZ records; axes have independent domains, so geometric distance across different units is not a common metric. No regression, jitter or correlation claims. Selection reveals an exact record while dimming others. Keep short labels, units in headers, a 600 px local canvas minimum and the permanent source table. Use a 2D scatterplot when two variables suffice.
Dependencias: packages/core/styles/fonts.css, packages/core/styles/artifact.css, packages/core/components/interface.js, packages/core/components/audio.js, packages/core/components/controls.js, packages/core/components/editorial-pieces.js, packages/core/components/reader.js, https://cdnjs.cloudflare.com/ajax/libs/three.js/0.160.1/three.min.js, packages/core/components/scene.js
<figure class="ancho" data-escena="xyz" id="xyz-ejemplo">
<div class="tabla-caja" tabindex="0" role="region" aria-label="Carga, latencia y memoria, tabla desplazable">
<table><caption>Tres variables de una misma prueba</caption>
<thead><tr><th scope="col">Prueba</th><th scope="col">Carga (req/s)</th><th scope="col">Latencia (ms)</th><th scope="col">Memoria (MB)</th></tr></thead>
<tbody>
<tr><th scope="row">A</th><td data-valor="10">10</td><td data-valor="80">80</td><td data-valor="100">100</td></tr>
<tr><th scope="row">B</th><td data-valor="20">20</td><td data-valor="95">95</td><td data-valor="120">120</td></tr>
<tr><th scope="row">C</th><td data-valor="35">35</td><td data-valor="140">140</td><td data-valor="150">150</td></tr>
<tr><th scope="row">D</th><td data-valor="50">50</td><td data-valor="170">170</td><td data-valor="210">210</td></tr>
</tbody>
</table>
</div>
<figcaption>Datos ilustrativos. Posiciones X/Y/Z normalizadas por sus dominios, con valores reales en los ejes. Selecciona un registro para identificarlo; proyección ortográfica, sin tamaños por perspectiva.</figcaption>
</figure>Componente / Three.js · etapas
| Etapa | Tiempo (ms) | Qué ocurre |
|---|---|---|
| 1 · Recibir | 20 ms | Leer la entrada. |
| 2 · Validar | 40 ms | Comprobar el contrato. |
| 3 · Consultar | 120 ms | Esperar la fuente de datos. |
| 4 · Responder | 30 ms | Entregar la salida. |
Use and limits: Explain ordered process stages with durations. Supports 1–12 stages with nonnegative duration; zero height is not inflated. No dependency planning, parallelism, cumulative waterfall or physical simulation. Do not sum overlapping durations as elapsed time. Selection connects a stage to its written explanation; initial rotation is paused. NotaEscena.init/get, select(index|null), rotate(dx,dy), pause/resume and idempotent destroy() manage instances. Rotation is .15 rad/s and runs only while visible, active and requested without reduced motion. Destroy releases RAF, observers, listeners and WebGL resources while restoring the source table. Destroy/reinitialize to replace data.
Dependencias: packages/core/styles/fonts.css, packages/core/styles/artifact.css, packages/core/components/interface.js, packages/core/components/audio.js, packages/core/components/controls.js, packages/core/components/editorial-pieces.js, packages/core/components/reader.js, https://cdnjs.cloudflare.com/ajax/libs/three.js/0.160.1/three.min.js, packages/core/components/scene.js
<figure class="ancho" data-escena="etapas" id="etapas-ejemplo">
<div class="tabla-caja" tabindex="0" role="region" aria-label="Duración por etapa, tabla desplazable">
<table><caption>Dónde tarda una solicitud</caption>
<thead><tr><th scope="col">Etapa</th><th scope="col">Tiempo (ms)</th><th scope="col">Qué ocurre</th></tr></thead>
<tbody>
<tr><th scope="row">1 · Recibir</th><td data-valor="20">20 ms</td><td>Leer la entrada.</td></tr>
<tr><th scope="row">2 · Validar</th><td data-valor="40">40 ms</td><td>Comprobar el contrato.</td></tr>
<tr><th scope="row">3 · Consultar</th><td data-valor="120">120 ms</td><td>Esperar la fuente de datos.</td></tr>
<tr><th scope="row">4 · Responder</th><td data-valor="30">30 ms</td><td>Entregar la salida.</td></tr>
</tbody>
</table>
</div>
<figcaption>Ejemplo ilustrativo: 210 ms si las cuatro etapas ocurren en serie. Alturas proporcionales al tiempo, orden horizontal secuencial; anchura y profundidad constantes sin significado cuantitativo.</figcaption>
</figure>Componente / Globo narrado
Una ruta por etapa, con contexto escrito. Selecciona anterior o siguiente para orientar el globo.
Tres etapas ilustrativas; el recorrido empieza inmóvil.
Se comparte la primera propuesta para revisión.
La propuesta se convierte en una prueba de interacción.
Las observaciones regresan al equipo que decide.
Use and limits: Use location and sequence together, keeping written stages visible. Load globe before reports and share one Three.js dependency. data-lugar identifies a place; repeated IDs require identical coordinates/name. Every route has a unique ID and two locations. No automatic advance, sound, geocoding or network maps. Starts paused; selection aligns the globe and story. Manual rotation does not change the stage. Without WebGL retain the narrative and route list. Respect reduced motion and destroy resources when removed.
Dependencias: packages/core/styles/fonts.css, packages/core/styles/artifact.css, packages/core/components/interface.js, packages/core/components/audio.js, packages/core/components/controls.js, packages/core/components/editorial-pieces.js, packages/core/components/reader.js, https://cdnjs.cloudflare.com/ajax/libs/three.js/0.160.1/three.min.js, packages/core/components/globe.js, packages/core/components/chart-core.js, packages/core/components/reports.js
<figure class="pieza ancho" id="recorrido-ejemplo" data-reporte="recorrido">
<h3>Seguir el viaje de una idea</h3>
<p>Una ruta por etapa, con contexto escrito. Selecciona anterior o siguiente para orientar el globo.</p>
<div data-recorrido-globo></div>
<div class="acciones">
<button type="button" data-paso="prev">← Etapa anterior</button>
<button type="button" data-paso="next">Etapa siguiente →</button>
</div>
<p data-recorrido-estado role="status">Tres etapas ilustrativas; el recorrido empieza inmóvil.</p>
<ol class="recorrido-pasos">
<li data-ruta="idea-bog-mad"><strong><span data-lugar="BOG" data-lat="4.711" data-lon="-74.0721">Bogotá</span> → <span data-lugar="MAD" data-lat="40.4168" data-lon="-3.7038">Madrid</span></strong><p>Se comparte la primera propuesta para revisión.</p></li>
<li data-ruta="idea-mad-hnd"><strong><span data-lugar="MAD" data-lat="40.4168" data-lon="-3.7038">Madrid</span> → <span data-lugar="HND" data-lat="35.5494" data-lon="139.7798">Tokio</span></strong><p>La propuesta se convierte en una prueba de interacción.</p></li>
<li data-ruta="idea-hnd-bog"><strong><span data-lugar="HND" data-lat="35.5494" data-lon="139.7798">Tokio</span> → <span data-lugar="BOG" data-lat="4.711" data-lon="-74.0721">Bogotá</span></strong><p>Las observaciones regresan al equipo que decide.</p></li>
</ol>
<figcaption>Relato ficticio. Las coordenadas son geográficas; no representan vuelos, distancias ni actividad real.</figcaption>
</figure>Componente / Columnas geográficas 3D
| Sede | Latitud | Longitud | Entregas |
|---|---|---|---|
| Bogotá | 4.711 | -74.072 | 240 |
| Medellín | 6.244 | -75.582 | 180 |
| Cali | 3.452 | -76.532 | 120 |
| Barranquilla | 10.969 | -74.781 | 60 |
Use and limits: Explore location and volume when perspective is useful. Up to 12 nonnegative Colombian locations, constant footprints and a shared height scale from zero. Equirectangular projection, no terrain elevation. Load one Three.js dependency, geography and scene. Starts without rotation, pauses outside view and respects reduced motion; destroy releases resources. Keep the permanent table. Prefer bars for close height comparisons.
Dependencias: packages/core/styles/fonts.css, packages/core/styles/artifact.css, packages/core/components/interface.js, packages/core/components/audio.js, packages/core/components/controls.js, packages/core/components/editorial-pieces.js, packages/core/components/reader.js, https://cdnjs.cloudflare.com/ajax/libs/three.js/0.160.1/three.min.js, packages/core/components/geography.js, packages/core/components/scene.js
<figure class="ancho" id="analitica-columnas-mapa" data-escena="columnas" data-unidad="entregas">
<div class="tabla-caja" tabindex="0" role="region" aria-label="Datos de Columnas geográficas 3D, desplazables">
<table><caption>Columnas geográficas 3D</caption>
<thead><tr><th scope="col">Sede</th><th scope="col">Latitud</th><th scope="col">Longitud</th><th scope="col">Entregas</th></tr></thead>
<tbody>
<tr><th scope="row">Bogotá</th><td data-valor="4.711">4.711</td><td data-valor="-74.072">-74.072</td><td data-valor="240">240</td></tr>
<tr><th scope="row">Medellín</th><td data-valor="6.244">6.244</td><td data-valor="-75.582">-75.582</td><td data-valor="180">180</td></tr>
<tr><th scope="row">Cali</th><td data-valor="3.452">3.452</td><td data-valor="-76.532">-76.532</td><td data-valor="120">120</td></tr>
<tr><th scope="row">Barranquilla</th><td data-valor="10.969">10.969</td><td data-valor="-74.781">-74.781</td><td data-valor="60">60</td></tr>
</tbody>
</table>
</div>
<figcaption>Datos ficticios de logística; no son operaciones de Liftit. Ubicaciones urbanas aproximadas. Contorno: <a href="https://www.naturalearthdata.com/about/terms-of-use/">Natural Earth</a>, dominio público, escala 1:110m.</figcaption>
</figure>Componente / Arcos logísticos 3D
| Conexión | Lat. origen | Lon. origen | Lat. destino | Lon. destino | Viajes |
|---|---|---|---|---|---|
| Bogotá → Medellín | 4.711 | -74.072 | 6.244 | -75.582 | 80 |
| Bogotá → Cali | 4.711 | -74.072 | 3.452 | -76.532 | 50 |
| Bogotá → Barranquilla | 4.711 | -74.072 | 10.969 | -74.781 | 30 |
Use and limits: Explain up to 12 origin/destination connections in Colombia. Tube cross-section is proportional to trips; constant arc height is visual separation, not altitude or duration. Zero has zero cross-section. No road routing, ETA, animated vehicles or live tracking. Share Three/geography/scene lifecycle; selector and table retain exact data.
Dependencias: packages/core/styles/fonts.css, packages/core/styles/artifact.css, packages/core/components/interface.js, packages/core/components/audio.js, packages/core/components/controls.js, packages/core/components/editorial-pieces.js, packages/core/components/reader.js, https://cdnjs.cloudflare.com/ajax/libs/three.js/0.160.1/three.min.js, packages/core/components/geography.js, packages/core/components/scene.js
<figure class="ancho" id="analitica-arcos-mapa" data-escena="arcos" data-unidad="viajes">
<div class="tabla-caja densa" tabindex="0" role="region" aria-label="Datos de Arcos logísticos 3D, desplazables">
<table><caption>Arcos logísticos 3D</caption>
<thead><tr><th scope="col">Conexión</th><th scope="col">Lat. origen</th><th scope="col">Lon. origen</th><th scope="col">Lat. destino</th><th scope="col">Lon. destino</th><th scope="col">Viajes</th></tr></thead>
<tbody>
<tr><th scope="row">Bogotá → Medellín</th><td data-valor="4.711">4.711</td><td data-valor="-74.072">-74.072</td><td data-valor="6.244">6.244</td><td data-valor="-75.582">-75.582</td><td data-valor="80">80</td></tr>
<tr><th scope="row">Bogotá → Cali</th><td data-valor="4.711">4.711</td><td data-valor="-74.072">-74.072</td><td data-valor="3.452">3.452</td><td data-valor="-76.532">-76.532</td><td data-valor="50">50</td></tr>
<tr><th scope="row">Bogotá → Barranquilla</th><td data-valor="4.711">4.711</td><td data-valor="-74.072">-74.072</td><td data-valor="10.969">10.969</td><td data-valor="-74.781">-74.781</td><td data-valor="30">30</td></tr>
</tbody>
</table>
</div>
<figcaption>Datos ficticios de logística; no son operaciones de Liftit. Ubicaciones urbanas aproximadas. Contorno: <a href="https://www.naturalearthdata.com/about/terms-of-use/">Natural Earth</a>, dominio público, escala 1:110m.</figcaption>
</figure>Componente / Capacidad de almacén 3D
| Ubicación | X (m) | Z (m) | Ocupados | Capacidad |
|---|---|---|---|---|
| A1 | 0 | 0 | 8 | 12 |
| A2 | 4 | 0 | 11 | 12 |
| B1 | 0 | 6 | 5 | 10 |
| B2 | 4 | 6 | 9 | 10 |
| C1 | 0 | 12 | 2 | 8 |
| C2 | 4 | 12 | 6 | 8 |
Use and limits: Show available capacity across 1–12 locations with finite X/Z coordinates in metres, positive capacity and occupancy between zero and capacity. X/Z share scale; constant box footprints are not actual shelf dimensions. Height represents position count, not metres. Duplicate coordinates can overlap. No structural-safety, evacuation or digital-twin claims. Keep table and scene lifecycle cleanup.
Dependencias: packages/core/styles/fonts.css, packages/core/styles/artifact.css, packages/core/components/interface.js, packages/core/components/audio.js, packages/core/components/controls.js, packages/core/components/editorial-pieces.js, packages/core/components/reader.js, https://cdnjs.cloudflare.com/ajax/libs/three.js/0.160.1/three.min.js, packages/core/components/scene.js
<figure class="ancho" id="analitica-almacen" data-escena="almacen" data-unidad="posiciones">
<div class="tabla-caja densa" tabindex="0" role="region" aria-label="Datos de Capacidad de almacén 3D, desplazables">
<table><caption>Capacidad de almacén 3D</caption>
<thead><tr><th scope="col">Ubicación</th><th scope="col">X (m)</th><th scope="col">Z (m)</th><th scope="col">Ocupados</th><th scope="col">Capacidad</th></tr></thead>
<tbody>
<tr><th scope="row">A1</th><td data-valor="0">0</td><td data-valor="0">0</td><td data-valor="8">8</td><td data-valor="12">12</td></tr>
<tr><th scope="row">A2</th><td data-valor="4">4</td><td data-valor="0">0</td><td data-valor="11">11</td><td data-valor="12">12</td></tr>
<tr><th scope="row">B1</th><td data-valor="0">0</td><td data-valor="6">6</td><td data-valor="5">5</td><td data-valor="10">10</td></tr>
<tr><th scope="row">B2</th><td data-valor="4">4</td><td data-valor="6">6</td><td data-valor="9">9</td><td data-valor="10">10</td></tr>
<tr><th scope="row">C1</th><td data-valor="0">0</td><td data-valor="12">12</td><td data-valor="2">2</td><td data-valor="8">8</td></tr>
<tr><th scope="row">C2</th><td data-valor="4">4</td><td data-valor="12">12</td><td data-valor="6">6</td><td data-valor="8">8</td></tr>
</tbody>
</table>
</div>
<figcaption>Almacén ficticio. Coordenadas en planta; sólido = posiciones ocupadas, contorno = capacidad total.</figcaption>
</figure>Componente / Globo operativo de Colombia
| Vehículo | Origen | Destino | Avance ilustrativo % | Pedidos | Estado al corte | Actualización | Contexto | Siguiente acción |
|---|---|---|---|---|---|---|---|---|
| LFT-021 | Bogotá | Medellín | 35 | 18 | En ruta | Salida confirmada; sin novedades reportadas en este ejemplo. | Próximo hito: llegada al punto de distribución. | |
| LFT-034 | Bogotá | Cali | 62 | 12 | Con novedad | Congestión reportada. La demo no estima cuánto retrasará la llegada. | Acción: confirmar situación con el transportista antes de informar una nueva hora. | |
| LFT-056 | Bogotá | Barranquilla | 18 | 9 | En ruta | Documentos verificados; nueve pedidos asociados al vehículo de ejemplo. | Próximo hito: confirmar recepción en destino. |
Use and limits: Explore a declared operational snapshot across Colombian cities with selectable vehicles. Load one Three 0.160.1, geography, globe and fleet. One instance; 1–12 vehicles with unique IDs, distinct endpoints, valid Colombian coordinates, progress 0–100, nonnegative integer orders and a zoned ISO timestamp. Routes are schematic arcs, never streets, GPS, ETA or measured distance. Drag rotates; Shift+drag pans; focused wheel/buttons and pinch zoom. Arrows rotate, Shift+arrows pan, +/- zoom and Home resets. No inertia/camera animation. Rear-hemisphere labels/vehicles hide; collision-prone labels remain accessible in route focus and list. Manual exploration can move endpoints out of view; reset restores framing. Playback demonstrates positions for 45 seconds without sound or delivery-state updates, pausing when hidden and respecting reduced motion/manual progress. A historical snapshot must not be labeled live. Without WebGL retain list/detail/table. NotaFlota.init/get, seek(0…100), select(id) and destroy manage lifecycle; destroy/update/reinitialize for another snapshot.
Dependencias: packages/core/styles/fonts.css, packages/core/styles/artifact.css, packages/core/components/interface.js, packages/core/components/audio.js, packages/core/components/controls.js, packages/core/components/editorial-pieces.js, packages/core/components/reader.js, https://cdnjs.cloudflare.com/ajax/libs/three.js/0.160.1/three.min.js, packages/core/components/geography.js, packages/core/components/globe.js, packages/core/components/fleet.js
<figure class="amplio" id="flota-colombia" data-flota>
<div class="tabla-caja densa" tabindex="0" role="region" aria-label="Corte de flota de ejemplo, desplazable">
<table><caption>Flota ficticia · 15 septiembre 2026, 08:00 COT · posiciones iniciales de demostración</caption>
<thead><tr><th scope="col">Vehículo</th><th scope="col">Origen</th><th scope="col">Destino</th><th scope="col">Avance ilustrativo %</th><th scope="col">Pedidos</th><th scope="col">Estado al corte</th><th scope="col">Actualización</th><th scope="col">Contexto</th><th scope="col">Siguiente acción</th></tr></thead>
<tbody>
<tr><th scope="row">LFT-021</th><td data-lat="4.711" data-lon="-74.072">Bogotá</td><td data-lat="6.244" data-lon="-75.582">Medellín</td><td data-valor="35">35</td><td data-valor="18">18</td><td>En ruta</td><td><time datetime="2026-09-15T08:00:00-05:00">08:00 COT</time></td><td>Salida confirmada; sin novedades reportadas en este ejemplo.</td><td>Próximo hito: llegada al punto de distribución.</td></tr>
<tr><th scope="row">LFT-034</th><td data-lat="4.711" data-lon="-74.072">Bogotá</td><td data-lat="3.452" data-lon="-76.532">Cali</td><td data-valor="62">62</td><td data-valor="12">12</td><td>Con novedad</td><td><time datetime="2026-09-15T07:58:00-05:00">07:58 COT</time></td><td>Congestión reportada. La demo no estima cuánto retrasará la llegada.</td><td>Acción: confirmar situación con el transportista antes de informar una nueva hora.</td></tr>
<tr><th scope="row">LFT-056</th><td data-lat="4.711" data-lon="-74.072">Bogotá</td><td data-lat="10.969" data-lon="-74.781">Barranquilla</td><td data-valor="18">18</td><td data-valor="9">9</td><td>En ruta</td><td><time datetime="2026-09-15T07:59:00-05:00">07:59 COT</time></td><td>Documentos verificados; nueve pedidos asociados al vehículo de ejemplo.</td><td>Próximo hito: confirmar recepción en destino.</td></tr>
</tbody>
</table>
</div>
<figcaption>Ejemplo ficticio, no una operación real de Liftit. Coordenadas urbanas aproximadas WGS84. Colombia: Natural Earth 1:110m, dominio público; máscara terrestre COBE. Los arcos no son vías terrestres.</figcaption>
</figure>Capítulo 09 / 09
Nueve papeles, escritura animada, sonido, código y comentarios.
Componente / Terminal
rango bolsillos total COP
------------ --------- ---------------
menos de $100 349 5.120
más de $1M 5 14.434.490Use and limits: Use when exact console output is the evidence, not as a substitute for an analytical table. The terminal intentionally retains a dark surface in light and dark documents, with theme-specific tones. Copy uses the shared data-copiar behavior and a manual-selection fallback. Align plain output with monospace spaces inside pre. It never executes commands.
Dependencias: packages/core/styles/fonts.css, packages/core/styles/artifact.css, packages/core/components/interface.js, packages/core/components/audio.js, packages/core/components/controls.js, packages/core/components/editorial-pieces.js, packages/core/components/reader.js
<figure class="ancho">
<div class="terminal">
<div class="cab"><span>saldo por bolsillo · ejemplo ilustrativo</span>
<button type="button" data-copiar="t-saldos" aria-label="Copiar la salida">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" aria-hidden="true">
<rect x="9" y="9" width="11" height="11" rx="2"/><path d="M5 15V5a2 2 0 0 1 2-2h10"/>
</svg>
</button>
<span class="copia-estado" role="status" aria-live="polite"></span>
</div>
<div class="cuerpo">
<pre tabindex="0" aria-label="Distribución del saldo"><code id="t-saldos"><span class="tenue"> rango bolsillos total COP</span>
<span class="tenue"> ------------ --------- ---------------</span>
menos de $100 349 5.120
más de $1M 5 <span class="subra">14.434.490</span></code></pre>
</div>
</div>
<figcaption>Datos ilustrativos. La columna que importa va señalada, no en negrita.</figcaption>
</figure>Componente / Escritura por trazos
«a mano»
Activa el sonido en Apariencia —o en el control local— y pulsa Repetir para escuchar el trazo.
Trazo completo.
<a id="recetas-three"></a>
Use and limits: Use ordered SVG centerline paths for a brief secondary handwritten gesture. It does not turn arbitrary text or filled font outlines into handwriting. Update data-texto-escritura whenever paths change; permanent equivalent text remains and SVG is aria-hidden. data-al-ver starts once at 30% visibility; otherwise readers choose replay. data-escritura-sonora requests approved pencil sound only after audio unlock and respects mute. Supported duration is 100–10000 ms. Leaving view, hiding the tab or reduced motion cancels/completes the gesture with no RAF or queued replay. NotaEscritura.init/get, play(), finish() and destroy() manage lifecycle. play() respects reduced motion.
Dependencias: packages/core/styles/fonts.css, packages/core/styles/artifact.css, packages/core/components/interface.js, packages/core/components/audio.js, packages/core/components/controls.js, packages/core/components/editorial-pieces.js, packages/core/components/reader.js, packages/core/components/sound.js, packages/core/components/writing.js
<figure class="ancho nota-escritura" data-escritura data-escritura-sonora data-al-ver data-canal-sonido data-duracion="2400">
<div class="escritura-caja" tabindex="0" role="region" aria-label="Escritura a mano, desplazable">
<svg viewBox="0 0 420 110" aria-hidden="true">
<path data-trazo d="M55 51 C43 38 27 51 30 68 C34 83 52 69 54 53 L52 76 Q58 78 65 71"/>
<path data-trazo d="M96 77 L101 48 L99 69 Q111 41 120 52 L117 74 Q132 42 142 54 L140 74 Q142 81 151 73"/>
<path data-trazo d="M179 53 C167 40 154 55 157 69 C161 84 179 68 180 54 L178 77 Q185 78 193 71"/>
<path data-trazo d="M207 77 L212 49 L210 68 Q224 41 235 53 L232 74 Q236 81 246 72"/>
<path data-trazo d="M274 50 C259 44 249 59 254 72 C260 85 280 75 281 61 Q279 50 271 51 Q270 58 289 56"/>
<path data-trazo d="M28 91 Q123 84 214 91 T293 89"/>
</svg>
</div>
<div class="escritura-controles">
<button type="button" data-audio-activar aria-pressed="false">Activar sonido</button>
<button type="button" data-escribir data-audio="escritura" data-mensaje="Repetir escritura con señal breve si el sonido está activado.">Repetir escritura</button>
<button type="button" data-finalizar>Mostrar trazo completo</button>
</div>
<p data-texto-escritura>«a mano»</p><p class="procedencia">Activa el sonido en Apariencia —o en el control local— y pulsa Repetir para escuchar el trazo.</p>
<p role="status" aria-live="polite">Trazo completo.</p>
<figcaption>Gesto ilustrativo original de Margen. 2400 ms repartidos por la longitud de cada trazo; la frase siempre permanece escrita debajo.</figcaption>
</figure>Componente / Apariencia y lectura cómoda
Prueba los tres controles. Comparten las preferencias de esta nota.
01 · Círculo
02 · Con etiqueta
03 · Cápsula
Color, tipografía, tamaño y trama se pueden combinar. Las tablas y figuras conservan sus anchos.
Use and limits: Use one appearance control per document; the catalog shows variants only for comparison. The shared dock hosts the normal control. Themes, typography and sound are separate tabs with arrows/Home/End navigation. Escape closes and returns focus; outside interaction closes. Theme selection stays open for comparison. Family and light/dark/system mode are independent. Search ignores accents; category, favorites and result count narrow a compact scrollable list. The current family remains named in the header. Sound and volume belong only to Sound. Six heading/body pairs are supported: Instrument Serif/Geist, Geist/Geist, Geist Mono/Geist, Literata/Literata, Instrument Serif/Literata and Geist Mono/Literata. Reenie Beanie remains for annotations. Include reader once, preserve unique IDs and radio names, and define complete tokens when adding a family. Preferences are local unless a connected host stores them; without storage they last for the session. Sound enabled does not prove audible output. Paper grain is independent and removed in print. Check typography reflow on real content. This is not a token editor or prototype device emulator.
Dependencias: packages/core/styles/fonts.css, packages/core/styles/artifact.css, packages/core/components/interface.js, packages/core/components/audio.js, packages/core/components/controls.js, packages/core/components/editorial-pieces.js, packages/core/components/reader.js
<div class="pieza" id="apariencia-ejemplo">
<h3>Una llave pequeña, distintas formas de leer</h3>
<p>Prueba los tres controles. Comparten las preferencias de esta nota.</p>
<div class="apariencia-variantes">
<div><p class="variante-nombre">01 · Círculo</p>
<details class="apariencia-menu orbita" data-apariencia-menu>
<summary aria-label="Apariencia del documento" aria-controls="panel-apariencia-orbita"><span class="apariencia-icono"><svg class="icono-sol" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="4"/><path d="M12 2v2m0 16v2M2 12h2m16 0h2M5 5l1.5 1.5m11 11L19 19M5 19l1.5-1.5m11-11L19 5"/></svg><svg class="icono-luna" viewBox="0 0 24 24" aria-hidden="true"><path d="M20.4 14A8.6 8.6 0 0 1 10 3.6 8.6 8.6 0 1 0 20.4 14Z"/></svg></span></summary>
<div class="apariencia-panel apariencia-explorador" id="panel-apariencia-orbita" tabindex="0" role="region" aria-label="Opciones de apariencia, desplazables">
<div class="apariencia-encabezado"><p class="apariencia-titulo">Apariencia</p><span data-tema-actual>Sistema</span></div>
<div class="apariencia-pestanas" role="tablist" aria-label="Preferencias del documento"><button type="button" role="tab" id="preferencia-apariencia-orbita-temas" aria-controls="preferencia-panel-apariencia-orbita-temas" aria-selected="true" tabindex="0" data-preferencia-tab="temas">Temas</button><button type="button" role="tab" id="preferencia-apariencia-orbita-letras" aria-controls="preferencia-panel-apariencia-orbita-letras" aria-selected="false" tabindex="-1" data-preferencia-tab="letras">Letras</button><button type="button" role="tab" id="preferencia-apariencia-orbita-sonido" aria-controls="preferencia-panel-apariencia-orbita-sonido" aria-selected="false" tabindex="-1" data-preferencia-tab="sonido">Sonido</button></div><section role="tabpanel" tabindex="0" id="preferencia-panel-apariencia-orbita-temas" aria-labelledby="preferencia-apariencia-orbita-temas" data-preferencia-panel="temas"><fieldset class="apariencia-modos"><legend>Modo</legend><div><label><input type="radio" name="modo-apariencia-orbita" value="light" data-elegir-modo><span>Claro</span></label><label><input type="radio" name="modo-apariencia-orbita" value="dark" data-elegir-modo><span>Oscuro</span></label><label><input type="radio" name="modo-apariencia-orbita" value="system" data-elegir-modo checked><span>Sistema</span></label></div><p data-modo-estado>Se adapta a la apariencia del dispositivo.</p></fieldset><div class="apariencia-filtros"><label>Buscar tema<input type="search" data-buscar-tema placeholder="Nombre o color" autocomplete="off"></label><label>Categoría<select data-familia-tema><option value="">Todas</option><option value="editorial">Editoriales</option><option value="marca">Marcas</option><option value="tecnico">Técnicos</option><option value="producto">Producto</option><option value="editor">Editores</option></select></label></div><fieldset class="apariencia"><legend class="sr-only">Paleta del documento</legend><div class="apariencia-colores" tabindex="0" role="region" aria-label="Temas disponibles, desplazables"><label data-tema-familia="editorial"><input type="radio" name="color-apariencia-orbita" value="editorial" data-elegir-tema checked><span class="paleta-mini" data-muestra-tema="editorial" aria-hidden="true"><i></i><b></b></span><span>Editorial<small>Papel cálido · cobre</small></span></label>
<label data-tema-familia="editorial"><input type="radio" name="color-apariencia-orbita" value="sea" data-elegir-tema><span class="paleta-mini" data-muestra-tema="sea" aria-hidden="true"><i></i><b></b></span><span>Sea<small>Azul oceánico · menta</small></span></label>
<label data-tema-familia="editorial"><input type="radio" name="color-apariencia-orbita" value="oliva" data-elegir-tema><span class="paleta-mini" data-muestra-tema="oliva" aria-hidden="true"><i></i><b></b></span><span>Oliva<small>Botánico · verde</small></span></label>
<label data-tema-familia="editorial"><input type="radio" name="color-apariencia-orbita" value="arcilla" data-elegir-tema><span class="paleta-mini" data-muestra-tema="arcilla" aria-hidden="true"><i></i><b></b></span><span>Arcilla<small>Terracota · arena</small></span></label>
<label data-tema-familia="editorial"><input type="radio" name="color-apariencia-orbita" value="ciruela" data-elegir-tema><span class="paleta-mini" data-muestra-tema="ciruela" aria-hidden="true"><i></i><b></b></span><span>Ciruela<small>Malva · tinta violeta</small></span></label>
<label data-tema-familia="marca"><input type="radio" name="color-apariencia-orbita" value="liftit" data-elegir-tema><span class="paleta-mini" data-muestra-tema="liftit" aria-hidden="true"><i></i><b></b></span><span>Liftit<small>LMS · Ribbon, Bay y coral</small></span></label>
<label data-tema-familia="marca"><input type="radio" name="color-apariencia-orbita" value="tikin" data-elegir-tema><span class="paleta-mini" data-muestra-tema="tikin" aria-hidden="true"><i></i><b></b></span><span>Tikin<small>Blanco y negro · rojo Tikin</small></span></label>
<label data-tema-familia="marca"><input type="radio" name="color-apariencia-orbita" value="catabum" data-elegir-tema><span class="paleta-mini" data-muestra-tema="catabum" aria-hidden="true"><i></i><b></b></span><span>Catabum<small>Comunidad · violeta y magenta</small></span></label>
<label data-tema-familia="marca"><input type="radio" name="color-apariencia-orbita" value="kaira" data-elegir-tema><span class="paleta-mini" data-muestra-tema="kaira" aria-hidden="true"><i></i><b></b></span><span>Kaira<small>Warm paper · deep plum · antique gold</small></span></label>
<label data-tema-familia="tecnico"><input type="radio" name="color-apariencia-orbita" value="blueprint" data-elegir-tema><span class="paleta-mini" data-muestra-tema="blueprint" aria-hidden="true"><i></i><b></b></span><span>Blueprint<small>Plano · cuadrícula</small></span></label>
<label data-tema-familia="tecnico"><input type="radio" name="color-apariencia-orbita" value="hacker" data-elegir-tema><span class="paleta-mini" data-muestra-tema="hacker" aria-hidden="true"><i></i><b></b></span><span>Hacker<small>Terminal · verde</small></span></label>
<label data-tema-familia="producto"><input type="radio" name="color-apariencia-orbita" value="linear" data-elegir-tema><span class="paleta-mini" data-muestra-tema="linear" aria-hidden="true"><i></i><b></b></span><span>Linear<small>Grafito · lavanda</small></span></label>
<label data-tema-familia="editor"><input type="radio" name="color-apariencia-orbita" value="modern" data-elegir-tema><span class="paleta-mini" data-muestra-tema="modern" aria-hidden="true"><i></i><b></b></span><span>Modern<small>VS Code · azul</small></span></label>
<label data-tema-familia="editor"><input type="radio" name="color-apariencia-orbita" value="github" data-elegir-tema><span class="paleta-mini" data-muestra-tema="github" aria-hidden="true"><i></i><b></b></span><span>GitHub<small>Neutros · azul</small></span></label>
<label data-tema-familia="editor"><input type="radio" name="color-apariencia-orbita" value="catppuccin" data-elegir-tema><span class="paleta-mini" data-muestra-tema="catppuccin" aria-hidden="true"><i></i><b></b></span><span>Catppuccin<small>Latte / Mocha · pastel</small></span></label>
<label data-tema-familia="editor"><input type="radio" name="color-apariencia-orbita" value="solarized" data-elegir-tema><span class="paleta-mini" data-muestra-tema="solarized" aria-hidden="true"><i></i><b></b></span><span>Solarized<small>Marfil / petróleo · cian</small></span></label></div></fieldset><p class="apariencia-resultados" data-temas-resultados role="status">16 temas · claro y oscuro</p><button type="button" data-limpiar-temas hidden>Limpiar búsqueda y filtros</button></section><section role="tabpanel" tabindex="0" id="preferencia-panel-apariencia-orbita-letras" aria-labelledby="preferencia-apariencia-orbita-letras" data-preferencia-panel="letras" hidden><fieldset class="apariencia"><legend>Combinaciones de lectura</legend><div class="apariencia-estilos" tabindex="0" role="region" aria-label="Combinaciones tipográficas, desplazables">
<label><input type="radio" name="estilo-apariencia-orbita" value="editorial" data-elegir-estilo checked><span class="muestra-letra editorial" aria-hidden="true">Aa</span><span>Editorial<small>Instrument · Geist</small></span></label>
<label><input type="radio" name="estilo-apariencia-orbita" value="sobrio" data-elegir-estilo><span class="muestra-letra sobrio" aria-hidden="true">Aa</span><span>Sobrio<small>Geist · Geist</small></span></label>
<label><input type="radio" name="estilo-apariencia-orbita" value="tecnico" data-elegir-estilo><span class="muestra-letra tecnico" aria-hidden="true">Aa</span><span>Técnico<small>Mono · Geist</small></span></label>
<label><input type="radio" name="estilo-apariencia-orbita" value="libro" data-elegir-estilo><span class="muestra-letra libro" aria-hidden="true">Aa</span><span>Libro<small>Literata · Literata</small></span></label>
<label><input type="radio" name="estilo-apariencia-orbita" value="revista" data-elegir-estilo><span class="muestra-letra revista" aria-hidden="true">Aa</span><span>Revista<small>Instrument · Literata</small></span></label>
<label><input type="radio" name="estilo-apariencia-orbita" value="bitacora" data-elegir-estilo><span class="muestra-letra bitacora" aria-hidden="true">Aa</span><span>Bitácora<small>Mono · Literata</small></span></label>
</div></fieldset><div class="apariencia-muestra" aria-label="Vista previa tipográfica"><strong>Una idea merece espacio.</strong><p>Leer, comparar y decidir. El detalle también cuenta: 1.250,50.</p></div><div class="apariencia-ajustes">
<button type="button" data-comodidad aria-pressed="false">Lectura cómoda <span aria-hidden="true">✓</span></button>
<button type="button" data-ver-escritura>Ver escritura animada ↗</button>
<button type="button" data-papel-tramado aria-pressed="false">Grano de papel <span aria-hidden="true">✓</span></button>
</div></section><section role="tabpanel" tabindex="0" id="preferencia-panel-apariencia-orbita-sonido" aria-labelledby="preferencia-apariencia-orbita-sonido" data-preferencia-panel="sonido" hidden><fieldset class="apariencia-audio"><legend>Sonido</legend>
<button type="button" data-audio-prueba>Probar sonido</button>
<label>Volumen <output data-audio-volumen-valor>65 %</output><input type="range" min="0" max="100" value="65" step="5" aria-label="Volumen del sonido" data-audio-volumen></label>
<p role="status" data-audio-estado>Sonido habilitado. Se activa después del primer clic. Puedes apagarlo abajo.</p>
</fieldset><p class="apariencia-nota">Clics, lápiz y pequeños gestos. Sin música de fondo. Tu elección de silencio se recuerda en este navegador.</p><div class="apariencia-pie"><button type="button" data-audio-global aria-pressed="true"><span data-audio-etiqueta>Sonidos activados</span><span class="interruptor" aria-hidden="true"></span></button></div></section>
</div>
</details>
</div>
<div><p class="variante-nombre">02 · Con etiqueta</p>
<details class="apariencia-menu etiqueta" data-apariencia-menu>
<summary aria-label="Apariencia del documento" aria-controls="panel-apariencia-etiqueta"><span class="apariencia-icono"><svg class="icono-sol" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="4"/><path d="M12 2v2m0 16v2M2 12h2m16 0h2M5 5l1.5 1.5m11 11L19 19M5 19l1.5-1.5m11-11L19 5"/></svg><svg class="icono-luna" viewBox="0 0 24 24" aria-hidden="true"><path d="M20.4 14A8.6 8.6 0 0 1 10 3.6 8.6 8.6 0 1 0 20.4 14Z"/></svg></span><span>Apariencia</span><svg class="icono-flecha" viewBox="0 0 24 24" aria-hidden="true"><path d="m8 10 4 4 4-4"/></svg></summary>
<div class="apariencia-panel apariencia-explorador" id="panel-apariencia-etiqueta" tabindex="0" role="region" aria-label="Opciones de apariencia, desplazables">
<div class="apariencia-encabezado"><p class="apariencia-titulo">Apariencia</p><span data-tema-actual>Sistema</span></div>
<div class="apariencia-pestanas" role="tablist" aria-label="Preferencias del documento"><button type="button" role="tab" id="preferencia-apariencia-etiqueta-temas" aria-controls="preferencia-panel-apariencia-etiqueta-temas" aria-selected="true" tabindex="0" data-preferencia-tab="temas">Temas</button><button type="button" role="tab" id="preferencia-apariencia-etiqueta-letras" aria-controls="preferencia-panel-apariencia-etiqueta-letras" aria-selected="false" tabindex="-1" data-preferencia-tab="letras">Letras</button><button type="button" role="tab" id="preferencia-apariencia-etiqueta-sonido" aria-controls="preferencia-panel-apariencia-etiqueta-sonido" aria-selected="false" tabindex="-1" data-preferencia-tab="sonido">Sonido</button></div><section role="tabpanel" tabindex="0" id="preferencia-panel-apariencia-etiqueta-temas" aria-labelledby="preferencia-apariencia-etiqueta-temas" data-preferencia-panel="temas"><fieldset class="apariencia-modos"><legend>Modo</legend><div><label><input type="radio" name="modo-apariencia-etiqueta" value="light" data-elegir-modo><span>Claro</span></label><label><input type="radio" name="modo-apariencia-etiqueta" value="dark" data-elegir-modo><span>Oscuro</span></label><label><input type="radio" name="modo-apariencia-etiqueta" value="system" data-elegir-modo checked><span>Sistema</span></label></div><p data-modo-estado>Se adapta a la apariencia del dispositivo.</p></fieldset><div class="apariencia-filtros"><label>Buscar tema<input type="search" data-buscar-tema placeholder="Nombre o color" autocomplete="off"></label><label>Categoría<select data-familia-tema><option value="">Todas</option><option value="editorial">Editoriales</option><option value="marca">Marcas</option><option value="tecnico">Técnicos</option><option value="producto">Producto</option><option value="editor">Editores</option></select></label></div><fieldset class="apariencia"><legend class="sr-only">Paleta del documento</legend><div class="apariencia-colores" tabindex="0" role="region" aria-label="Temas disponibles, desplazables"><label data-tema-familia="editorial"><input type="radio" name="color-apariencia-etiqueta" value="editorial" data-elegir-tema checked><span class="paleta-mini" data-muestra-tema="editorial" aria-hidden="true"><i></i><b></b></span><span>Editorial<small>Papel cálido · cobre</small></span></label>
<label data-tema-familia="editorial"><input type="radio" name="color-apariencia-etiqueta" value="sea" data-elegir-tema><span class="paleta-mini" data-muestra-tema="sea" aria-hidden="true"><i></i><b></b></span><span>Sea<small>Azul oceánico · menta</small></span></label>
<label data-tema-familia="editorial"><input type="radio" name="color-apariencia-etiqueta" value="oliva" data-elegir-tema><span class="paleta-mini" data-muestra-tema="oliva" aria-hidden="true"><i></i><b></b></span><span>Oliva<small>Botánico · verde</small></span></label>
<label data-tema-familia="editorial"><input type="radio" name="color-apariencia-etiqueta" value="arcilla" data-elegir-tema><span class="paleta-mini" data-muestra-tema="arcilla" aria-hidden="true"><i></i><b></b></span><span>Arcilla<small>Terracota · arena</small></span></label>
<label data-tema-familia="editorial"><input type="radio" name="color-apariencia-etiqueta" value="ciruela" data-elegir-tema><span class="paleta-mini" data-muestra-tema="ciruela" aria-hidden="true"><i></i><b></b></span><span>Ciruela<small>Malva · tinta violeta</small></span></label>
<label data-tema-familia="marca"><input type="radio" name="color-apariencia-etiqueta" value="liftit" data-elegir-tema><span class="paleta-mini" data-muestra-tema="liftit" aria-hidden="true"><i></i><b></b></span><span>Liftit<small>LMS · Ribbon, Bay y coral</small></span></label>
<label data-tema-familia="marca"><input type="radio" name="color-apariencia-etiqueta" value="tikin" data-elegir-tema><span class="paleta-mini" data-muestra-tema="tikin" aria-hidden="true"><i></i><b></b></span><span>Tikin<small>Blanco y negro · rojo Tikin</small></span></label>
<label data-tema-familia="marca"><input type="radio" name="color-apariencia-etiqueta" value="catabum" data-elegir-tema><span class="paleta-mini" data-muestra-tema="catabum" aria-hidden="true"><i></i><b></b></span><span>Catabum<small>Comunidad · violeta y magenta</small></span></label>
<label data-tema-familia="marca"><input type="radio" name="color-apariencia-etiqueta" value="kaira" data-elegir-tema><span class="paleta-mini" data-muestra-tema="kaira" aria-hidden="true"><i></i><b></b></span><span>Kaira<small>Warm paper · deep plum · antique gold</small></span></label>
<label data-tema-familia="tecnico"><input type="radio" name="color-apariencia-etiqueta" value="blueprint" data-elegir-tema><span class="paleta-mini" data-muestra-tema="blueprint" aria-hidden="true"><i></i><b></b></span><span>Blueprint<small>Plano · cuadrícula</small></span></label>
<label data-tema-familia="tecnico"><input type="radio" name="color-apariencia-etiqueta" value="hacker" data-elegir-tema><span class="paleta-mini" data-muestra-tema="hacker" aria-hidden="true"><i></i><b></b></span><span>Hacker<small>Terminal · verde</small></span></label>
<label data-tema-familia="producto"><input type="radio" name="color-apariencia-etiqueta" value="linear" data-elegir-tema><span class="paleta-mini" data-muestra-tema="linear" aria-hidden="true"><i></i><b></b></span><span>Linear<small>Grafito · lavanda</small></span></label>
<label data-tema-familia="editor"><input type="radio" name="color-apariencia-etiqueta" value="modern" data-elegir-tema><span class="paleta-mini" data-muestra-tema="modern" aria-hidden="true"><i></i><b></b></span><span>Modern<small>VS Code · azul</small></span></label>
<label data-tema-familia="editor"><input type="radio" name="color-apariencia-etiqueta" value="github" data-elegir-tema><span class="paleta-mini" data-muestra-tema="github" aria-hidden="true"><i></i><b></b></span><span>GitHub<small>Neutros · azul</small></span></label>
<label data-tema-familia="editor"><input type="radio" name="color-apariencia-etiqueta" value="catppuccin" data-elegir-tema><span class="paleta-mini" data-muestra-tema="catppuccin" aria-hidden="true"><i></i><b></b></span><span>Catppuccin<small>Latte / Mocha · pastel</small></span></label>
<label data-tema-familia="editor"><input type="radio" name="color-apariencia-etiqueta" value="solarized" data-elegir-tema><span class="paleta-mini" data-muestra-tema="solarized" aria-hidden="true"><i></i><b></b></span><span>Solarized<small>Marfil / petróleo · cian</small></span></label></div></fieldset><p class="apariencia-resultados" data-temas-resultados role="status">16 temas · claro y oscuro</p><button type="button" data-limpiar-temas hidden>Limpiar búsqueda y filtros</button></section><section role="tabpanel" tabindex="0" id="preferencia-panel-apariencia-etiqueta-letras" aria-labelledby="preferencia-apariencia-etiqueta-letras" data-preferencia-panel="letras" hidden><fieldset class="apariencia"><legend>Combinaciones de lectura</legend><div class="apariencia-estilos" tabindex="0" role="region" aria-label="Combinaciones tipográficas, desplazables">
<label><input type="radio" name="estilo-apariencia-etiqueta" value="editorial" data-elegir-estilo checked><span class="muestra-letra editorial" aria-hidden="true">Aa</span><span>Editorial<small>Instrument · Geist</small></span></label>
<label><input type="radio" name="estilo-apariencia-etiqueta" value="sobrio" data-elegir-estilo><span class="muestra-letra sobrio" aria-hidden="true">Aa</span><span>Sobrio<small>Geist · Geist</small></span></label>
<label><input type="radio" name="estilo-apariencia-etiqueta" value="tecnico" data-elegir-estilo><span class="muestra-letra tecnico" aria-hidden="true">Aa</span><span>Técnico<small>Mono · Geist</small></span></label>
<label><input type="radio" name="estilo-apariencia-etiqueta" value="libro" data-elegir-estilo><span class="muestra-letra libro" aria-hidden="true">Aa</span><span>Libro<small>Literata · Literata</small></span></label>
<label><input type="radio" name="estilo-apariencia-etiqueta" value="revista" data-elegir-estilo><span class="muestra-letra revista" aria-hidden="true">Aa</span><span>Revista<small>Instrument · Literata</small></span></label>
<label><input type="radio" name="estilo-apariencia-etiqueta" value="bitacora" data-elegir-estilo><span class="muestra-letra bitacora" aria-hidden="true">Aa</span><span>Bitácora<small>Mono · Literata</small></span></label>
</div></fieldset><div class="apariencia-muestra" aria-label="Vista previa tipográfica"><strong>Una idea merece espacio.</strong><p>Leer, comparar y decidir. El detalle también cuenta: 1.250,50.</p></div><div class="apariencia-ajustes">
<button type="button" data-comodidad aria-pressed="false">Lectura cómoda <span aria-hidden="true">✓</span></button>
<button type="button" data-ver-escritura>Ver escritura animada ↗</button>
<button type="button" data-papel-tramado aria-pressed="false">Grano de papel <span aria-hidden="true">✓</span></button>
</div></section><section role="tabpanel" tabindex="0" id="preferencia-panel-apariencia-etiqueta-sonido" aria-labelledby="preferencia-apariencia-etiqueta-sonido" data-preferencia-panel="sonido" hidden><fieldset class="apariencia-audio"><legend>Sonido</legend>
<button type="button" data-audio-prueba>Probar sonido</button>
<label>Volumen <output data-audio-volumen-valor>65 %</output><input type="range" min="0" max="100" value="65" step="5" aria-label="Volumen del sonido" data-audio-volumen></label>
<p role="status" data-audio-estado>Sonido habilitado. Se activa después del primer clic. Puedes apagarlo abajo.</p>
</fieldset><p class="apariencia-nota">Clics, lápiz y pequeños gestos. Sin música de fondo. Tu elección de silencio se recuerda en este navegador.</p><div class="apariencia-pie"><button type="button" data-audio-global aria-pressed="true"><span data-audio-etiqueta>Sonidos activados</span><span class="interruptor" aria-hidden="true"></span></button></div></section>
</div>
</details>
</div>
<div><p class="variante-nombre">03 · Cápsula</p>
<details class="apariencia-menu capsula" data-apariencia-menu>
<summary aria-label="Apariencia del documento" aria-controls="panel-apariencia-capsula"><span class="apariencia-icono"><svg class="icono-sol" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="4"/><path d="M12 2v2m0 16v2M2 12h2m16 0h2M5 5l1.5 1.5m11 11L19 19M5 19l1.5-1.5m11-11L19 5"/></svg><svg class="icono-luna" viewBox="0 0 24 24" aria-hidden="true"><path d="M20.4 14A8.6 8.6 0 0 1 10 3.6 8.6 8.6 0 1 0 20.4 14Z"/></svg></span><span class="apariencia-actual" data-tema-actual>Sistema</span><svg class="icono-flecha" viewBox="0 0 24 24" aria-hidden="true"><path d="m8 10 4 4 4-4"/></svg></summary>
<div class="apariencia-panel apariencia-explorador" id="panel-apariencia-capsula" tabindex="0" role="region" aria-label="Opciones de apariencia, desplazables">
<div class="apariencia-encabezado"><p class="apariencia-titulo">Apariencia</p><span data-tema-actual>Sistema</span></div>
<div class="apariencia-pestanas" role="tablist" aria-label="Preferencias del documento"><button type="button" role="tab" id="preferencia-apariencia-capsula-temas" aria-controls="preferencia-panel-apariencia-capsula-temas" aria-selected="true" tabindex="0" data-preferencia-tab="temas">Temas</button><button type="button" role="tab" id="preferencia-apariencia-capsula-letras" aria-controls="preferencia-panel-apariencia-capsula-letras" aria-selected="false" tabindex="-1" data-preferencia-tab="letras">Letras</button><button type="button" role="tab" id="preferencia-apariencia-capsula-sonido" aria-controls="preferencia-panel-apariencia-capsula-sonido" aria-selected="false" tabindex="-1" data-preferencia-tab="sonido">Sonido</button></div><section role="tabpanel" tabindex="0" id="preferencia-panel-apariencia-capsula-temas" aria-labelledby="preferencia-apariencia-capsula-temas" data-preferencia-panel="temas"><fieldset class="apariencia-modos"><legend>Modo</legend><div><label><input type="radio" name="modo-apariencia-capsula" value="light" data-elegir-modo><span>Claro</span></label><label><input type="radio" name="modo-apariencia-capsula" value="dark" data-elegir-modo><span>Oscuro</span></label><label><input type="radio" name="modo-apariencia-capsula" value="system" data-elegir-modo checked><span>Sistema</span></label></div><p data-modo-estado>Se adapta a la apariencia del dispositivo.</p></fieldset><div class="apariencia-filtros"><label>Buscar tema<input type="search" data-buscar-tema placeholder="Nombre o color" autocomplete="off"></label><label>Categoría<select data-familia-tema><option value="">Todas</option><option value="editorial">Editoriales</option><option value="marca">Marcas</option><option value="tecnico">Técnicos</option><option value="producto">Producto</option><option value="editor">Editores</option></select></label></div><fieldset class="apariencia"><legend class="sr-only">Paleta del documento</legend><div class="apariencia-colores" tabindex="0" role="region" aria-label="Temas disponibles, desplazables"><label data-tema-familia="editorial"><input type="radio" name="color-apariencia-capsula" value="editorial" data-elegir-tema checked><span class="paleta-mini" data-muestra-tema="editorial" aria-hidden="true"><i></i><b></b></span><span>Editorial<small>Papel cálido · cobre</small></span></label>
<label data-tema-familia="editorial"><input type="radio" name="color-apariencia-capsula" value="sea" data-elegir-tema><span class="paleta-mini" data-muestra-tema="sea" aria-hidden="true"><i></i><b></b></span><span>Sea<small>Azul oceánico · menta</small></span></label>
<label data-tema-familia="editorial"><input type="radio" name="color-apariencia-capsula" value="oliva" data-elegir-tema><span class="paleta-mini" data-muestra-tema="oliva" aria-hidden="true"><i></i><b></b></span><span>Oliva<small>Botánico · verde</small></span></label>
<label data-tema-familia="editorial"><input type="radio" name="color-apariencia-capsula" value="arcilla" data-elegir-tema><span class="paleta-mini" data-muestra-tema="arcilla" aria-hidden="true"><i></i><b></b></span><span>Arcilla<small>Terracota · arena</small></span></label>
<label data-tema-familia="editorial"><input type="radio" name="color-apariencia-capsula" value="ciruela" data-elegir-tema><span class="paleta-mini" data-muestra-tema="ciruela" aria-hidden="true"><i></i><b></b></span><span>Ciruela<small>Malva · tinta violeta</small></span></label>
<label data-tema-familia="marca"><input type="radio" name="color-apariencia-capsula" value="liftit" data-elegir-tema><span class="paleta-mini" data-muestra-tema="liftit" aria-hidden="true"><i></i><b></b></span><span>Liftit<small>LMS · Ribbon, Bay y coral</small></span></label>
<label data-tema-familia="marca"><input type="radio" name="color-apariencia-capsula" value="tikin" data-elegir-tema><span class="paleta-mini" data-muestra-tema="tikin" aria-hidden="true"><i></i><b></b></span><span>Tikin<small>Blanco y negro · rojo Tikin</small></span></label>
<label data-tema-familia="marca"><input type="radio" name="color-apariencia-capsula" value="catabum" data-elegir-tema><span class="paleta-mini" data-muestra-tema="catabum" aria-hidden="true"><i></i><b></b></span><span>Catabum<small>Comunidad · violeta y magenta</small></span></label>
<label data-tema-familia="marca"><input type="radio" name="color-apariencia-capsula" value="kaira" data-elegir-tema><span class="paleta-mini" data-muestra-tema="kaira" aria-hidden="true"><i></i><b></b></span><span>Kaira<small>Warm paper · deep plum · antique gold</small></span></label>
<label data-tema-familia="tecnico"><input type="radio" name="color-apariencia-capsula" value="blueprint" data-elegir-tema><span class="paleta-mini" data-muestra-tema="blueprint" aria-hidden="true"><i></i><b></b></span><span>Blueprint<small>Plano · cuadrícula</small></span></label>
<label data-tema-familia="tecnico"><input type="radio" name="color-apariencia-capsula" value="hacker" data-elegir-tema><span class="paleta-mini" data-muestra-tema="hacker" aria-hidden="true"><i></i><b></b></span><span>Hacker<small>Terminal · verde</small></span></label>
<label data-tema-familia="producto"><input type="radio" name="color-apariencia-capsula" value="linear" data-elegir-tema><span class="paleta-mini" data-muestra-tema="linear" aria-hidden="true"><i></i><b></b></span><span>Linear<small>Grafito · lavanda</small></span></label>
<label data-tema-familia="editor"><input type="radio" name="color-apariencia-capsula" value="modern" data-elegir-tema><span class="paleta-mini" data-muestra-tema="modern" aria-hidden="true"><i></i><b></b></span><span>Modern<small>VS Code · azul</small></span></label>
<label data-tema-familia="editor"><input type="radio" name="color-apariencia-capsula" value="github" data-elegir-tema><span class="paleta-mini" data-muestra-tema="github" aria-hidden="true"><i></i><b></b></span><span>GitHub<small>Neutros · azul</small></span></label>
<label data-tema-familia="editor"><input type="radio" name="color-apariencia-capsula" value="catppuccin" data-elegir-tema><span class="paleta-mini" data-muestra-tema="catppuccin" aria-hidden="true"><i></i><b></b></span><span>Catppuccin<small>Latte / Mocha · pastel</small></span></label>
<label data-tema-familia="editor"><input type="radio" name="color-apariencia-capsula" value="solarized" data-elegir-tema><span class="paleta-mini" data-muestra-tema="solarized" aria-hidden="true"><i></i><b></b></span><span>Solarized<small>Marfil / petróleo · cian</small></span></label></div></fieldset><p class="apariencia-resultados" data-temas-resultados role="status">16 temas · claro y oscuro</p><button type="button" data-limpiar-temas hidden>Limpiar búsqueda y filtros</button></section><section role="tabpanel" tabindex="0" id="preferencia-panel-apariencia-capsula-letras" aria-labelledby="preferencia-apariencia-capsula-letras" data-preferencia-panel="letras" hidden><fieldset class="apariencia"><legend>Combinaciones de lectura</legend><div class="apariencia-estilos" tabindex="0" role="region" aria-label="Combinaciones tipográficas, desplazables">
<label><input type="radio" name="estilo-apariencia-capsula" value="editorial" data-elegir-estilo checked><span class="muestra-letra editorial" aria-hidden="true">Aa</span><span>Editorial<small>Instrument · Geist</small></span></label>
<label><input type="radio" name="estilo-apariencia-capsula" value="sobrio" data-elegir-estilo><span class="muestra-letra sobrio" aria-hidden="true">Aa</span><span>Sobrio<small>Geist · Geist</small></span></label>
<label><input type="radio" name="estilo-apariencia-capsula" value="tecnico" data-elegir-estilo><span class="muestra-letra tecnico" aria-hidden="true">Aa</span><span>Técnico<small>Mono · Geist</small></span></label>
<label><input type="radio" name="estilo-apariencia-capsula" value="libro" data-elegir-estilo><span class="muestra-letra libro" aria-hidden="true">Aa</span><span>Libro<small>Literata · Literata</small></span></label>
<label><input type="radio" name="estilo-apariencia-capsula" value="revista" data-elegir-estilo><span class="muestra-letra revista" aria-hidden="true">Aa</span><span>Revista<small>Instrument · Literata</small></span></label>
<label><input type="radio" name="estilo-apariencia-capsula" value="bitacora" data-elegir-estilo><span class="muestra-letra bitacora" aria-hidden="true">Aa</span><span>Bitácora<small>Mono · Literata</small></span></label>
</div></fieldset><div class="apariencia-muestra" aria-label="Vista previa tipográfica"><strong>Una idea merece espacio.</strong><p>Leer, comparar y decidir. El detalle también cuenta: 1.250,50.</p></div><div class="apariencia-ajustes">
<button type="button" data-comodidad aria-pressed="false">Lectura cómoda <span aria-hidden="true">✓</span></button>
<button type="button" data-ver-escritura>Ver escritura animada ↗</button>
<button type="button" data-papel-tramado aria-pressed="false">Grano de papel <span aria-hidden="true">✓</span></button>
</div></section><section role="tabpanel" tabindex="0" id="preferencia-panel-apariencia-capsula-sonido" aria-labelledby="preferencia-apariencia-capsula-sonido" data-preferencia-panel="sonido" hidden><fieldset class="apariencia-audio"><legend>Sonido</legend>
<button type="button" data-audio-prueba>Probar sonido</button>
<label>Volumen <output data-audio-volumen-valor>65 %</output><input type="range" min="0" max="100" value="65" step="5" aria-label="Volumen del sonido" data-audio-volumen></label>
<p role="status" data-audio-estado>Sonido habilitado. Se activa después del primer clic. Puedes apagarlo abajo.</p>
</fieldset><p class="apariencia-nota">Clics, lápiz y pequeños gestos. Sin música de fondo. Tu elección de silencio se recuerda en este navegador.</p><div class="apariencia-pie"><button type="button" data-audio-global aria-pressed="true"><span data-audio-etiqueta>Sonidos activados</span><span class="interruptor" aria-hidden="true"></span></button></div></section>
</div>
</details>
</div>
</div>
<p>Color, tipografía, tamaño y trama se pueden combinar. Las tablas y figuras conservan sus anchos.</p>
</div>Componente / Configuración editorial
Elige cómo se presentan las publicaciones del archivo. Los cambios se aplican en este documento.
Rejilla editorial con extractos y metadatos.
{"version":1,"disposicion":"rejilla","extractos":true,"metadatos":true}Configuración de presentación, independiente de la paleta y tipografía del botón de apariencia. No instala un tema de Ghost.
Use and limits: Change archive list/grid presentation and information density with editorial.js, producing copyable JSON. Scope is the current document: use one configurator. No preference persistence, JSON import, content changes or Ghost connection. Appearance continues to own palette and typography. Without JavaScript preserve the initial state.
Dependencias: packages/core/styles/fonts.css, packages/core/styles/artifact.css, packages/core/components/interface.js, packages/core/components/audio.js, packages/core/components/controls.js, packages/core/components/editorial-pieces.js, packages/core/components/reader.js, packages/core/components/editorial.js
<section class="pieza" id="configuracion-ejemplo" data-config-editorial><h3>La misma publicación, otra edición</h3><p>Elige cómo se presentan las publicaciones del archivo. Los cambios se aplican en este documento.</p><form class="editorial-controles" aria-label="Configuración del archivo"><label>Presentación<select name="disposicion"><option value="rejilla">Rejilla editorial</option><option value="lista">Lista de lectura</option></select></label><label class="editorial-check"><input type="checkbox" name="extractos" checked> Mostrar extractos</label><label class="editorial-check"><input type="checkbox" name="metadatos" checked> Mostrar autoría y formato</label><button type="reset">Restablecer edición</button></form><p data-config-estado role="status">Rejilla editorial con extractos y metadatos.</p><div class="codigo"><div class="cab"><span>Configuración local · JSON</span><button type="button" data-copiar="config-editorial-json">Copiar configuración</button><span class="copia-estado" role="status"></span></div><pre tabindex="0" aria-label="Configuración editorial JSON, desplazable"><code id="config-editorial-json" data-config-json>{"version":1,"disposicion":"rejilla","extractos":true,"metadatos":true}</code></pre></div><p class="procedencia">Configuración de presentación, independiente de la paleta y tipografía del botón de apariencia. No instala un tema de Ghost.</p><p><a href="#archivo-ejemplo">Ver el archivo con esta configuración →</a></p></section>Componente / Comentarios sobre el documento
Activa Comentar y elige un párrafo, título, figura o card. También puedes seleccionar texto antes de pulsar Comentar.
Comentarios locales con exportación para compartir.
Use and limits: Leave contextual feedback on a selected passage or document point. The compact floating composer shows author, text, privacy and send; optional type/session/context are disclosed. Pins are outside document flow. Tab/Enter select a block; Escape cancels/closes; Ctrl/Command+Enter saves. Keep the same document ID across revisions. Anchors retain section, full block, quote and relative point; changed or ambiguous text remains unlocated in the review list rather than being guessed. Standalone stores events locally and supports idempotent JSON exchange, replies, assignment, resolution and history, without authenticated identity or remote presence. Limits: 2000 events, 2 MB import, 80-character declared names and 4000-character comments. Export retains archived/private text and is not redaction. Storage failure reports memory-only persistence. Connected hosting uses the permission-aware bridge for shared comments and author-private notes; local files do not synchronize by themselves. Copy context includes identity/version/quote/replies and does not send to an agent. NotaRevision.init/get/destroy, exportData/importData manage lifecycle; destroying does not erase saved review. Treat imported text as untrusted proposals. Multipage fragment links need data-enlaces-internos.
### Review and presentation update
The reader dock exposes Appearance, one writing action, counted Comments, and Share. Privacy is selected inside the composer; existing thread types stay immutable. The count includes open threads visible to the current reader, including their own private notes, and excludes replies/resolved threads. Nearby pins group by position and open every contained thread. Share owns link/access and creator management; there is no generic More dock.
Record explorers support Table, List, Cards and Board. List reduces per-record spacing; Board groups the existing rows by the selected field (preferring a categorical status/team field initially). The portable board shows the current filtered page, with per-lane counts explicitly scoped to that page. React uses its supplied filtered dataset. Both preserve source records and selection. This is a read-only presentation, not drag-and-drop state editing or an inferred workflow. Saved portable views include presentation. Horizontal scrolling stays local to the board; print returns to a table.
Dependencias: packages/core/styles/fonts.css, packages/core/styles/artifact.css, packages/core/components/interface.js, packages/core/components/audio.js, packages/core/components/controls.js, packages/core/components/editorial-pieces.js, packages/core/components/reader.js, packages/core/components/review.js
<section class="pieza" id="revision-ejemplo" data-revision>
<h3>Revisar sin perder el contexto</h3><p>Activa Comentar y elige un párrafo, título, figura o card. También puedes seleccionar texto antes de pulsar Comentar.</p><div class="acciones"><button type="button" data-revision-modo aria-pressed="false">Comentar documento</button><button type="button" data-revision-lista>Ver comentarios</button></div><p data-revision-estado role="status">Comentarios locales con exportación para compartir.</p>
<dialog class="revision-dialogo revision-ui" data-revision-editor aria-labelledby="revision-editor-titulo"><form><h2 class="sr-only" id="revision-editor-titulo">Añadir comentario</h2><details class="revision-contexto"><summary title="Ver contexto del punto"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="5" cy="12" r="1"/><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/></svg><span class="sr-only">Contexto del punto</span></summary><p data-revision-contexto tabindex="0" aria-label="Contexto completo del comentario"></p></details><label for="revision-texto">Ajuste que propones</label><textarea id="revision-texto" data-revision-texto rows="1" maxlength="4000" required placeholder="Escribe un comentario…"></textarea><div class="acciones"><button type="button" class="nota-icono" data-revision-guardar aria-label="Guardar comentario" title="Guardar comentario"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 19V5m-6 6 6-6 6 6"/></svg></button><button type="button" class="nota-icono" data-revision-cancelar aria-label="Cerrar comentario" title="Cerrar comentario"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 6 12 12M6 18 18 6"/></svg></button></div></form></dialog>
<dialog class="revision-dialogo revision-ui" data-revision-panel aria-labelledby="revision-panel-titulo"><h2 id="revision-panel-titulo">Comentarios del documento</h2><p class="procedencia">Revisión local: exporta el archivo para compartir los hilos.</p><ol data-revision-notas></ol><div class="codigo"><div class="cab"><span>Prompt de ajustes</span><button type="button" data-copiar="revision-prompt">Copiar prompt</button><span class="copia-estado" role="status"></span></div><pre tabindex="0" aria-label="Prompt con comentarios, desplazable"><code id="revision-prompt" data-revision-prompt>No hay comentarios todavía.</code></pre></div><button type="button" data-revision-cerrar>Cerrar comentarios</button></dialog>
</section>Componente / Código en varios lenguajes
Elige un lenguaje. El coloreado conserva exactamente el texto que copias.
<article class="nota">
<h2>Una decisión con contexto</h2>
<p>La evidencia se conserva completa.</p>
</article>:root {
--espacio: 24px;
}
.nota {
display: grid;
gap: var(--espacio);
color: var(--tinta);
}// Datos de ejemplo, sin solicitudes
const registros = [12, 8, 5];
const total = registros.reduce((suma, n) => suma + n, 0);
console.log("Total:", total);type Registro = { nombre: string; valor: number };
const ejemplo: Registro = { nombre: "Diseño", valor: 12 };
function leer(r: Registro): number {
return r.valor;
}{
"edicion": "cuaderno",
"paginas": 9,
"sonido": false,
"fuente": null
}# Ejemplo local
registros = [12, 8, 5]
def total(valores):
return sum(valores)
print("Total:", total(registros))-- Consulta ilustrativa
SELECT equipo, SUM(importe) AS total
FROM movimientos
WHERE estado = 'confirmado'
GROUP BY equipo
ORDER BY total DESC;# Comprobaciones locales
python3 scripts/build.py
python3 scripts/validate.py
echo "Listo para revisar"OK documento generado 44 recetas
WARN fuente pendiente 2 registros
ERROR ejemplo rechazado 1 recurso externoUse and limits: Declare HTML, CSS, JavaScript, TypeScript, JSON, Python, SQL, shell or output with data-lenguaje. Load code.js and tabs.js for this example. The lightweight lexer preserves original copy text and editorial spans; it never executes code, compiles, validates or downloads language grammars. Keep local scrolling and theme-aware token contrast.
Dependencias: packages/core/styles/fonts.css, packages/core/styles/artifact.css, packages/core/components/interface.js, packages/core/components/audio.js, packages/core/components/controls.js, packages/core/components/editorial-pieces.js, packages/core/components/reader.js, packages/core/components/code.js, packages/core/components/tabs.js
<section class="pieza ancho" id="codigo-poliglota"><h3>Código que también se puede leer</h3><p>Elige un lenguaje. El coloreado conserva exactamente el texto que copias.</p><div class="pestanas" data-pestanas><div class="pestanas-caja" tabindex="0" role="region" aria-label="Lenguajes de código, desplazables"><div class="pestanas-nav" data-tabs-nav aria-label="Lenguajes"><button type="button" id="codigo-tab-html" data-tab="codigo-panel-html">HTML</button><button type="button" id="codigo-tab-css" data-tab="codigo-panel-css">CSS</button><button type="button" id="codigo-tab-javascript" data-tab="codigo-panel-javascript">JavaScript</button><button type="button" id="codigo-tab-typescript" data-tab="codigo-panel-typescript">TypeScript</button><button type="button" id="codigo-tab-json" data-tab="codigo-panel-json">JSON</button><button type="button" id="codigo-tab-python" data-tab="codigo-panel-python">Python</button><button type="button" id="codigo-tab-sql" data-tab="codigo-panel-sql">SQL</button><button type="button" id="codigo-tab-shell" data-tab="codigo-panel-shell">Shell</button><button type="button" id="codigo-tab-salida" data-tab="codigo-panel-salida">Salida</button></div></div><section id="codigo-panel-html" data-tab-panel><div class="codigo"><div class="cab"><span>HTML</span><button type="button" data-copiar="muestra-html" aria-label="Copiar HTML" title="Copiar"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="8" y="8" width="12" height="13" rx="2"/><path d="M16 8V3H4v13h4"/></svg></button><span class="copia-estado" role="status"></span></div><pre tabindex="0" aria-label="Código HTML, desplazable"><code id="muestra-html" data-lenguaje="html"><article class="nota">
<h2>Una decisión con contexto</h2>
<p>La evidencia se conserva completa.</p>
</article></code></pre></div></section><section id="codigo-panel-css" data-tab-panel><div class="codigo"><div class="cab"><span>CSS</span><button type="button" data-copiar="muestra-css" aria-label="Copiar CSS" title="Copiar"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="8" y="8" width="12" height="13" rx="2"/><path d="M16 8V3H4v13h4"/></svg></button><span class="copia-estado" role="status"></span></div><pre tabindex="0" aria-label="Código CSS, desplazable"><code id="muestra-css" data-lenguaje="css">:root {
--espacio: 24px;
}
.nota {
display: grid;
gap: var(--espacio);
color: var(--tinta);
}</code></pre></div></section><section id="codigo-panel-javascript" data-tab-panel><div class="codigo"><div class="cab"><span>JavaScript</span><button type="button" data-copiar="muestra-javascript" aria-label="Copiar JavaScript" title="Copiar"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="8" y="8" width="12" height="13" rx="2"/><path d="M16 8V3H4v13h4"/></svg></button><span class="copia-estado" role="status"></span></div><pre tabindex="0" aria-label="Código JavaScript, desplazable"><code id="muestra-javascript" data-lenguaje="javascript">// Datos de ejemplo, sin solicitudes
const registros = [12, 8, 5];
const total = registros.reduce((suma, n) => suma + n, 0);
console.log("Total:", total);</code></pre></div></section><section id="codigo-panel-typescript" data-tab-panel><div class="codigo"><div class="cab"><span>TypeScript</span><button type="button" data-copiar="muestra-typescript" aria-label="Copiar TypeScript" title="Copiar"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="8" y="8" width="12" height="13" rx="2"/><path d="M16 8V3H4v13h4"/></svg></button><span class="copia-estado" role="status"></span></div><pre tabindex="0" aria-label="Código TypeScript, desplazable"><code id="muestra-typescript" data-lenguaje="typescript">type Registro = { nombre: string; valor: number };
const ejemplo: Registro = { nombre: "Diseño", valor: 12 };
function leer(r: Registro): number {
return r.valor;
}</code></pre></div></section><section id="codigo-panel-json" data-tab-panel><div class="codigo"><div class="cab"><span>JSON</span><button type="button" data-copiar="muestra-json" aria-label="Copiar JSON" title="Copiar"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="8" y="8" width="12" height="13" rx="2"/><path d="M16 8V3H4v13h4"/></svg></button><span class="copia-estado" role="status"></span></div><pre tabindex="0" aria-label="Código JSON, desplazable"><code id="muestra-json" data-lenguaje="json">{
"edicion": "cuaderno",
"paginas": 9,
"sonido": false,
"fuente": null
}</code></pre></div></section><section id="codigo-panel-python" data-tab-panel><div class="codigo"><div class="cab"><span>Python</span><button type="button" data-copiar="muestra-python" aria-label="Copiar Python" title="Copiar"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="8" y="8" width="12" height="13" rx="2"/><path d="M16 8V3H4v13h4"/></svg></button><span class="copia-estado" role="status"></span></div><pre tabindex="0" aria-label="Código Python, desplazable"><code id="muestra-python" data-lenguaje="python"># Ejemplo local
registros = [12, 8, 5]
def total(valores):
return sum(valores)
print("Total:", total(registros))</code></pre></div></section><section id="codigo-panel-sql" data-tab-panel><div class="codigo"><div class="cab"><span>SQL</span><button type="button" data-copiar="muestra-sql" aria-label="Copiar SQL" title="Copiar"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="8" y="8" width="12" height="13" rx="2"/><path d="M16 8V3H4v13h4"/></svg></button><span class="copia-estado" role="status"></span></div><pre tabindex="0" aria-label="Código SQL, desplazable"><code id="muestra-sql" data-lenguaje="sql">-- Consulta ilustrativa
SELECT equipo, SUM(importe) AS total
FROM movimientos
WHERE estado = 'confirmado'
GROUP BY equipo
ORDER BY total DESC;</code></pre></div></section><section id="codigo-panel-shell" data-tab-panel><div class="codigo"><div class="cab"><span>Shell</span><button type="button" data-copiar="muestra-shell" aria-label="Copiar Shell" title="Copiar"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="8" y="8" width="12" height="13" rx="2"/><path d="M16 8V3H4v13h4"/></svg></button><span class="copia-estado" role="status"></span></div><pre tabindex="0" aria-label="Código Shell, desplazable"><code id="muestra-shell" data-lenguaje="shell"># Comprobaciones locales
python3 scripts/build.py
python3 scripts/validate.py
echo "Listo para revisar"</code></pre></div></section><section id="codigo-panel-salida" data-tab-panel><div class="codigo"><div class="cab"><span>Salida</span><button type="button" data-copiar="muestra-salida" aria-label="Copiar Salida" title="Copiar"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="8" y="8" width="12" height="13" rx="2"/><path d="M16 8V3H4v13h4"/></svg></button><span class="copia-estado" role="status"></span></div><pre tabindex="0" aria-label="Código Salida, desplazable"><code id="muestra-salida" data-lenguaje="salida">OK documento generado 44 recetas
WARN fuente pendiente 2 registros
ERROR ejemplo rechazado 1 recurso externo</code></pre></div></section></div></section>Componente / Marco de líneas desvanecidas
Use and limits: Frame a wide composition once. marco-difuso reserves 12–32 px inside its box for fading dotted extensions without page overflow. Only decorative pseudo-elements fade; never mask evidence, focus or state borders. Do not compete with a component's existing pseudo-elements. Without masking, a dashed frame remains. No negative-margin imitation.
Dependencias: packages/core/styles/fonts.css, packages/core/styles/artifact.css, packages/core/components/interface.js, packages/core/components/audio.js, packages/core/components/controls.js, packages/core/components/editorial-pieces.js, packages/core/components/reader.js
<aside class="ancho marco-difuso" id="marco-ejemplo">
<div class="marco-contenido"><h3>Una pausa para mirar la evidencia.</h3><p>Las líneas se cruzan en las esquinas y se pierden hacia los extremos. El contenido permanece completo.</p></div>
</aside>Use and limits: Use ordinary links for documents and data-ir buttons for local chapters. data-capitulos-scroll scrolls only chapter navigation; appearance stays separate. Preserve contents/progress for long documents and use one chapter navigation instance. Decorative separators do not replace accessible names. Below 700 px chapters move to a second row.
Dependencias: packages/core/styles/fonts.css, packages/core/styles/artifact.css, packages/core/components/interface.js, packages/core/components/audio.js, packages/core/components/controls.js, packages/core/components/editorial-pieces.js, packages/core/components/reader.js
<div class="ancho navegacion-muestra" id="navegacion-ejemplo">
<a class="firma-editorial" href="examples/generated/report.html#resumen"><span>Margen</span></a>
<nav aria-label="Recorrer el informe"><a href="examples/generated/report.html#resumen">inicio</a><span class="nav-separador" aria-hidden="true">/</span><a href="examples/generated/report.html#evidencia">evidencia</a><span class="nav-separador" aria-hidden="true">/</span><a href="examples/generated/report.html#prototipo">propuesta</a><span class="nav-separador" aria-hidden="true">/</span><a href="examples/generated/report.html#siguientes">siguiente</a></nav>
</div>Componente / Código numerado y destacado
def resumir(registros):
cantidades = [fila["cantidad"] for fila in registros]
total = sum(cantidades)
if not cantidades:
return {"total": 0, "promedio": None}
return {"total": total, "promedio": total / len(cantidades)}Use and limits: Explain precise code lines with code.js and data-destacar, such as 3,6-8. data-lineas starts from plain code text; do not add manual token spans. CSS line numbers never enter copied text. Unhighlighted lines remain readable. Copy has an accessible name and result state. This is lexical highlighting, not an editor/compiler; wide code scrolls locally.
Dependencias: packages/core/styles/fonts.css, packages/core/styles/artifact.css, packages/core/components/interface.js, packages/core/components/audio.js, packages/core/components/controls.js, packages/core/components/editorial-pieces.js, packages/core/components/reader.js, packages/core/components/code.js
<figure class="ancho" id="codigo-lineas-ejemplo"><div class="codigo codigo-editorial"><div class="cab"><span>preparar_resumen.py · Python</span><button class="boton-icono-copia" type="button" data-copiar="codigo-lineas-fuente" aria-label="Copiar código Python" title="Copiar código"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true"><path d="M8 8h12v13H8zM16 8V3H4v13h4"/></svg></button><span class="copia-estado" role="status"></span></div><pre tabindex="0" aria-label="Código Python con líneas 3 y 6 destacadas, desplazable"><code id="codigo-lineas-fuente" data-lenguaje="python" data-lineas data-destacar="3,6">def resumir(registros):
cantidades = [fila["cantidad"] for fila in registros]
total = sum(cantidades)
if not cantidades:
return {"total": 0, "promedio": None}
return {"total": total, "promedio": total / len(cantidades)}</code></pre></div><figcaption>Ejemplo ilustrativo. Las líneas 3 y 6 explican el cálculo; el botón copia el código sin números de línea.</figcaption></figure>Componente / Sitio editorial: navegación y cierre
Un cuaderno abierto
Una página para leer con calma, explorar lo que sigue y volver al punto que importa.
Las ideas necesitan espacio. Una columna breve mantiene el hilo; los ejemplos se abren cuando necesitan mostrar más.
El marco acompaña sin convertirse en una caja. Las líneas se desvanecen en los márgenes y dejan que el contenido respire.
Al desplazarte, la navegación se aparta. Vuelve al subir o al darle foco con el teclado.
Un archivo que conserva las fuentes, las preguntas y las decisiones. Cada pieza puede compartirse sin perder su contexto.
Este ejemplo utiliza texto original e ilustrativo. Los enlaces recorren secciones reales de la misma página.
El cierre se descubre al terminar la lectura, debajo de la superficie principal.
Use and limits: This is a website composition, separate from artifact review controls. The embedded specimen scrolls inside its own region. For a full page, move web-editorial and data-editorial-web to the document body; use a main element for .web-contenido. Keep the header, edge decoration, main and footer as siblings. Do not add this shell around a chapter/presentation reader or its comment/preferences dock. examples/generated/editorial-web.html demonstrates the full-page topology offline.
Desktop navigation sits at the top; below 640 px it sits 16 px above the bottom safe area. Scroll direction reveals it; keyboard focus always restores it immediately. The footer reveals beneath the main surface. Reduced motion disables directional hiding and animated transitions; reduced transparency removes edge blur. Without JavaScript every link and section remains usable. Keep anchor IDs unique, preserve the skip link and accessible region name, and replace only the illustrative copy and real destinations. This pattern reproduces structure and motion, not the original site's identity or proprietary serif.
Dependencias: packages/core/styles/fonts.css, packages/core/styles/artifact.css, packages/core/components/interface.js, packages/core/components/audio.js, packages/core/components/controls.js, packages/core/components/editorial-pieces.js, packages/core/components/reader.js
<section class="ancho web-editorial" data-editorial-web id="web-editorial-ejemplo" tabindex="0" aria-label="Sitio editorial de ejemplo, desplazable">
<a class="web-salto" href="#web-contenido">Saltar al contenido</a>
<header class="web-navegacion"><nav aria-label="Navegación del sitio de ejemplo"><a class="web-marca" href="#web-contenido">Margen</a><div><a href="#web-lecturas">lecturas</a><span aria-hidden="true">/</span><a href="#web-proyectos">proyectos</a><span aria-hidden="true">/</span><a href="#web-cierre">acerca</a></div></nav></header>
<div class="web-bordes" aria-hidden="true"></div>
<div class="web-contenido" id="web-contenido" tabindex="-1">
<div class="web-prosa"><p class="ceja">Un cuaderno abierto</p><h2>La forma también explica.</h2><p>Una página para leer con calma, explorar lo que sigue y volver al punto que importa.</p></div>
<section class="web-prosa" id="web-lecturas"><h3>Lecturas</h3><p>Las ideas necesitan espacio. Una columna breve mantiene el hilo; los ejemplos se abren cuando necesitan mostrar más.</p><p>El marco acompaña sin convertirse en una caja. Las líneas se desvanecen en los márgenes y dejan que el contenido respire.</p><p>Al desplazarte, la navegación se aparta. Vuelve al subir o al darle foco con el teclado.</p></section>
<section class="web-prosa" id="web-proyectos"><h3>Lo que estamos construyendo</h3><p>Un archivo que conserva las fuentes, las preguntas y las decisiones. Cada pieza puede compartirse sin perder su contexto.</p><p>Este ejemplo utiliza texto original e ilustrativo. Los enlaces recorren secciones reales de la misma página.</p><p>El cierre se descubre al terminar la lectura, debajo de la superficie principal.</p></section>
</div>
<footer class="web-pie" id="web-cierre"><div><a class="web-marca" href="#web-contenido">Margen</a><p>Una nota para quien viene después.</p><nav aria-label="Enlaces de cierre del ejemplo"><a href="#web-lecturas">Volver a las lecturas</a><a href="#web-proyectos">Ver los proyectos</a></nav><small>Ejemplo editorial · contenido ilustrativo</small></div></footer>
</section>