<!-- INICIO: Arrastrar y previsualizar archivos -->
<section id="dropzone-upload" class="panel demo-card" data-component="dropzone-upload">
  <div class="panel-heading"><h2>Arrastrar y previsualizar archivos</h2></div>
  <div class="demo-alert">
    <strong>Previsualización local.</strong> No se envían archivos a ningún servidor.
  </div>
  <div id="demo-dropzone" class="dropzone demo-dropzone">
    <div class="dz-message">
      <span class="upload-symbol" aria-hidden="true">↑</span>
      <h3>Arrastra tus archivos aquí.</h3>
      <p>Imágenes, PDF, CSV o TXT · hasta 5 MB por archivo · máximo 5 archivos.</p>
      <label class="btn lime upload-picker" for="upload-files"
        >Elegir archivos<input
          id="upload-files"
          type="file"
          multiple
          accept="image/*,.pdf,.csv,.txt"
      /></label>
    </div>
  </div>
  <div class="demo-row demo-toolbar">
    <output id="upload-status" class="muted" aria-live="polite"
      >No hay archivos seleccionados.</output
    ><button class="btn outline" type="button" id="clear-files">Limpiar archivos</button>
  </div>
  <template id="dropzone-preview-template"
    ><div class="dz-preview dz-file-preview">
      <div class="dz-image"><img data-dz-thumbnail alt="Vista previa del archivo" /></div>
      <div class="dz-details">
        <div class="dz-size" data-dz-size></div>
        <div class="dz-filename"><span data-dz-name></span></div>
      </div>
      <div class="dz-error-message" role="alert"><span data-dz-errormessage></span></div>
      <button class="btn outline" type="button" data-dz-remove>Quitar archivo</button>
    </div></template
  >
</section>
<!-- FIN: Arrastrar y previsualizar archivos -->