<!-- INICIO: Búsqueda inteligente con Fuse.js -->
<section id="busqueda-fuse" class="panel demo-card" data-component="fuzzy-search">
  <div class="panel-heading">
    <h2>Un buscador que entiende los pequeños errores.</h2>
    <span class="tag">Fuse.js</span>
  </div>
  <p class="demo-description">
    Busca por nombre o descripción y combina la búsqueda con una categoría. Prueba “reportse” o
    “segurdiad”. Los datos están en estas cards HTML y la búsqueda se ejecuta en tu navegador.
  </p>
  <form id="fuzzy-search-form" class="demo-form">
    <div class="demo-grid two">
      <label
        >Buscar registros<input
          id="fuzzy-query"
          class="demo-input"
          type="search"
          placeholder="Por ejemplo: reportse"
          autocomplete="off" /></label
      ><label
        >Categoría<select id="fuzzy-category" class="demo-input">
          <option value="all">Todas las categorías</option>
          <option value="Finanzas">Finanzas</option>
          <option value="Equipo">Equipo</option>
          <option value="Sistema">Sistema</option>
        </select></label
      >
    </div>
    <div class="demo-row demo-toolbar">
      <output id="fuzzy-count" class="muted" role="status" aria-live="polite">6 resultados</output
      ><button class="btn outline" type="button" data-search-reset="">Limpiar filtros</button>
    </div>
  </form>
  <div id="fuzzy-results" class="demo-catalog">
    <article class="panel catalog-card" id="record-reportes" data-search-record="">
      <span class="demo-badge neutral" data-record-category="">Finanzas</span>
      <h3 class="mt-4" data-record-title="">Reportes financieros</h3>
      <p data-record-description="">Revisa ingresos, gastos y tendencias de tus finanzas.</p>
      <a class="catalog-link" href="reportes.html">Ver pantalla →</a>
    </article>
    <article class="panel catalog-card" id="record-movimientos" data-search-record="">
      <span class="demo-badge neutral" data-record-category="">Finanzas</span>
      <h3 class="mt-4" data-record-title="">Movimientos de la cuenta</h3>
      <p data-record-description="">Consulta pagos, transferencias y transacciones recientes.</p>
      <a class="catalog-link" href="movimientos.html">Ver pantalla →</a>
    </article>
    <article class="panel catalog-card" id="record-equipo" data-search-record="">
      <span class="demo-badge neutral" data-record-category="">Equipo</span>
      <h3 class="mt-4" data-record-title="">Miembros del equipo</h3>
      <p data-record-description="">Organiza personas, responsables y colaboradores.</p>
      <a class="catalog-link" href="ui-tablas.html">Ver pantalla →</a>
    </article>
    <article class="panel catalog-card" id="record-calendario" data-search-record="">
      <span class="demo-badge neutral" data-record-category="">Equipo</span>
      <h3 class="mt-4" data-record-title="">Calendario compartido</h3>
      <p data-record-description="">Encuentra reuniones, entregas y eventos del proyecto.</p>
      <a class="catalog-link" href="ui-calendario.html">Ver pantalla →</a>
    </article>
    <article class="panel catalog-card" id="record-seguridad" data-search-record="">
      <span class="demo-badge neutral" data-record-category="">Sistema</span>
      <h3 class="mt-4" data-record-title="">Configuración de seguridad</h3>
      <p data-record-description="">Consulta las opciones de perfil y seguridad de la cuenta.</p>
      <a class="catalog-link" href="ayuda.html">Ver pantalla →</a>
    </article>
    <article class="panel catalog-card" id="record-apariencia" data-search-record="">
      <span class="demo-badge neutral" data-record-category="">Sistema</span>
      <h3 class="mt-4" data-record-title="">Preferencias de apariencia</h3>
      <p data-record-description="">Personaliza el modo oscuro, los colores y los fondos.</p>
      <a class="catalog-link" href="dashboard.html">Ver pantalla →</a>
    </article>
  </div>
  <div id="fuzzy-empty" class="empty" hidden="">
    <h3>No encontramos coincidencias.</h3>
    <p class="muted mt-3">Prueba otro término o cambia la categoría.</p>
    <button class="btn lime mt-4" type="button" data-search-reset="">
      Ver todos los registros
    </button>
  </div>
</section>
<!-- FIN: Búsqueda inteligente con Fuse.js -->