<!-- INICIO: Wizard de formulario -->
<section id="wizard-formulario" class="panel demo-card" data-component="form-wizard">
  <div class="panel-heading">
    <h2>Tu próximo proyecto empieza aquí.</h2>
    <span class="tag">Wizard de 3 pasos</span>
  </div>
  <p class="demo-description">
    Completa los datos, revisa el resumen y confirma. La validación se hace por paso y no se envía
    información a ningún servidor.
  </p>
  <div class="wizard-shell">
    <ol class="wizard-stepper" aria-label="Pasos del formulario">
      <li>
        <button type="button" data-wizard-goto="0" aria-current="step">
          <span class="wizard-number">1</span
          ><span>Tu información<small>Empecemos por ti</small></span>
        </button>
      </li>
      <li>
        <button type="button" data-wizard-goto="1" disabled="">
          <span class="wizard-number">2</span
          ><span>El proyecto<small>Dale forma a tu idea</small></span>
        </button>
      </li>
      <li>
        <button type="button" data-wizard-goto="2" disabled="">
          <span class="wizard-number">3</span
          ><span>Confirmación<small>Un último vistazo</small></span>
        </button>
      </li>
    </ol>
    <label class="sr-only" for="wizard-progress">Progreso del formulario</label
    ><progress id="wizard-progress" class="demo-progress" max="3" value="1">1 de 3</progress>
    <p id="wizard-step-status" class="muted wizard-step-status" aria-live="polite">
      Paso 1 de 3 · Tu información
    </p>
    <form id="project-wizard" class="demo-form" novalidate="">
      <fieldset class="wizard-step" data-wizard-step="0">
        <legend>Cuéntanos un poco sobre ti.</legend>
        <p class="muted">Usaremos estos datos únicamente para el resumen de ejemplo.</p>
        <div class="demo-grid two">
          <label
            >Nombre completo<input
              class="demo-input"
              name="name"
              autocomplete="name"
              required=""
              minlength="2"
              maxlength="80"
              placeholder="Lucía Campos" /></label
          ><label
            >Correo electrónico<input
              class="demo-input"
              name="email"
              type="email"
              autocomplete="email"
              required=""
              placeholder="lucia@ejemplo.com"
          /></label>
        </div>
      </fieldset>
      <fieldset class="wizard-step" data-wizard-step="1" hidden="">
        <legend>Una idea, muchas posibilidades.</legend>
        <p class="muted">Define lo esencial de tu nuevo proyecto.</p>
        <label
          >Nombre del proyecto<input
            class="demo-input"
            name="project"
            required=""
            minlength="3"
            maxlength="80"
            placeholder="Mi próximo dashboard"
        /></label>
        <div class="demo-grid two">
          <label
            >Tipo de proyecto<select class="demo-input" name="type" required="">
              <option value="">Selecciona una opción</option>
              <option>Dashboard administrativo</option>
              <option>Aplicación web</option>
              <option>Sitio corporativo</option>
            </select></label
          ><label
            >Presupuesto estimado ($)<input
              class="demo-input"
              name="budget"
              type="number"
              min="100"
              max="10000000"
              step="0.01"
              required=""
              placeholder="5000"
          /></label>
        </div>
        <label
          >Notas opcionales<textarea
            class="demo-input"
            name="notes"
            rows="3"
            maxlength="400"
            placeholder="¿Qué te gustaría conseguir?"
          ></textarea>
        </label>
      </fieldset>
      <fieldset class="wizard-step" data-wizard-step="2" hidden="">
        <legend>Todo listo para dar el siguiente paso.</legend>
        <p class="muted">Puedes volver a cualquier paso para corregir los datos.</p>
        <dl class="wizard-review">
          <div>
            <dt>Nombre</dt>
            <dd data-review="name">—</dd>
          </div>
          <div>
            <dt>Correo</dt>
            <dd data-review="email">—</dd>
          </div>
          <div>
            <dt>Proyecto</dt>
            <dd data-review="project">—</dd>
          </div>
          <div>
            <dt>Tipo</dt>
            <dd data-review="type">—</dd>
          </div>
          <div>
            <dt>Presupuesto</dt>
            <dd data-review="budget">—</dd>
          </div>
          <div>
            <dt>Notas</dt>
            <dd data-review="notes">—</dd>
          </div>
        </dl>
        <label class="choice"
          ><input type="checkbox" name="confirmed" required="" /> Revisé los datos y confirmo este
          ejemplo.</label
        >
      </fieldset>
      <div class="wizard-actions">
        <button id="wizard-prev" class="btn outline" type="button" disabled="">Anterior</button>
        <div>
          <button id="wizard-next" class="btn lime" type="button">Continuar →</button
          ><button id="wizard-submit" class="btn lime" type="submit" hidden="">
            Confirmar proyecto
          </button>
        </div>
      </div>
    </form>
    <section id="wizard-success" class="wizard-success" role="status" hidden="">
      <span class="wizard-success-icon" aria-hidden="true">✓</span>
      <h3>¡Tu ejemplo está completo!</h3>
      <p id="wizard-success-message" class="muted"></p>
      <button id="wizard-restart" class="btn lime" type="button">Empezar de nuevo</button>
    </section>
    <noscript
      ><p class="demo-alert warning">
        Activa JavaScript para avanzar entre los pasos de este ejemplo.
      </p></noscript
    >
  </div>
</section>
<!-- FIN: Wizard de formulario -->