<!-- INICIO: Encuentra la opción correcta -->
<section id="select-busqueda" class="panel demo-card" data-component="select-busqueda">
  <div class="panel-heading"><h2>Encuentra la opción correcta</h2></div>
  <div class="demo-grid two">
    <label class="demo-label-block"
      >Responsable<select id="select-person">
        <option value="">Selecciona una persona</option>
        <option value="lucia">Lucía Campos · Diseño</option>
        <option value="diego">Diego Ruiz · Desarrollo</option>
        <option value="elena">Elena Cruz · Operaciones</option>
        <option value="sofia">Sofía Reyes · Producto</option>
        <option value="mateo">Mateo León · Marketing</option>
        <option value="valeria">Valeria Mora · Finanzas</option>
      </select></label
    >
    <div class="demo-summary">
      <span>Responsable seleccionado</span
      ><output id="person-result" aria-live="polite">Sin asignar</output>
    </div>
  </div>
</section>
<!-- FIN: Encuentra la opción correcta -->

<!-- INICIO: Varios equipos, una selección -->
<section id="select-multiple" class="panel demo-card" data-component="select-multiple">
  <div class="panel-heading"><h2>Varios equipos, una selección</h2></div>
  <label class="demo-label-block"
    >Equipos participantes<select id="select-teams" multiple>
      <option value="diseno" selected>Diseño</option>
      <option value="desarrollo">Desarrollo</option>
      <option value="producto" selected>Producto</option>
      <option value="operaciones">Operaciones</option>
      <option value="marketing">Marketing</option>
      <option value="finanzas">Finanzas</option>
    </select></label
  ><output id="teams-result" class="demo-inline-output" aria-live="polite"
    >2 equipos seleccionados.</output
  >
</section>
<!-- FIN: Varios equipos, una selección -->

<!-- INICIO: Select múltiple con búsqueda -->
<section
  id="select-multiple-advanced"
  class="panel demo-card"
  data-component="select-multiple-advanced"
>
  <div class="panel-heading">
    <h2>Select múltiple con búsqueda</h2>
    <span class="tag">Choices.js</span>
  </div>
  <p class="demo-description">
    Busca áreas y selecciónalas como etiquetas. Puedes quitar cada etiqueta, seleccionar todas o
    limpiar la selección, sin usar Ctrl o Cmd.
  </p>
  <label class="demo-label-block" for="areas-multiple">Áreas del proyecto</label
  ><select
    id="areas-multiple"
    class="demo-input"
    name="areas[]"
    multiple=""
    aria-describedby="areas-multiple-result"
  >
    <option value="diseno" selected="">Diseño</option>
    <option value="desarrollo">Desarrollo</option>
    <option value="producto" selected="">Producto</option>
    <option value="operaciones">Operaciones</option>
    <option value="marketing">Marketing</option>
    <option value="finanzas">Finanzas</option>
  </select>
  <div class="demo-row mt-4">
    <button id="multiple-select-all" class="btn lime" type="button">Seleccionar todas</button
    ><button id="multiple-clear" class="btn outline" type="button">Limpiar selección</button>
  </div>
  <output id="areas-multiple-result" class="demo-inline-output" aria-live="polite"
    >2 seleccionadas: Diseño, Producto</output
  >
</section>
<!-- FIN: Select múltiple con búsqueda -->

<!-- INICIO: Etiquetas para ordenar tus ideas -->
<section id="etiquetas-editables" class="panel demo-card" data-component="etiquetas-editables">
  <div class="panel-heading"><h2>Etiquetas para ordenar tus ideas</h2></div>
  <label class="demo-label-block"
    >Etiquetas del proyecto<input
      id="project-tags"
      type="text"
      value="Dashboard,Diseño"
      placeholder="Añade una etiqueta" /></label
  ><output id="tags-result" class="demo-inline-output" aria-live="polite">2 etiquetas.</output>
  <p class="muted mt-4">
    Pulsa Enter para añadir. Máximo 5 etiquetas de 24 caracteres: letras, números, espacios, guiones
    y guion bajo.
  </p>
</section>
<!-- FIN: Etiquetas para ordenar tus ideas -->