<!-- INICIO: Cards, divs y grids -->
<section id="cards-basicas" class="panel demo-card" data-component="cards-basicas">
  <div class="panel-heading"><h2>Cards, divs y grids</h2></div>
  <div class="grid gap-4 md:grid-cols-3">
    <div class="rounded-2xl bg-[var(--soft)] p-5">
      <p class="eyebrow">RESUMEN</p>
      <h3 class="text-2xl font-semibold">$12,400</h3>
      <p class="muted">Un div para una métrica rápida.</p>
    </div>
    <article class="rounded-2xl border border-[var(--line)] p-5">
      <span class="demo-badge">Activo</span>
      <h3 class="mt-4 text-lg font-semibold">Proyecto Aurora</h3>
      <p class="muted">Card de contenido con borde.</p>
    </article>
    <article class="demo-feature-card rounded-2xl p-5">
      <p class="eyebrow">TU PRÓXIMO PASO</p>
      <h3 class="text-lg font-semibold">Haz espacio para crecer.</h3>
      <a class="btn outline mt-4" href="presupuestos.html">Ver mis objetivos →</a>
    </article>
  </div>
</section>
<!-- FIN: Cards, divs y grids -->

<!-- INICIO: Botones y estados -->
<section id="botones-badges" class="panel demo-card" data-component="botones-badges">
  <div class="panel-heading"><h2>Botones y estados</h2></div>
  <div class="demo-row">
    <button class="btn lime" type="button" data-demo-action="Acción principal ejecutada">
      Acción principal</button
    ><button class="btn outline" type="button" data-demo-action="Acción secundaria ejecutada">
      Secundario</button
    ><button
      class="btn demo-danger"
      type="button"
      data-demo-action="Acción de ejemplo; no se eliminó nada"
    >
      Acción delicada</button
    ><button class="btn outline" type="button" disabled>No disponible</button>
  </div>
  <div class="demo-row mt-5">
    <span class="demo-badge">Activo</span><span class="demo-badge warning">Pendiente</span
    ><span class="demo-badge danger">Requiere revisión</span
    ><span class="demo-badge neutral">Borrador</span>
  </div>
</section>
<!-- FIN: Botones y estados -->

<!-- INICIO: Botones con Tailwind -->
<section id="botones-tailwind" class="panel demo-card" data-component="tailwind-buttons">
  <div class="panel-heading">
    <h2>Botones: formas, tamaños y variantes</h2>
    <span class="tag">Tailwind CSS</span>
  </div>
  <p class="demo-description">
    Estos ejemplos usan directamente las utilidades de Tailwind, sin la clase btn, para que puedas
    combinar sus formas y tamaños libremente. Los colores respetan el tema de la plantilla.
  </p>
  <div class="demo-grid two">
    <div>
      <p class="eyebrow">FORMA DEL BOTÓN</p>
      <div class="demo-row">
        <button
          type="button"
          class="inline-flex items-center justify-center gap-2 px-5 py-3 text-xs font-semibold transition hover:brightness-95 bg-[var(--accent)] text-[var(--accent-text)] rounded-none"
          data-demo-action="Cuadrado seleccionado"
        >
          Cuadrado</button
        ><button
          type="button"
          class="inline-flex items-center justify-center gap-2 px-5 py-3 text-xs font-semibold transition hover:brightness-95 bg-[var(--accent)] text-[var(--accent-text)] rounded-md"
          data-demo-action="Redondeado seleccionado"
        >
          Redondeado</button
        ><button
          type="button"
          class="inline-flex items-center justify-center gap-2 px-5 py-3 text-xs font-semibold transition hover:brightness-95 bg-[var(--accent)] text-[var(--accent-text)] rounded-xl"
          data-demo-action="Más redondeado seleccionado"
        >
          Más redondeado</button
        ><button
          type="button"
          class="inline-flex items-center justify-center gap-2 px-5 py-3 text-xs font-semibold transition hover:brightness-95 bg-[var(--accent)] text-[var(--accent-text)] rounded-full"
          data-demo-action="Tipo píldora seleccionado"
        >
          Tipo píldora
        </button>
      </div>
      <p class="muted mt-4">
        Usa rounded-none, rounded-md, rounded-xl o rounded-full para cambiar las esquinas.
      </p>
    </div>
    <div>
      <p class="eyebrow">TAMAÑOS</p>
      <div class="demo-row">
        <button
          type="button"
          class="rounded-full bg-[var(--accent)] text-[var(--accent-text)] px-3 py-2 text-xs font-semibold"
          data-demo-action="Botón pequeño"
        >
          Pequeño</button
        ><button
          type="button"
          class="rounded-full bg-[var(--accent)] text-[var(--accent-text)] px-5 py-3 text-xs font-semibold"
          data-demo-action="Botón mediano"
        >
          Mediano</button
        ><button
          type="button"
          class="rounded-full bg-[var(--accent)] text-[var(--accent-text)] px-7 py-4 text-sm font-semibold"
          data-demo-action="Botón grande"
        >
          Grande
        </button>
      </div>
      <p class="muted mt-4">
        Ajusta px-*, py-* y text-* para controlar el espacio y el tamaño del texto.
      </p>
    </div>
  </div>
  <div class="mt-5">
    <p class="eyebrow">VARIANTES</p>
    <div class="demo-row">
      <button
        type="button"
        class="inline-flex items-center justify-center gap-2 px-5 py-3 text-xs font-semibold transition hover:brightness-95 bg-[var(--accent)] text-[var(--accent-text)] rounded-full"
        data-demo-action="Acción principal"
      >
        Principal</button
      ><button
        type="button"
        class="rounded-full border border-[var(--line)] bg-[var(--surface)] text-[var(--ink)] px-5 py-3 text-xs font-semibold"
        data-demo-action="Acción secundaria"
      >
        Con borde</button
      ><button
        type="button"
        class="rounded-full bg-[var(--soft)] text-[var(--ink)] px-5 py-3 text-xs font-semibold"
        data-demo-action="Botón suave"
      >
        Suave</button
      ><button
        type="button"
        disabled=""
        class="rounded-full bg-[var(--accent)] text-[var(--accent-text)] px-5 py-3 text-xs font-semibold disabled:opacity-50 disabled:cursor-not-allowed"
      >
        Deshabilitado
      </button>
    </div>
  </div>
  <button
    type="button"
    class="mt-5 w-full rounded-full bg-[var(--accent)] text-[var(--accent-text)] px-5 py-3 text-xs font-semibold"
    data-demo-action="Botón de ancho completo"
  >
    Botón de ancho completo · w-full
  </button>
</section>
<!-- FIN: Botones con Tailwind -->

<!-- INICIO: Progreso y card de perfil -->
<section id="progreso-perfil" class="panel demo-card" data-component="progreso-perfil">
  <div class="panel-heading"><h2>Progreso y card de perfil</h2></div>
  <div class="demo-grid two">
    <div>
      <div class="demo-row">
        <span class="avatar">LC</span>
        <div>
          <h3>Lucía Campos</h3>
          <p class="muted">Diseño de producto</p>
        </div>
      </div>
      <p class="muted mt-4">Una card de persona, equipo o responsable.</p>
    </div>
    <div>
      <label class="demo-label" for="demo-progress">Perfil completado <span>72%</span></label
      ><progress id="demo-progress" class="demo-progress" value="72" max="100">72%</progress>
      <p class="muted mt-3">Usa progress para un indicador accesible.</p>
    </div>
  </div>
</section>
<!-- FIN: Progreso y card de perfil -->