<!-- INICIO: Un tablero que se adapta a tu flujo -->
<section id="tablero-sortable" class="panel demo-card" data-component="tablero-sortable">
  <div class="panel-heading"><h2>Un tablero que se adapta a tu flujo</h2></div>
  <div class="demo-row demo-toolbar">
    <p class="muted">Arrastra desde los puntos o usa los controles de cada tarea.</p>
    <button id="kanban-reset" class="btn outline" type="button">Restablecer tablero</button>
  </div>
  <div class="kanban-board">
    <section class="kanban-column" aria-labelledby="heading-pending">
      <div class="kanban-heading">
        <h3 id="heading-pending">Por hacer</h3>
        <span class="demo-badge neutral" data-task-count="pending">2</span>
      </div>
      <ul
        class="kanban-list"
        id="kanban-pending"
        data-column="pending"
        aria-label="Tareas: Por hacer"
      >
        <li id="task-1" class="kanban-task" data-task>
          <div class="demo-row task-top">
            <span class="demo-badge warning">Alta</span
            ><button
              class="task-handle"
              type="button"
              aria-label="Arrastrar: Diseñar el onboarding"
            >
              <svg
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="3"
                stroke-linecap="round"
                aria-hidden="true"
              >
                <path d="M8 5h.01M16 5h.01M8 12h.01M16 12h.01M8 19h.01M16 19h.01" />
              </svg>
            </button>
          </div>
          <h3>Diseñar el onboarding</h3>
          <p>Definir el primer recorrido de la aplicación.</p>
          <span class="task-area">Diseño</span
          ><label class="task-move-label"
            >Mover a<select class="demo-input" data-move-task>
              <option value="pending" selected>Por hacer</option>
              <option value="progress">En progreso</option>
              <option value="done">Completado</option>
            </select></label
          >
          <div class="demo-row task-order">
            <button class="btn outline" type="button" data-task-up>Subir</button
            ><button class="btn outline" type="button" data-task-down>Bajar</button>
          </div>
        </li>
        <li id="task-2" class="kanban-task" data-task>
          <div class="demo-row task-top">
            <span class="demo-badge neutral">Normal</span
            ><button
              class="task-handle"
              type="button"
              aria-label="Arrastrar: Preparar los reportes"
            >
              <svg
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="3"
                stroke-linecap="round"
                aria-hidden="true"
              >
                <path d="M8 5h.01M16 5h.01M8 12h.01M16 12h.01M8 19h.01M16 19h.01" />
              </svg>
            </button>
          </div>
          <h3>Preparar los reportes</h3>
          <p>Revisar las métricas principales del mes.</p>
          <span class="task-area">Finanzas</span
          ><label class="task-move-label"
            >Mover a<select class="demo-input" data-move-task>
              <option value="pending" selected>Por hacer</option>
              <option value="progress">En progreso</option>
              <option value="done">Completado</option>
            </select></label
          >
          <div class="demo-row task-order">
            <button class="btn outline" type="button" data-task-up>Subir</button
            ><button class="btn outline" type="button" data-task-down>Bajar</button>
          </div>
        </li>
      </ul>
    </section>
    <section class="kanban-column" aria-labelledby="heading-progress">
      <div class="kanban-heading">
        <h3 id="heading-progress">En progreso</h3>
        <span class="demo-badge neutral" data-task-count="progress">2</span>
      </div>
      <ul
        class="kanban-list"
        id="kanban-progress"
        data-column="progress"
        aria-label="Tareas: En progreso"
      >
        <li id="task-3" class="kanban-task" data-task>
          <div class="demo-row task-top">
            <span class="demo-badge warning">Alta</span
            ><button
              class="task-handle"
              type="button"
              aria-label="Arrastrar: Construir el dashboard"
            >
              <svg
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="3"
                stroke-linecap="round"
                aria-hidden="true"
              >
                <path d="M8 5h.01M16 5h.01M8 12h.01M16 12h.01M8 19h.01M16 19h.01" />
              </svg>
            </button>
          </div>
          <h3>Construir el dashboard</h3>
          <p>Organizar las cards y sus estados.</p>
          <span class="task-area">Desarrollo</span
          ><label class="task-move-label"
            >Mover a<select class="demo-input" data-move-task>
              <option value="pending">Por hacer</option>
              <option value="progress" selected>En progreso</option>
              <option value="done">Completado</option>
            </select></label
          >
          <div class="demo-row task-order">
            <button class="btn outline" type="button" data-task-up>Subir</button
            ><button class="btn outline" type="button" data-task-down>Bajar</button>
          </div>
        </li>
        <li id="task-4" class="kanban-task" data-task>
          <div class="demo-row task-top">
            <span class="demo-badge neutral">Normal</span
            ><button class="task-handle" type="button" aria-label="Arrastrar: Revisar el contenido">
              <svg
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="3"
                stroke-linecap="round"
                aria-hidden="true"
              >
                <path d="M8 5h.01M16 5h.01M8 12h.01M16 12h.01M8 19h.01M16 19h.01" />
              </svg>
            </button>
          </div>
          <h3>Revisar el contenido</h3>
          <p>Ajustar títulos y mensajes de ayuda.</p>
          <span class="task-area">Contenido</span
          ><label class="task-move-label"
            >Mover a<select class="demo-input" data-move-task>
              <option value="pending">Por hacer</option>
              <option value="progress" selected>En progreso</option>
              <option value="done">Completado</option>
            </select></label
          >
          <div class="demo-row task-order">
            <button class="btn outline" type="button" data-task-up>Subir</button
            ><button class="btn outline" type="button" data-task-down>Bajar</button>
          </div>
        </li>
      </ul>
    </section>
    <section class="kanban-column" aria-labelledby="heading-done">
      <div class="kanban-heading">
        <h3 id="heading-done">Completado</h3>
        <span class="demo-badge neutral" data-task-count="done">2</span>
      </div>
      <ul class="kanban-list" id="kanban-done" data-column="done" aria-label="Tareas: Completado">
        <li id="task-5" class="kanban-task" data-task>
          <div class="demo-row task-top">
            <span class="demo-badge neutral">Baja</span
            ><button class="task-handle" type="button" aria-label="Arrastrar: Definir la paleta">
              <svg
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="3"
                stroke-linecap="round"
                aria-hidden="true"
              >
                <path d="M8 5h.01M16 5h.01M8 12h.01M16 12h.01M8 19h.01M16 19h.01" />
              </svg>
            </button>
          </div>
          <h3>Definir la paleta</h3>
          <p>Preparar las combinaciones claro y oscuro.</p>
          <span class="task-area">Diseño</span
          ><label class="task-move-label"
            >Mover a<select class="demo-input" data-move-task>
              <option value="pending">Por hacer</option>
              <option value="progress">En progreso</option>
              <option value="done" selected>Completado</option>
            </select></label
          >
          <div class="demo-row task-order">
            <button class="btn outline" type="button" data-task-up>Subir</button
            ><button class="btn outline" type="button" data-task-down>Bajar</button>
          </div>
        </li>
        <li id="task-6" class="kanban-task" data-task>
          <div class="demo-row task-top">
            <span class="demo-badge neutral">Normal</span
            ><button class="task-handle" type="button" aria-label="Arrastrar: Crear la navegación">
              <svg
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="3"
                stroke-linecap="round"
                aria-hidden="true"
              >
                <path d="M8 5h.01M16 5h.01M8 12h.01M16 12h.01M8 19h.01M16 19h.01" />
              </svg>
            </button>
          </div>
          <h3>Crear la navegación</h3>
          <p>Conectar todas las pantallas de la plantilla.</p>
          <span class="task-area">Desarrollo</span
          ><label class="task-move-label"
            >Mover a<select class="demo-input" data-move-task>
              <option value="pending">Por hacer</option>
              <option value="progress">En progreso</option>
              <option value="done" selected>Completado</option>
            </select></label
          >
          <div class="demo-row task-order">
            <button class="btn outline" type="button" data-task-up>Subir</button
            ><button class="btn outline" type="button" data-task-down>Bajar</button>
          </div>
        </li>
      </ul>
    </section>
  </div>
  <output id="kanban-status" class="demo-inline-output" aria-live="polite"
    >6 tareas de ejemplo. Los cambios se guardan en este navegador.</output
  >
</section>
<!-- FIN: Un tablero que se adapta a tu flujo -->