La forma también
explica.

<figure class="amplio" id="pieza-tabla-densa">
  <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>

<figure class="ancho" id="pieza-terminal">
  <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>

<div class="gesto-escrito" id="pieza-manuscrita">
  <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>

<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>

<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>

<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>

<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>

<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>

<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>

<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>

<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>

<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>

<figure class="amplio" id="pieza-comparacion">
  <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>

<figure class="ancho" id="pieza-totales">
  <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>

<figure class="ancho" id="pieza-sparkline">
  <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>

<aside class="nota-sonido" data-canal-sonido aria-labelledby="sonido-titulo" id="pieza-sonido">
  <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>

<figure class="ancho nota-escritura" data-escritura data-escritura-sonora data-al-ver data-canal-sonido data-duracion="2400" id="pieza-escritura">
  <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>

<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>

<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>

<div class="pieza" id="apariencia-ejemplo">
  <h3>Una llave pequeña, distintas formas de leer</h3>
  <p>Prueba los tres controles. Comparten las preferencias de esta nota.</p>
  <div class="apariencia-variantes">
    <div><p class="variante-nombre">01 · Círculo</p>
<details class="apariencia-menu orbita" data-apariencia-menu>
  <summary aria-label="Apariencia del documento" aria-controls="panel-apariencia-orbita"><span class="apariencia-icono"><svg class="icono-sol" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="4"/><path d="M12 2v2m0 16v2M2 12h2m16 0h2M5 5l1.5 1.5m11 11L19 19M5 19l1.5-1.5m11-11L19 5"/></svg><svg class="icono-luna" viewBox="0 0 24 24" aria-hidden="true"><path d="M20.4 14A8.6 8.6 0 0 1 10 3.6 8.6 8.6 0 1 0 20.4 14Z"/></svg></span></summary>
  <div class="apariencia-panel apariencia-explorador" id="panel-apariencia-orbita" tabindex="0" role="region" aria-label="Opciones de apariencia, desplazables">
    <div class="apariencia-encabezado"><p class="apariencia-titulo">Apariencia</p><span data-tema-actual>Sistema</span></div>
<div class="apariencia-pestanas" role="tablist" aria-label="Preferencias del documento"><button type="button" role="tab" id="preferencia-apariencia-orbita-temas" aria-controls="preferencia-panel-apariencia-orbita-temas" aria-selected="true" tabindex="0" data-preferencia-tab="temas">Temas</button><button type="button" role="tab" id="preferencia-apariencia-orbita-letras" aria-controls="preferencia-panel-apariencia-orbita-letras" aria-selected="false" tabindex="-1" data-preferencia-tab="letras">Letras</button><button type="button" role="tab" id="preferencia-apariencia-orbita-sonido" aria-controls="preferencia-panel-apariencia-orbita-sonido" aria-selected="false" tabindex="-1" data-preferencia-tab="sonido">Sonido</button></div><section role="tabpanel" tabindex="0" id="preferencia-panel-apariencia-orbita-temas" aria-labelledby="preferencia-apariencia-orbita-temas" data-preferencia-panel="temas"><fieldset class="apariencia-modos"><legend>Modo</legend><div><label><input type="radio" name="modo-apariencia-orbita" value="light" data-elegir-modo><span>Claro</span></label><label><input type="radio" name="modo-apariencia-orbita" value="dark" data-elegir-modo><span>Oscuro</span></label><label><input type="radio" name="modo-apariencia-orbita" value="system" data-elegir-modo checked><span>Sistema</span></label></div><p data-modo-estado>Se adapta a la apariencia del dispositivo.</p></fieldset><div class="apariencia-filtros"><label>Buscar tema<input type="search" data-buscar-tema placeholder="Nombre o color" autocomplete="off"></label><label>Categoría<select data-familia-tema><option value="">Todas</option><option value="editorial">Editoriales</option><option value="marca">Marcas</option><option value="tecnico">Técnicos</option><option value="producto">Producto</option><option value="editor">Editores</option></select></label></div><fieldset class="apariencia"><legend class="sr-only">Paleta del documento</legend><div class="apariencia-colores" tabindex="0" role="region" aria-label="Temas disponibles, desplazables"><label data-tema-familia="editorial"><input type="radio" name="color-apariencia-orbita" value="editorial" data-elegir-tema checked><span class="paleta-mini" data-muestra-tema="editorial" aria-hidden="true"><i></i><b></b></span><span>Editorial<small>Papel cálido · cobre</small></span></label>
<label data-tema-familia="editorial"><input type="radio" name="color-apariencia-orbita" value="sea" data-elegir-tema><span class="paleta-mini" data-muestra-tema="sea" aria-hidden="true"><i></i><b></b></span><span>Sea<small>Azul oceánico · menta</small></span></label>
<label data-tema-familia="editorial"><input type="radio" name="color-apariencia-orbita" value="oliva" data-elegir-tema><span class="paleta-mini" data-muestra-tema="oliva" aria-hidden="true"><i></i><b></b></span><span>Oliva<small>Botánico · verde</small></span></label>
<label data-tema-familia="editorial"><input type="radio" name="color-apariencia-orbita" value="arcilla" data-elegir-tema><span class="paleta-mini" data-muestra-tema="arcilla" aria-hidden="true"><i></i><b></b></span><span>Arcilla<small>Terracota · arena</small></span></label>
<label data-tema-familia="editorial"><input type="radio" name="color-apariencia-orbita" value="ciruela" data-elegir-tema><span class="paleta-mini" data-muestra-tema="ciruela" aria-hidden="true"><i></i><b></b></span><span>Ciruela<small>Malva · tinta violeta</small></span></label>
<label data-tema-familia="marca"><input type="radio" name="color-apariencia-orbita" value="liftit" data-elegir-tema><span class="paleta-mini" data-muestra-tema="liftit" aria-hidden="true"><i></i><b></b></span><span>Liftit<small>LMS · Ribbon, Bay y coral</small></span></label>
<label data-tema-familia="marca"><input type="radio" name="color-apariencia-orbita" value="tikin" data-elegir-tema><span class="paleta-mini" data-muestra-tema="tikin" aria-hidden="true"><i></i><b></b></span><span>Tikin<small>Blanco y negro · rojo Tikin</small></span></label>
<label data-tema-familia="marca"><input type="radio" name="color-apariencia-orbita" value="catabum" data-elegir-tema><span class="paleta-mini" data-muestra-tema="catabum" aria-hidden="true"><i></i><b></b></span><span>Catabum<small>Comunidad · violeta y magenta</small></span></label>
<label data-tema-familia="marca"><input type="radio" name="color-apariencia-orbita" value="kaira" data-elegir-tema><span class="paleta-mini" data-muestra-tema="kaira" aria-hidden="true"><i></i><b></b></span><span>Kaira<small>Warm paper · deep plum · antique gold</small></span></label>
<label data-tema-familia="tecnico"><input type="radio" name="color-apariencia-orbita" value="blueprint" data-elegir-tema><span class="paleta-mini" data-muestra-tema="blueprint" aria-hidden="true"><i></i><b></b></span><span>Blueprint<small>Plano · cuadrícula</small></span></label>
<label data-tema-familia="tecnico"><input type="radio" name="color-apariencia-orbita" value="hacker" data-elegir-tema><span class="paleta-mini" data-muestra-tema="hacker" aria-hidden="true"><i></i><b></b></span><span>Hacker<small>Terminal · verde</small></span></label>
<label data-tema-familia="producto"><input type="radio" name="color-apariencia-orbita" value="linear" data-elegir-tema><span class="paleta-mini" data-muestra-tema="linear" aria-hidden="true"><i></i><b></b></span><span>Linear<small>Grafito · lavanda</small></span></label>
<label data-tema-familia="editor"><input type="radio" name="color-apariencia-orbita" value="modern" data-elegir-tema><span class="paleta-mini" data-muestra-tema="modern" aria-hidden="true"><i></i><b></b></span><span>Modern<small>VS Code · azul</small></span></label>
<label data-tema-familia="editor"><input type="radio" name="color-apariencia-orbita" value="github" data-elegir-tema><span class="paleta-mini" data-muestra-tema="github" aria-hidden="true"><i></i><b></b></span><span>GitHub<small>Neutros · azul</small></span></label>
<label data-tema-familia="editor"><input type="radio" name="color-apariencia-orbita" value="catppuccin" data-elegir-tema><span class="paleta-mini" data-muestra-tema="catppuccin" aria-hidden="true"><i></i><b></b></span><span>Catppuccin<small>Latte / Mocha · pastel</small></span></label>
<label data-tema-familia="editor"><input type="radio" name="color-apariencia-orbita" value="solarized" data-elegir-tema><span class="paleta-mini" data-muestra-tema="solarized" aria-hidden="true"><i></i><b></b></span><span>Solarized<small>Marfil / petróleo · cian</small></span></label></div></fieldset><p class="apariencia-resultados" data-temas-resultados role="status">16 temas · claro y oscuro</p><button type="button" data-limpiar-temas hidden>Limpiar búsqueda y filtros</button></section><section role="tabpanel" tabindex="0" id="preferencia-panel-apariencia-orbita-letras" aria-labelledby="preferencia-apariencia-orbita-letras" data-preferencia-panel="letras" hidden><fieldset class="apariencia"><legend>Combinaciones de lectura</legend><div class="apariencia-estilos" tabindex="0" role="region" aria-label="Combinaciones tipográficas, desplazables">
      <label><input type="radio" name="estilo-apariencia-orbita" value="editorial" data-elegir-estilo checked><span class="muestra-letra editorial" aria-hidden="true">Aa</span><span>Editorial<small>Instrument · Geist</small></span></label>
      <label><input type="radio" name="estilo-apariencia-orbita" value="sobrio" data-elegir-estilo><span class="muestra-letra sobrio" aria-hidden="true">Aa</span><span>Sobrio<small>Geist · Geist</small></span></label>
      <label><input type="radio" name="estilo-apariencia-orbita" value="tecnico" data-elegir-estilo><span class="muestra-letra tecnico" aria-hidden="true">Aa</span><span>Técnico<small>Mono · Geist</small></span></label>
    <label><input type="radio" name="estilo-apariencia-orbita" value="libro" data-elegir-estilo><span class="muestra-letra libro" aria-hidden="true">Aa</span><span>Libro<small>Literata · Literata</small></span></label>
    <label><input type="radio" name="estilo-apariencia-orbita" value="revista" data-elegir-estilo><span class="muestra-letra revista" aria-hidden="true">Aa</span><span>Revista<small>Instrument · Literata</small></span></label>
    <label><input type="radio" name="estilo-apariencia-orbita" value="bitacora" data-elegir-estilo><span class="muestra-letra bitacora" aria-hidden="true">Aa</span><span>Bitácora<small>Mono · Literata</small></span></label>
    </div></fieldset><div class="apariencia-muestra" aria-label="Vista previa tipográfica"><strong>Una idea merece espacio.</strong><p>Leer, comparar y decidir. El detalle también cuenta: 1.250,50.</p></div><div class="apariencia-ajustes">
      <button type="button" data-comodidad aria-pressed="false">Lectura cómoda <span aria-hidden="true">✓</span></button>
      <button type="button" data-ver-escritura>Ver escritura animada ↗</button>
      <button type="button" data-papel-tramado aria-pressed="false">Grano de papel <span aria-hidden="true">✓</span></button>
    </div></section><section role="tabpanel" tabindex="0" id="preferencia-panel-apariencia-orbita-sonido" aria-labelledby="preferencia-apariencia-orbita-sonido" data-preferencia-panel="sonido" hidden><fieldset class="apariencia-audio"><legend>Sonido</legend>

      <button type="button" data-audio-prueba>Probar sonido</button>
      <label>Volumen <output data-audio-volumen-valor>65 %</output><input type="range" min="0" max="100" value="65" step="5" aria-label="Volumen del sonido" data-audio-volumen></label>
      <p role="status" data-audio-estado>Sonido habilitado. Se activa después del primer clic. Puedes apagarlo abajo.</p>
    </fieldset><p class="apariencia-nota">Clics, lápiz y pequeños gestos. Sin música de fondo. Tu elección de silencio se recuerda en este navegador.</p><div class="apariencia-pie"><button type="button" data-audio-global aria-pressed="true"><span data-audio-etiqueta>Sonidos activados</span><span class="interruptor" aria-hidden="true"></span></button></div></section>
  </div>
</details>
    </div>
    <div><p class="variante-nombre">02 · Con etiqueta</p>
<details class="apariencia-menu etiqueta" data-apariencia-menu>
  <summary aria-label="Apariencia del documento" aria-controls="panel-apariencia-etiqueta"><span class="apariencia-icono"><svg class="icono-sol" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="4"/><path d="M12 2v2m0 16v2M2 12h2m16 0h2M5 5l1.5 1.5m11 11L19 19M5 19l1.5-1.5m11-11L19 5"/></svg><svg class="icono-luna" viewBox="0 0 24 24" aria-hidden="true"><path d="M20.4 14A8.6 8.6 0 0 1 10 3.6 8.6 8.6 0 1 0 20.4 14Z"/></svg></span><span>Apariencia</span><svg class="icono-flecha" viewBox="0 0 24 24" aria-hidden="true"><path d="m8 10 4 4 4-4"/></svg></summary>
  <div class="apariencia-panel apariencia-explorador" id="panel-apariencia-etiqueta" tabindex="0" role="region" aria-label="Opciones de apariencia, desplazables">
    <div class="apariencia-encabezado"><p class="apariencia-titulo">Apariencia</p><span data-tema-actual>Sistema</span></div>
<div class="apariencia-pestanas" role="tablist" aria-label="Preferencias del documento"><button type="button" role="tab" id="preferencia-apariencia-etiqueta-temas" aria-controls="preferencia-panel-apariencia-etiqueta-temas" aria-selected="true" tabindex="0" data-preferencia-tab="temas">Temas</button><button type="button" role="tab" id="preferencia-apariencia-etiqueta-letras" aria-controls="preferencia-panel-apariencia-etiqueta-letras" aria-selected="false" tabindex="-1" data-preferencia-tab="letras">Letras</button><button type="button" role="tab" id="preferencia-apariencia-etiqueta-sonido" aria-controls="preferencia-panel-apariencia-etiqueta-sonido" aria-selected="false" tabindex="-1" data-preferencia-tab="sonido">Sonido</button></div><section role="tabpanel" tabindex="0" id="preferencia-panel-apariencia-etiqueta-temas" aria-labelledby="preferencia-apariencia-etiqueta-temas" data-preferencia-panel="temas"><fieldset class="apariencia-modos"><legend>Modo</legend><div><label><input type="radio" name="modo-apariencia-etiqueta" value="light" data-elegir-modo><span>Claro</span></label><label><input type="radio" name="modo-apariencia-etiqueta" value="dark" data-elegir-modo><span>Oscuro</span></label><label><input type="radio" name="modo-apariencia-etiqueta" value="system" data-elegir-modo checked><span>Sistema</span></label></div><p data-modo-estado>Se adapta a la apariencia del dispositivo.</p></fieldset><div class="apariencia-filtros"><label>Buscar tema<input type="search" data-buscar-tema placeholder="Nombre o color" autocomplete="off"></label><label>Categoría<select data-familia-tema><option value="">Todas</option><option value="editorial">Editoriales</option><option value="marca">Marcas</option><option value="tecnico">Técnicos</option><option value="producto">Producto</option><option value="editor">Editores</option></select></label></div><fieldset class="apariencia"><legend class="sr-only">Paleta del documento</legend><div class="apariencia-colores" tabindex="0" role="region" aria-label="Temas disponibles, desplazables"><label data-tema-familia="editorial"><input type="radio" name="color-apariencia-etiqueta" value="editorial" data-elegir-tema checked><span class="paleta-mini" data-muestra-tema="editorial" aria-hidden="true"><i></i><b></b></span><span>Editorial<small>Papel cálido · cobre</small></span></label>
<label data-tema-familia="editorial"><input type="radio" name="color-apariencia-etiqueta" value="sea" data-elegir-tema><span class="paleta-mini" data-muestra-tema="sea" aria-hidden="true"><i></i><b></b></span><span>Sea<small>Azul oceánico · menta</small></span></label>
<label data-tema-familia="editorial"><input type="radio" name="color-apariencia-etiqueta" value="oliva" data-elegir-tema><span class="paleta-mini" data-muestra-tema="oliva" aria-hidden="true"><i></i><b></b></span><span>Oliva<small>Botánico · verde</small></span></label>
<label data-tema-familia="editorial"><input type="radio" name="color-apariencia-etiqueta" value="arcilla" data-elegir-tema><span class="paleta-mini" data-muestra-tema="arcilla" aria-hidden="true"><i></i><b></b></span><span>Arcilla<small>Terracota · arena</small></span></label>
<label data-tema-familia="editorial"><input type="radio" name="color-apariencia-etiqueta" value="ciruela" data-elegir-tema><span class="paleta-mini" data-muestra-tema="ciruela" aria-hidden="true"><i></i><b></b></span><span>Ciruela<small>Malva · tinta violeta</small></span></label>
<label data-tema-familia="marca"><input type="radio" name="color-apariencia-etiqueta" value="liftit" data-elegir-tema><span class="paleta-mini" data-muestra-tema="liftit" aria-hidden="true"><i></i><b></b></span><span>Liftit<small>LMS · Ribbon, Bay y coral</small></span></label>
<label data-tema-familia="marca"><input type="radio" name="color-apariencia-etiqueta" value="tikin" data-elegir-tema><span class="paleta-mini" data-muestra-tema="tikin" aria-hidden="true"><i></i><b></b></span><span>Tikin<small>Blanco y negro · rojo Tikin</small></span></label>
<label data-tema-familia="marca"><input type="radio" name="color-apariencia-etiqueta" value="catabum" data-elegir-tema><span class="paleta-mini" data-muestra-tema="catabum" aria-hidden="true"><i></i><b></b></span><span>Catabum<small>Comunidad · violeta y magenta</small></span></label>
<label data-tema-familia="marca"><input type="radio" name="color-apariencia-etiqueta" value="kaira" data-elegir-tema><span class="paleta-mini" data-muestra-tema="kaira" aria-hidden="true"><i></i><b></b></span><span>Kaira<small>Warm paper · deep plum · antique gold</small></span></label>
<label data-tema-familia="tecnico"><input type="radio" name="color-apariencia-etiqueta" value="blueprint" data-elegir-tema><span class="paleta-mini" data-muestra-tema="blueprint" aria-hidden="true"><i></i><b></b></span><span>Blueprint<small>Plano · cuadrícula</small></span></label>
<label data-tema-familia="tecnico"><input type="radio" name="color-apariencia-etiqueta" value="hacker" data-elegir-tema><span class="paleta-mini" data-muestra-tema="hacker" aria-hidden="true"><i></i><b></b></span><span>Hacker<small>Terminal · verde</small></span></label>
<label data-tema-familia="producto"><input type="radio" name="color-apariencia-etiqueta" value="linear" data-elegir-tema><span class="paleta-mini" data-muestra-tema="linear" aria-hidden="true"><i></i><b></b></span><span>Linear<small>Grafito · lavanda</small></span></label>
<label data-tema-familia="editor"><input type="radio" name="color-apariencia-etiqueta" value="modern" data-elegir-tema><span class="paleta-mini" data-muestra-tema="modern" aria-hidden="true"><i></i><b></b></span><span>Modern<small>VS Code · azul</small></span></label>
<label data-tema-familia="editor"><input type="radio" name="color-apariencia-etiqueta" value="github" data-elegir-tema><span class="paleta-mini" data-muestra-tema="github" aria-hidden="true"><i></i><b></b></span><span>GitHub<small>Neutros · azul</small></span></label>
<label data-tema-familia="editor"><input type="radio" name="color-apariencia-etiqueta" value="catppuccin" data-elegir-tema><span class="paleta-mini" data-muestra-tema="catppuccin" aria-hidden="true"><i></i><b></b></span><span>Catppuccin<small>Latte / Mocha · pastel</small></span></label>
<label data-tema-familia="editor"><input type="radio" name="color-apariencia-etiqueta" value="solarized" data-elegir-tema><span class="paleta-mini" data-muestra-tema="solarized" aria-hidden="true"><i></i><b></b></span><span>Solarized<small>Marfil / petróleo · cian</small></span></label></div></fieldset><p class="apariencia-resultados" data-temas-resultados role="status">16 temas · claro y oscuro</p><button type="button" data-limpiar-temas hidden>Limpiar búsqueda y filtros</button></section><section role="tabpanel" tabindex="0" id="preferencia-panel-apariencia-etiqueta-letras" aria-labelledby="preferencia-apariencia-etiqueta-letras" data-preferencia-panel="letras" hidden><fieldset class="apariencia"><legend>Combinaciones de lectura</legend><div class="apariencia-estilos" tabindex="0" role="region" aria-label="Combinaciones tipográficas, desplazables">
      <label><input type="radio" name="estilo-apariencia-etiqueta" value="editorial" data-elegir-estilo checked><span class="muestra-letra editorial" aria-hidden="true">Aa</span><span>Editorial<small>Instrument · Geist</small></span></label>
      <label><input type="radio" name="estilo-apariencia-etiqueta" value="sobrio" data-elegir-estilo><span class="muestra-letra sobrio" aria-hidden="true">Aa</span><span>Sobrio<small>Geist · Geist</small></span></label>
      <label><input type="radio" name="estilo-apariencia-etiqueta" value="tecnico" data-elegir-estilo><span class="muestra-letra tecnico" aria-hidden="true">Aa</span><span>Técnico<small>Mono · Geist</small></span></label>
    <label><input type="radio" name="estilo-apariencia-etiqueta" value="libro" data-elegir-estilo><span class="muestra-letra libro" aria-hidden="true">Aa</span><span>Libro<small>Literata · Literata</small></span></label>
    <label><input type="radio" name="estilo-apariencia-etiqueta" value="revista" data-elegir-estilo><span class="muestra-letra revista" aria-hidden="true">Aa</span><span>Revista<small>Instrument · Literata</small></span></label>
    <label><input type="radio" name="estilo-apariencia-etiqueta" value="bitacora" data-elegir-estilo><span class="muestra-letra bitacora" aria-hidden="true">Aa</span><span>Bitácora<small>Mono · Literata</small></span></label>
    </div></fieldset><div class="apariencia-muestra" aria-label="Vista previa tipográfica"><strong>Una idea merece espacio.</strong><p>Leer, comparar y decidir. El detalle también cuenta: 1.250,50.</p></div><div class="apariencia-ajustes">
      <button type="button" data-comodidad aria-pressed="false">Lectura cómoda <span aria-hidden="true">✓</span></button>
      <button type="button" data-ver-escritura>Ver escritura animada ↗</button>
      <button type="button" data-papel-tramado aria-pressed="false">Grano de papel <span aria-hidden="true">✓</span></button>
    </div></section><section role="tabpanel" tabindex="0" id="preferencia-panel-apariencia-etiqueta-sonido" aria-labelledby="preferencia-apariencia-etiqueta-sonido" data-preferencia-panel="sonido" hidden><fieldset class="apariencia-audio"><legend>Sonido</legend>

      <button type="button" data-audio-prueba>Probar sonido</button>
      <label>Volumen <output data-audio-volumen-valor>65 %</output><input type="range" min="0" max="100" value="65" step="5" aria-label="Volumen del sonido" data-audio-volumen></label>
      <p role="status" data-audio-estado>Sonido habilitado. Se activa después del primer clic. Puedes apagarlo abajo.</p>
    </fieldset><p class="apariencia-nota">Clics, lápiz y pequeños gestos. Sin música de fondo. Tu elección de silencio se recuerda en este navegador.</p><div class="apariencia-pie"><button type="button" data-audio-global aria-pressed="true"><span data-audio-etiqueta>Sonidos activados</span><span class="interruptor" aria-hidden="true"></span></button></div></section>
  </div>
</details>
    </div>
    <div><p class="variante-nombre">03 · Cápsula</p>
<details class="apariencia-menu capsula" data-apariencia-menu>
  <summary aria-label="Apariencia del documento" aria-controls="panel-apariencia-capsula"><span class="apariencia-icono"><svg class="icono-sol" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="4"/><path d="M12 2v2m0 16v2M2 12h2m16 0h2M5 5l1.5 1.5m11 11L19 19M5 19l1.5-1.5m11-11L19 5"/></svg><svg class="icono-luna" viewBox="0 0 24 24" aria-hidden="true"><path d="M20.4 14A8.6 8.6 0 0 1 10 3.6 8.6 8.6 0 1 0 20.4 14Z"/></svg></span><span class="apariencia-actual" data-tema-actual>Sistema</span><svg class="icono-flecha" viewBox="0 0 24 24" aria-hidden="true"><path d="m8 10 4 4 4-4"/></svg></summary>
  <div class="apariencia-panel apariencia-explorador" id="panel-apariencia-capsula" tabindex="0" role="region" aria-label="Opciones de apariencia, desplazables">
    <div class="apariencia-encabezado"><p class="apariencia-titulo">Apariencia</p><span data-tema-actual>Sistema</span></div>
<div class="apariencia-pestanas" role="tablist" aria-label="Preferencias del documento"><button type="button" role="tab" id="preferencia-apariencia-capsula-temas" aria-controls="preferencia-panel-apariencia-capsula-temas" aria-selected="true" tabindex="0" data-preferencia-tab="temas">Temas</button><button type="button" role="tab" id="preferencia-apariencia-capsula-letras" aria-controls="preferencia-panel-apariencia-capsula-letras" aria-selected="false" tabindex="-1" data-preferencia-tab="letras">Letras</button><button type="button" role="tab" id="preferencia-apariencia-capsula-sonido" aria-controls="preferencia-panel-apariencia-capsula-sonido" aria-selected="false" tabindex="-1" data-preferencia-tab="sonido">Sonido</button></div><section role="tabpanel" tabindex="0" id="preferencia-panel-apariencia-capsula-temas" aria-labelledby="preferencia-apariencia-capsula-temas" data-preferencia-panel="temas"><fieldset class="apariencia-modos"><legend>Modo</legend><div><label><input type="radio" name="modo-apariencia-capsula" value="light" data-elegir-modo><span>Claro</span></label><label><input type="radio" name="modo-apariencia-capsula" value="dark" data-elegir-modo><span>Oscuro</span></label><label><input type="radio" name="modo-apariencia-capsula" value="system" data-elegir-modo checked><span>Sistema</span></label></div><p data-modo-estado>Se adapta a la apariencia del dispositivo.</p></fieldset><div class="apariencia-filtros"><label>Buscar tema<input type="search" data-buscar-tema placeholder="Nombre o color" autocomplete="off"></label><label>Categoría<select data-familia-tema><option value="">Todas</option><option value="editorial">Editoriales</option><option value="marca">Marcas</option><option value="tecnico">Técnicos</option><option value="producto">Producto</option><option value="editor">Editores</option></select></label></div><fieldset class="apariencia"><legend class="sr-only">Paleta del documento</legend><div class="apariencia-colores" tabindex="0" role="region" aria-label="Temas disponibles, desplazables"><label data-tema-familia="editorial"><input type="radio" name="color-apariencia-capsula" value="editorial" data-elegir-tema checked><span class="paleta-mini" data-muestra-tema="editorial" aria-hidden="true"><i></i><b></b></span><span>Editorial<small>Papel cálido · cobre</small></span></label>
<label data-tema-familia="editorial"><input type="radio" name="color-apariencia-capsula" value="sea" data-elegir-tema><span class="paleta-mini" data-muestra-tema="sea" aria-hidden="true"><i></i><b></b></span><span>Sea<small>Azul oceánico · menta</small></span></label>
<label data-tema-familia="editorial"><input type="radio" name="color-apariencia-capsula" value="oliva" data-elegir-tema><span class="paleta-mini" data-muestra-tema="oliva" aria-hidden="true"><i></i><b></b></span><span>Oliva<small>Botánico · verde</small></span></label>
<label data-tema-familia="editorial"><input type="radio" name="color-apariencia-capsula" value="arcilla" data-elegir-tema><span class="paleta-mini" data-muestra-tema="arcilla" aria-hidden="true"><i></i><b></b></span><span>Arcilla<small>Terracota · arena</small></span></label>
<label data-tema-familia="editorial"><input type="radio" name="color-apariencia-capsula" value="ciruela" data-elegir-tema><span class="paleta-mini" data-muestra-tema="ciruela" aria-hidden="true"><i></i><b></b></span><span>Ciruela<small>Malva · tinta violeta</small></span></label>
<label data-tema-familia="marca"><input type="radio" name="color-apariencia-capsula" value="liftit" data-elegir-tema><span class="paleta-mini" data-muestra-tema="liftit" aria-hidden="true"><i></i><b></b></span><span>Liftit<small>LMS · Ribbon, Bay y coral</small></span></label>
<label data-tema-familia="marca"><input type="radio" name="color-apariencia-capsula" value="tikin" data-elegir-tema><span class="paleta-mini" data-muestra-tema="tikin" aria-hidden="true"><i></i><b></b></span><span>Tikin<small>Blanco y negro · rojo Tikin</small></span></label>
<label data-tema-familia="marca"><input type="radio" name="color-apariencia-capsula" value="catabum" data-elegir-tema><span class="paleta-mini" data-muestra-tema="catabum" aria-hidden="true"><i></i><b></b></span><span>Catabum<small>Comunidad · violeta y magenta</small></span></label>
<label data-tema-familia="marca"><input type="radio" name="color-apariencia-capsula" value="kaira" data-elegir-tema><span class="paleta-mini" data-muestra-tema="kaira" aria-hidden="true"><i></i><b></b></span><span>Kaira<small>Warm paper · deep plum · antique gold</small></span></label>
<label data-tema-familia="tecnico"><input type="radio" name="color-apariencia-capsula" value="blueprint" data-elegir-tema><span class="paleta-mini" data-muestra-tema="blueprint" aria-hidden="true"><i></i><b></b></span><span>Blueprint<small>Plano · cuadrícula</small></span></label>
<label data-tema-familia="tecnico"><input type="radio" name="color-apariencia-capsula" value="hacker" data-elegir-tema><span class="paleta-mini" data-muestra-tema="hacker" aria-hidden="true"><i></i><b></b></span><span>Hacker<small>Terminal · verde</small></span></label>
<label data-tema-familia="producto"><input type="radio" name="color-apariencia-capsula" value="linear" data-elegir-tema><span class="paleta-mini" data-muestra-tema="linear" aria-hidden="true"><i></i><b></b></span><span>Linear<small>Grafito · lavanda</small></span></label>
<label data-tema-familia="editor"><input type="radio" name="color-apariencia-capsula" value="modern" data-elegir-tema><span class="paleta-mini" data-muestra-tema="modern" aria-hidden="true"><i></i><b></b></span><span>Modern<small>VS Code · azul</small></span></label>
<label data-tema-familia="editor"><input type="radio" name="color-apariencia-capsula" value="github" data-elegir-tema><span class="paleta-mini" data-muestra-tema="github" aria-hidden="true"><i></i><b></b></span><span>GitHub<small>Neutros · azul</small></span></label>
<label data-tema-familia="editor"><input type="radio" name="color-apariencia-capsula" value="catppuccin" data-elegir-tema><span class="paleta-mini" data-muestra-tema="catppuccin" aria-hidden="true"><i></i><b></b></span><span>Catppuccin<small>Latte / Mocha · pastel</small></span></label>
<label data-tema-familia="editor"><input type="radio" name="color-apariencia-capsula" value="solarized" data-elegir-tema><span class="paleta-mini" data-muestra-tema="solarized" aria-hidden="true"><i></i><b></b></span><span>Solarized<small>Marfil / petróleo · cian</small></span></label></div></fieldset><p class="apariencia-resultados" data-temas-resultados role="status">16 temas · claro y oscuro</p><button type="button" data-limpiar-temas hidden>Limpiar búsqueda y filtros</button></section><section role="tabpanel" tabindex="0" id="preferencia-panel-apariencia-capsula-letras" aria-labelledby="preferencia-apariencia-capsula-letras" data-preferencia-panel="letras" hidden><fieldset class="apariencia"><legend>Combinaciones de lectura</legend><div class="apariencia-estilos" tabindex="0" role="region" aria-label="Combinaciones tipográficas, desplazables">
      <label><input type="radio" name="estilo-apariencia-capsula" value="editorial" data-elegir-estilo checked><span class="muestra-letra editorial" aria-hidden="true">Aa</span><span>Editorial<small>Instrument · Geist</small></span></label>
      <label><input type="radio" name="estilo-apariencia-capsula" value="sobrio" data-elegir-estilo><span class="muestra-letra sobrio" aria-hidden="true">Aa</span><span>Sobrio<small>Geist · Geist</small></span></label>
      <label><input type="radio" name="estilo-apariencia-capsula" value="tecnico" data-elegir-estilo><span class="muestra-letra tecnico" aria-hidden="true">Aa</span><span>Técnico<small>Mono · Geist</small></span></label>
    <label><input type="radio" name="estilo-apariencia-capsula" value="libro" data-elegir-estilo><span class="muestra-letra libro" aria-hidden="true">Aa</span><span>Libro<small>Literata · Literata</small></span></label>
    <label><input type="radio" name="estilo-apariencia-capsula" value="revista" data-elegir-estilo><span class="muestra-letra revista" aria-hidden="true">Aa</span><span>Revista<small>Instrument · Literata</small></span></label>
    <label><input type="radio" name="estilo-apariencia-capsula" value="bitacora" data-elegir-estilo><span class="muestra-letra bitacora" aria-hidden="true">Aa</span><span>Bitácora<small>Mono · Literata</small></span></label>
    </div></fieldset><div class="apariencia-muestra" aria-label="Vista previa tipográfica"><strong>Una idea merece espacio.</strong><p>Leer, comparar y decidir. El detalle también cuenta: 1.250,50.</p></div><div class="apariencia-ajustes">
      <button type="button" data-comodidad aria-pressed="false">Lectura cómoda <span aria-hidden="true">✓</span></button>
      <button type="button" data-ver-escritura>Ver escritura animada ↗</button>
      <button type="button" data-papel-tramado aria-pressed="false">Grano de papel <span aria-hidden="true">✓</span></button>
    </div></section><section role="tabpanel" tabindex="0" id="preferencia-panel-apariencia-capsula-sonido" aria-labelledby="preferencia-apariencia-capsula-sonido" data-preferencia-panel="sonido" hidden><fieldset class="apariencia-audio"><legend>Sonido</legend>

      <button type="button" data-audio-prueba>Probar sonido</button>
      <label>Volumen <output data-audio-volumen-valor>65 %</output><input type="range" min="0" max="100" value="65" step="5" aria-label="Volumen del sonido" data-audio-volumen></label>
      <p role="status" data-audio-estado>Sonido habilitado. Se activa después del primer clic. Puedes apagarlo abajo.</p>
    </fieldset><p class="apariencia-nota">Clics, lápiz y pequeños gestos. Sin música de fondo. Tu elección de silencio se recuerda en este navegador.</p><div class="apariencia-pie"><button type="button" data-audio-global aria-pressed="true"><span data-audio-etiqueta>Sonidos activados</span><span class="interruptor" aria-hidden="true"></span></button></div></section>
  </div>
</details>
    </div>
  </div>
  <p>Color, tipografía, tamaño y trama se pueden combinar. Las tablas y figuras conservan sus anchos.</p>
</div>

<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>

<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>

<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>

<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>

<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>

<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>

<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>

<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>

<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>

<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>

<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>

<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>

<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>

<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>

<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>

<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>

<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>

<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>

<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>

<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>

<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>

<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>

<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>

<section class="pieza amplio" id="explorador-ejemplo" data-explorador>
<h3>Explorar el registro</h3><p>Seis registros ficticios. Ordena por encabezado, filtra y agrupa sin perder el detalle.</p>
<form class="tabla-herramientas" aria-label="Explorar registros">
<label class="tabla-busqueda"><span class="control-etiqueta">Buscar registros</span><svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true"><circle cx="10" cy="10" r="6"/><path d="m15 15 5 5"/></svg><input type="search" name="buscar" placeholder="Buscar registros…"></label>
<details class="control-menu"><summary>Filtros <span data-filtros-cuenta></span>⌄</summary><div class="control-panel" tabindex="0" role="region" aria-label="Filtros de registros"><label>Estado<select name="estado"><option value="">Todos los estados</option><option>En revisión</option><option>Confirmado</option></select></label><button type="reset">Limpiar filtros</button></div></details>
<details class="control-menu"><summary>Agrupar ⌄</summary><div class="control-panel" tabindex="0" role="region" aria-label="Agrupar registros"><label>Agrupar por<select name="grupo"><option value="">Sin grupos</option><option value="1">Equipo</option><option value="2">Estado</option></select></label></div></details>
<details class="control-menu"><summary>Columnas ⌄</summary><div class="control-panel" tabindex="0" role="region" aria-label="Columnas visibles"><label><input type="checkbox" data-columna="1" checked> Equipo</label><label><input type="checkbox" data-columna="2" checked> Estado</label><label><input type="checkbox" data-columna="3" checked> Importe COP</label></div></details>
</form>
<p data-explorador-estado role="status">6 registros de ejemplo.</p><div class="tabla-caja" tabindex="0" role="region" aria-label="Registros ordenables y agrupables, desplazables"><table><caption>Movimientos ilustrativos · importes en COP</caption><thead><tr><th scope="col"><details class="control-menu tabla-orden"><summary>Nombre <span data-indicador-orden aria-hidden="true">↕</span></summary><div class="control-panel" tabindex="0" role="region" aria-label="Ordenar por Nombre"><button type="button" data-orden-col="0" data-direccion="1" data-cerrar-menu>↑ Ascendente</button><button type="button" data-orden-col="0" data-direccion="-1" data-cerrar-menu>↓ Descendente</button><button type="button" data-orden-col="0" data-direccion="0" data-cerrar-menu>Restablecer orden</button></div></details></th><th scope="col"><details class="control-menu tabla-orden"><summary>Equipo <span data-indicador-orden aria-hidden="true">↕</span></summary><div class="control-panel" tabindex="0" role="region" aria-label="Ordenar por Equipo"><button type="button" data-orden-col="1" data-direccion="1" data-cerrar-menu>↑ Ascendente</button><button type="button" data-orden-col="1" data-direccion="-1" data-cerrar-menu>↓ Descendente</button><button type="button" data-orden-col="1" data-direccion="0" data-cerrar-menu>Restablecer orden</button></div></details></th><th scope="col"><details class="control-menu tabla-orden"><summary>Estado <span data-indicador-orden aria-hidden="true">↕</span></summary><div class="control-panel" tabindex="0" role="region" aria-label="Ordenar por Estado"><button type="button" data-orden-col="2" data-direccion="1" data-cerrar-menu>↑ Ascendente</button><button type="button" data-orden-col="2" data-direccion="-1" data-cerrar-menu>↓ Descendente</button><button type="button" data-orden-col="2" data-direccion="0" data-cerrar-menu>Restablecer orden</button></div></details></th><th scope="col"><details class="control-menu tabla-orden"><summary>Importe COP <span data-indicador-orden aria-hidden="true">↕</span></summary><div class="control-panel" tabindex="0" role="region" aria-label="Ordenar por Importe COP"><button type="button" data-orden-col="3" data-direccion="1" data-cerrar-menu>↑ Ascendente</button><button type="button" data-orden-col="3" data-direccion="-1" data-cerrar-menu>↓ Descendente</button><button type="button" data-orden-col="3" data-direccion="0" data-cerrar-menu>Restablecer orden</button></div></details></th></tr></thead><tbody>
<tr><th scope="row">Sesión de diseño</th><td>Producto</td><td>En revisión</td><td data-valor="120000">120.000</td></tr>
<tr><th scope="row">Prueba de lectura</th><td>Investigación</td><td>Confirmado</td><td data-valor="80000">80.000</td></tr>
<tr><th scope="row">Revisión móvil</th><td>Producto</td><td>Confirmado</td><td data-valor="60000">60.000</td></tr>
<tr><th scope="row">Entrevista inicial</th><td>Investigación</td><td>En revisión</td><td data-valor="95000">95.000</td></tr>
<tr><th scope="row">Control de calidad</th><td>Ingeniería</td><td>Confirmado</td><td data-valor="140000">140.000</td></tr>
<tr><th scope="row">Ajuste de interfaz</th><td>Ingeniería</td><td>En revisión</td><td data-valor="75000">75.000</td></tr>
</tbody></table></div></section>

<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>

<section class="pieza" id="revision-ejemplo" data-revision>
<h3>Revisar sin perder el contexto</h3><p>Activa Comentar y elige un párrafo, título, figura o card. También puedes seleccionar texto antes de pulsar Comentar.</p><div class="acciones"><button type="button" data-revision-modo aria-pressed="false">Comentar documento</button><button type="button" data-revision-lista>Ver comentarios</button></div><p data-revision-estado role="status">Comentarios locales con exportación para compartir.</p>
<dialog class="revision-dialogo revision-ui" data-revision-editor aria-labelledby="revision-editor-titulo"><form><h2 class="sr-only" id="revision-editor-titulo">Añadir comentario</h2><details class="revision-contexto"><summary title="Ver contexto del punto"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="5" cy="12" r="1"/><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/></svg><span class="sr-only">Contexto del punto</span></summary><p data-revision-contexto tabindex="0" aria-label="Contexto completo del comentario"></p></details><label for="revision-texto">Ajuste que propones</label><textarea id="revision-texto" data-revision-texto rows="1" maxlength="4000" required placeholder="Escribe un comentario…"></textarea><div class="acciones"><button type="button" class="nota-icono" data-revision-guardar aria-label="Guardar comentario" title="Guardar comentario"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 19V5m-6 6 6-6 6 6"/></svg></button><button type="button" class="nota-icono" data-revision-cancelar aria-label="Cerrar comentario" title="Cerrar comentario"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 6 12 12M6 18 18 6"/></svg></button></div></form></dialog>
<dialog class="revision-dialogo revision-ui" data-revision-panel aria-labelledby="revision-panel-titulo"><h2 id="revision-panel-titulo">Comentarios del documento</h2><p class="procedencia">Revisión local: exporta el archivo para compartir los hilos.</p><ol data-revision-notas></ol><div class="codigo"><div class="cab"><span>Prompt de ajustes</span><button type="button" data-copiar="revision-prompt">Copiar prompt</button><span class="copia-estado" role="status"></span></div><pre tabindex="0" aria-label="Prompt con comentarios, desplazable"><code id="revision-prompt" data-revision-prompt>No hay comentarios todavía.</code></pre></div><button type="button" data-revision-cerrar>Cerrar comentarios</button></dialog>
</section>

<section class="pieza ancho" id="codigo-poliglota"><h3>Código que también se puede leer</h3><p>Elige un lenguaje. El coloreado conserva exactamente el texto que copias.</p><div class="pestanas" data-pestanas><div class="pestanas-caja" tabindex="0" role="region" aria-label="Lenguajes de código, desplazables"><div class="pestanas-nav" data-tabs-nav aria-label="Lenguajes"><button type="button" id="codigo-tab-html" data-tab="codigo-panel-html">HTML</button><button type="button" id="codigo-tab-css" data-tab="codigo-panel-css">CSS</button><button type="button" id="codigo-tab-javascript" data-tab="codigo-panel-javascript">JavaScript</button><button type="button" id="codigo-tab-typescript" data-tab="codigo-panel-typescript">TypeScript</button><button type="button" id="codigo-tab-json" data-tab="codigo-panel-json">JSON</button><button type="button" id="codigo-tab-python" data-tab="codigo-panel-python">Python</button><button type="button" id="codigo-tab-sql" data-tab="codigo-panel-sql">SQL</button><button type="button" id="codigo-tab-shell" data-tab="codigo-panel-shell">Shell</button><button type="button" id="codigo-tab-salida" data-tab="codigo-panel-salida">Salida</button></div></div><section id="codigo-panel-html" data-tab-panel><div class="codigo"><div class="cab"><span>HTML</span><button type="button" data-copiar="muestra-html" aria-label="Copiar HTML" title="Copiar"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="8" y="8" width="12" height="13" rx="2"/><path d="M16 8V3H4v13h4"/></svg></button><span class="copia-estado" role="status"></span></div><pre tabindex="0" aria-label="Código HTML, desplazable"><code id="muestra-html" data-lenguaje="html">&lt;article class=&quot;nota&quot;&gt;
  &lt;h2&gt;Una decisión con contexto&lt;/h2&gt;
  &lt;p&gt;La evidencia se conserva completa.&lt;/p&gt;
&lt;/article&gt;</code></pre></div></section><section id="codigo-panel-css" data-tab-panel><div class="codigo"><div class="cab"><span>CSS</span><button type="button" data-copiar="muestra-css" aria-label="Copiar CSS" title="Copiar"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="8" y="8" width="12" height="13" rx="2"/><path d="M16 8V3H4v13h4"/></svg></button><span class="copia-estado" role="status"></span></div><pre tabindex="0" aria-label="Código CSS, desplazable"><code id="muestra-css" data-lenguaje="css">:root {
  --espacio: 24px;
}
.nota {
  display: grid;
  gap: var(--espacio);
  color: var(--tinta);
}</code></pre></div></section><section id="codigo-panel-javascript" data-tab-panel><div class="codigo"><div class="cab"><span>JavaScript</span><button type="button" data-copiar="muestra-javascript" aria-label="Copiar JavaScript" title="Copiar"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="8" y="8" width="12" height="13" rx="2"/><path d="M16 8V3H4v13h4"/></svg></button><span class="copia-estado" role="status"></span></div><pre tabindex="0" aria-label="Código JavaScript, desplazable"><code id="muestra-javascript" data-lenguaje="javascript">// Datos de ejemplo, sin solicitudes
const registros = [12, 8, 5];
const total = registros.reduce((suma, n) =&gt; suma + n, 0);
console.log(&quot;Total:&quot;, total);</code></pre></div></section><section id="codigo-panel-typescript" data-tab-panel><div class="codigo"><div class="cab"><span>TypeScript</span><button type="button" data-copiar="muestra-typescript" aria-label="Copiar TypeScript" title="Copiar"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="8" y="8" width="12" height="13" rx="2"/><path d="M16 8V3H4v13h4"/></svg></button><span class="copia-estado" role="status"></span></div><pre tabindex="0" aria-label="Código TypeScript, desplazable"><code id="muestra-typescript" data-lenguaje="typescript">type Registro = { nombre: string; valor: number };
const ejemplo: Registro = { nombre: &quot;Diseño&quot;, valor: 12 };
function leer(r: Registro): number {
  return r.valor;
}</code></pre></div></section><section id="codigo-panel-json" data-tab-panel><div class="codigo"><div class="cab"><span>JSON</span><button type="button" data-copiar="muestra-json" aria-label="Copiar JSON" title="Copiar"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="8" y="8" width="12" height="13" rx="2"/><path d="M16 8V3H4v13h4"/></svg></button><span class="copia-estado" role="status"></span></div><pre tabindex="0" aria-label="Código JSON, desplazable"><code id="muestra-json" data-lenguaje="json">{
  &quot;edicion&quot;: &quot;cuaderno&quot;,
  &quot;paginas&quot;: 9,
  &quot;sonido&quot;: false,
  &quot;fuente&quot;: null
}</code></pre></div></section><section id="codigo-panel-python" data-tab-panel><div class="codigo"><div class="cab"><span>Python</span><button type="button" data-copiar="muestra-python" aria-label="Copiar Python" title="Copiar"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="8" y="8" width="12" height="13" rx="2"/><path d="M16 8V3H4v13h4"/></svg></button><span class="copia-estado" role="status"></span></div><pre tabindex="0" aria-label="Código Python, desplazable"><code id="muestra-python" data-lenguaje="python"># Ejemplo local
registros = [12, 8, 5]
def total(valores):
    return sum(valores)
print(&quot;Total:&quot;, total(registros))</code></pre></div></section><section id="codigo-panel-sql" data-tab-panel><div class="codigo"><div class="cab"><span>SQL</span><button type="button" data-copiar="muestra-sql" aria-label="Copiar SQL" title="Copiar"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="8" y="8" width="12" height="13" rx="2"/><path d="M16 8V3H4v13h4"/></svg></button><span class="copia-estado" role="status"></span></div><pre tabindex="0" aria-label="Código SQL, desplazable"><code id="muestra-sql" data-lenguaje="sql">-- Consulta ilustrativa
SELECT equipo, SUM(importe) AS total
FROM movimientos
WHERE estado = &#x27;confirmado&#x27;
GROUP BY equipo
ORDER BY total DESC;</code></pre></div></section><section id="codigo-panel-shell" data-tab-panel><div class="codigo"><div class="cab"><span>Shell</span><button type="button" data-copiar="muestra-shell" aria-label="Copiar Shell" title="Copiar"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="8" y="8" width="12" height="13" rx="2"/><path d="M16 8V3H4v13h4"/></svg></button><span class="copia-estado" role="status"></span></div><pre tabindex="0" aria-label="Código Shell, desplazable"><code id="muestra-shell" data-lenguaje="shell"># Comprobaciones locales
python3 scripts/build.py
python3 scripts/validate.py
echo &quot;Listo para revisar&quot;</code></pre></div></section><section id="codigo-panel-salida" data-tab-panel><div class="codigo"><div class="cab"><span>Salida</span><button type="button" data-copiar="muestra-salida" aria-label="Copiar Salida" title="Copiar"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="8" y="8" width="12" height="13" rx="2"/><path d="M16 8V3H4v13h4"/></svg></button><span class="copia-estado" role="status"></span></div><pre tabindex="0" aria-label="Código Salida, desplazable"><code id="muestra-salida" data-lenguaje="salida">OK     documento generado     44 recetas
WARN   fuente pendiente       2 registros
ERROR  ejemplo rechazado      1 recurso externo</code></pre></div></section></div></section>

<figure class="ancho" id="analitica-calendario" data-analitica="calendario" data-unidad="conciliaciones">
  <details><summary>Consultar los 109 días registrados</summary>
  <div class="tabla-caja" tabindex="0" role="region" aria-label="Datos de Calendario de actividad, desplazables">
    <table><caption>Calendario de actividad</caption>
      <thead><tr><th scope="col">Fecha UTC</th><th scope="col">Conciliaciones</th></tr></thead>
      <tbody>
        <tr><th scope="row">2026-05-25</th><td data-valor="0">0</td></tr>
        <tr><th scope="row">2026-05-26</th><td data-valor="7">7</td></tr>
        <tr><th scope="row">2026-05-27</th><td data-valor="14">14</td></tr>
        <tr><th scope="row">2026-05-28</th><td data-valor="21">21</td></tr>
        <tr><th scope="row">2026-05-29</th><td data-valor="3">3</td></tr>
        <tr><th scope="row">2026-05-30</th><td data-valor="0">0</td></tr>
        <tr><th scope="row">2026-05-31</th><td data-valor="0">0</td></tr>
        <tr><th scope="row">2026-06-01</th><td data-valor="2">2</td></tr>
        <tr><th scope="row">2026-06-02</th><td data-valor="9">9</td></tr>
        <tr><th scope="row">2026-06-03</th><td data-valor="16">16</td></tr>
        <tr><th scope="row">2026-06-04</th><td data-valor="23">23</td></tr>
        <tr><th scope="row">2026-06-05</th><td data-valor="5">5</td></tr>
        <tr><th scope="row">2026-06-06</th><td data-valor="0">0</td></tr>
        <tr><th scope="row">2026-06-07</th><td data-valor="0">0</td></tr>
        <tr><th scope="row">2026-06-08</th><td data-valor="4">4</td></tr>
        <tr><th scope="row">2026-06-09</th><td data-valor="11">11</td></tr>
        <tr><th scope="row">2026-06-10</th><td data-valor="18">18</td></tr>
        <tr><th scope="row">2026-06-11</th><td data-valor="0">0</td></tr>
        <tr><th scope="row">2026-06-12</th><td data-valor="7">7</td></tr>
        <tr><th scope="row">2026-06-13</th><td data-valor="0">0</td></tr>
        <tr><th scope="row">2026-06-14</th><td data-valor="0">0</td></tr>
        <tr><th scope="row">2026-06-15</th><td data-valor="6">6</td></tr>
        <tr><th scope="row">2026-06-16</th><td data-valor="13">13</td></tr>
        <tr><th scope="row">2026-06-17</th><td data-valor="20">20</td></tr>
        <tr><th scope="row">2026-06-18</th><td data-valor="2">2</td></tr>
        <tr><th scope="row">2026-06-19</th><td data-valor="9">9</td></tr>
        <tr><th scope="row">2026-06-20</th><td data-valor="0">0</td></tr>
        <tr><th scope="row">2026-06-21</th><td data-valor="0">0</td></tr>
        <tr><th scope="row">2026-06-22</th><td data-valor="8">8</td></tr>
        <tr><th scope="row">2026-06-23</th><td data-valor="15">15</td></tr>
        <tr><th scope="row">2026-06-24</th><td data-valor="22">22</td></tr>
        <tr><th scope="row">2026-06-27</th><td data-valor="0">0</td></tr>
        <tr><th scope="row">2026-06-28</th><td data-valor="0">0</td></tr>
        <tr><th scope="row">2026-06-29</th><td data-valor="10">10</td></tr>
        <tr><th scope="row">2026-06-30</th><td data-valor="17">17</td></tr>
        <tr><th scope="row">2026-07-01</th><td data-valor="24">24</td></tr>
        <tr><th scope="row">2026-07-02</th><td data-valor="6">6</td></tr>
        <tr><th scope="row">2026-07-03</th><td data-valor="13">13</td></tr>
        <tr><th scope="row">2026-07-04</th><td data-valor="0">0</td></tr>
        <tr><th scope="row">2026-07-05</th><td data-valor="0">0</td></tr>
        <tr><th scope="row">2026-07-06</th><td data-valor="12">12</td></tr>
        <tr><th scope="row">2026-07-07</th><td data-valor="19">19</td></tr>
        <tr><th scope="row">2026-07-08</th><td data-valor="1">1</td></tr>
        <tr><th scope="row">2026-07-09</th><td data-valor="8">8</td></tr>
        <tr><th scope="row">2026-07-10</th><td data-valor="15">15</td></tr>
        <tr><th scope="row">2026-07-11</th><td data-valor="0">0</td></tr>
        <tr><th scope="row">2026-07-12</th><td data-valor="0">0</td></tr>
        <tr><th scope="row">2026-07-13</th><td data-valor="14">14</td></tr>
        <tr><th scope="row">2026-07-14</th><td data-valor="21">21</td></tr>
        <tr><th scope="row">2026-07-15</th><td data-valor="3">3</td></tr>
        <tr><th scope="row">2026-07-16</th><td data-valor="10">10</td></tr>
        <tr><th scope="row">2026-07-17</th><td data-valor="17">17</td></tr>
        <tr><th scope="row">2026-07-18</th><td data-valor="0">0</td></tr>
        <tr><th scope="row">2026-07-19</th><td data-valor="0">0</td></tr>
        <tr><th scope="row">2026-07-20</th><td data-valor="16">16</td></tr>
        <tr><th scope="row">2026-07-21</th><td data-valor="23">23</td></tr>
        <tr><th scope="row">2026-07-22</th><td data-valor="5">5</td></tr>
        <tr><th scope="row">2026-07-23</th><td data-valor="12">12</td></tr>
        <tr><th scope="row">2026-07-24</th><td data-valor="19">19</td></tr>
        <tr><th scope="row">2026-07-25</th><td data-valor="0">0</td></tr>
        <tr><th scope="row">2026-07-26</th><td data-valor="0">0</td></tr>
        <tr><th scope="row">2026-07-27</th><td data-valor="18">18</td></tr>
        <tr><th scope="row">2026-07-28</th><td data-valor="0">0</td></tr>
        <tr><th scope="row">2026-07-29</th><td data-valor="7">7</td></tr>
        <tr><th scope="row">2026-07-30</th><td data-valor="14">14</td></tr>
        <tr><th scope="row">2026-07-31</th><td data-valor="21">21</td></tr>
        <tr><th scope="row">2026-08-01</th><td data-valor="0">0</td></tr>
        <tr><th scope="row">2026-08-02</th><td data-valor="0">0</td></tr>
        <tr><th scope="row">2026-08-03</th><td data-valor="20">20</td></tr>
        <tr><th scope="row">2026-08-04</th><td data-valor="2">2</td></tr>
        <tr><th scope="row">2026-08-05</th><td data-valor="9">9</td></tr>
        <tr><th scope="row">2026-08-06</th><td data-valor="16">16</td></tr>
        <tr><th scope="row">2026-08-07</th><td data-valor="23">23</td></tr>
        <tr><th scope="row">2026-08-08</th><td data-valor="0">0</td></tr>
        <tr><th scope="row">2026-08-09</th><td data-valor="0">0</td></tr>
        <tr><th scope="row">2026-08-10</th><td data-valor="22">22</td></tr>
        <tr><th scope="row">2026-08-11</th><td data-valor="4">4</td></tr>
        <tr><th scope="row">2026-08-12</th><td data-valor="11">11</td></tr>
        <tr><th scope="row">2026-08-14</th><td data-valor="0">0</td></tr>
        <tr><th scope="row">2026-08-15</th><td data-valor="0">0</td></tr>
        <tr><th scope="row">2026-08-16</th><td data-valor="0">0</td></tr>
        <tr><th scope="row">2026-08-17</th><td data-valor="24">24</td></tr>
        <tr><th scope="row">2026-08-18</th><td data-valor="6">6</td></tr>
        <tr><th scope="row">2026-08-19</th><td data-valor="13">13</td></tr>
        <tr><th scope="row">2026-08-20</th><td data-valor="20">20</td></tr>
        <tr><th scope="row">2026-08-21</th><td data-valor="2">2</td></tr>
        <tr><th scope="row">2026-08-22</th><td data-valor="0">0</td></tr>
        <tr><th scope="row">2026-08-23</th><td data-valor="0">0</td></tr>
        <tr><th scope="row">2026-08-24</th><td data-valor="1">1</td></tr>
        <tr><th scope="row">2026-08-25</th><td data-valor="8">8</td></tr>
        <tr><th scope="row">2026-08-26</th><td data-valor="15">15</td></tr>
        <tr><th scope="row">2026-08-27</th><td data-valor="22">22</td></tr>
        <tr><th scope="row">2026-08-28</th><td data-valor="4">4</td></tr>
        <tr><th scope="row">2026-08-29</th><td data-valor="0">0</td></tr>
        <tr><th scope="row">2026-08-30</th><td data-valor="0">0</td></tr>
        <tr><th scope="row">2026-08-31</th><td data-valor="3">3</td></tr>
        <tr><th scope="row">2026-09-01</th><td data-valor="10">10</td></tr>
        <tr><th scope="row">2026-09-02</th><td data-valor="17">17</td></tr>
        <tr><th scope="row">2026-09-03</th><td data-valor="24">24</td></tr>
        <tr><th scope="row">2026-09-04</th><td data-valor="6">6</td></tr>
        <tr><th scope="row">2026-09-05</th><td data-valor="0">0</td></tr>
        <tr><th scope="row">2026-09-06</th><td data-valor="0">0</td></tr>
        <tr><th scope="row">2026-09-07</th><td data-valor="5">5</td></tr>
        <tr><th scope="row">2026-09-08</th><td data-valor="12">12</td></tr>
        <tr><th scope="row">2026-09-09</th><td data-valor="19">19</td></tr>
        <tr><th scope="row">2026-09-10</th><td data-valor="1">1</td></tr>
        <tr><th scope="row">2026-09-11</th><td data-valor="8">8</td></tr>
        <tr><th scope="row">2026-09-12</th><td data-valor="0">0</td></tr>
        <tr><th scope="row">2026-09-13</th><td data-valor="0">0</td></tr>
      </tbody>
    </table>
  </div>
  </details>
  <figcaption>Datos ficticios, 25 may–13 sep 2026. Intensidad diaria, cero distinto de ausencia.</figcaption>
</figure>

<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>

<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>

<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>

<figure class="ancho" id="analitica-velas" data-analitica="velas" data-unidad="índice base 100">
  <div class="tabla-caja densa" tabindex="0" role="region" aria-label="Datos de Velas financieras OHLC, desplazables">
    <table><caption>Velas financieras OHLC</caption>
      <thead><tr><th scope="col">Fecha UTC</th><th scope="col">Apertura</th><th scope="col">Máximo</th><th scope="col">Mínimo</th><th scope="col">Cierre</th></tr></thead>
      <tbody>
        <tr><th scope="row">2026-09-07</th><td data-valor="100">100</td><td data-valor="112">112</td><td data-valor="96">96</td><td data-valor="108">108</td></tr>
        <tr><th scope="row">2026-09-08</th><td data-valor="108">108</td><td data-valor="115">115</td><td data-valor="101">101</td><td data-valor="103">103</td></tr>
        <tr><th scope="row">2026-09-09</th><td data-valor="103">103</td><td data-valor="111">111</td><td data-valor="99">99</td><td data-valor="109">109</td></tr>
        <tr><th scope="row">2026-09-10</th><td data-valor="109">109</td><td data-valor="118">118</td><td data-valor="106">106</td><td data-valor="115">115</td></tr>
        <tr><th scope="row">2026-09-11</th><td data-valor="115">115</td><td data-valor="119">119</td><td data-valor="108">108</td><td data-valor="111">111</td></tr>
      </tbody>
    </table>
  </div>
  <figcaption>Serie sintética, no cotización de un activo. Hueca = sube o no cambia; rellena = baja.</figcaption>
</figure>

<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>

<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>

<figure class="ancho" id="analitica-columnas-mapa" data-escena="columnas" data-unidad="entregas">
  <div class="tabla-caja" tabindex="0" role="region" aria-label="Datos de Columnas geográficas 3D, desplazables">
    <table><caption>Columnas geográficas 3D</caption>
      <thead><tr><th scope="col">Sede</th><th scope="col">Latitud</th><th scope="col">Longitud</th><th scope="col">Entregas</th></tr></thead>
      <tbody>
        <tr><th scope="row">Bogotá</th><td data-valor="4.711">4.711</td><td data-valor="-74.072">-74.072</td><td data-valor="240">240</td></tr>
        <tr><th scope="row">Medellín</th><td data-valor="6.244">6.244</td><td data-valor="-75.582">-75.582</td><td data-valor="180">180</td></tr>
        <tr><th scope="row">Cali</th><td data-valor="3.452">3.452</td><td data-valor="-76.532">-76.532</td><td data-valor="120">120</td></tr>
        <tr><th scope="row">Barranquilla</th><td data-valor="10.969">10.969</td><td data-valor="-74.781">-74.781</td><td data-valor="60">60</td></tr>
      </tbody>
    </table>
  </div>
  <figcaption>Datos ficticios de logística; no son operaciones de Liftit. Ubicaciones urbanas aproximadas. Contorno: <a href="https://www.naturalearthdata.com/about/terms-of-use/">Natural Earth</a>, dominio público, escala 1:110m.</figcaption>
</figure>

<figure class="ancho" id="analitica-arcos-mapa" data-escena="arcos" data-unidad="viajes">
  <div class="tabla-caja densa" tabindex="0" role="region" aria-label="Datos de Arcos logísticos 3D, desplazables">
    <table><caption>Arcos logísticos 3D</caption>
      <thead><tr><th scope="col">Conexión</th><th scope="col">Lat. origen</th><th scope="col">Lon. origen</th><th scope="col">Lat. destino</th><th scope="col">Lon. destino</th><th scope="col">Viajes</th></tr></thead>
      <tbody>
        <tr><th scope="row">Bogotá → Medellín</th><td data-valor="4.711">4.711</td><td data-valor="-74.072">-74.072</td><td data-valor="6.244">6.244</td><td data-valor="-75.582">-75.582</td><td data-valor="80">80</td></tr>
        <tr><th scope="row">Bogotá → Cali</th><td data-valor="4.711">4.711</td><td data-valor="-74.072">-74.072</td><td data-valor="3.452">3.452</td><td data-valor="-76.532">-76.532</td><td data-valor="50">50</td></tr>
        <tr><th scope="row">Bogotá → Barranquilla</th><td data-valor="4.711">4.711</td><td data-valor="-74.072">-74.072</td><td data-valor="10.969">10.969</td><td data-valor="-74.781">-74.781</td><td data-valor="30">30</td></tr>
      </tbody>
    </table>
  </div>
  <figcaption>Datos ficticios de logística; no son operaciones de Liftit. Ubicaciones urbanas aproximadas. Contorno: <a href="https://www.naturalearthdata.com/about/terms-of-use/">Natural Earth</a>, dominio público, escala 1:110m.</figcaption>
</figure>

<figure class="ancho" id="analitica-almacen" data-escena="almacen" data-unidad="posiciones">
  <div class="tabla-caja densa" tabindex="0" role="region" aria-label="Datos de Capacidad de almacén 3D, desplazables">
    <table><caption>Capacidad de almacén 3D</caption>
      <thead><tr><th scope="col">Ubicación</th><th scope="col">X (m)</th><th scope="col">Z (m)</th><th scope="col">Ocupados</th><th scope="col">Capacidad</th></tr></thead>
      <tbody>
        <tr><th scope="row">A1</th><td data-valor="0">0</td><td data-valor="0">0</td><td data-valor="8">8</td><td data-valor="12">12</td></tr>
        <tr><th scope="row">A2</th><td data-valor="4">4</td><td data-valor="0">0</td><td data-valor="11">11</td><td data-valor="12">12</td></tr>
        <tr><th scope="row">B1</th><td data-valor="0">0</td><td data-valor="6">6</td><td data-valor="5">5</td><td data-valor="10">10</td></tr>
        <tr><th scope="row">B2</th><td data-valor="4">4</td><td data-valor="6">6</td><td data-valor="9">9</td><td data-valor="10">10</td></tr>
        <tr><th scope="row">C1</th><td data-valor="0">0</td><td data-valor="12">12</td><td data-valor="2">2</td><td data-valor="8">8</td></tr>
        <tr><th scope="row">C2</th><td data-valor="4">4</td><td data-valor="12">12</td><td data-valor="6">6</td><td data-valor="8">8</td></tr>
      </tbody>
    </table>
  </div>
  <figcaption>Almacén ficticio. Coordenadas en planta; sólido = posiciones ocupadas, contorno = capacidad total.</figcaption>
</figure>

<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>

<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>

<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>

<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>

<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>

<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>

<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>

<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>

<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>

<div class="ancho navegacion-muestra" id="navegacion-ejemplo">
  <a class="firma-editorial" href="examples/generated/report.html#resumen"><span>Margen</span></a>
  <nav aria-label="Recorrer el informe"><a href="examples/generated/report.html#resumen">inicio</a><span class="nav-separador" aria-hidden="true">/</span><a href="examples/generated/report.html#evidencia">evidencia</a><span class="nav-separador" aria-hidden="true">/</span><a href="examples/generated/report.html#prototipo">propuesta</a><span class="nav-separador" aria-hidden="true">/</span><a href="examples/generated/report.html#siguientes">siguiente</a></nav>
</div>

<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>

<section class="pieza amplio actividad-editorial" id="actividad-editorial-ejemplo" data-actividad data-actividad-tabla="actividad-editorial-datos">
  <div><p class="ceja">Actividad de ejemplo / ocho semanas</p><h3>Pequeños avances,<br>una historia visible.</h3><p>Cada cuadrado representa una semana. La intensidad indica cuántas acciones se registraron; no mide calidad ni productividad.</p><a class="enlace-icono" href="https://www.cmrg.me/now">Ver la referencia editorial ↗</a></div>
  <div><div class="actividad-mosaico" data-actividad-mapa role="group" aria-label="Acciones por semana"></div><div class="actividad-escala" data-actividad-escala aria-label="Escala de acciones"></div><p data-actividad-estado role="status">Los conteos completos están en la tabla.</p></div>
</section>
<details class="actividad-datos" id="actividad-editorial-datos"><summary>Datos ilustrativos completos</summary><div class="tabla-caja" tabindex="0" role="region" aria-label="Actividad semanal, desplazable"><table><caption>Acciones de ejemplo, no actividad real de GitHub</caption><thead><tr><th scope="col">Semana</th><th scope="col">Acciones</th></tr></thead><tbody>
    <tr><th scope="row">1–7 junio</th><td data-valor="0">0</td></tr><tr><th scope="row">8–14 junio</th><td data-valor="2">2</td></tr><tr><th scope="row">15–21 junio</th><td data-valor="3">3</td></tr><tr><th scope="row">22–28 junio</th><td data-valor="5">5</td></tr><tr><th scope="row">29 junio–5 julio</th><td data-valor="1">1</td></tr><tr><th scope="row">6–12 julio</th><td data-valor="7">7</td></tr><tr><th scope="row">13–19 julio</th><td data-valor="4">4</td></tr><tr><th scope="row">20–26 julio</th><td data-valor="8">8</td></tr>
  </tbody></table></div></details>

<figure class="ancho" id="codigo-lineas-ejemplo"><div class="codigo codigo-editorial"><div class="cab"><span>preparar_resumen.py · Python</span><button class="boton-icono-copia" type="button" data-copiar="codigo-lineas-fuente" aria-label="Copiar código Python" title="Copiar código"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true"><path d="M8 8h12v13H8zM16 8V3H4v13h4"/></svg></button><span class="copia-estado" role="status"></span></div><pre tabindex="0" aria-label="Código Python con líneas 3 y 6 destacadas, desplazable"><code id="codigo-lineas-fuente" data-lenguaje="python" data-lineas data-destacar="3,6">def resumir(registros):
    cantidades = [fila["cantidad"] for fila in registros]
    total = sum(cantidades)
    if not cantidades:
        return {"total": 0, "promedio": None}
    return {"total": total, "promedio": total / len(cantidades)}</code></pre></div><figcaption>Ejemplo ilustrativo. Las líneas 3 y 6 explican el cálculo; el botón copia el código sin números de línea.</figcaption></figure>

<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>

<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>

<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>

<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>

<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>

<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>

<section class="pieza amplio" id="cola-novedades-ejemplo" data-explorador data-unidad="pedidos">
<h3>Despacho y novedades</h3><p>Tres vehículos ficticios del corte. Filtra Con novedad, agrupa por ciudad y ordena los pedidos para revisar a quién contactar.</p>
<form class="tabla-herramientas" aria-label="Explorar registros">
<label class="tabla-busqueda"><span class="control-etiqueta">Buscar registros</span><svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true"><circle cx="10" cy="10" r="6"/><path d="m15 15 5 5"/></svg><input type="search" name="buscar" placeholder="Buscar registros…"></label>
<details class="control-menu"><summary>Filtros <span data-filtros-cuenta></span>⌄</summary><div class="control-panel" tabindex="0" role="region" aria-label="Filtros de registros"><label>Estado<select name="estado"><option value="">Todos los estados</option><option>Con novedad</option><option>En ruta</option></select></label><button type="reset">Limpiar filtros</button></div></details>
<details class="control-menu"><summary>Agrupar ⌄</summary><div class="control-panel" tabindex="0" role="region" aria-label="Agrupar registros"><label>Agrupar por<select name="grupo"><option value="">Sin grupos</option><option value="1">Ciudad</option><option value="2">Estado</option></select></label></div></details>
<details class="control-menu"><summary>Columnas ⌄</summary><div class="control-panel" tabindex="0" role="region" aria-label="Columnas visibles"><label><input type="checkbox" data-columna="1" checked> Ciudad</label><label><input type="checkbox" data-columna="2" checked> Estado</label><label><input type="checkbox" data-columna="3" checked> Pedidos</label></div></details>
</form>
<p data-explorador-estado role="status">3 vehículos de ejemplo.</p><div class="tabla-caja" tabindex="0" role="region" aria-label="Registros ordenables y agrupables, desplazables"><table><caption>Vehículos de ejemplo · pedidos asociados al corte</caption><thead><tr><th scope="col"><details class="control-menu tabla-orden"><summary>Vehículo <span data-indicador-orden aria-hidden="true">↕</span></summary><div class="control-panel" tabindex="0" role="region" aria-label="Ordenar por Vehículo"><button type="button" data-orden-col="0" data-direccion="1" data-cerrar-menu>↑ Ascendente</button><button type="button" data-orden-col="0" data-direccion="-1" data-cerrar-menu>↓ Descendente</button><button type="button" data-orden-col="0" data-direccion="0" data-cerrar-menu>Restablecer orden</button></div></details></th><th scope="col"><details class="control-menu tabla-orden"><summary>Ciudad <span data-indicador-orden aria-hidden="true">↕</span></summary><div class="control-panel" tabindex="0" role="region" aria-label="Ordenar por Ciudad"><button type="button" data-orden-col="1" data-direccion="1" data-cerrar-menu>↑ Ascendente</button><button type="button" data-orden-col="1" data-direccion="-1" data-cerrar-menu>↓ Descendente</button><button type="button" data-orden-col="1" data-direccion="0" data-cerrar-menu>Restablecer orden</button></div></details></th><th scope="col"><details class="control-menu tabla-orden"><summary>Estado <span data-indicador-orden aria-hidden="true">↕</span></summary><div class="control-panel" tabindex="0" role="region" aria-label="Ordenar por Estado"><button type="button" data-orden-col="2" data-direccion="1" data-cerrar-menu>↑ Ascendente</button><button type="button" data-orden-col="2" data-direccion="-1" data-cerrar-menu>↓ Descendente</button><button type="button" data-orden-col="2" data-direccion="0" data-cerrar-menu>Restablecer orden</button></div></details></th><th scope="col"><details class="control-menu tabla-orden"><summary>Pedidos <span data-indicador-orden aria-hidden="true">↕</span></summary><div class="control-panel" tabindex="0" role="region" aria-label="Ordenar por Pedidos"><button type="button" data-orden-col="3" data-direccion="1" data-cerrar-menu>↑ Ascendente</button><button type="button" data-orden-col="3" data-direccion="-1" data-cerrar-menu>↓ Descendente</button><button type="button" data-orden-col="3" data-direccion="0" data-cerrar-menu>Restablecer orden</button></div></details></th></tr></thead><tbody><tr><th scope="row">LFT-021</th><td>Medellín</td><td>En ruta</td><td data-valor="18">18</td></tr><tr><th scope="row">LFT-034</th><td>Cali</td><td>Con novedad</td><td data-valor="12">12</td></tr><tr><th scope="row">LFT-056</th><td>Barranquilla</td><td>En ruta</td><td data-valor="9">9</td></tr></tbody></table></div></section>

<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>

<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>

<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>

<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>

<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>

<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>

<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>

<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>

<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>

<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>

<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>

<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>

<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>

<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>

<figure class="pieza amplio sketch-diagram" id="sketch-example" data-sketch-diagram="1" aria-labelledby="sketch-example-caption">
<figcaption id="sketch-example-caption">De una idea a una revisión compartida</figcaption>
<ol class="sketch-flow">
<li class="sketch-step" id="sketch-example-idea"><div class="sketch-node">
<svg class="sketch-outline" viewBox="0 0 300 200" preserveAspectRatio="none" aria-hidden="true" focusable="false"><path d="M8 7 Q146 2 292 8 Q298 89 292 192 Q158 197 7 191 Q3 97 8 7Z"/><path class="sketch-echo" d="M10 10 Q164 6 290 10 L289 190 Q150 193 11 188 Q7 102 10 10Z"/></svg>
<div class="sketch-meta"><span class="sketch-number">01</span><svg class="sketch-symbol" viewBox="0 0 64 64" aria-hidden="true" focusable="false"><path d="M24 18 C23 5 43 5 42 18 C43 31 23 31 24 18 M14 55 C13 31 51 31 51 55 M23 47 L22 56 M42 46 L43 56"/></svg></div><strong class="sketch-title">Una idea</strong><p class="sketch-body">Escribe la pregunta que este documento debe resolver.</p></div>
<div class="sketch-connection"><svg class="sketch-arrow" viewBox="0 0 64 40" aria-hidden="true" focusable="false"><path d="M4 22 Q27 12 58 19 M46 8 L59 19 L47 30"/></svg><span>desarrollar<span class="sr-only"> → Un borrador</span></span></div>
</li>
<li class="sketch-step" id="sketch-example-draft"><div class="sketch-node">
<svg class="sketch-outline" viewBox="0 0 300 200" preserveAspectRatio="none" aria-hidden="true" focusable="false"><path d="M7 8 Q158 3 291 6 Q297 98 293 191 Q152 196 8 193 Q3 91 7 8Z"/><path class="sketch-echo" d="M10 10 Q164 6 290 10 L289 190 Q150 193 11 188 Q7 102 10 10Z"/></svg>
<div class="sketch-meta"><span class="sketch-number">02</span><svg class="sketch-symbol" viewBox="0 0 64 64" aria-hidden="true" focusable="false"><path d="M15 6 Q31 5 39 7 L51 20 L50 57 Q33 58 14 56 Z M39 7 L39 21 L51 20 M23 31 L42 30 M23 40 L42 40 M23 49 L36 48"/></svg></div><strong class="sketch-title">Un borrador</strong><p class="sketch-body">Ordena la evidencia y deja visibles las dudas.</p></div>
<div class="sketch-connection"><svg class="sketch-arrow" viewBox="0 0 64 40" aria-hidden="true" focusable="false"><path d="M4 22 Q27 12 58 19 M46 8 L59 19 L47 30"/></svg><span>compartir<span class="sr-only"> → Una revisión</span></span></div>
</li>
<li class="sketch-step" id="sketch-example-review"><div class="sketch-node">
<svg class="sketch-outline" viewBox="0 0 300 200" preserveAspectRatio="none" aria-hidden="true" focusable="false"><path d="M8 7 Q146 2 292 8 Q298 89 292 192 Q158 197 7 191 Q3 97 8 7Z"/><path class="sketch-echo" d="M10 10 Q164 6 290 10 L289 190 Q150 193 11 188 Q7 102 10 10Z"/></svg>
<div class="sketch-meta"><span class="sketch-number">03</span><svg class="sketch-symbol" viewBox="0 0 64 64" aria-hidden="true" focusable="false"><path d="M24 19 C23 6 41 6 40 19 C40 31 24 31 24 19 M17 56 C15 33 49 33 47 56 M10 18 C3 17 3 31 11 31 M5 52 C1 36 13 33 18 38 M53 18 C61 18 61 31 53 31 M47 38 C56 32 64 39 59 52"/></svg></div><strong class="sketch-title">Una revisión</strong><p class="sketch-body">Comparte la versión y recoge los cambios propuestos.</p></div>
</li>
</ol>
<p class="sketch-note">Ejemplo ilustrativo: cada flecha tiene una intención.</p>
</figure>

<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>

<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>

<figure class="embed embed-video embed-youtube" id="youtube-ejemplo" data-embed="youtube" data-embed-id="M7lc1UVf-VE">
<div class="embed-lienzo" data-embed-stage></div>
<figcaption>
<p class="embed-meta"><span class="embed-proveedor">YouTube</span> · YouTube Developers Live: Embedded Web Player Customization · Google for Developers</p>
<p class="embed-acciones"><button type="button" data-embed-load hidden>Cargar video</button><a data-embed-source href="https://www.youtube.com/watch?v=M7lc1UVf-VE">Abrir en YouTube</a></p>
<p class="embed-aviso" data-embed-notice hidden>Al cargarlo, tu navegador se conecta con YouTube. Empieza sin sonido.</p>
<p class="embed-aviso" data-embed-status role="status"></p>
</figcaption>
</figure>

<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>

<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>

<div class="reacciones" id="reacciones-ejemplo" data-reacciones="ejemplo" role="group" aria-labelledby="reacciones-ejemplo-titulo">
  <p class="ceja" id="reacciones-ejemplo-titulo">¿Cómo te dejó esta lectura?</p>
  <div class="reacciones-botones">
    <button type="button" data-reaccion="util" aria-pressed="false"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 11v9H4v-9h3Zm0 0 4-7a2 2 0 0 1 2 2v3h5a2 2 0 0 1 2 2.3l-1.2 6A2 2 0 0 1 16.8 19H7"/></svg><span>Útil</span></button>
    <button type="button" data-reaccion="volver" aria-pressed="false"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 4h12v16l-6-4-6 4V4Z"/></svg><span>Para volver</span></button>
    <button type="button" data-reaccion="pensar" aria-pressed="false"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 18h6M10 21h4M12 3a6 6 0 0 0-3.5 10.9c.6.4 1 1.1 1 1.8V16h5v-.3c0-.7.4-1.4 1-1.8A6 6 0 0 0 12 3Z"/></svg><span>Me hizo pensar</span></button>
  </div>
  <p class="reacciones-nota">Se guardan solo en este navegador. No hay conteos compartidos.</p>
</div>