<!-- INICIO: Formulario con validación -->
<section id="formulario-completo" class="panel demo-card" data-component="formulario-completo">
  <div class="panel-heading"><h2>Formulario con validación</h2></div>
  <form id="demo-profile-form" class="demo-form">
    <div class="demo-grid two">
      <label
        >Nombre completo<input
          class="demo-input"
          name="name"
          autocomplete="name"
          placeholder="Lucía Campos"
          required
          minlength="2"
          maxlength="80" /></label
      ><label
        >Correo electrónico<input
          class="demo-input"
          type="email"
          name="email"
          autocomplete="email"
          placeholder="lucia@ejemplo.com"
          required /></label
      ><label
        >Área<select class="demo-input" name="area" required>
          <option value="">Selecciona una opción</option>
          <option>Diseño</option>
          <option>Desarrollo</option>
          <option>Operaciones</option>
        </select></label
      ><label
        >Presupuesto mensual<input
          class="demo-input"
          type="number"
          name="budget"
          min="0"
          max="1000000"
          step="0.01"
          placeholder="5000.00"
          required
      /></label>
    </div>
    <label
      >Notas<textarea
        class="demo-input"
        name="notes"
        rows="3"
        maxlength="500"
        placeholder="Cuéntanos un poco más..."
      ></textarea>
    </label>
    <fieldset class="demo-fieldset">
      <legend>Tipo de cuenta</legend>
      <label class="choice"
        ><input type="radio" name="account" value="personal" checked /> Personal</label
      ><label class="choice"><input type="radio" name="account" value="equipo" /> Equipo</label>
    </fieldset>
    <label class="choice"
      ><input type="checkbox" name="terms" required /> Acepto guardar estos datos solo como
      demostración.</label
    >
    <div class="demo-row">
      <button class="btn lime" type="submit">Guardar ejemplo</button
      ><button class="btn outline" type="reset">Limpiar</button>
    </div>
    <output id="form-result" class="demo-alert success" aria-live="polite" hidden></output>
  </form>
</section>
<!-- FIN: Formulario con validación -->

<!-- INICIO: Controles de entrada -->
<section id="controles-input" class="panel demo-card" data-component="controles-input">
  <div class="panel-heading"><h2>Controles de entrada</h2></div>
  <div class="demo-grid two">
    <label class="demo-label-block"
      >Contraseña de ejemplo
      <div class="password-control">
        <input
          id="demo-password"
          class="demo-input"
          type="password"
          autocomplete="new-password"
          placeholder="Escribe una contraseña"
        /><button
          class="btn outline"
          id="password-toggle"
          type="button"
          aria-controls="demo-password"
          aria-pressed="false"
        >
          Mostrar
        </button>
      </div></label
    ><label class="demo-label-block"
      >Límite de alertas <output id="range-value">50%</output
      ><input id="demo-range" type="range" min="0" max="100" value="50" /></label
    ><label class="choice"
      ><input id="demo-switch" type="checkbox" role="switch" checked /> Recibir
      notificaciones</label
    ><label class="demo-label-block"
      >Campo deshabilitado<input class="demo-input" value="Solo disponible en otro estado" disabled
    /></label>
  </div>
</section>
<!-- FIN: Controles de entrada -->