Leer, comparar y decidir. El detalle también cuenta: 1.250,50.
Clics, lápiz y pequeños gestos. Sin música de fondo. Tu elección de silencio se recuerda en este navegador.
Guía de la biblioteca
Cómo construir documentos que se leen, se exploran y se revisan.
Manual de uso / edición 04
Una biblioteca para pensar con ella.
Elige una pregunta. Construye el argumento. Dale a cada pieza una tarea.
Esta guía reúne 98 componentes, 16 familias con claro y oscuro y 11 recorridos de composición. Cada receta se puede ver y copiar; la base siempre incluye apariencia, sonido optativo, comentarios y ayudas de lectura.
Los ejemplos son ilustrativos: ninguna cifra de las muestras describe resultados reales de Liftit o Tikin.
Todas las piezas, a mano.
Busca por necesidad, combina familia y recorrido, y abre la muestra real con sus límites y código copiable. Las recetas de sesión y relaciones son componentes locales, no integraciones nuevas del portal.
Componer
Start with the reading task
Name the audience, question, evidence and desired next action. A short decision memo can remain a single page; an extensive report can use chapters with their own contents. Separate an executive conclusion from evidence and appendices while keeping every important limitation near the claim it qualifies.
Use the component registry and scripts/catalog.py --id ID to inspect recipes, dependencies and limits. The interactive guide is examples/generated/guide.html. The workbench provides synthetic logistics, finance and product examples. Numeric data must be real, derived transparently or explicitly labeled illustrative.
Useful compositions
Executive report: decision or conclusion, highlights/lowlights, evidence table/chart, risks, alternatives, owners and next steps.
Article: thesis, grounded examples, marginal questions, definitions, references and related reading.
Logistics: delivery summary, exceptions, route or fleet view, record explorer and operational limits.
Finance: source and period, comparable units, reconciliation or waterfall when mathematically appropriate, assumptions and missing evidence.
Editorial prose defaults to 33rem (528px), code to 48rem (768px), and wide evidence to 64rem (1024px), with 24px mobile gutters. Use wide figures as siblings of narrow reading blocks. One outer dotted frame is enough. Alternate explanation, evidence and interpretation; do not replace all structure with cards. Use left/right marginal annotations for nuance, keeping critical conditions in normal text. Animation should reveal a brief secondary note when seen, with a small replay control.
Data and interaction
Declare source, date, unit, denominator and aggregate scope. Avoid summing ratios or averaging averages without weights. Tables preserve row/cell IDs and mobile record views. Graphs require accessible values; geography requires a list/table alternative. Simulations must be labeled. Never invent results to showcase a component.
Use the shared dock and existing controls. Prefer grouped table actions, compact comment composition and progressive appearance settings. Keep creator management out of the document. Code copy buttons need clear success/fallback states; examples do not execute merely because they look like a terminal.
Voz y lectura
Marginal voice
Use the main column for the argument. A left note can challenge an assumption; a right note can interpret evidence or ask the next question. Alternate only when the content warrants it. Keep each annotation short and adjacent to its anchor. A line, bracket or underline points to a precise phrase. Animate once as it enters view; reveal replay on hover and keyboard focus, keep it discoverable on touch, and respect reduced motion. Do not animate essential evidence away.
El denominador cambia la lectura.
Antes de afirmar que el servicio mejoró, define si estás midiendo entregas completadas o todos los intentos. La cifra necesita ese contexto.
Una propuesta todavía es una pregunta.
Un prototipo permite observar una tarea. Hasta hacer la prueba no sabemos si la interfaz ayuda a completarla.
Corrección ilustrativa: cinco días tres días. Conserva visible el cambio y explica su motivo.
HTML completo · Composición de notas izquierda y derecha
Composición de notas izquierda y derecha
<div class="apuntes ancho" id="guia-demo-apuntes-ejemplo">
<section class="apunte izquierda">
<div class="apunte-cuerpo"><h3>El denominador cambia la lectura.</h3><p>Antes de afirmar que el servicio mejoró, define si estás midiendo <span data-subrayar="referencia">entregas completadas</span> o todos los intentos. La cifra necesita ese contexto.</p></div>
<aside class="apunte-nota" aria-label="Apunte a la izquierda"><p class="manuscrita" data-mano="fuente" data-escritura-sonora id="guia-demo-apunte-izquierdo">¿incluye devoluciones?</p><button class="gesto-repetir" type="button" data-mano-repetir="guia-demo-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>Una propuesta todavía es una pregunta.</h3><p>Un prototipo permite <span data-subrayar="referencia">observar una tarea</span>. Hasta hacer la prueba no sabemos si la interfaz ayuda a completarla.</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="guia-demo-apunte-derecho">primero, ver a alguien usarlo.</p><button class="gesto-repetir" type="button" data-mano-repetir="guia-demo-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>
Reader controls
Mount one shared dock. Comments, Share and Preferences have distinct purposes. Reader preferences remain separate from creator management. Preserve comment context, version and session when exporting feedback; personal notes stay private unless explicitly included by their author. Keep the composer short, disclose metadata on request, and return focus after closing.
Temas
Visual voice
Choose a family for the material: Editorial for narrative, Liftit for logistics, Tikin/Catabum for their respective brands, Blueprint for conceptual architecture and Hacker for technical evidence. Linear and Modern support compact product documentation. Light/dark/system mode is independent. Use consistent typography roles; handwritten annotation does not replace the body face. All families must support the same components and accessible state labels.
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.
<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>
publicaciones / autor
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.
<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>
publicaciones / relacionados
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.
<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>
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.
<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>
El 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.
<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>
publicaciones / estanteria
Estantería editorial
CUADERNO / 01Observar antes de medirESTUDIO EDITORIAL
Por leer
Observar antes de medir
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.
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.
<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>
publicaciones / invitacion
Invitación editorial
¿Qué sumarías?
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.
<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>
publicaciones / pie-editorial
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.
<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>
publicaciones / actividad-editorial
Actividad con contexto editorial
Actividad de ejemplo / ocho semanas
Pequeños avances, una historia visible.
Cada cuadrado representa una semana. La intensidad indica cuántas acciones se registraron; no mide calidad ni productividad.
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.
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.
<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>
publicaciones / x-post
Publicación de X
Laura Méndez@autora.ejemplo
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.
Ejemplo sintéticoSin publicación original: autora, texto y gráfico son ilustrativos.
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.
<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>
publicaciones / youtube
Video de YouTube
YouTube · YouTube Developers Live: Embedded Web Player Customization · Google for Developers
Al cargarlo, tu navegador se conecta con YouTube. Empieza sin sonido.
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.
Al cargarla, tu navegador se conecta con 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.
<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>
publicaciones / encabezado-fecha
Encabezado con fecha
Un lugar para leer con calma
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.
<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>
Artículos
Anotaciones, fuentes, definiciones y cambios editoriales.
lectura / manuscrita
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.
<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>
lectura / articulo
Ficha de artículo
El contexto antes de empezar
Autoría
Equipo editorial
Publicado
Tipo de pieza
Ensayo con ejemplos
Revisión
Primera edición
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.
<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>
lectura / referencias
Referencias con regreso
La evidencia queda a un paso
Una afirmación debe permitir volver a su origen
[1].
Cuando una cifra es ilustrativa, debe decirlo
[2].
Nota metodológica del ejemplo: acompañar cada afirmación con su procedencia.
Volver al texto ↑
Los ejemplos de esta biblioteca no representan datos de producción.
Volver al texto ↑
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.
<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>
lectura / glosario
Glosario editorial
Palabras que conviene acordar
Observación
Lo que se registró directamente, con su contexto y procedencia.
Hipótesis
Explicación provisional que puede contrastarse con evidencia.
Prototipo
Representación parcial de una solución para explorar una pregunta.
Use and limits: Define report-specific vocabulary in visible text. Definitions are editorial, not hover-only help, automatic search or translation.
<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>
lectura / metodologia
Metodología desplegable
Cómo leer esta evidencia
El ejemplo compara la duración declarada de una tarea bajo dos supuestos.
Consultar método, supuestos y exclusiones
Unidad
Minutos por operación; volumen mensual constante.
Supuesto
Las tareas comparadas tienen el mismo alcance.
Exclusión
No incluye capacitación, espera ni fallos de otros sistemas.
Límite
El resultado estima capacidad, no demuestra ahorro realizado.
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.
<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>
lectura / revisiones
Historial de revisiones
Qué cambió en el documento
Historial ficticio para mostrar el formato; no describe commits del repositorio.
· v0.2 · Equipo editorial
Se explican las exclusiones
El cálculo ahora distingue capacidad estimada de ahorro realizado.
· v0.1 · Equipo editorial
Primera propuesta
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.
<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>
lectura / apuntes
Apuntes manuscritos al margen
Una decisión necesita contexto.
La evidencia sirve cuando nos ayuda a decidir mejor. Un reporte puede dejar una pregunta breve al margen sin interrumpir el argumento.
Explicar también es editar.
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.
<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>
lectura / lista-estados
Listas de estado
En qué estamos
Instantánea ilustrativa ·
[x]Completado: Definir la pregunta del informe
[-]En curso: Contrastar las cifras con su fuente
[ ]Pendiente: Probar la propuesta con lectores
[ ]Pendiente: Publicar lo que cambió y por qué
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.
<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>
lectura / lista-proyectos
Lista de proyectos
Tres preguntas abiertas
Qué vale la pena medir
Elegir indicadores que respondan a la decisión del equipo y explicitar qué queda fuera.
Cómo se entiende la propuesta
Recorrer el prototipo con una tarea concreta antes de añadir otra pantalla.
Cuándo volver a revisar
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.
<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>
lectura / conversacion
Conversación en el artículo
Aclarar la pregunta
Investigación¿Qué queremos aprender con este informe?
ProductoSi la propuesta ayuda a decidir con menos dudas.
InvestigaciónEntonces necesitamos observar una decisión, además de contar clics.
ProductoDejemos esa pregunta al comienzo.
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.
<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>
lectura / enlaces-icono
Enlaces con icono
Una referencia en medio del argumento.
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.
<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>
lectura / avisos-animados
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.
<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>
lectura / relato-visual
Relato visual por pasos
Cien horas de trabajo
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.
Datos ilustrativos: distribución de 100 horas, no productividad medida.
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.
<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>
lectura / reacciones
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.
Afirmaciones, compensaciones, riesgos y escenarios explícitos.
reportes / decision
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.
<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>
reportes / cronologia
Cronología anotada
De la observación a la prueba
Observar
Se registran las dudas al completar un formulario.
Prototipar
Se reúnen los campos en dos pasos y se añade una revisión final.
Contrastar
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.
<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>
reportes / conciliacion
Conciliación de registros
Una diferencia necesita explicación
Operaciones esperadas y observadas · ejemplo
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.
Datos ilustrativos. Diferencia = observado − esperado; una diferencia cero no prueba igualdad de los registros individuales.
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.
<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>
reportes / escenario
Calculadora de escenarios
¿Qué cambia si la tarea toma menos tiempo?
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.
<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>
reportes / hallazgo
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.
<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>
reportes / criterios
Matriz de criterios
Comparar sin esconder el criterio
Opciones de revisión · comparación conceptual
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
No hay puntuación agregada: las compensaciones y los datos faltantes quedan visibles.
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.
<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>
reportes / riesgos
Registro de riesgos
Lo que podría salir mal
Riesgos ilustrativos de un flujo de confirmación
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
Ejemplo sin probabilidades estimadas. Asigna personas y señales verificables en el proyecto real.
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.
<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>
reportes / trayectoria
Cronología vertical
La trayectoria de una idea.
Proyecto ficticio · hitos de ejemplo, del más reciente al más antiguo.
Una prueba con lectores
· etapa actual
Observar dónde se pierde el contexto y qué hace falta para decidir con confianza.
Un prototipo que se puede recorrer
Dar forma a las preguntas y mantener visibles las limitaciones de cada alternativa.
Las primeras preguntas
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.
<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>
reportes / ficha-entrega
Ficha de entrega e hitos
Pedido de ejemplo / DEMO-018
Estar cerca no es haber entregado.
Vehículo LFT-021 · Bogotá → Medellín. Estado ilustrativo: en tránsito.
Recogida confirmada
18 pedidos asociados al vehículo. La cantidad pertenece al corte de ejemplo.
En tránsito
· último evento conocido
El movimiento en el mapa no confirma recepción ni prueba de entrega.
Recepción pendiente
Sin hora confirmada. No se fabrica una estimación a partir de la animación.
Evidencia pendiente
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.
<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>
reportes / sensibilidad
Sensibilidad de escenarios
Resultado base: 100 millones COP.
Resultado ante cambios de un supuesto
Supuesto
Escenario A
Resultado A
Escenario B
Resultado B
Volumen
−10 %
91
+10 %
109
Precio
−5 %
92
+5 %
108
Combustible
−10 %
106
+10 %
94
Escenarios ilustrativos independientes. No son una proyección financiera ni combinan efectos.
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.
<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>
reportes / gantt
Gantt editorial
Hoja de ruta de una revisión
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
Calendario ficticio. Fechas UTC. Las barras representan intervalos inicio→fin; igualdad indica un hito.
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.
<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>
reportes / session-brief
Ficha de sesión y continuación
Sesión de ejemplo · pendiente de continuar
Evaluar el alcance del piloto
Objetivo: identificar la evidencia necesaria antes de recomendar una prueba.
Agente / dispositivo
Codex · equipo de ejemplo
Origen
No conectado · muestra sintética
Resultado
Borrador del informe · versión 2
Siguiente paso
Validar la fuente del supuesto de demanda
Qué conservar para retomar
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.
<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>
reportes / context-bundle
Paquete de contexto para agentes
Contexto de ejemplo · preparado, no enviado
Verificar un supuesto antes de editar
Documento / versión
Informe del piloto · v2 ilustrativa
Audiencia
Creador y agente elegido
Incluido
Comentario, cita y objetivo del cambio
Excluido
Notas privadas no seleccionadas e historial completo
«¿Cuál es la fuente de la demanda prevista?»
Instrucción revisable
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.
<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>
reportes / evidence-ledger
Registro de afirmaciones y evidencia
Afirmaciones del piloto · ejemplo sin datos de negocio
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
Distingue evidencia, interpretación y vacío. No asigna porcentajes de confianza inventados.
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.
HTML completo · Registro de afirmaciones y evidencia
Registro de afirmaciones y evidencia
<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>
reportes / version-comparison
Comparación editorial entre versiones
Revisión editorial · ejemplo
De una afirmación a un supuesto explícito
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.
Revisión y trazabilidad
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.
HTML completo · Comparación editorial entre versiones
Comparación editorial entre versiones
<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>
Gráficas
Valores alcanzables, fuentes visibles y alternativas en tabla.
graficas / barras
Barras
Ver los datos de balance de horas
Balance de horas
Actividad
Horas
Investigar
60 h
Construir
25 h
Revisar
15 h
Ajuste de registro
−10 h
Datos ilustrativos; corte 13-sep-2026.
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.
<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>
graficas / columnas
Columnas agrupadas o apiladas
Ver los datos de pedidos por canal
Pedidos por canal y trimestre
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
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.
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.
<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>
graficas / cambio
Antes y después
Ver los datos de tiempo de entrega por zona
Tiempo mediano de entrega antes y después de reordenar rutas
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
Datos ilustrativos: mediana de dos semanas antes y dos después del cambio, misma definición de entrega. La diferencia no prueba causalidad.
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.
<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>
graficas / meta
Avance frente a meta
Ver los datos de clientes nuevos frente a la meta
Clientes nuevos del trimestre frente a la 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
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.
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.
<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>
graficas / lineas
Líneas
Ver los datos de tiempo de resolución
Tiempo de resolución
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
Datos ilustrativos; corte 13-sep-2026.
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.
<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>
graficas / temporal
Serie temporal
Ver los datos de solicitudes por día
Solicitudes por día
Día UTC
Solicitudes
80 solicitudes
100 solicitudes
90 solicitudes
120 solicitudes
Ejemplo: conteos diarios independientes. Último registro frente al registro anterior (13 sep frente a 8 sep), no totales de ventanas de distinta duración.
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.
<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>
graficas / dispersion
Dispersión
Ver los datos de carga y latencia
Carga y latencia
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
Datos ilustrativos; corte 13-sep-2026.
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.
<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>
graficas / distribucion
Distribución
Ver los datos de duración
Duración de 30 sesiones
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
Ejemplo de 30 sesiones. Altura = frecuencia / ancho del intervalo; el área representa la frecuencia. El último intervalo tiene el doble de ancho.
<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.
<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>
graficas / calor
Mapa de calor
Ver los datos de tiempo por actividad y día
Tiempo por actividad y día
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
Ejemplo ilustrativo, minutos por día. Límites de clase: [0,30), [30,60), [60,90), [90,120), [120,150]. Ausencia distinta de cero.
<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.
<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>
graficas / cascada
Cascada de cantidades
Cómo se llega al resultado
Horas disponibles, ajustes y trabajo añadido. Cada tramo empieza donde termina el anterior.
Balance ilustrativo · eje X en horas
Concepto
Cambio (h)
Acumulado (h)
Capacidad inicial
+120
120
Mantenimiento
−30
90
Apoyo adicional
+20
110
Revisión
−15
95
Resultado
Horas netas
95
Ejemplo: 120 − 30 + 20 − 15 = 95 h. Signos y tabla distinguen aumentos y reducciones sin depender del color.
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.
<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>
graficas / multiples
Pequeños múltiples
La misma pregunta en tres sedes
Solicitudes por semana. Los tres paneles comparten el eje Y; el eje X corresponde al orden de la tabla.
Solicitudes semanales · ejemplo · eje Y en solicitudes
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
Datos ilustrativos. Escala común de 0 a 80; sin dato corta el trazo. La pendiente no demuestra causalidad.
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.
<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>
graficas / calendario
Calendario de actividad
Consultar los 109 días registrados
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
Datos ficticios, 25 may–13 sep 2026. Intensidad diaria, cero distinto de ausencia.
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.
Distribución ficticia de 100 millones COP. El botón cambia torta ↔ donut sin cambiar cifras.
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.
<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>
graficas / areas
Áreas apiladas
Áreas apiladas de ingresos
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
Ingresos ficticios en millones COP; cada banda suma al total. No representan utilidades.
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.
<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>
graficas / caja
Caja y bigotes
Caja y bigotes de entrega
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
Resumen ficticio de tiempos de entrega. Bigotes = mínimo y máximo, no 1,5 IQR.
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.
<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>
graficas / velas
Velas OHLC
Velas financieras 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
Serie sintética, no cotización de un activo. Hueca = sube o no cambia; rellena = baja.
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.
Datos ficticios de logística; no son operaciones de Liftit. Ubicaciones urbanas aproximadas. Contorno: Natural Earth, dominio público, escala 1:110m.
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.
<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>
graficas / mapa-burbujas
Mapa de volumen
Mapa de volumen por sede
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
Datos ficticios de logística; no son operaciones de Liftit. Ubicaciones urbanas aproximadas. Contorno: Natural Earth, dominio público, escala 1:110m.
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.
<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>
graficas / atencion
Attention map de áreas
Dónde se fue la atención
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
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.
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.
<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>
graficas / sankey
Flujos Sankey
Destino de ingresos de ejemplo
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
Datos ficticios, total 120 millones COP. No representan estados financieros de Liftit o Tikin.
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.
<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>
graficas / cohortes
Cohortes de recurrencia
Clientes activos por cohorte
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
Datos ficticios. Corte: 30 junio 2026. Cada celda cuenta personas activas ese mes; pueden regresar.
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.
<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>
graficas / embudo
Embudo explicado
Del pedido a la entrega
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.
Datos ilustrativos: misma cohorte y ventana de seguimiento para las cuatro etapas.
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.
<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>
graficas / incertidumbre
Rangos de incertidumbre
Los límites son escenarios declarados por el equipo de ejemplo. No hay un nivel de confianza ni una probabilidad asignada.
Escenarios de demanda
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
Datos ficticios de escenarios; no constituyen previsión de Liftit ni intervalo estadístico.
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.
<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>
graficas / relationship-map
Mapa de relaciones explorable
Relaciones de ejemplo · datos sintéticos
Del proyecto a la decisión
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.
Fuente completa y alternativa sin JavaScript
Piezas de ejemplo
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.
Relaciones declaradas y sugeridas del ejemplo
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.
<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>
graficas / sketch-diagram
Diagrama a mano · flujos legibles
De una idea a una revisión compartida
01
Una idea
Escribe la pregunta que este documento debe resolver.
desarrollar → Un borrador
02
Un borrador
Ordena la evidencia y deja visibles las dudas.
compartir → Una revisión
03
Una revisión
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.
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.
Comparación, totales, series y densidad sin cortar información.
tablas / tabla-densa
Tabla densa
Seguimiento ilustrativo de brechas
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.
Ejemplo de seis columnas; desplaza la tabla para consultar la última.
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.
<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>
tablas / comparacion
Comparación
Fuentes candidatas · ejemplo
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
Datos ilustrativos. «Elegido» expresa la decisión, no una puntuación automática.
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.
<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>
tablas / totales
Totales y ordenación
Horas registradas · ejemplo
Investigar
60 h
Construir
25 h
Revisar
15 h
Total de horas registradas
100 h
Ejemplo: 60 + 25 + 15 = 100 h. Los botones ordenan sólo las filas de datos; el total permanece al pie.
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.
<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>
tablas / sparkline
Tabla con serie
Solicitudes de lunes a jueves · ejemplo
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
Valores ilustrativos. Misma escala Y en ambas filas. El dato ausente corta la línea y todos los valores permanecen escritos.
<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.
<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>
tablas / explorador
Tabla interactiva
Explorar el registro
Seis registros ficticios. Ordena por encabezado, filtra y agrupa sin perder el detalle.
6 registros de ejemplo.
Movimientos ilustrativos · importes en COP
Nombre ↕
Equipo ↕
Estado ↕
Importe COP ↕
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.
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.
Vehículos de ejemplo · pedidos asociados al corte
Vehículo ↕
Ciudad ↕
Estado ↕
Pedidos ↕
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.
Informe · v2 · sección Supuestos. La cita sigue pendiente de comprobar.
Qué se necesita para resolver
Una fuente verificable y una versión revisada. Exportar el comentario no lo resuelve.
Nota privada · ejemplo
Preparar una pregunta para el agente
Comparar el escenario conservador antes de recomendar.
Audiencia del contexto
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.
<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>
Prototipos
Interfaz local, estados, vistas alternativas y explicaciones.
prototipos / antes-despues
Antes y después
Un cambio que se puede leer
Antes · mensaje genérico
No se pudo completar la acción.
La persona debe adivinar qué falta.
Después · siguiente paso concreto
Añade la fecha del registro para continuar.
El mensaje identifica el campo que necesita atención.
Ejemplo de redacción. Las dos versiones permanecen completas; en móvil se leen una después de otra.
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.
<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>
prototipos / visor
Visor de prototipos
Una interfaz, varios tamaños
Explora los estados vacío, revisión y confirmado de un registro ilustrativo.
Vista inicial: 390 px CSS.
Embeber mi HTML
Tu HTML se muestra sólo en este navegador. Reiniciar recupera la muestra original.
Tu primer registro
Todavía no hay registros en este ejemplo.
Revisa antes de confirmar
Nombre
Sesión de revisión
Fecha
14 de septiembre de 2026
Duración
30 minutos
Registro confirmado
La sesión de revisión aparece en el ejemplo con su fecha y duración.
Estados del ejemplo
Vacío: crear un borrador de ejemplo.
Revisión: sesión del 14-sep-2026, 30 minutos, pendiente de confirmar.
Confirmado: resultado ilustrativo; no se envían datos.
Vista interactiva local. El ancho conserva píxeles CSS reales; en una pantalla pequeña se desplaza la región completa.
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.
<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>
prototipos / pestanas
Pestañas de una pieza
La afirmación, sus datos y su límite
Una hipótesis para probar
Un resumen antes de confirmar podría reducir las correcciones posteriores.
Esta es una hipótesis de diseño, no un resultado medido.
Qué necesitamos observar
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.
Qué no se puede concluir
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.
<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>
prototipos / anotaciones
Diagrama anotado
Tres momentos de una confirmación
Crear. Los datos permanecen editables; todavía no hay envío.
Revisar. Se presenta fecha, duración y nombre en un resumen.
Confirmar. La interfaz debe explicar qué se guardó y ofrecer un siguiente paso.
Flujo conceptual; las distancias no representan tiempo ni cantidad. Las notas contienen toda la explicación del dibujo.
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.
<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>
prototipos / evidencia-ampliable
Evidencia ampliable
Revisar una evidencia en detalle
Fecha y referencia: REV-042, 15 septiembre 2026.
Tres entregas todavía requieren evidencia.
Siguiente acción: revisar los tres soportes antes de cerrar.
Ilustración creada para esta receta; reemplazar por una captura o imagen autorizada.
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.
<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>
Espacio y gesto
Geografía, composiciones con Three y sonido optativo.
expresion / sonido
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.
<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>
expresion / xyz
Three.js · XYZ
Tres variables de una misma prueba
Prueba
Carga (req/s)
Latencia (ms)
Memoria (MB)
A
10
80
100
B
20
95
120
C
35
140
150
D
50
170
210
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.
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.
<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>
expresion / etapas
Three.js · etapas
Dónde tarda una solicitud
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.
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.
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.
<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>
expresion / recorrido
Globo narrado
Seguir el viaje de una idea
Una ruta por etapa, con contexto escrito. Selecciona anterior o siguiente para orientar el globo.
Tres etapas ilustrativas; el recorrido empieza inmóvil.
Bogotá → Madrid
Se comparte la primera propuesta para revisión.
Madrid → Tokio
La propuesta se convierte en una prueba de interacción.
Tokio → Bogotá
Las observaciones regresan al equipo que decide.
Relato ficticio. Las coordenadas son geográficas; no representan vuelos, distancias ni actividad real.
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.
<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>
expresion / columnas-mapa
Columnas geográficas 3D
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
Datos ficticios de logística; no son operaciones de Liftit. Ubicaciones urbanas aproximadas. Contorno: Natural Earth, dominio público, escala 1:110m.
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.
Datos ficticios de logística; no son operaciones de Liftit. Ubicaciones urbanas aproximadas. Contorno: Natural Earth, dominio público, escala 1:110m.
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.
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.
Flota ficticia · 15 septiembre 2026, 08:00 COT · posiciones iniciales de demostración
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.
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.
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.
<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>
Edición
Nueve papeles, escritura animada, sonido, código y comentarios.
configuracion / terminal
Terminal
saldo por bolsillo · ejemplo ilustrativo
rango bolsillos total COP ------------ --------- ---------------
menos de $100 349 5.120
más de $1M 5 14.434.490
Datos ilustrativos. La columna que importa va señalada, no en negrita.
Use 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.
<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>
configuracion / escritura
Escritura por trazos
«a mano»
Activa el sonido en Apariencia —o en el control local— y pulsa Repetir para escuchar el trazo.
Trazo completo.
Gesto ilustrativo original de Margen. 2400 ms repartidos por la longitud de cada trazo; la frase siempre permanece escrita debajo.
<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.
<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>
configuracion / apariencia
Apariencia y lectura cómoda
Este componente ya está activo en la base: abre la llave sol/luna de la cabecera.
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.
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.
<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>
configuracion / revision
Comentarios sobre el documento
Este componente ya está activo en la base: usa la burbuja flotante para dejar y copiar un comentario.
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.
// Datos de ejemplo, sin solicitudes
const registros = [12, 8, 5];
const total = registros.reduce((suma, n) => suma + n, 0);
console.log("Total:", total);
TypeScript
type Registro = { nombre: string; valor: number };
const ejemplo: Registro = { nombre: "Diseño", valor: 12 };
function leer(r: Registro): number {
return r.valor;
}
Use 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.
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.
<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.
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)}
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.
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.
Una página para leer con calma, explorar lo que sigue y volver al punto que importa.
Lecturas
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.
Lo que estamos construyendo
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.
HTML completo · Sitio editorial: navegación y cierre
Sitio editorial: navegación y cierre
<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>
Usar el skill
Finish
Generate with the canonical contract, validate, inspect browser behavior and preserve the document ID during revisions. Follow the saved publishing preference and deliver the appropriate published or draft URL. The skill's language is English; write the artifact in the user's requested language and voice. See executive voice, artifact contract, mobile tables and component playbook.
To use the existing service, follow Use artifacts.botto.is. Install the skill from that origin, sign in, create a personal agent token and connect it. No .env, Docker or server setup is needed.
To run an independent server, use Self-hosting. The local-only path below remains available without any account.
Local-only skill
Requirements: Python 3.10+ and a modern browser. No Python packages, Node, account or environment variables are needed for HTML generation.
The adjacent .sha256 is required. The updater verifies the archive checksum and extraction paths, then the installer verifies the per-file manifest. The shared library is installed under ~/.local/share/bottifact/library, with links under ~/.agents/skills, ~/.claude/skills and ~/.hermes/skills. It preserves independent directories or links pointing elsewhere instead of overwriting them. Read its output to see whether a conflicting installation was kept.
~/.local/bin/margen is the managed CLI launcher; bottifact remains a compatibility alias. Put ~/.local/bin on PATH if your shell does not already include it. Restart/reload each agent's skill discovery. The skill uses the Agent Skills format, but discovery and permitted tool execution depend on the host agent/version. A filesystem installer cannot install a skill into the ChatGPT website.
For a custom destination without agent links or launcher changes:
Create a token in the authenticated portal and paste it at the CLI's masked prompt. Do not place it in an artifact, shell argument, screenshot or shared skill. Personal connection settings live outside the skill, under ~/.config/bottifact/.
Update
Portal-installed library: margen update uses the configured server. To deliberately change servers, use margen update --server https://another.example.com.
Local ZIP installation: update the source checkout, rebuild the package and repeat scripts/update.py --package .... This installation remains independent rather than silently switching to botto.is. The installer keeps a backup of the previous managed library. Review failures before retrying; never bypass checksum validation to make an update succeed.
Design and imported documents
The portable package carries the same recipes, registry, theme tokens, fonts and component runtime used by the generator. The design contract explains what an update changes, which format-specific behaviors it preserves, and how to upload your own HTML without applying the library design.
Common problems
Comparar opciones
Problem
Action
Agent cannot find the skill
Check installer output and the agent's skill directory; reload discovery
margen command not found
Add ~/.local/bin to PATH or run the library's Python scripts directly
Existing skill was preserved
Inspect that directory before moving it; the installer does not overwrite unrelated work
No account in a fresh portal
Bootstrap the configured admin, then configure Google/email
No shared comments in an HTML file
Publish through a connected portal; local HTML comments are local storage
React package cannot be found on npm
Use workspace or packed tarballs; registry publication has not happened
