<!-- INICIO: Agenda interactiva -->
<section id="calendario-agenda" class="panel demo-card" data-component="calendario-agenda">
  <div class="panel-heading"><h2>Agenda interactiva</h2></div>
  <div class="demo-row demo-toolbar">
    <p class="muted">Octubre 2026 · Agenda de ejemplo</p>
    <button class="btn lime" id="new-calendar-event" type="button">Nuevo evento +</button>
  </div>
  <div id="demo-calendar" class="calendar-container" aria-label="Calendario de eventos"></div>
  <ul id="calendar-fallback" class="demo-list">
    <li>6 de octubre: Revisión de presupuesto</li>
    <li>15 de octubre: Entrega del proyecto</li>
    <li>22 de octubre: Reunión de equipo</li>
  </ul>
  <dialog id="calendar-event-dialog" class="demo-dialog" aria-labelledby="calendar-event-title">
    <form method="dialog"><button class="close" aria-label="Cerrar">×</button></form>
    <h2 id="calendar-event-title">Evento</h2>
    <form id="calendar-event-form" class="demo-form">
      <label>Título<input class="demo-input" name="title" required maxlength="80" /></label
      ><label>Fecha<input class="demo-input" type="date" name="date" required /></label
      ><label
        >Notas<textarea class="demo-input" name="notes" rows="3" maxlength="300"></textarea>
      </label>
      <div class="demo-row">
        <button class="btn lime" type="submit">Guardar evento</button
        ><button class="btn demo-danger" type="button" id="remove-calendar-event" hidden>
          Eliminar evento
        </button>
      </div>
    </form>
  </dialog>
</section>
<!-- FIN: Agenda interactiva -->