<!-- ===== DOCUMENTACIÓN ===== -->
<div class="page" id="page-docs">

  <div class="ph">
    <div>
      <div class="pt">📚 Documentación</div>
      <div class="ps">Guías de uso de cada módulo — generadas por SuperCerebro</div>
    </div>
  </div>

  <!-- Barra de búsqueda + contador -->
  <div style="display:flex;align-items:center;gap:12px;flex-wrap:wrap">
    <input
      type="text"
      id="docs-search"
      placeholder="Buscar módulo..."
      data-input="filterDocs|__val"
      style="flex:1;min-width:200px;max-width:380px;background:var(--bg2);border:1px solid var(--br2);border-radius:8px;padding:10px 14px;font-size:13px;color:var(--t);font-family:var(--fb);outline:none;transition:border-color .15s"
      data-focus="_scBorderColor|__el|var(--red)"
      data-blur="_scBorderColor|__el|var(--br2)"
    >
    <span style="font-size:12px;color:var(--m)">14 módulos documentados</span>
  </div>

  <!-- Grid de tarjetas — llenado por renderDocsHub() en docs-content.js -->
  <div id="docs-grid" style="display:grid;grid-template-columns:repeat(auto-fill,minmax(185px,1fr));gap:12px"></div>

  <!-- Estado vacío (por si el JS no carga) -->
  <div id="docs-empty" style="display:none;text-align:center;padding:60px 20px;color:var(--m)">
    <div style="font-size:40px;margin-bottom:12px">📭</div>
    <div style="font-size:14px">No se encontraron módulos con ese término.</div>
  </div>

</div>
