<!-- INICIO: Historial de actividad -->
<section id="historial-actividad" class="panel demo-card" data-component="historial-actividad">
  <div class="panel-heading"><h2>Historial de actividad</h2></div>
  <div class="tabs demo-history-filters" role="group" aria-label="Filtrar historial">
    <button type="button" data-history-filter="all" class="selected">Todo</button
    ><button type="button" data-history-filter="payments" class="">Pagos</button
    ><button type="button" data-history-filter="files" class="">Archivos</button
    ><button type="button" data-history-filter="security" class="">Seguridad</button>
  </div>
  <ol class="demo-timeline">
    <li data-history-type="payments">
      <span class="timeline-dot" aria-hidden="true"></span>
      <div class="timeline-card">
        <div class="demo-row">
          <h3>Pago recibido</h3>
          <time datetime="2026-10-28T10:30">2026-10-28 · 10:30</time>
        </div>
        <p>Se registró el pago del proyecto Aurora.</p>
        <span class="demo-badge neutral">+$850.00</span>
      </div>
    </li>
    <li data-history-type="security">
      <span class="timeline-dot" aria-hidden="true"></span>
      <div class="timeline-card">
        <div class="demo-row">
          <h3>Preferencias actualizadas</h3>
          <time datetime="2026-10-28T09:15">2026-10-28 · 09:15</time>
        </div>
        <p>Cambiaste tus ajustes de seguridad.</p>
        <span class="demo-badge neutral">Configuración</span>
      </div>
    </li>
    <li data-history-type="files">
      <span class="timeline-dot" aria-hidden="true"></span>
      <div class="timeline-card">
        <div class="demo-row">
          <h3>Documento añadido</h3>
          <time datetime="2026-10-27T16:40">2026-10-27 · 16:40</time>
        </div>
        <p>Resumen financiero de octubre.</p>
        <span class="demo-badge neutral">Documento PDF</span>
      </div>
    </li>
    <li data-history-type="payments">
      <span class="timeline-dot" aria-hidden="true"></span>
      <div class="timeline-card">
        <div class="demo-row">
          <h3>Pago de servicio</h3>
          <time datetime="2026-10-26T12:10">2026-10-26 · 12:10</time>
        </div>
        <p>Se completó el pago de internet.</p>
        <span class="demo-badge neutral">−$599.00</span>
      </div>
    </li>
    <li data-history-type="files">
      <span class="timeline-dot" aria-hidden="true"></span>
      <div class="timeline-card">
        <div class="demo-row">
          <h3>Reporte descargado</h3>
          <time datetime="2026-10-25T08:55">2026-10-25 · 08:55</time>
        </div>
        <p>Se exportó el historial de movimientos.</p>
        <span class="demo-badge neutral">Reporte CSV</span>
      </div>
    </li>
  </ol>
  <output id="history-count" class="muted" aria-live="polite">5 actividades</output>
</section>
<!-- FIN: Historial de actividad -->