<!-- Modal de Vacantes -->
<div class="modal fade" id="modalVacantes" tabindex="-1" aria-labelledby="modalVacantesLabel" aria-hidden="true">
  <div class="modal-dialog modal-xl">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modalVacantesLabel">Seleccionar Vacante Disponible</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
      </div>
      <div class="modal-body">
        <!-- Filtro de zona y contadores -->
        <div class="row mb-3">
          <div class="col-md-6">
            <label for="selectZona" class="form-label">Selecciona una zona:</label>
            <select id="selectZona" class="form-select mb-2">
              <option value="">-- Mostrar todas --</option>
            </select>
            <input type="text" id="inputBusquedaPDV" class="form-control" placeholder="Buscar por nombre de PDV...">
          </div>
        <div class="col-md-6 d-flex align-items-end justify-content-end">
          <div class="w-100">
            <div class="row">
              <div class="col-6">
                <p class="mb-1 fw-bold">Total vacantes: <span id="contadorTotal">0</span></p>
                <p class="mb-0">Tiempo completo: <span id="totalCompleto">0</span></p>
                <p class="mb-0">Tiempo parcial: <span id="totalParcial">0</span></p>
              </div>
              <div class="col-6">
                <p class="mb-1 fw-bold">En zona: <span id="contadorZona">0</span></p>
                <p class="mb-0">Tiempo completo: <span id="zonaCompleto">0</span></p>
                <p class="mb-0">Tiempo parcial: <span id="zonaParcial">0</span></p>
              </div>
            </div>
          </div>
        </div>
       </div>

        <!-- Tabla de vacantes -->
        <div class="table-responsive">
          <table class="table table-bordered table-striped align-middle">
            <thead class="table-light">
              <tr>
                <th>PDV</th>
                <th>Puesto</th>
                <th>Tipo</th>
                <th>Modalidad</th>
                <th>Acción</th>
              </tr>
            </thead>
            <tbody id="tablaVacantesBody">
              <tr>
                <td colspan="4" class="text-center">Cargando vacantes...</td>
              </tr>
            </tbody>
          </table>
        </div>

      </div>
    </div>
  </div>
</div>
